summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorwolfbeast <mcwerewolf@gmail.com>2018-06-28 15:47:44 +0200
committerwolfbeast <mcwerewolf@gmail.com>2018-06-28 15:47:44 +0200
commitd441fb58b9042f8fcd4b6eaf9ffc0d00b1f4660b (patch)
tree3f298f65fb3bfd365212d3a3912067ec7538aa5b
parentc49f527e9d759505e52744c1ae7c1ddfe19fdf74 (diff)
downloadUXP-d441fb58b9042f8fcd4b6eaf9ffc0d00b1f4660b.tar
UXP-d441fb58b9042f8fcd4b6eaf9ffc0d00b1f4660b.tar.gz
UXP-d441fb58b9042f8fcd4b6eaf9ffc0d00b1f4660b.tar.lz
UXP-d441fb58b9042f8fcd4b6eaf9ffc0d00b1f4660b.tar.xz
UXP-d441fb58b9042f8fcd4b6eaf9ffc0d00b1f4660b.zip
Issue #562 Part 1: Transfix the grid
-rw-r--r--application/palemoon/base/content/newtab/grid.js36
-rw-r--r--application/palemoon/base/content/newtab/newTab.css42
2 files changed, 47 insertions, 31 deletions
diff --git a/application/palemoon/base/content/newtab/grid.js b/application/palemoon/base/content/newtab/grid.js
index be5a57c4b..4edcbe52c 100644
--- a/application/palemoon/base/content/newtab/grid.js
+++ b/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";
}
};
diff --git a/application/palemoon/base/content/newtab/newTab.css b/application/palemoon/base/content/newtab/newTab.css
index a5431cf65..117150b30 100644
--- a/application/palemoon/base/content/newtab/newTab.css
+++ b/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] {