Bug 1424264 - Part 3 - Use the minimum height from the older transitioning view. r=Gijs draft
authorPaolo Amadini <paolo.mozmail@amadzone.org>
Fri, 26 Jan 2018 14:20:10 +0000
changeset 747616 cc59c5af53807a8ed13d50ffeb2c12de002843ed
parent 747615 8d989e9ce8fd973fb31d57d7085a1c8c2ce397d6
push id96955
push userpaolo.mozmail@amadzone.org
push dateFri, 26 Jan 2018 14:22:08 +0000
reviewersGijs
bugs1424264
milestone60.0a1
Bug 1424264 - Part 3 - Use the minimum height from the older transitioning view. r=Gijs MozReview-Commit-ID: 28XQlUoLLCr
browser/components/customizableui/PanelMultiView.jsm
--- a/browser/components/customizableui/PanelMultiView.jsm
+++ b/browser/components/customizableui/PanelMultiView.jsm
@@ -196,17 +196,16 @@ this.PanelMultiView = class extends this
     return this._currentShowPromise || Promise.resolve();
   }
 
   connect() {
     this.knownViews = new Set(Array.from(
       this.node.getElementsByTagName("panelview"),
       node => PanelView.forNode(node)));
     this.openViews = [];
-    this._mainViewHeight = 0;
     this.__transitioning = false;
     this.showingSubView = false;
 
     const {document, window} = this;
 
     this._viewContainer =
       document.getAnonymousElementByAttribute(this.node, "anonid", "viewContainer");
     this._viewStack =
@@ -359,20 +358,16 @@ this.PanelMultiView = class extends this
 
       let previousViewNode = aPreviousView || this._currentSubView;
       // If the panelview to show is the same as the previous one, the 'ViewShowing'
       // event has already been dispatched. Don't do it twice.
       let showingSameView = viewNode == previousViewNode;
 
       let prevPanelView = PanelView.forNode(previousViewNode);
       prevPanelView.captureKnownSize();
-      if (!this._mainViewHeight) {
-        this._mainViewHeight = prevPanelView.knownHeight;
-        this._viewContainer.style.minHeight = this._mainViewHeight + "px";
-      }
 
       this._viewShowing = viewNode;
 
       let reverse = !!aPreviousView;
       if (!reverse) {
         // We are opening a new view, either because we are navigating forward
         // or because we are showing the main view. Some properties of the view
         // may vary between panels, so we make sure to update them every time.
@@ -470,17 +465,19 @@ this.PanelMultiView = class extends this
       anchor.setAttribute("open", "true");
 
     // Since we're going to show two subview at the same time, don't abuse the
     // 'current' attribute, since it's needed for other state-keeping, but use
     // a separate 'in-transition' attribute instead.
     previousViewNode.setAttribute("in-transition", true);
     // Set the viewContainer dimensions to make sure only the current view is
     // visible.
-    this._viewContainer.style.height = Math.max(prevPanelView.knownHeight, this._mainViewHeight) + "px";
+    let olderView = reverse ? nextPanelView : prevPanelView;
+    this._viewContainer.style.minHeight = olderView.knownHeight + "px";
+    this._viewContainer.style.height = prevPanelView.knownHeight + "px";
     this._viewContainer.style.width = prevPanelView.knownWidth + "px";
     // Lock the dimensions of the window that hosts the popup panel.
     let rect = this._panel.popupBoxObject.getOuterScreenRect();
     this._panel.setAttribute("width", rect.width);
     this._panel.setAttribute("height", rect.height);
 
     let viewRect;
     if (reverse) {
@@ -497,18 +494,17 @@ this.PanelMultiView = class extends this
       viewRect = Object.assign({height, width}, viewNode.customRectGetter());
       let header = viewNode.firstChild;
       if (header && header.classList.contains("panel-header")) {
         viewRect.height += this._dwu.getBoundsWithoutFlushing(header).height;
       }
       viewNode.setAttribute("in-transition", true);
     } else {
       let oldSibling = viewNode.nextSibling || null;
-      this._offscreenViewStack.style.minHeight =
-        this._viewContainer.style.height;
+      this._offscreenViewStack.style.minHeight = olderView.knownHeight + "px";
       this._offscreenViewStack.appendChild(viewNode);
       viewNode.setAttribute("in-transition", true);
 
       // Now that the subview is visible, we can check the height of the
       // description elements it contains.
       nextPanelView.descriptionHeightWorkaround();
 
       viewRect = await BrowserUtils.promiseLayoutFlushed(this.document, "layout", () => {
@@ -545,17 +541,17 @@ this.PanelMultiView = class extends this
     this._viewStack.style.transition = "transform var(--animation-easing-function)" +
       " var(--panelui-subview-transition-duration)";
     this._viewStack.style.willChange = "transform";
     // Use an outline instead of a border so that the size is not affected.
     deepestNode.style.outline = "1px solid var(--panel-separator-color)";
 
     // Now set the viewContainer dimensions to that of the new view, which
     // kicks of the height animation.
-    this._viewContainer.style.height = Math.max(viewRect.height, this._mainViewHeight) + "px";
+    this._viewContainer.style.height = viewRect.height + "px";
     this._viewContainer.style.width = viewRect.width + "px";
     this._panel.removeAttribute("width");
     this._panel.removeAttribute("height");
     // We're setting the width property to prevent flickering during the
     // sliding animation with smaller views.
     viewNode.style.width = viewRect.width + "px";
 
     await BrowserUtils.promiseLayoutFlushed(document, "layout", () => {});
@@ -755,21 +751,20 @@ this.PanelMultiView = class extends this
         this.showMainView();
         this.window.removeEventListener("keydown", this);
         this._panel.removeEventListener("mousemove", this);
         this.openViews.forEach(panelView => panelView.clearNavigation());
         this.openViews = [];
 
         // Clear the main view size caches. The dimensions could be different
         // when the popup is opened again, e.g. through touch mode sizing.
-        this._mainViewHeight = 0;
         this._viewContainer.style.removeProperty("min-height");
         this._viewStack.style.removeProperty("max-height");
-        this._viewContainer.style.removeProperty("min-width");
-        this._viewContainer.style.removeProperty("max-width");
+        this._viewContainer.style.removeProperty("width");
+        this._viewContainer.style.removeProperty("height");
 
         this.dispatchCustomEvent("PanelMultiViewHidden");
         break;
       }
     }
   }
 };
 
@@ -867,16 +862,19 @@ this.PanelView = class extends this.Asso
   dispatchCustomEvent(...args) {
     CustomizableUI.ensureSubviewListeners(this.node);
     return super.dispatchCustomEvent(...args);
   }
 
   /**
    * Populates the "knownWidth" and "knownHeight" properties with the current
    * dimensions of the view. These may be zero if the view is invisible.
+   *
+   * These values are relevant during transitions and are retained for backwards
+   * navigation if the view is still open but is invisible.
    */
   captureKnownSize() {
     let rect = this._dwu.getBoundsWithoutFlushing(this.node);
     this.knownWidth = rect.width;
     this.knownHeight = rect.height;
   }
 
   /**