Bug 1414244 - Part 2 - Remove the "viewtype" attribute. r=Gijs
MozReview-Commit-ID: 8fq0KLfYWnc
--- a/browser/components/customizableui/PanelMultiView.jsm
+++ b/browser/components/customizableui/PanelMultiView.jsm
@@ -161,17 +161,17 @@ this.PanelMultiView = class {
return this.node.ownerGlobal;
}
get _panel() {
return this.node.parentNode;
}
get showingSubView() {
- return this.node.getAttribute("viewtype") == "subview";
+ return this._showingSubView;
}
get _mainViewId() {
return this.node.getAttribute("mainViewId");
}
set _mainViewId(val) {
this.node.setAttribute("mainViewId", val);
return val;
}
@@ -265,17 +265,17 @@ this.PanelMultiView = class {
this.node = xulNode;
// If `testMode` is `true`, the consumer is only interested in accessing the
// methods of this instance. (E.g. in unit tests.)
if (testMode)
return;
this._currentSubView = this._anchorElement = this._subViewObserver = null;
this._mainViewHeight = 0;
- this.__transitioning = this._ignoreMutations = false;
+ this.__transitioning = this._ignoreMutations = this._showingSubView = false;
const {document, window} = this;
this._clickCapturer =
document.getAnonymousElementByAttribute(this.node, "anonid", "clickCapturer");
this._viewContainer =
document.getAnonymousElementByAttribute(this.node, "anonid", "viewContainer");
this._mainViewContainer =
@@ -305,17 +305,17 @@ this.PanelMultiView = class {
} else {
this._clickCapturer.addEventListener("click", this);
if (this._mainView) {
this.setMainView(this._mainView);
}
}
- this.node.setAttribute("viewtype", "main");
+ this._showingSubView = false;
// Proxy these public properties and methods, as used elsewhere by various
// parts of the browser, to this instance.
["_mainView", "ignoreMutations", "showingSubView",
"_panelViews"].forEach(property => {
Object.defineProperty(this.node, property, {
enumerable: true,
get: () => this[property],
@@ -446,17 +446,17 @@ this.PanelMultiView = class {
return this.showSubView(this._mainView);
if (this.showingSubView) {
let viewNode = this._currentSubView;
this._dispatchViewEvent(viewNode, "ViewHiding");
this._transitionHeight(() => {
viewNode.removeAttribute("current");
this._currentSubView = null;
- this.node.setAttribute("viewtype", "main");
+ this._showingSubView = false;
});
}
this._shiftMainView();
return Promise.resolve();
}
/**
@@ -482,17 +482,17 @@ this.PanelMultiView = class {
return;
this._currentSubView = theOne;
if (!theOne.hasAttribute("current")) {
theOne.setAttribute("current", true);
this.descriptionHeightWorkaround(theOne);
this._dispatchViewEvent(theOne, "ViewShown");
}
- this.node.setAttribute("viewtype", (theOne.id == this._mainViewId) ? "main" : "subview");
+ this._showingSubView = theOne.id != this._mainViewId;
}
showSubView(aViewId, aAnchor, aPreviousView) {
this._currentShowPromise = (async () => {
// Support passing in the node directly.
let viewNode = typeof aViewId == "string" ? this.node.querySelector("#" + aViewId) : aViewId;
if (!viewNode) {
viewNode = this.document.getElementById(aViewId);
@@ -589,21 +589,17 @@ this.PanelMultiView = class {
this._updateKeyboardFocus(viewNode);
} else {
this.hideAllViewsExcept(viewNode);
}
} else {
this._currentSubView = viewNode;
this._transitionHeight(() => {
viewNode.setAttribute("current", true);
- if (viewNode.id == this._mainViewId) {
- this.node.setAttribute("viewtype", "main");
- } else {
- this.node.setAttribute("viewtype", "subview");
- }
+ this._showingSubView = viewNode.id != this._mainViewId;
// Now that the subview is visible, we can check the height of the
// description elements it contains.
this.descriptionHeightWorkaround(viewNode);
this._dispatchViewEvent(viewNode, "ViewShown");
});
this._shiftMainView(aAnchor);
}
})().catch(e => Cu.reportError(e));
--- a/browser/components/customizableui/content/panelUI.css
+++ b/browser/components/customizableui/content/panelUI.css
@@ -1,38 +1,30 @@
/* 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/. */
-.panel-viewstack[viewtype="main"] > .panel-clickcapturer {
- pointer-events: none;
-}
-
.panel-viewcontainer {
overflow: hidden;
}
.panel-viewstack {
transition: height var(--panelui-subview-transition-duration);
}
.panel-subviews {
-moz-stack-sizing: ignore-horizontal;
transform: translateX(0);
}
-.panel-viewstack[viewtype="main"] > .panel-subviews {
- -moz-stack-sizing: ignore;
-}
-
.panel-subviews[panelopen] {
transition: transform var(--panelui-subview-transition-duration);
}
-.panel-viewcontainer[panelopen]:-moz-any(:not([viewtype="main"]),[transitioning]) {
+.panel-viewcontainer[panelopen] {
transition-property: height;
transition-timing-function: var(--animation-easing-function);
transition-duration: var(--panelui-subview-transition-duration);
will-change: height;
}
/* START photon adjustments */
--- a/browser/components/customizableui/content/panelUI.xml
+++ b/browser/components/customizableui/content/panelUI.xml
@@ -13,19 +13,19 @@
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:xbl="http://www.mozilla.org/xbl">
<binding id="panelmultiview">
<resources>
<stylesheet src="chrome://browser/content/customizableui/panelUI.css"/>
</resources>
<content>
- <xul:vbox anonid="viewContainer" class="panel-viewcontainer" xbl:inherits="panelopen,viewtype,transitioning">
- <xul:stack anonid="viewStack" xbl:inherits="viewtype,transitioning" class="panel-viewstack">
- <xul:vbox anonid="mainViewContainer" class="panel-mainview" xbl:inherits="viewtype"/>
+ <xul:vbox anonid="viewContainer" class="panel-viewcontainer" xbl:inherits="panelopen,transitioning">
+ <xul:stack anonid="viewStack" xbl:inherits="transitioning" class="panel-viewstack">
+ <xul:vbox anonid="mainViewContainer" class="panel-mainview"/>
<!-- Used to capture click events over the PanelUI-mainView if we're in
subview mode. That way, any click on the PanelUI-mainView causes us
to revert to the mainView mode, whereupon PanelUI-click-capture then
allows click events to go through it. -->
<xul:vbox anonid="clickCapturer" class="panel-clickcapturer"/>
<!-- We manually set display: none (via a CSS attribute selector) on the
--- a/browser/themes/shared/controlcenter/panel.inc.css
+++ b/browser/themes/shared/controlcenter/panel.inc.css
@@ -63,25 +63,16 @@
fill-opacity: .6;
}
#identity-popup-mainView {
min-width: 30em;
max-width: 30em;
}
-#identity-popup-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="main"] > .panel-subviews {
- transform: translateX(100%);
- box-shadow: none;
-}
-
-#identity-popup-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
- transform: translateX(-100%);
-}
-
#identity-popup-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
background: var(--arrowpanel-background);
padding: 0;
}
.identity-popup-section:not(:first-child) {
border-top: 1px solid var(--panel-separator-color);
}
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -118,24 +118,16 @@
padding: 4px;
background-clip: padding-box;
border-left: 1px solid var(--arrowpanel-border-color);
box-shadow: 0 3px 5px hsla(210,4%,10%,.1),
0 0 7px hsla(210,4%,10%,.1);
margin-inline-start: var(--panel-ui-exit-subview-gutter-width);
}
-.panel-viewstack[viewtype="main"] > .panel-subviews {
- transform: translateX(@menuPanelWidth@);
-}
-
-.panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
- transform: translateX(-@menuPanelWidth@);
-}
-
panelview {
-moz-box-orient: vertical;
-moz-box-flex: 1;
}
/* This section is to anchor all the drop down panels at the same height, shift the
panel`s top margin according to its positioning and the uidensity of the window. */
#downloadsPanel,