Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-26 19:55:39 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1444891 - Remove the statuspanel binding. r=jaws

Browse Source 
MozReview-Commit-ID: JaMhIAWHbEv

--HG--
extra : rebase_source : 09a2bff84c8f1b47e64c7f6fde65689b7d5f11c9
This commit is contained in:
Dão Gottwald 2018-03-12 14:55:55 +01:00
parent ac5db0581a
commit 494566d194
8 changed files with 175 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
browser/base/content/browser.css
View File

@ -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;

50
browser/base/content/browser.js
View File

@ -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();
}
};

9
browser/base/content/browser.xul
View File

@ -1232,6 +1232,15 @@
selectmenulist="ContentSelectDropdown"
datetimepicker="DateTimePickerPanel"/>
</stack>
<hbox id="statuspanel" inactive="true" layer="true">
<hbox id="statuspanel-inner">
<label id="statuspanel-label"
role="status"
aria-live="off"
flex="1"
crop="end"/>
</hbox>
</hbox>
</vbox>
</hbox>
</notificationbox>

141
browser/base/content/tabbrowser.js
View File

@ -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);
}
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;
}
}
};

128
browser/base/content/tabbrowser.xml
View File

@ -2227,134 +2227,6 @@
</handlers>
</binding>
<binding id="statuspanel" display="xul:hbox">
<content>
<xul:hbox class="statuspanel-inner">
<xul:label class="statuspanel-label"
role="status"
aria-live="off"
xbl:inherits="value=label,crop,mirror"
flex="1"
crop="end"/>
</xul:hbox>
</content>
<implementation implements="nsIDOMEventListener">
<constructor><![CDATA[
window.addEventListener("resize", this);
]]></constructor>
<destructor><![CDATA[
window.removeEventListener("resize", this);
MousePosTracker.removeListener(this);
]]></destructor>
<property name="label">
<setter><![CDATA[
if (!this.label) {
this.removeAttribute("mirror");
this.removeAttribute("sizelimit");
}
if (this.getAttribute("type") == "status" &&
this.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.style.minWidth =
window.QueryInterface(Ci.nsIInterfaceRequestor)
.getInterface(Ci.nsIDOMWindowUtils)
.getBoundsWithoutFlushing(this).width + "px";
} else {
this.style.minWidth = "";
}
if (val) {
this.setAttribute("label", val);
this.removeAttribute("inactive");
this._mouseTargetRect = null;
MousePosTracker.addListener(this);
} else {
this.setAttribute("inactive", "true");
MousePosTracker.removeListener(this);
}
return val;
]]></setter>
<getter>
return this.hasAttribute("inactive") ? "" : this.getAttribute("label");
</getter>
</property>
<method name="getMouseTargetRect">
<body><![CDATA[
if (!this._mouseTargetRect) {
this._calcMouseTargetRect();
}
return this._mouseTargetRect;
]]></body>
</method>
<method name="onMouseEnter">
<body>
this._mirror();
</body>
</method>
<method name="onMouseLeave">
<body>
this._mirror();
</body>
</method>
<method name="handleEvent">
<parameter name="event"/>
<body><![CDATA[
if (!this.label)
return;
switch (event.type) {
case "resize":
this._mouseTargetRect = null;
break;
}
]]></body>
</method>
<method name="_calcMouseTargetRect">
<body><![CDATA[
let container = this.parentNode;
let alignRight = (getComputedStyle(container).direction == "rtl");
let panelRect = this.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
};
]]></body>
</method>
<method name="_mirror">
<body>
if (this.hasAttribute("mirror"))
this.removeAttribute("mirror");
else
this.setAttribute("mirror", "true");
if (!this.hasAttribute("sizelimit")) {
this.setAttribute("sizelimit", "true");
this._mouseTargetRect = null;
}
</body>
</method>
</implementation>
</binding>
<binding id="tabbrowser-tabpanels"
extends="chrome://global/content/bindings/tabbox.xml#tabpanels">
<implementation>

10
browser/themes/linux/browser.css
View File

@ -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;

10
browser/themes/osx/browser.css
View File

@ -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;

12
browser/themes/windows/browser.css
View File

@ -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;