Bug 1414244 - Part 3 - Remove the "panel-subviews" container. r=Gijs draft
authorPaolo Amadini <paolo.mozmail@amadzone.org>
Sat, 11 Nov 2017 22:09:30 +0000
changeset 702601 c5cf51c8ccf557642d640c7fc60de6f906ee1c87
parent 702600 52ac0a9878a6242237b772ae17efea36f653d873
child 702602 20be498d447bd00cbdd5f7e893b4ed959fc8f80a
push id90549
push userpaolo.mozmail@amadzone.org
push dateThu, 23 Nov 2017 12:01:13 +0000
reviewersGijs
bugs1414244
milestone59.0a1
Bug 1414244 - Part 3 - Remove the "panel-subviews" container. r=Gijs MozReview-Commit-ID: 2GGJ1myKuF5
browser/components/customizableui/PanelMultiView.jsm
browser/components/customizableui/content/panelUI.css
browser/components/customizableui/content/panelUI.xml
browser/themes/linux/customizableui/panelUI.css
browser/themes/osx/controlcenter/panel.css
browser/themes/osx/customizableui/panelUI.css
browser/themes/shared/controlcenter/panel.inc.css
browser/themes/shared/customizableui/panelUI.inc.css
browser/themes/shared/downloads/downloads.inc.css
browser/themes/windows/customizableui/panelUI.css
--- a/browser/components/customizableui/PanelMultiView.jsm
+++ b/browser/components/customizableui/PanelMultiView.jsm
@@ -196,21 +196,16 @@ this.PanelMultiView = class {
    *                   that this instance should be ready to be thrown away at
    *                   any time.
    */
   get _ephemeral() {
     return this.node.hasAttribute("ephemeral");
   }
 
   get panelViews() {
-    // If there's a dedicated subViews container, we're not in the right binding
-    // to use SlidingPanelViews.
-    if (this._subViews)
-      return null;
-
     if (this._panelViews)
       return this._panelViews;
 
     this._panelViews = new SlidingPanelViews();
     this._panelViews.push(...this.node.getElementsByTagName("panelview"));
     return this._panelViews;
   }
   get _dwu() {
@@ -275,18 +270,16 @@ this.PanelMultiView = class {
     const {document, window} = this;
 
     this._clickCapturer =
       document.getAnonymousElementByAttribute(this.node, "anonid", "clickCapturer");
     this._viewContainer =
       document.getAnonymousElementByAttribute(this.node, "anonid", "viewContainer");
     this._mainViewContainer =
       document.getAnonymousElementByAttribute(this.node, "anonid", "mainViewContainer");
-    this._subViews =
-      document.getAnonymousElementByAttribute(this.node, "anonid", "subViews");
     this._viewStack =
       document.getAnonymousElementByAttribute(this.node, "anonid", "viewStack");
     this._offscreenViewStack =
       document.getAnonymousElementByAttribute(this.node, "anonid", "offscreenViewStack");
 
     XPCOMUtils.defineLazyGetter(this, "_panelViewCache", () => {
       let viewCacheId = this.node.getAttribute("viewCacheId");
       return viewCacheId ? document.getElementById(viewCacheId) : null;
@@ -346,32 +339,30 @@ this.PanelMultiView = class {
     if (this._ephemeral)
       this.hideAllViewsExcept(null);
     let mainView = this._mainView;
     if (mainView) {
       if (this._panelViewCache)
         this._panelViewCache.appendChild(mainView);
       mainView.removeAttribute("mainview");
     }
-    if (this._subViews)
-      this._moveOutKids(this._subViews);
 
     if (this.panelViews) {
       this._moveOutKids(this._viewStack);
       this.panelViews.clear();
     } else {
       this._clickCapturer.removeEventListener("click", this);
     }
     this._panel.removeEventListener("mousemove", this);
     this._panel.removeEventListener("popupshowing", this);
     this._panel.removeEventListener("popupshown", this);
     this._panel.removeEventListener("popuphidden", this);
     this.window.removeEventListener("keydown", this);
     this.node = this._clickCapturer = this._viewContainer = this._mainViewContainer =
-      this._subViews = this._viewStack = this.__dwu = this._panelViewCache =
+      this._viewStack = this.__dwu = this._panelViewCache =
         this._transitionDetails = null;
   }
 
   /**
    * Remove any child subviews into the panelViewCache, to ensure
    * they remain usable even if this panelmultiview instance is removed
    * from the DOM.
    * @param viewNodeContainer the container from which to remove subviews
@@ -390,18 +381,16 @@ this.PanelMultiView = class {
     }
   }
 
   _placeSubView(viewNode) {
     if (this.panelViews) {
       this._viewStack.appendChild(viewNode);
       if (!this.panelViews.includes(viewNode))
         this.panelViews.push(viewNode);
-    } else {
-      this._subViews.appendChild(viewNode);
     }
   }
 
   goBack(target) {
     let [current, previous] = this.panelViews.back();
     return this.showSubView(current, target, previous);
   }
 
@@ -416,18 +405,16 @@ this.PanelMultiView = class {
     return view.id != this._mainViewId;
   }
 
   setMainView(aNewMainView) {
     if (!aNewMainView)
       return;
 
     if (this._mainView) {
-      if (!this.panelViews)
-        this._subViews.appendChild(this._mainView);
       this._mainView.removeAttribute("mainview");
     }
     this._mainViewId = aNewMainView.id;
     aNewMainView.setAttribute("mainview", "true");
     if (this.panelViews) {
       // If the new main view is not yet in the zeroth position, make sure it's
       // inserted there.
       if (aNewMainView.parentNode != this._viewStack && this._viewStack.firstChild != aNewMainView) {
@@ -939,19 +926,17 @@ this.PanelMultiView = class {
       } else {
         edge = mainViewRect.right - anchorRect.right;
       }
 
       // If the anchor is an element on the far end of the mainView we
       // don't want to shift the mainView too far, we would reveal empty
       // space otherwise.
       let cstyle = this.window.getComputedStyle(this.document.documentElement);
-      let exitSubViewGutterWidth =
-        cstyle.getPropertyValue("--panel-ui-exit-subview-gutter-width");
-      let maxShift = mainViewRect.width - parseInt(exitSubViewGutterWidth);
+      let maxShift = mainViewRect.width - 38;
       let target = Math.min(maxShift, edge + center);
 
       let neg = direction == "ltr" ? "-" : "";
       this._mainViewContainer.style.transform = `translateX(${neg}${target}px)`;
       aAnchor.setAttribute("panel-multiview-anchor", true);
     } else {
       this._mainViewContainer.style.transform = "";
       if (this.anchorElement)
--- a/browser/components/customizableui/content/panelUI.css
+++ b/browser/components/customizableui/content/panelUI.css
@@ -5,25 +5,16 @@
 .panel-viewcontainer {
   overflow: hidden;
 }
 
 .panel-viewstack {
   transition: height var(--panelui-subview-transition-duration);
 }
 
-.panel-subviews {
-  -moz-stack-sizing: ignore-horizontal;
-  transform: translateX(0);
-}
-
-.panel-subviews[panelopen] {
-  transition: transform var(--panelui-subview-transition-duration);
-}
-
 .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
@@ -23,24 +23,17 @@
           <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
-               subviews that are not being displayed. We're using this over a deck
-               because a deck assumes the size of its largest child, regardless of
-               whether or not it is shown. That's not good for our case, since we
-               want to allow each subview to be uniquely sized. -->
-          <xul:vbox anonid="subViews" class="panel-subviews" xbl:inherits="panelopen">
-            <children includes="panelview"/>
-          </xul:vbox>
+          <children includes="panelview"/>
         </xul:stack>
       </xul:vbox>
     </content>
     <implementation>
       <constructor><![CDATA[
         const {PanelMultiView} = Components.utils.import("resource:///modules/PanelMultiView.jsm", {});
         this.instance = new PanelMultiView(this);
       ]]></constructor>
--- a/browser/themes/linux/customizableui/panelUI.css
+++ b/browser/themes/linux/customizableui/panelUI.css
@@ -1,18 +1,14 @@
 /* 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/. */
 
 %include ../../shared/customizableui/panelUI.inc.css
 
-.panel-subviews {
-  background-color: var(--arrowpanel-background);
-}
-
 #BMB_bookmarksPopup > menuitem[type="checkbox"] {
   -moz-appearance: none !important; /* important, to override toolkit rule */
 }
 
 #BMB_bookmarksPopup menupopup {
   -moz-appearance: none;
   background: var(--arrowpanel-background);
   color: var(--arrowpanel-color);
--- a/browser/themes/osx/controlcenter/panel.css
+++ b/browser/themes/osx/controlcenter/panel.css
@@ -5,25 +5,16 @@
 %include ../shared.inc
 %include ../../shared/controlcenter/panel.inc.css
 
 .identity-popup-expander:-moz-focusring,
 .identity-popup-permission-remove-button:-moz-focusring {
   box-shadow: var(--focus-ring-box-shadow);
 }
 
-#identity-popup-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
-  border-bottom-right-radius: 3.5px;
-}
-
-#identity-popup-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews:-moz-locale-dir(rtl) {
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 3.5px;
-}
-
 #tracking-action-block,
 #tracking-action-unblock,
 #tracking-action-unblock-private,
 #identity-popup-securityView-body > button {
   @hudButton@
   min-height: 30px;
 }
 
--- a/browser/themes/osx/customizableui/panelUI.css
+++ b/browser/themes/osx/customizableui/panelUI.css
@@ -1,18 +1,14 @@
 /* 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/. */
 
 %include ../../shared/customizableui/panelUI.inc.css
 
-.panel-subviews {
-  background-color: hsla(0,0%,100%,.97);
-}
-
 .restoreallitem > .toolbarbutton-icon {
   display: none;
 }
 
 .subviewbutton {
   padding-inline-start: 18px;
 }
 
--- a/browser/themes/shared/controlcenter/panel.inc.css
+++ b/browser/themes/shared/controlcenter/panel.inc.css
@@ -63,21 +63,16 @@
   fill-opacity: .6;
 }
 
 #identity-popup-mainView {
   min-width: 30em;
   max-width: 30em;
 }
 
