Bug 1414244 - Part 6 - Fold the "photonpanelmultiview" binding into "panelmultiview". r=Gijs

MozReview-Commit-ID: IjvSZZUHUMt

--HG--
extra : rebase_source : a94e212e8af35b77806d1d62e020a511ab62e224

browser/base/content/browser-pageActions.js

@@ -20,7 +20,7 @@ var BrowserPageActions = {
   },
 
   /**
-   * The photonmultiview node in the main page action panel (DOM node)
+   * The panelmultiview node in the main page action panel (DOM node)
    */
   get multiViewNode() {
     delete this.multiViewNode;
@@ -234,7 +234,7 @@ var BrowserPageActions = {
     let iframeNode = null;
 
     if (action.subview) {
-      let multiViewNode = document.createElement("photonpanelmultiview");
+      let multiViewNode = document.createElement("panelmultiview");
       panelViewNode = this._makePanelViewNodeForAction(action, true);
       multiViewNode.appendChild(panelViewNode);
       panelNode.appendChild(multiViewNode);

browser/base/content/browser.css

@@ -71,28 +71,17 @@ panelmultiview {
   -moz-binding: url("chrome://browser/content/customizableui/panelUI.xml#panelmultiview");
 }
 
-photonpanelmultiview {
-  -moz-binding: url("chrome://browser/content/customizableui/panelUI.xml#photonpanelmultiview");
-}
-
 panelview {
   -moz-binding: url("chrome://browser/content/customizableui/panelUI.xml#panelview");
   -moz-box-orient: vertical;
 }
 
 panel[hidden] panelmultiview,
-panel[hidden] photonpanelmultiview,
 panel[hidden] panelview {
   -moz-binding: none;
 }
 
-panelview:not([mainview]):not([current]):not([in-transition]) {
-  transition: visibility 0s linear var(--panelui-subview-transition-duration);
-  visibility: collapse;
-}
-
-photonpanelmultiview panelview:not([current]):not([in-transition]) {
-  transition: none;
+panelview:not([current]):not([in-transition]) {
   visibility: collapse;
 }
 

browser/base/content/browser.xul

@@ -417,15 +417,15 @@
            emailLink-title="&emailPageCmd.label;"
            sendToDevice-title="&pageAction.sendTabToDevice.label;"
            sendToDevice-notReadyTitle="&sendToDevice.syncNotReady.label;">
-      <photonpanelmultiview id="pageActionPanelMultiView"
-                            mainViewId="pageActionPanelMainView"
-                            viewCacheId="appMenu-viewCache">
+      <panelmultiview id="pageActionPanelMultiView"
+                      mainViewId="pageActionPanelMainView"
+                      viewCacheId="appMenu-viewCache">
         <panelview id="pageActionPanelMainView"
                    context="pageActionContextMenu"
                    class="PanelUI-subView">
           <vbox class="panel-subview-body"/>
         </panelview>
-      </photonpanelmultiview>
+      </panelmultiview>
     </panel>
     <panel id="pageActionFeedback"
            role="alert"

browser/components/controlcenter/content/panel.inc.xul

@@ -16,8 +16,8 @@
     <broadcaster id="identity-popup-insecure-login-forms-learn-more" class="text-link plain" value="&identity.learnMore;"/>
   </broadcasterset>
 
-  <photonpanelmultiview id="identity-popup-multiView"
-                        mainViewId="identity-popup-mainView">
+  <panelmultiview id="identity-popup-multiView"
+                  mainViewId="identity-popup-mainView">
     <panelview id="identity-popup-mainView"
                descriptionheightworkaround="true">
       <!-- Security Section -->
@@ -184,5 +184,5 @@
       </vbox>
 
     </panelview>
-  </photonpanelmultiview>
+  </panelmultiview>
 </panel>

browser/components/customizableui/CustomizableUI.jsm

@@ -1620,7 +1620,7 @@ var CustomizableUIInternal = {
       if (areaType != CustomizableUI.TYPE_MENU_PANEL) {
         let wrapper = this.wrapWidget(aWidget.id).forWindow(ownerWindow);
 
-        let hasMultiView = !!aNode.closest("photonpanelmultiview,panelmultiview");
+        let hasMultiView = !!aNode.closest("panelmultiview");
         if (wrapper && !hasMultiView && wrapper.anchor) {
           this.hidePanelForNode(aNode);
           anchor = wrapper.anchor;
@@ -1804,7 +1804,7 @@ var CustomizableUIInternal = {
 
     if (closemenu == "single") {
       let panel = this._getPanelForNode(target);
-      let multiview = panel.querySelector("photonpanelmultiview,panelmultiview");
+      let multiview = panel.querySelector("panelmultiview");
       if (multiview.showingSubView) {
         if (multiview.instance.panelViews) {
           multiview.goBack();
@@ -4303,15 +4303,10 @@ OverflowableToolbar.prototype = {
     return new Promise(resolve => {
       let doc = this._panel.ownerDocument;
       this._panel.hidden = false;
-      let photonView = this._panel.querySelector("photonpanelmultiview");
-      let contextMenu;
-      if (photonView) {
-        let mainViewId = photonView.getAttribute("mainViewId");
-        let mainView = doc.getElementById(mainViewId);
-        contextMenu = doc.getElementById(mainView.getAttribute("context"));
-      } else {
-        contextMenu = doc.getElementById(this._panel.getAttribute("context"));
-      }
+      let multiview = this._panel.querySelector("panelmultiview");
+      let mainViewId = multiview.getAttribute("mainViewId");
+      let mainView = doc.getElementById(mainViewId);
+      let contextMenu = doc.getElementById(mainView.getAttribute("context"));
       gELS.addSystemEventListener(contextMenu, "command", this, true);
       let anchor = doc.getAnonymousElementByAttribute(this._chevron, "class", "toolbarbutton-icon");
       // Ensure we update the gEditUIVisible flag when opening the popup, in

browser/components/customizableui/content/panelUI.css

@@ -7,6 +7,7 @@
 }
 
 .panel-viewstack {
+  overflow: visible;
   transition: height var(--panelui-subview-transition-duration);
 }
 
@@ -17,13 +18,7 @@
   will-change: height;
 }
 
-/* START photon adjustments */
-
-photonpanelmultiview > .panel-viewcontainer > .panel-viewstack {
-  overflow: visible;
-}
-
-photonpanelmultiview[transitioning] {
+panelmultiview[transitioning] {
   pointer-events: none;
 }
 
@@ -38,5 +33,3 @@ photonpanelmultiview[transitioning] {
   margin: 0;
   padding: 0;
 }
-
-/* END photon adjustments */

browser/components/customizableui/content/panelUI.inc.xul

@@ -9,7 +9,7 @@
        position="bottomcenter topright"
        photon="true"
        hidden="true">
-  <photonpanelmultiview mainViewId="widget-overflow-mainView" disablekeynav="true">
+  <panelmultiview mainViewId="widget-overflow-mainView" disablekeynav="true">
     <panelview id="widget-overflow-mainView"
                context="toolbar-context-menu">
       <vbox class="panel-subview-body">
@@ -24,7 +24,7 @@
                       accesskey="&overflowCustomizeToolbar.accesskey;"
                       label="&overflowCustomizeToolbar.label;"/>
     </panelview>
-  </photonpanelmultiview>
+  </panelmultiview>
   <!-- This menu is here because not having it in the menu in which it's used flickers
        when hover styles overlap. See https://bugzilla.mozilla.org/show_bug.cgi?id=1378427 .
        -->
@@ -164,8 +164,8 @@
        flip="slide"
        position="bottomcenter topright"
        noautofocus="true">
-  <photonpanelmultiview id="appMenu-multiView" mainViewId="appMenu-mainView"
-                        viewCacheId="appMenu-viewCache">
+  <panelmultiview id="appMenu-multiView" mainViewId="appMenu-mainView"
+                  viewCacheId="appMenu-viewCache">
     <panelview id="appMenu-mainView" class="PanelUI-subView"
                descriptionheightworkaround="true">
       <vbox class="panel-subview-body">
@@ -667,7 +667,7 @@
                        label-checked="&hideBookmarksToolbar.label;"/>
       </vbox>
     </panelview>
-  </photonpanelmultiview>
+  </panelmultiview>
 </panel>
 
 <panel id="downloads-button-autohide-panel"

browser/components/customizableui/content/panelUI.js

@@ -399,7 +399,7 @@ const PanelUI = {
 
     this.ensureLibraryInitialized(viewNode);
 
-    let container = aAnchor.closest("panelmultiview,photonpanelmultiview");
+    let container = aAnchor.closest("panelmultiview");
     if (container) {
       container.showSubView(aViewId, aAnchor);
     } else if (!aAnchor.open) {
@@ -434,7 +434,7 @@ const PanelUI = {
       let listener = () => viewShown = true;
       viewNode.addEventListener("ViewShown", listener, {once: true});
 
-      let multiView = document.createElement("photonpanelmultiview");
+      let multiView = document.createElement("panelmultiview");
       multiView.setAttribute("id", "customizationui-widget-multiview");
       multiView.setAttribute("viewCacheId", "appMenu-viewCache");
       multiView.setAttribute("mainViewId", viewNode.id);

browser/components/customizableui/content/panelUI.xml

@@ -18,11 +18,14 @@
       <stylesheet src="chrome://browser/content/customizableui/panelUI.css"/>
     </resources>
     <content>
-      <xul:vbox anonid="viewContainer" class="panel-viewcontainer" xbl:inherits="panelopen,transitioning">
-        <xul:stack anonid="viewStack" xbl:inherits="transitioning" class="panel-viewstack">
+      <xul:box anonid="viewContainer" class="panel-viewcontainer" xbl:inherits="panelopen,transitioning">
+        <xul:box anonid="viewStack" xbl:inherits="transitioning" class="panel-viewstack">
           <children includes="panelview"/>
-        </xul:stack>
-      </xul:vbox>
+        </xul:box>
+      </xul:box>
+      <xul:box class="panel-viewcontainer offscreen">
+        <xul:box anonid="offscreenViewStack" class="panel-viewstack"/>
+      </xul:box>
     </content>
     <implementation>
       <constructor><![CDATA[
@@ -36,19 +39,6 @@
     </implementation>
   </binding>
 
-  <binding id="photonpanelmultiview" extends="chrome://browser/content/customizableui/panelUI.xml#panelmultiview">
-    <content>
-      <xul:box anonid="viewContainer" class="panel-viewcontainer" xbl:inherits="panelopen,transitioning">
-        <xul:box anonid="viewStack" xbl:inherits="transitioning" class="panel-viewstack">
-          <children includes="panelview"/>
-        </xul:box>
-      </xul:box>
-      <xul:box class="panel-viewcontainer offscreen">
-        <xul:box anonid="offscreenViewStack" class="panel-viewstack"/>
-      </xul:box>
-    </content>
-  </binding>
-
   <binding id="panelview">
     <content>
       <xul:box class="panel-header" anonid="header">

browser/components/customizableui/test/browser_overflow_use_subviews.js

@@ -39,7 +39,7 @@ add_task(async function check_developer_subview_in_overflow() {
   let subviewShownPromise = subviewShown(developerView);
   button.click();
   await subviewShownPromise;
-  let hasSubviews = !!kOverflowPanel.querySelector("photonpanelmultiview,panelmultiview");
+  let hasSubviews = !!kOverflowPanel.querySelector("panelmultiview");
   let expectedPanel = hasSubviews ? kOverflowPanel : document.getElementById("customizationui-widget-panel");
   is(developerView.closest("panel"), expectedPanel, "Should be inside the panel");
   expectedPanel.hidePopup();

browser/components/downloads/content/downloadsOverlay.xul

@@ -109,8 +109,8 @@
                   label="&cmd.clearDownloads.label;"/>
       </menupopup>
 
-      <photonpanelmultiview id="downloadsPanel-multiView"
-                            mainViewId="downloadsPanel-mainView">
+      <panelmultiview id="downloadsPanel-multiView"
+                      mainViewId="downloadsPanel-mainView">
 
         <panelview id="downloadsPanel-mainView">
           <vbox class="panel-view-body-unscrollable">
@@ -207,7 +207,7 @@
                          oncommand="BrowserDownloadsUI(); CustomizableUI.hidePanelForNode(this);"/>
         </panelview>
 
-      </photonpanelmultiview>
+      </panelmultiview>
 
     </panel>
   </popupset>

browser/themes/osx/customizableui/panelUI.css

@@ -16,7 +16,7 @@
   padding-inline-start: 14px;
 }
 
-photonpanelmultiview .toolbaritem-combined-buttons > spacer {
+panelmultiview .toolbaritem-combined-buttons > spacer {
   width: 42px; /* 18px toolbarbutton padding + 16px icon + 8px label padding start */
 }
 

browser/themes/shared/customizableui/panelUI.inc.css

@@ -116,6 +116,8 @@
 panelview {
   -moz-box-orient: vertical;
   -moz-box-flex: 1;
+  background: var(--arrowpanel-background);
+  padding: 0;
 }
 
 /* This section is to anchor all the drop down panels at the same height, shift the
@@ -182,6 +184,7 @@ panelview {
   overflow-y: auto;
   overflow-x: hidden;
   -moz-box-flex: 1;
+  padding: 6px 0;
 }
 
 .panel-view-body-unscrollable {
@@ -323,18 +326,11 @@ panelview:not([mainview]) .toolbarbutton-text,
   padding: 4px 0;
 }
 
-/* START photonpanelview adjustments */
-
 #appMenu-popup > .panel-arrowcontainer > .panel-arrowcontent,
 panel[photon] > .panel-arrowcontainer > .panel-arrowcontent {
   padding: 0;
 }
 
-photonpanelmultiview panelview {
-  background: var(--arrowpanel-background);
-  padding: 0;
-}
-
 #appMenu-popup panelview,
 #customizationui-widget-multiview panelview:not([extension]) {
   min-width: @menuPanelWidth@;
@@ -353,12 +349,6 @@ photonpanelmultiview panelview {
   min-width: calc(@menuPanelWidth@ + 32px);
 }
 
-photonpanelmultiview .panel-subview-body {
-  padding: 6px 0;
-}
-
-/* END photonpanelview adjustments */
-
 .cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent {
   padding-bottom: 0;
 }
@@ -437,7 +427,8 @@ toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton
   content: "";
   width: 16px;
   height: 16px;
-  margin-inline-end: 16.5px;
+  margin-inline-start: 10px;
+  margin-inline-end: 12px;
   display: -moz-box;
 }
 
@@ -880,25 +871,9 @@ panelview .toolbarbutton-1,
   color: inherit;
 }
 
-/* START photon adjustments */
-
 .subviewbutton[checked="true"] {
-  background: url(chrome://browser/skin/check.svg) center left 7px / 11px 11px no-repeat transparent;
-  fill: currentColor;
-}
-
-.subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
-  background-position: center right 7px;
-}
-
-photonpanelmultiview .subviewbutton[checked="true"] {
-  background: none;
   list-style-image: url(chrome://browser/skin/check.svg);
-}
-
-photonpanelmultiview .subviewbutton > .menu-iconic-left {
-  -moz-appearance: none;
-  margin-inline-end: 0;
+  fill: currentColor;
 }
 
 #appMenu-popup .toolbaritem-combined-buttons {
@@ -909,22 +884,22 @@ photonpanelmultiview .subviewbutton > .menu-iconic-left {
   margin-inline-end: 8px;
 }
 
-photonpanelmultiview .toolbaritem-combined-buttons > label {
+panelmultiview .toolbaritem-combined-buttons > label {
   -moz-box-flex: 1;
   font: menu;
   margin: 0;
 }
 
-photonpanelmultiview .toolbaritem-combined-buttons > spacer.before-label {
+panelmultiview .toolbaritem-combined-buttons > spacer.before-label {
   width: 36px; /* 12px toolbarbutton padding + 16px icon + 8px label padding start */
 }
 
-photonpanelmultiview .toolbaritem-combined-buttons > spacer.after-label {
+panelmultiview .toolbaritem-combined-buttons > spacer.after-label {
   -moz-box-flex: 1;
   width: 20px; /* a little bigger than the width of the scrollbar */
 }
 
-photonpanelmultiview .PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton {
+.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton {
   -moz-box-flex: 0;
   height: auto;
   margin-inline-start: 18px;
@@ -951,44 +926,33 @@ photonpanelmultiview .PanelUI-subView .toolbaritem-combined-buttons > .subviewbu
   margin-inline-start: 0;
 }
 
-photonpanelmultiview .PanelUI-subView .toolbaritem-combined-buttons >
-  .subviewbutton-iconic > .toolbarbutton-text,
-photonpanelmultiview .PanelUI-subView .toolbaritem-combined-buttons >
-  .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-icon {
+.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton-iconic > .toolbarbutton-text,
+.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-icon {
   display: none;
 }
 
 /* Using this selector, because this way the hover and active selectors will apply properly. */
-photonpanelmultiview .PanelUI-subView .toolbaritem-combined-buttons >
-  .subviewbutton:not(.subviewbutton-iconic) {
+.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton:not(.subviewbutton-iconic) {
   background-color: #f9f9f9;
   border: 1px solid #e1e1e1;
   border-radius: 10000px;
   padding: 1px 8px;
 }
 
-photonpanelmultiview .toolbaritem-combined-buttons > .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-text {
+.toolbaritem-combined-buttons > .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-text {
   font-size: 1em;
   padding-inline-start: 0;
 }
 
-photonpanelmultiview .addon-banner-item::after,
-photonpanelmultiview .panel-banner-item::after {
-  margin-inline-end: 12px;
-  margin-inline-start: 10px;
-}
-
-photonpanelmultiview .subview-subheader {
+.subview-subheader {
   color: GrayText;
 }
 
-photonpanelmultiview .subview-subheader,
-photonpanelmultiview .panel-subview-footer {
+.subview-subheader,
+.panel-subview-footer {
   font: menu;
 }
 
-/* END photon adjustments */
-
 panelview .toolbarbutton-1 {
   margin-top: 6px;
 }
@@ -1084,12 +1048,16 @@ menuitem.panel-subview-footer@menuStateActive@,
   padding: 0;
 }
 
-.PanelUI-subView menuseparator,
-.PanelUI-subView toolbarseparator {
+.PanelUI-subView menuseparator {
   margin-inline-start: -5px;
   margin-inline-end: -4px;
 }
 
+.PanelUI-subView toolbarseparator {
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+}
+
 .PanelUI-subView menuseparator.small-separator,
 .PanelUI-subView toolbarseparator.small-separator {
   margin-left: 5px;
@@ -1216,7 +1184,6 @@ toolbarpaletteitem[place=panel] > .toolbaritem-combined-buttons > toolbarbutton
   padding: 0;
 }
 
-.cui-widget-panelview,
 #widget-overflow-mainView .panel-subview-body {
   overflow-y: auto;
   overflow-x: hidden;
@@ -1269,7 +1236,7 @@ toolbarpaletteitem[place=panel] > .subviewbutton-nav::after {
 
 .subviewbutton > .menu-iconic-left {
   -moz-appearance: none;
-  margin-inline-end: 3px;
+  margin-inline-end: 0;
 }
 
 menuitem[checked="true"].subviewbutton > .menu-iconic-left {
@@ -1468,8 +1435,6 @@ menuitem[checked="true"].subviewbutton > .menu-iconic-left {
   }
 }
 
-/* START photon adjustments */
-
 .panel-header {
   align-items: center;
   border-bottom: 1px solid var(--panel-separator-color);
@@ -1489,7 +1454,7 @@ menuitem[checked="true"].subviewbutton > .menu-iconic-left {
   text-align: center;
 }
 
-photonpanelmultiview .PanelUI-subView .panel-header > .subviewbutton-back {
+.PanelUI-subView .panel-header > .subviewbutton-back {
   -moz-context-properties: fill;
   fill: var(--arrowpanel-color);
   list-style-image: url(chrome://browser/skin/arrow-left.svg);
@@ -1506,18 +1471,7 @@ photonpanelmultiview .PanelUI-subView .panel-header > .subviewbutton-back {
   display: none !important;
 }
 
-photonpanelmultiview .PanelUI-subView toolbarseparator {
-  margin-inline-start: 0;
-  margin-inline-end: 0;
-}
-
-/* This is explicitly overriding the overflow properties set above. */
-photonpanelmultiview .cui-widget-panelview {
-  overflow-x: visible;
-  overflow-y: visible;
-}
-
-photonpanelmultiview #panelMenu_pocket {
+#panelMenu_pocket {
   display: none;
 }
 
@@ -1572,5 +1526,3 @@ photonpanelmultiview #panelMenu_pocket {
 .subviewbutton.download:-moz-any([openLabel],[retryLabel]) > .action-button@buttonStateActive@ {
   background-color: var(--arrowpanel-dimmed-even-further);
 }
-
-/* END photon adjustments */