diff options
Diffstat (limited to 'application/palemoon/base/content')
| -rw-r--r-- | application/palemoon/base/content/newtab/grid.js | 147 | ||||
| -rw-r--r-- | application/palemoon/base/content/newtab/newTab.css | 58 | ||||
| -rw-r--r-- | application/palemoon/base/content/newtab/newTab.xhtml | 1 | ||||
| -rw-r--r-- | application/palemoon/base/content/newtab/page.js | 9 | ||||
| -rw-r--r-- | application/palemoon/base/content/palemoon.xhtml | 66 | ||||
| -rw-r--r-- | application/palemoon/base/content/sanitize.js | 2 | ||||
| -rw-r--r-- | application/palemoon/base/content/utilityOverlay.js | 4 |
7 files changed, 148 insertions, 139 deletions
diff --git a/application/palemoon/base/content/newtab/grid.js b/application/palemoon/base/content/newtab/grid.js index be5a57c4b..db3d319c3 100644 --- a/application/palemoon/base/content/newtab/grid.js +++ b/application/palemoon/base/content/newtab/grid.js @@ -5,12 +5,6 @@ #endif /** - * Define various fixed dimensions - */ -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. */ var gGrid = { @@ -35,7 +29,14 @@ var gGrid = { /** * All sites contained in the grid's cells. Sites may be empty. */ - get sites() { return [for (cell of this.cells) cell.site]; }, + get sites() { + // return [for (cell of this.cells) cell.site]; + let aSites = []; + for (let cell of this.cells) { + aSites.push(cell.site); + } + return aSites; + }, // Tells whether the grid has already been initialized. get ready() { return !!this._ready; }, @@ -55,20 +56,7 @@ var gGrid = { gLinks.populateCache(() => { this._refreshGrid(); this._ready = true; - - // If fetching links took longer than loading the page itself then - // we need to resize the grid as that was blocked until now. - // We also want to resize now if the page was already loaded when - // initializing the grid (the user toggled the page). - this._resizeGrid(); - - addEventListener("resize", this); }); - - // Resize the grid as soon as the page loads. - if (!this.isDocumentLoaded) { - addEventListener("load", this); - } }, /** @@ -87,12 +75,7 @@ var gGrid = { * Handles all grid events. */ handleEvent: function Grid_handleEvent(aEvent) { - switch (aEvent.type) { - case "load": - case "resize": - this._resizeGrid(); - break; - } + // Any specific events should go here. }, /** @@ -110,31 +93,37 @@ var gGrid = { }, /** - * Renders and resizes the gird. _resizeGrid() call is needed to ensure - * that scrollbar disappears when the bottom row becomes empty following - * the block action, or tile display is turmed off via cog menu + * Renders the grid. */ - refresh() { this._refreshGrid(); - this._resizeGrid(); }, /** * 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,20 +141,6 @@ var gGrid = { } this._cells = cells; - while (this._gridDefaultContent.nextSibling) { - this._gridDefaultContent.nextSibling.remove(); - } - this._node.appendChild(fragment); - }, - - /** - * Calculate the height for a number of rows up to the maximum rows - * @param rows Number of rows defaulting to the max - */ - _computeHeight: function Grid_computeHeight(aRows) { - let {gridRows} = gGridPrefs; - aRows = aRows === undefined ? gridRows : Math.min(gridRows, aRows); - return aRows * this._cellHeight + GRID_BOTTOM_EXTRA; }, /** @@ -199,74 +174,6 @@ var gGrid = { _isHistoricalTile: function Grid_isHistoricalTile(aPos) { let site = this.sites[aPos]; return site && (site.isPinned() || site.link && site.link.type == "history"); - }, - - /** - * Make sure the correct number of rows and columns are visible - */ - _resizeGrid: function Grid_resizeGrid() { - // If we're somehow called before the page has finished loading, - // let's bail out to avoid caching zero heights and widths. - // We'll be called again when DOMContentLoaded fires. - // Same goes for the grid if that's not ready yet. - if (!this.isDocumentLoaded || !this._ready) { - return; - } - - // Save the cell's computed height/width including margin and border - if (this._cellHeight === undefined) { - let refCell = document.querySelector(".newtab-cell"); - let style = getComputedStyle(refCell); - this._cellHeight = refCell.offsetHeight + - parseFloat(style.marginTop) + parseFloat(style.marginBottom); - this._cellWidth = refCell.offsetWidth + - parseFloat(style.marginLeft) + parseFloat(style.marginRight); - } - - let searchContainer = document.querySelector("#searchContainer"); - // Save search-container margin height - if (this._searchContainerMargin === undefined) { - let style = getComputedStyle(searchContainer); - this._searchContainerMargin = parseFloat(style.marginBottom) + - parseFloat(style.marginTop); - } - - // Find the number of rows we can place into view port - let availHeight = document.documentElement.clientHeight - - searchContainer.offsetHeight - this._searchContainerMargin; - let visibleRows = Math.floor(availHeight / this._cellHeight); - - // Find the number of columns that fit into view port - let maxGridWidth = gGridPrefs.gridColumns * this._cellWidth + GRID_WIDTH_EXTRA; - // available width is current grid width, but no greater than maxGridWidth - let availWidth = Math.min(document.querySelector("#newtab-grid").clientWidth, - maxGridWidth); - // finally get the number of columns we can fit into view port - let gridColumns = Math.floor(availWidth / this._cellWidth); - // walk sites backwords until a pinned or history tile is found or visibleRows reached - let tileIndex = Math.min(gGridPrefs.gridRows * gridColumns, this.sites.length) - 1; - while (tileIndex >= visibleRows * gridColumns) { - if (this._isHistoricalTile(tileIndex)) { - break; - } - tileIndex--; - } - - // Compute the actual number of grid rows we will display (potentially - // with a scroll bar). tileIndex now points to a historical tile with - // heighest index or to the last index of the visible row, if none found - // Dividing tileIndex by number of tiles in a column gives the rows - let gridRows = Math.floor(tileIndex / gridColumns) + 1; - - // we need to set grid width, for otherwise the scrollbar may shrink - // the grid when shown and cause grid layout to be different from - // 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"; } + }; diff --git a/application/palemoon/base/content/newtab/newTab.css b/application/palemoon/base/content/newtab/newTab.css index a5431cf65..fe745d2fd 100644 --- a/application/palemoon/base/content/newtab/newTab.css +++ b/application/palemoon/base/content/newtab/newTab.css @@ -42,6 +42,18 @@ input[type=button] { pointer-events: none; } +/* TOGGLE */ +#newtab-toggle { + position: absolute; + top: 12px; + right: 12px; +} + +#newtab-toggle:-moz-locale-dir(rtl) { + left: 12px; + right: auto; +} + /* MARGINS */ #newtab-vertical-margin { display: -moz-box; @@ -69,33 +81,38 @@ 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; - transition: 300ms ease-out; + -moz-box-orient: vertical; + min-width: 600px; + min-height: 400px; + transition: 175ms ease-out; transition-property: opacity; } @@ -108,25 +125,30 @@ 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 */ .newtab-site { position: relative; -moz-box-flex: 1; - transition: 200ms ease-out; + transition: 150ms ease-out; transition-property: top, left, opacity; } @@ -211,7 +233,7 @@ input[type=button] { display: -moz-box; position: relative; -moz-box-pack: center; - margin: 40px 0 15px; + margin: 10px 0 15px; } #searchContainer[page-disabled] { diff --git a/application/palemoon/base/content/newtab/newTab.xhtml b/application/palemoon/base/content/newtab/newTab.xhtml index eac62c987..de000e723 100644 --- a/application/palemoon/base/content/newtab/newTab.xhtml +++ b/application/palemoon/base/content/newtab/newTab.xhtml @@ -54,6 +54,7 @@ </div> <div id="newtab-margin-bottom"/> + <input id="newtab-toggle" type="button"/> </div> </body> <script type="text/javascript;version=1.8" src="chrome://browser/content/newtab/newTab.js"/> diff --git a/application/palemoon/base/content/newtab/page.js b/application/palemoon/base/content/newtab/page.js index cbd6750b6..7117d4527 100644 --- a/application/palemoon/base/content/newtab/page.js +++ b/application/palemoon/base/content/newtab/page.js @@ -21,6 +21,10 @@ var gPage = { // Listen for 'unload' to unregister this page. addEventListener("unload", this, false); + + // Listen for toggle button clicks. + let button = document.getElementById("newtab-toggle"); + button.addEventListener("click", e => this.toggleEnabled(e)); // XXX bug 991111 - Not all click events are correctly triggered when // listening from xhtml nodes -- in particular middle clicks on sites, so @@ -277,6 +281,11 @@ var gPage = { } }, + toggleEnabled: function(aEvent) { + gAllPages.enabled = !gAllPages.enabled; + event.stopPropagation(); + }, + maybeShowAutoMigrationUndoNotification() { // sendAsyncMessage("NewTab:MaybeShowAutoMigrationUndoNotification"); }, diff --git a/application/palemoon/base/content/palemoon.xhtml b/application/palemoon/base/content/palemoon.xhtml new file mode 100644 index 000000000..96757052c --- /dev/null +++ b/application/palemoon/base/content/palemoon.xhtml @@ -0,0 +1,66 @@ +<!DOCTYPE html +[ + <!ENTITY % mozillaDTD SYSTEM "chrome://browser/locale/palemoon.dtd" > + %mozillaDTD; + <!ENTITY % directionDTD SYSTEM "chrome://global/locale/global.dtd" > + %directionDTD; +]> + +<!-- 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/. --> + +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <meta charset='utf-8' /> + <title>&chronicles.title.55.2;</title> + +<style type="text/css"> +html { + background: #333399 radial-gradient( circle at 75% 25%, #6666b0 0%, #333399 40%, #111177 80%) center center / cover no-repeat; + color: white; + font-style: italic; + text-rendering: optimizeLegibility; + min-height: 100%; +} + +#moztext { + margin-top: 15%; + font-size: 1.1em; + font-family: serif; + text-align: center; + line-height: 1.5; +} + +#from { + font-size: 1.95em; + font-family: serif; + text-align: right; +} + +em { + font-size: 1.3em; + line-height: 0; +} + +a { + text-decoration: none; + color: white; +} +</style> +</head> + +<body dir="&locale.dir;"> + +<section> + <p id="moztext"> + &chronicles.quote.55.2; + </p> + + <p id="from"> + &chronicles.from.55.2; + </p> +</section> + +</body> +</html> diff --git a/application/palemoon/base/content/sanitize.js b/application/palemoon/base/content/sanitize.js index 74372a4af..0c85fa215 100644 --- a/application/palemoon/base/content/sanitize.js +++ b/application/palemoon/base/content/sanitize.js @@ -11,7 +11,7 @@ XPCOMUtils.defineLazyModuleGetter(this, "FormHistory", XPCOMUtils.defineLazyModuleGetter(this, "Downloads", "resource://gre/modules/Downloads.jsm"); XPCOMUtils.defineLazyModuleGetter(this, "Promise", - "resource:///modules/promise.js"); + "resource://gre/modules/Promise.jsm"); XPCOMUtils.defineLazyModuleGetter(this, "Task", "resource://gre/modules/Task.jsm"); XPCOMUtils.defineLazyModuleGetter(this, "console", diff --git a/application/palemoon/base/content/utilityOverlay.js b/application/palemoon/base/content/utilityOverlay.js index c45297e0b..63488e209 100644 --- a/application/palemoon/base/content/utilityOverlay.js +++ b/application/palemoon/base/content/utilityOverlay.js @@ -250,6 +250,10 @@ function openLinkIn(url, where, params) { aRelatedToCurrent = false; } + // We can only do this after we're sure of what |w| will be the rest of this function. + // Note that if |w| is null we might have no current browser (we'll open a new window). + var aCurrentBrowser = params.currentBrowser || (w && w.gBrowser.selectedBrowser); + if (!w || where == "window") { // This propagates to window.arguments. // Strip referrer data when opening a new private window, to prevent |