Bug 1045769 - Adjust new tab whitespace: whitespace sizing, positioning of undo box [r=adw a=sylvestre]
authorEd Lee <edilee@mozilla.com>
Thu, 14 Aug 2014 17:03:46 -0700
changeset 217673 0b918191c65ab4656397cf498adca06fecd1c717
parent 217672 cd0f797c10cae0bc6504b3df158c855c65473f0d
child 217674 8c2e55daa3688850325353ae64fd2579c6612b93
push id515
push userraliiev@mozilla.com
push dateMon, 06 Oct 2014 12:51:51 +0000
treeherdermozilla-release@267c7a481bef [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersadw, sylvestre
bugs1045769
milestone33.0a2
Bug 1045769 - Adjust new tab whitespace: whitespace sizing, positioning of undo box [r=adw a=sylvestre] Move undo box to the top left above the seach box which now contains its appropriate padding.
browser/base/content/newtab/grid.js
browser/base/content/newtab/newTab.css
browser/base/content/test/newtab/head.js
--- a/browser/base/content/newtab/grid.js
+++ b/browser/base/content/newtab/grid.js
@@ -2,17 +2,17 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 #endif
 
 /**
  * Define various fixed dimensions
  */
-const GRID_BOTTOM_EXTRA = 4; // title's line-height extends 4px past the margin
+const GRID_BOTTOM_EXTRA = 7; // title's line-height extends 7px past the margin
 const GRID_WIDTH_EXTRA = 1; // provide 1px buffer to allow for rounding error
 
 /**
  * This singleton represents the grid that contains all sites.
  */
 let gGrid = {
   /**
    * The DOM node of the grid.
@@ -198,17 +198,16 @@ let gGrid = {
     if (this._cellMargin === undefined) {
       let refCell = document.querySelector(".newtab-cell");
       this._cellMargin = parseFloat(getComputedStyle(refCell).marginTop) * 2;
       this._cellHeight = refCell.offsetHeight + this._cellMargin;
       this._cellWidth = refCell.offsetWidth + this._cellMargin;
     }
 
     let availSpace = document.documentElement.clientHeight - this._cellMargin -
-                     document.querySelector("#newtab-margin-undo-container").offsetHeight -
                      document.querySelector("#newtab-search-container").offsetHeight;
     let visibleRows = Math.floor(availSpace / this._cellHeight);
     this._node.style.height = this._computeHeight() + "px";
     this._node.style.maxHeight = this._computeHeight(visibleRows) + "px";
     this._node.style.maxWidth = gGridPrefs.gridColumns * this._cellWidth +
                                 GRID_WIDTH_EXTRA + "px";
   },
 
--- a/browser/base/content/newtab/newTab.css
+++ b/browser/base/content/newtab/newTab.css
@@ -23,17 +23,16 @@ input[type=button] {
 #newtab-scrollbox:not([page-disabled]) {
   overflow: auto;
 }
 
 /* UNDO */
 #newtab-undo-container {
   transition: opacity 100ms ease-out;
   display: -moz-box;
-  margin-bottom: 26px; /* 32 - 6 search form top "padding" */
   -moz-box-align: center;
   -moz-box-pack: center;
 }
 
 #newtab-undo-container[undo-disabled] {
   opacity: 0;
   pointer-events: none;
 }
@@ -55,17 +54,25 @@ input[type=button] {
   display: -moz-box;
   position: relative;
   -moz-box-flex: 1;
   -moz-box-orient: vertical;
 }
 
 #newtab-margin-undo-container {
   display: -moz-box;
-  -moz-box-pack: center;
+  left: 6px;
+  position: absolute;
+  top: 6px;
+  z-index: 1;
+}
+
+#newtab-margin-undo-container:-moz-locale-dir(rtl) {
+  left: auto;
+  right: 6px;
 }
 
 #newtab-horizontal-margin {
   display: -moz-box;
   -moz-box-flex: 1;
 }
 
 #newtab-margin-top,
@@ -104,17 +111,17 @@ input[type=button] {
 #newtab-grid[page-disabled] {
   pointer-events: none;
 }
 
 /* CELLS */
 .newtab-cell {
   display: -moz-box;
   height: 180px;
-  margin: 16px 10px;
+  margin: 20px 10px;
   width: 290px;
 }
 
 /* SITES */
 .newtab-site {
   position: relative;
   -moz-box-flex: 1;
   transition: 100ms ease-out;
@@ -138,17 +145,17 @@ input[type=button] {
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
 }
 
 /* TITLES */
 .newtab-title {
-  bottom: -21px;
+  bottom: -26px;
   font-size: 13px;
   left: 0;
   overflow: hidden;
   padding-top: 14px;
   position: absolute;
   right: 0;
   text-align: center;
   text-overflow: ellipsis;
@@ -244,17 +251,17 @@ input[type=button] {
 }
 
 #newtab-search-form {
   display: -moz-box;
   -moz-box-flex: 1;
   -moz-box-orient: horizontal;
   -moz-box-align: center;
   height: 44px; /* 32 + 6 logo top "padding" + 6 logo bottom "padding" */
-  margin: 0 20px 10px; /* bottom: 32 - 16 tiles top margin - 6 logo bottom "padding" */
+  margin: 26px 20px 10px; /* top: 32 - 6 search form top "padding", bottom: 32 - 16 tiles top margin - 6 logo bottom "padding" */
   max-width: 600px; /* 2 * (290 cell width + 10 cell margin) */
 }
 
 #newtab-search-logo {
   display: -moz-box;
   width: 77px; /* 65 image width + 6 left "padding" + 6 right "padding" */
   height: 38px; /* 26 image height + 6 top "padding" + 6 bottom "padding" */
   border: 1px solid transparent;
--- a/browser/base/content/test/newtab/head.js
+++ b/browser/base/content/test/newtab/head.js
@@ -492,16 +492,18 @@ function createExternalDropIframe() {
               "<a id='link' href='http://example.com/%2399'>link</a>";
 
   let deferred = Promise.defer();
   let doc = getContentDocument();
   let iframe = doc.createElement("iframe");
   iframe.setAttribute("src", url);
   iframe.style.width = "50px";
   iframe.style.height = "50px";
+  iframe.style.position = "absolute";
+  iframe.style.zIndex = 50;
 
   let margin = doc.getElementById("newtab-margin-top");
   margin.appendChild(iframe);
 
   iframe.addEventListener("load", function onLoad() {
     iframe.removeEventListener("load", onLoad);
     executeSoon(() => deferred.resolve(iframe));
   });