Bug 1370580 - Part 1 - Ensure that the overflow rules are set the exact same way for the temporary panel as for the appMenu panel. r=Gijs

These rules are set explicitly to allow the two views to be displayed next to
each other briefly when the slide-in transition starts.
This patch also applies the last remaining photon styles to the temporary panel,
which is used by the new Library widget as well.

MozReview-Commit-ID: 45aYzVHwRYv

--HG--
extra : rebase_source : f142e3dbba0d70effe129dad43f139e494070d82

browser/components/customizableui/PanelMultiView.jsm

@@ -167,9 +167,6 @@ this.PanelMultiView = class {
   get _mainView() {
     return this._mainViewId ? this.document.getElementById(this._mainViewId) : null;
   }
-  get showingSubViewAsMainView() {
-    return this.node.getAttribute("mainViewIsSubView") == "true";
-  }
 
   get _transitioning() {
     return this.__transitioning;
@@ -471,7 +468,6 @@ this.PanelMultiView = class {
           custWidget.onViewShowing({ target: aAnchor, detail });
         }
       }
-      viewNode.setAttribute("current", true);
       if (this.panelViews && this._mainViewWidth)
         viewNode.style.maxWidth = viewNode.style.minWidth = this._mainViewWidth + "px";
 
@@ -494,6 +490,7 @@ this.PanelMultiView = class {
       }
 
       this._currentSubView = viewNode;
+      viewNode.setAttribute("current", true);
       if (this.panelViews) {
         this.node.setAttribute("viewtype", "subview");
         if (!playTransition)

browser/components/customizableui/content/panelUI.js

@@ -515,12 +515,14 @@ const PanelUI = {
       multiView.setAttribute("nosubviews", "true");
       multiView.setAttribute("viewCacheId", "appMenu-viewCache");
       if (gPhotonStructure) {
+        tempPanel.setAttribute("photon", true);
         multiView.setAttribute("mainViewId", viewNode.id);
         multiView.appendChild(viewNode);
       }
       tempPanel.appendChild(multiView);
-      multiView.setAttribute("mainViewIsSubView", "true");
-      multiView.setMainView(viewNode);
+      if (!gPhotonStructure) {
+        multiView.setMainView(viewNode);
+      }
       viewNode.classList.add("cui-widget-panelview");
 
       let viewShown = false;

browser/components/extensions/ext-browserAction.js

@@ -130,6 +130,7 @@ this.browserAction = class extends ExtensionAPI {
         let view = document.createElementNS(XUL_NS, "panelview");
         view.id = this.viewId;
         view.setAttribute("flex", "1");
+        view.setAttribute("extension", true);
 
         document.getElementById("PanelUI-multiView").appendChild(view);
         document.addEventListener("popupshowing", this);

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

@@ -261,7 +261,8 @@ photonpanelmultiview .panel-subview-header {
 }
 
 #appMenu-popup > .panel-arrowcontainer > .panel-arrowcontent,
-#PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent {
+#PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent,
+panel[photon] > .panel-arrowcontainer > .panel-arrowcontent {
   overflow: hidden;
 }
 
@@ -338,7 +339,8 @@ panelview:not([mainview]) .toolbarbutton-text,
 
 /* START photonpanelview adjustments */
 
-#appMenu-popup > .panel-arrowcontainer > .panel-arrowcontent {
+#appMenu-popup > .panel-arrowcontainer > .panel-arrowcontent,
+panel[photon] > .panel-arrowcontainer > .panel-arrowcontent {
   padding: 0;
   border-radius: 0;
 }
@@ -348,7 +350,8 @@ photonpanelmultiview panelview {
   padding: 6px 0;
 }
 
-#appMenu-popup panelview {
+#appMenu-popup panelview,
+#customizationui-widget-multiview panelview:not([extension]) {
   min-width: @menuPanelWidth@;
 }
 
@@ -2076,4 +2079,14 @@ photonpanelmultiview .PanelUI-subView toolbarseparator {
   margin-inline-end: 0;
 }
 
+photonpanelmultiview#customizationui-widget-multiview > .panel-viewcontainer {
+  overflow: hidden;
+}
+
+/* This is explicitly overriding the overflow properties set above. */
+photonpanelmultiview .cui-widget-panelview {
+  overflow-x: visible;
+  overflow-y: visible;
+}
+
 /* END photon adjustments */