Issue #562 Part 1: Transfix the grid

application/palemoon/base/content/newtab/grid.js

@@ -124,17 +124,27 @@ var gGrid = {
    * Renders the grid, including cells and sites.
    */
   _refreshGrid() {
+    let row = document.createElementNS(HTML_NAMESPACE, "div");
+    row.classList.add("newtab-row");
     let cell = document.createElementNS(HTML_NAMESPACE, "div");
     cell.classList.add("newtab-cell");
 
-    // Creates all the cells up to the maximum
-    let fragment = document.createDocumentFragment();
-    for (let i = 0; i < gGridPrefs.gridColumns * gGridPrefs.gridRows; i++) {
-      fragment.appendChild(cell.cloneNode(true));
+    // Clear the grid
+    this._node.innerHTML = "";
+
+    // Creates the structure of one row
+    for (let i = 0; i < gGridPrefs.gridColumns; i++) {
+      row.appendChild(cell.cloneNode(true));
     }
 
-    // Create cells.
-    let cells = Array.from(fragment.childNodes, (cell) => new Cell(this, cell));
+    // Creates the grid
+    for (let j = 0; j < gGridPrefs.gridRows; j++) {
+      this._node.appendChild(row.cloneNode(true));
+    }      
+
+    // Create cell array.
+    let cellElements = this.node.querySelectorAll(".newtab-cell");
+    let cells = Array.from(cellElements, (cell) => new Cell(this, cell));
 
     // Fetch links.
     let links = gLinks.getLinks();
@@ -152,10 +162,6 @@ var gGrid = {
     }
 
     this._cells = cells;
-    while (this._gridDefaultContent.nextSibling) {
-      this._gridDefaultContent.nextSibling.remove();
-    }
-    this._node.appendChild(fragment);
   },
 
   /**
@@ -263,10 +269,10 @@ var gGrid = {
     // what being computed above. This, in turn, may cause scrollbar shown
     // for directory tiles, and introduce jitter when grid width is aligned
     // exactly on the column boundary
-    this._node.style.width = gridColumns * this._cellWidth + "px";
-    this._node.style.maxWidth = gGridPrefs.gridColumns * this._cellWidth +
-                                GRID_WIDTH_EXTRA + "px";
-    this._node.style.height = this._computeHeight() + "px";
-    this._node.style.maxHeight = this._computeHeight(gridRows) + "px";
+    //this._node.style.width = gridColumns * this._cellWidth + "px";
+    //this._node.style.maxWidth = gGridPrefs.gridColumns * this._cellWidth +
+    //                            GRID_WIDTH_EXTRA + "px";
+    //this._node.style.height = this._computeHeight() + "px";
+    //this._node.style.maxHeight = this._computeHeight(gridRows) + "px";
   }
 };

application/palemoon/base/content/newtab/newTab.css

@@ -69,32 +69,37 @@ input[type=button] {
 
 #newtab-horizontal-margin {
   display: -moz-box;
-  -moz-box-flex: 1;
-}
-
-#newtab-margin-top,
-#newtab-margin-bottom {
-  display: -moz-box;
-  position: relative;
+  -moz-box-flex: 5;
 }
 
 #newtab-margin-top {
+  min-height: 10px;
+  max-height: 30px;
+  display: -moz-box;
   -moz-box-flex: 1;
+  -moz-box-align: center;
+  -moz-box-pack: center;
 }
 
 #newtab-margin-bottom {
-  -moz-box-flex: 2;
+  min-height: 40px;
+  max-height: 80px;
+  -moz-box-flex: 1;
 }
 
 .newtab-side-margin {
-  min-width: 10px;
+  min-width: 40px;
+  max-width: 300px;
   -moz-box-flex: 1;
 }
 
 /* GRID */
 #newtab-grid {
+  display: -moz-box;
   -moz-box-flex: 5;
-  overflow: hidden;
+  -moz-box-orient: vertical;
+  min-width: 600px;
+  min-height: 400px;
   transition: 300ms ease-out;
   transition-property: opacity;
 }
@@ -108,18 +113,23 @@ input[type=button] {
   pointer-events: none;
 }
 
+/* ROWS */
+.newtab-row {
+  display: -moz-box;
+  -moz-box-orient: horizontal;
+  -moz-box-direction: normal;
+  -moz-box-flex: 1;
+}
+
 /*
- * If you change the sizes here, make sure you
- * change the preferences:
+ * Thumbnail image sizes are determined in the preferences:
  * toolkit.pageThumbs.minWidth
  * toolkit.pageThumbs.minHeight
  */
 /* CELLS */
 .newtab-cell {
   display: -moz-box;
-  height: 180px;
-  margin: 15px 10px 30px;
-  width: 250px;
+  -moz-box-flex: 1;
 }
 
 /* SITES */
@@ -211,7 +221,7 @@ input[type=button] {
   display: -moz-box;
   position: relative;
   -moz-box-pack: center;
-  margin: 40px 0 15px;
+  margin: 10px 0 15px;
 }
 
 #searchContainer[page-disabled] {