From 494566d19426db54b0795c89f2998562de7fca91 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?D=C3=A3o=20Gottwald?= Date: Mon, 12 Mar 2018 14:55:55 +0100 Subject: [PATCH] Bug 1444891 - Remove the statuspanel binding. r=jaws MozReview-Commit-ID: JaMhIAWHbEv --HG-- extra : rebase_source : 09a2bff84c8f1b47e64c7f6fde65689b7d5f11c9 --- browser/base/content/browser.css | 21 ++-- browser/base/content/browser.js | 50 ++-------- browser/base/content/browser.xul | 9 ++ browser/base/content/tabbrowser.js | 145 +++++++++++++++++++++++++--- browser/base/content/tabbrowser.xml | 128 ------------------------ browser/themes/linux/browser.css | 10 +- browser/themes/osx/browser.css | 10 +- browser/themes/windows/browser.css | 12 +-- 8 files changed, 175 insertions(+), 210 deletions(-) diff --git a/browser/base/content/browser.css b/browser/base/content/browser.css index 7734cace9235..c4cc8f1b0632 100644 --- a/browser/base/content/browser.css +++ b/browser/base/content/browser.css @@ -976,51 +976,50 @@ browser[tabmodalPromptShowing] { /* Status panel */ -statuspanel { - -moz-binding: url("chrome://browser/content/tabbrowser.xml#statuspanel"); +#statuspanel { position: fixed; margin-top: -3em; max-width: calc(100% - 5px); pointer-events: none; } -statuspanel[mirror] { +#statuspanel[mirror] { offset-inline-start: auto; offset-inline-end: 0; } -statuspanel[sizelimit] { +#statuspanel[sizelimit] { max-width: 50%; } -statuspanel[type=status] { +#statuspanel[type=status] { min-width: 23em; } @media all and (max-width: 800px) { - statuspanel[type=status] { + #statuspanel[type=status] { min-width: 33%; } } -statuspanel[type=overLink] { +#statuspanel[type=overLink] { transition: opacity 120ms ease-out; } -statuspanel[type=overLink] > .statuspanel-inner { +#statuspanel[type=overLink] > #statuspanel-inner { direction: ltr; } -statuspanel[inactive] { +#statuspanel[inactive] { transition: none; opacity: 0; } -statuspanel[inactive][previoustype=overLink] { +#statuspanel[inactive][previoustype=overLink] { transition: opacity 200ms ease-out; } -.statuspanel-inner { +#statuspanel-inner { height: 3em; width: 100%; -moz-box-align: end; diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js index 2a66a2165e3a..a77c2c037da6 100644 --- a/browser/base/content/browser.js +++ b/browser/base/content/browser.js @@ -4391,8 +4391,8 @@ var XULBrowserWindow = { defaultStatus: "", overLink: "", startTime: 0, - statusText: "", isBusy: false, + busyUI: false, // Left here for add-on compatibility, see bug 752434 inContentWhitelist: [], @@ -4414,9 +4414,6 @@ var XULBrowserWindow = { delete this.reloadCommand; return this.reloadCommand = document.getElementById("Browser:Reload"); }, - get statusTextField() { - return gBrowser.getStatusPanel(); - }, get isImage() { delete this.isImage; return this.isImage = document.getElementById("isImage"); @@ -4440,7 +4437,7 @@ var XULBrowserWindow = { setDefaultStatus(status) { this.defaultStatus = status; - this.updateStatusField(); + StatusPanel.update(); }, setOverLink(url, anchorElt) { @@ -4484,29 +4481,6 @@ var XULBrowserWindow = { return gBrowser.tabs.length; }, - updateStatusField() { - var text, type, types = ["overLink"]; - if (this._busyUI) - types.push("status"); - types.push("defaultStatus"); - for (type of types) { - text = this[type]; - if (text) - break; - } - - // check the current value so we don't trigger an attribute change - // and cause needless (slow!) UI updates - if (this.statusText != text) { - let field = this.statusTextField; - field.setAttribute("previoustype", field.getAttribute("type")); - field.setAttribute("type", type); - field.label = text; - field.setAttribute("crop", type == "overLink" ? "center" : "end"); - this.statusText = text; - } - }, - // Called before links are navigated to to allow us to retarget them if needed. onBeforeLinkTraversal(originalTarget, linkURI, linkNode, isAppTab) { return BrowserUtils.onBeforeLinkTraversal(originalTarget, linkURI, linkNode, isAppTab); @@ -4572,7 +4546,7 @@ var XULBrowserWindow = { this.isBusy = true; if (!(aStateFlags & nsIWebProgressListener.STATE_RESTORING)) { - this._busyUI = true; + this.busyUI = true; // XXX: This needs to be based on window activity... this.stopCommand.removeAttribute("disabled"); @@ -4625,8 +4599,8 @@ var XULBrowserWindow = { this.isBusy = false; - if (this._busyUI) { - this._busyUI = false; + if (this.busyUI) { + this.busyUI = false; this.stopCommand.setAttribute("disabled", "true"); CombinedStopReload.switchToReload(aRequest, aWebProgress); @@ -4787,7 +4761,7 @@ var XULBrowserWindow = { onStatusChange(aWebProgress, aRequest, aStatus, aMessage) { this.status = aMessage; - this.updateStatusField(); + StatusPanel.update(); }, // Properties used to cache security state used to update the UI @@ -4875,10 +4849,6 @@ var LinkTargetDisplay = { DELAY_HIDE: 250, _timer: 0, - get _isVisible() { - return XULBrowserWindow.statusTextField.label != ""; - }, - update() { clearTimeout(this._timer); window.removeEventListener("mousemove", this, true); @@ -4891,8 +4861,8 @@ var LinkTargetDisplay = { return; } - if (this._isVisible) { - XULBrowserWindow.updateStatusField(); + if (StatusPanel.isVisible) { + StatusPanel.update(); } else { // Let the display appear when the mouse doesn't move within the delay this._showDelayed(); @@ -4912,7 +4882,7 @@ var LinkTargetDisplay = { _showDelayed() { this._timer = setTimeout(function(self) { - XULBrowserWindow.updateStatusField(); + StatusPanel.update(); window.removeEventListener("mousemove", self, true); }, this.DELAY_SHOW, this); }, @@ -4920,7 +4890,7 @@ var LinkTargetDisplay = { _hide() { clearTimeout(this._timer); - XULBrowserWindow.updateStatusField(); + StatusPanel.update(); } }; diff --git a/browser/base/content/browser.xul b/browser/base/content/browser.xul index c342182f12ad..a490f684cd8b 100644 --- a/browser/base/content/browser.xul +++ b/browser/base/content/browser.xul @@ -1232,6 +1232,15 @@ selectmenulist="ContentSelectDropdown" datetimepicker="DateTimePickerPanel"/> + + + + diff --git a/browser/base/content/tabbrowser.js b/browser/base/content/tabbrowser.js index ad1bcc848ded..8ed6d5abca92 100644 --- a/browser/base/content/tabbrowser.js +++ b/browser/base/content/tabbrowser.js @@ -503,22 +503,10 @@ window._gBrowser = { return findBar; }, - getStatusPanel() { - if (!this._statusPanel) { - this._statusPanel = document.createElementNS(this._XUL_NS, "statuspanel"); - this._statusPanel.setAttribute("inactive", "true"); - this._statusPanel.setAttribute("layer", "true"); - this._appendStatusPanel(); - } - return this._statusPanel; - }, - _appendStatusPanel() { - if (this._statusPanel) { - let browser = this.selectedBrowser; - let browserContainer = this.getBrowserContainer(browser); - browserContainer.insertBefore(this._statusPanel, browser.parentNode.nextSibling); - } + let browser = this.selectedBrowser; + let browserContainer = this.getBrowserContainer(browser); + browserContainer.insertBefore(StatusPanel.panel, browser.parentNode.nextSibling); }, pinTab(aTab) { @@ -4610,3 +4598,130 @@ class TabProgressListener { } } +let StatusPanel = { + get panel() { + window.addEventListener("resize", this); + + delete this.panel; + return this.panel = document.getElementById("statuspanel"); + }, + + get isVisible() { + return !this.panel.hasAttribute("inactive"); + }, + + update() { + let text; + let type; + let types = ["overLink"]; + if (XULBrowserWindow.busyUI) { + types.push("status"); + } + types.push("defaultStatus"); + for (type of types) { + if ((text = XULBrowserWindow[type])) { + break; + } + } + + if (this._labelElement.value != text) { + this.panel.setAttribute("previoustype", this.panel.getAttribute("type")); + this.panel.setAttribute("type", type); + this._label = text; + this._labelElement.setAttribute("crop", type == "overLink" ? "center" : "end"); + } + }, + + get _labelElement() { + delete this._labelElement; + return this._labelElement = document.getElementById("statuspanel-label"); + }, + + set _label(val) { + if (!this.isVisible) { + this.panel.removeAttribute("mirror"); + this.panel.removeAttribute("sizelimit"); + } + + if (this.panel.getAttribute("type") == "status" && + this.panel.getAttribute("previoustype") == "status") { + // Before updating the label, set the panel's current width as its + // min-width to let the panel grow but not shrink and prevent + // unnecessary flicker while loading pages. We only care about the + // panel's width once it has been painted, so we can do this + // without flushing layout. + this.panel.style.minWidth = + window.QueryInterface(Ci.nsIInterfaceRequestor) + .getInterface(Ci.nsIDOMWindowUtils) + .getBoundsWithoutFlushing(this).width + "px"; + } else { + this.panel.style.minWidth = ""; + } + + if (val) { + this._labelElement.value = val; + this.panel.removeAttribute("inactive"); + this._mouseTargetRect = null; + MousePosTracker.addListener(this); + } else { + this.panel.setAttribute("inactive", "true"); + MousePosTracker.removeListener(this); + } + + return val; + }, + + getMouseTargetRect() { + if (!this._mouseTargetRect) { + this._calcMouseTargetRect(); + } + return this._mouseTargetRect; + }, + + onMouseEnter() { + this._mirror(); + }, + + onMouseLeave() { + this._mirror(); + }, + + handleEvent(event) { + if (!this.isVisible) { + return; + } + switch (event.type) { + case "resize": + this._mouseTargetRect = null; + break; + } + }, + + _calcMouseTargetRect() { + let container = this.panel.parentNode; + let alignRight = (getComputedStyle(container).direction == "rtl"); + let panelRect = this.panel.getBoundingClientRect(); + let containerRect = container.getBoundingClientRect(); + + this._mouseTargetRect = { + top: panelRect.top, + bottom: panelRect.bottom, + left: alignRight ? containerRect.right - panelRect.width : containerRect.left, + right: alignRight ? containerRect.right : containerRect.left + panelRect.width + }; + }, + + _mirror() { + if (this.panel.hasAttribute("mirror")) { + this.panel.removeAttribute("mirror"); + } else { + this.panel.setAttribute("mirror", "true"); + } + + if (!this.panel.hasAttribute("sizelimit")) { + this.panel.setAttribute("sizelimit", "true"); + this._mouseTargetRect = null; + } + } +}; + diff --git a/browser/base/content/tabbrowser.xml b/browser/base/content/tabbrowser.xml index e47d5e88803b..4179dcc9ed87 100644 --- a/browser/base/content/tabbrowser.xml +++ b/browser/base/content/tabbrowser.xml @@ -2227,134 +2227,6 @@ - - - - - - - - - - - - - - - - return this.hasAttribute("inactive") ? "" : this.getAttribute("label"); - - - - - - - - - - this._mirror(); - - - - - - this._mirror(); - - - - - - - - - - - - - - - if (this.hasAttribute("mirror")) - this.removeAttribute("mirror"); - else - this.setAttribute("mirror", "true"); - - if (!this.hasAttribute("sizelimit")) { - this.setAttribute("sizelimit", "true"); - this._mouseTargetRect = null; - } - - - - - diff --git a/browser/themes/linux/browser.css b/browser/themes/linux/browser.css index 7abf7a41e269..2708e055b467 100644 --- a/browser/themes/linux/browser.css +++ b/browser/themes/linux/browser.css @@ -526,7 +526,7 @@ notification[value="translation"] menulist > .menulist-dropmarker { /* Status panel */ -.statuspanel-label { +#statuspanel-label { margin: 0; padding: 2px 4px; background-color: -moz-dialog; @@ -536,15 +536,15 @@ notification[value="translation"] menulist > .menulist-dropmarker { text-shadow: none; } -.statuspanel-label:-moz-locale-dir(ltr):not([mirror]), -.statuspanel-label:-moz-locale-dir(rtl)[mirror] { +#statuspanel:not([mirror]) > #statuspanel-inner > #statuspanel-label:-moz-locale-dir(ltr), +#statuspanel[mirror] > #statuspanel-inner > #statuspanel-label:-moz-locale-dir(rtl) { border-right-style: solid; border-top-right-radius: .3em; margin-right: 1em; } -.statuspanel-label:-moz-locale-dir(rtl):not([mirror]), -.statuspanel-label:-moz-locale-dir(ltr)[mirror] { +#statuspanel:not([mirror]) > #statuspanel-inner > #statuspanel-label:-moz-locale-dir(rtl), +#statuspanel[mirror] > #statuspanel-inner > #statuspanel-label:-moz-locale-dir(ltr) { border-left-style: solid; border-top-left-radius: .3em; margin-left: 1em; diff --git a/browser/themes/osx/browser.css b/browser/themes/osx/browser.css index 929ccd723852..22d4c9f5a259 100644 --- a/browser/themes/osx/browser.css +++ b/browser/themes/osx/browser.css @@ -993,7 +993,7 @@ html|*.addon-webext-perm-list { /* Status panel */ -.statuspanel-label { +#statuspanel-label { margin: 0; padding: 2px 4px; background-color: #f9f9fa; @@ -1003,15 +1003,15 @@ html|*.addon-webext-perm-list { text-shadow: none; } -.statuspanel-label:-moz-locale-dir(ltr):not([mirror]), -.statuspanel-label:-moz-locale-dir(rtl)[mirror] { +#statuspanel:not([mirror]) > #statuspanel-inner > #statuspanel-label:-moz-locale-dir(ltr), +#statuspanel[mirror] > #statuspanel-inner > #statuspanel-label:-moz-locale-dir(rtl) { border-right-style: solid; border-top-right-radius: .3em; margin-right: 1em; } -.statuspanel-label:-moz-locale-dir(rtl):not([mirror]), -.statuspanel-label:-moz-locale-dir(ltr)[mirror] { +#statuspanel:not([mirror]) > #statuspanel-inner > #statuspanel-label:-moz-locale-dir(rtl), +#statuspanel[mirror] > #statuspanel-inner > #statuspanel-label:-moz-locale-dir(ltr) { border-left-style: solid; border-top-left-radius: .3em; margin-left: 1em; diff --git a/browser/themes/windows/browser.css b/browser/themes/windows/browser.css index f46edc72c682..40f4846ef67f 100644 --- a/browser/themes/windows/browser.css +++ b/browser/themes/windows/browser.css @@ -912,7 +912,7 @@ notification[value="translation"] { /* Status panel */ -.statuspanel-label { +#statuspanel-label { margin: 0; padding: 2px 4px; background-color: -moz-dialog; @@ -923,14 +923,14 @@ notification[value="translation"] { } @media (-moz-windows-default-theme) { - .statuspanel-label { + #statuspanel-label { background-color: #f9f9fa; color: #444; } } -.statuspanel-label:-moz-locale-dir(ltr):not([mirror]), -.statuspanel-label:-moz-locale-dir(rtl)[mirror] { +#statuspanel:not([mirror]) > #statuspanel-inner > #statuspanel-label:-moz-locale-dir(ltr), +#statuspanel[mirror] > #statuspanel-inner > #statuspanel-label:-moz-locale-dir(rtl) { border-right-style: solid; /* disabled for triggering grayscale AA (bug 659213) border-top-right-radius: .3em; @@ -938,8 +938,8 @@ notification[value="translation"] { margin-right: 1em; } -.statuspanel-label:-moz-locale-dir(rtl):not([mirror]), -.statuspanel-label:-moz-locale-dir(ltr)[mirror] { +#statuspanel:not([mirror]) > #statuspanel-inner > #statuspanel-label:-moz-locale-dir(rtl), +#statuspanel[mirror] > #statuspanel-inner > #statuspanel-label:-moz-locale-dir(ltr) { border-left-style: solid; /* disabled for triggering grayscale AA (bug 659213) border-top-left-radius: .3em;