-#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);
 }
 
 .identity-popup-security-content,
 #identity-popup-permissions-content,
 #tracking-protection-content {
   background-repeat: no-repeat;
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -17,17 +17,16 @@
 %define menuStateHover :not(:-moz-any([disabled],:active))[_moz-menuactive]
 %define buttonStateActive :not([disabled]):-moz-any([open],:hover:active)
 %define menuStateActive :not([disabled])[_moz-menuactive]:active
 %define menuStateMenuActive :not([disabled])[_moz-menuactive]
 %define inAnyPanel :-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
 %define panelPaletteIconSize 16px
 
 :root {
-  --panel-ui-exit-subview-gutter-width: 38px;
   --appmenu-yellow-warning-border-color: hsl(45, 100%, 77%);
   --appmenu-yellow-warning-color: #FFEFBF;
   --appmenu-yellow-warning-hover-color: #FFE8A2;
   --appmenu-yellow-warning-active-color: #FFE38F;
 }
 
 :root:not([uidensity=compact]):not([chromehidden~="toolbar"]) #PanelUI-button {
   margin-inline-start: 3px;
@@ -109,25 +108,16 @@
   filter: none;
 }
 
 #PanelUI-menu-button[badge-status="addon-alert"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
   height: 13px;
   background: #FFBF00 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center;
 }
 
-.panel-subviews {
-  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);
-}
-
 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,
--- a/browser/themes/shared/downloads/downloads.inc.css
+++ b/browser/themes/shared/downloads/downloads.inc.css
@@ -10,20 +10,16 @@
 %define itemFinished @item@[state="1"]
 %define itemNotFinished @item@:not([state="1"])
 %define itemFocused #downloadsListBox:focus > @item@[selected]
 
 /*** Panel and outer controls ***/
 
 #downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent {
   overflow: hidden;
-}
-
-#downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent,
-#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
   padding: 0;
 }
 
 #downloadsListBox {
   background: transparent;
   color: inherit;
   -moz-appearance: none;
   margin: 0;
--- a/browser/themes/windows/customizableui/panelUI.css
+++ b/browser/themes/windows/customizableui/panelUI.css
@@ -1,18 +1,14 @@
 /* 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/. */
 
 %include ../../shared/customizableui/panelUI.inc.css
 
-.panel-subviews {
-  background-color: var(--arrowpanel-background);
-}
-
 /* bookmark panel submenus */
 
 #BMB_bookmarksPopup menupopup[placespopup=true] {
   -moz-appearance: none;
   background: transparent;
   border: none;
   padding: 0;
   padding-top: 4px;