Bug 1414244 - Part 2 - Remove the "viewtype" attribute. r=Gijs draft
authorPaolo Amadini <paolo.mozmail@amadzone.org>
Tue, 21 Nov 2017 13:22:47 +0000
changeset 702600 52ac0a9878a6242237b772ae17efea36f653d873
parent 702599 e7c963716081ba080e4f5c39ef73bec222915d5a
child 702601 c5cf51c8ccf557642d640c7fc60de6f906ee1c87
push id90549
push userpaolo.mozmail@amadzone.org
push dateThu, 23 Nov 2017 12:01:13 +0000
reviewersGijs
bugs1414244
milestone59.0a1
Bug 1414244 - Part 2 - Remove the "viewtype" attribute. r=Gijs MozReview-Commit-ID: 8fq0KLfYWnc
browser/components/customizableui/PanelMultiView.jsm
browser/components/customizableui/content/panelUI.css
browser/components/customizableui/content/panelUI.xml
browser/themes/shared/controlcenter/panel.inc.css
browser/themes/shared/customizableui/panelUI.inc.css
--- 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,