Bug 1363753 - Add an option for panelmultiviews to keep the width of the mainView synchronized across all other subviews. r?Gijs draft
authorMike de Boer <mdeboer@mozilla.com>
Mon, 15 May 2017 15:02:32 +0200
changeset 577817 e3fff02711a318f459c2e815d38149fac0b31fe5
parent 577554 e66dedabe582ba7b394aee4f89ed70fe389b3c46
child 628599 ce51eb6bacb14fa0f2de19ec97bfbeb14c912c62
push id58798
push usermdeboer@mozilla.com
push dateMon, 15 May 2017 13:05:49 +0000
reviewersGijs
bugs1363753
milestone55.0a1
Bug 1363753 - Add an option for panelmultiviews to keep the width of the mainView synchronized across all other subviews. r?Gijs MozReview-Commit-ID: ALgU1xWydWB
browser/components/customizableui/PanelMultiView.jsm
browser/themes/shared/customizableui/panelUI.inc.css
--- a/browser/components/customizableui/PanelMultiView.jsm
+++ b/browser/components/customizableui/PanelMultiView.jsm
@@ -377,20 +377,22 @@ this.PanelMultiView = class {
         }
       }
 
       let reverse = !!aPreviousView;
       let previousViewNode = aPreviousView || this._currentSubView;
       let playTransition = (!!previousViewNode && previousViewNode != viewNode);
 
       let dwu, previousRect;
-      if (playTransition) {
+      if (playTransition || this.panelViews) {
         dwu = this._dwu;
         previousRect = previousViewNode.__lastKnownBoundingRect =
           dwu.getBoundsWithoutFlushing(previousViewNode);
+        if (this.panelViews && !this._mainViewWidth)
+          this._mainViewWidth = previousRect.width;
       }
 
       // Emit the ViewShowing event so that the widget definition has a chance
       // to lazily populate the subview with things.
       let detail = {
         blockers: new Set(),
         addBlocker(aPromise) {
           this.blockers.add(aPromise);
@@ -405,16 +407,18 @@ this.PanelMultiView = class {
         let custWidget = CustomizableWidgets.find(widget => widget.viewId == viewNode.id);
         if (custWidget) {
           if (custWidget.onInit)
             custWidget.onInit(aAnchor);
           custWidget.onViewShowing({ target: aAnchor, detail });
         }
       }
       viewNode.setAttribute("current", true);
+      if (playTransition && this.panelViews)
+        viewNode.style.maxWidth = viewNode.style.minWidth = this._mainViewWidth + "px";
 
       let evt = new window.CustomEvent("ViewShowing", { bubbles: true, cancelable: true, detail });
       viewNode.dispatchEvent(evt);
 
       let cancel = evt.defaultPrevented;
       if (detail.blockers.size) {
         try {
           let results = await Promise.all(detail.blockers);
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -330,16 +330,17 @@ panelview:not([mainview]) .toolbarbutton
   padding: 0;
   margin: 0;
   border-radius: 0;
 }
 
 photonpanelmultiview panelview {
   background: var(--arrowpanel-background);
   padding: 6px 0;
+  min-width: @menuPanelWidth@;
 }
 
 photonpanelmultiview panelview[title] {
   padding-top: 0;
 }
 
 photonpanelmultiview .panel-subview-body {
   /*XXXmikedeboer this flex is unnecessary, so I unset it for our case. It might