Bug 1364672 - take the padding of the views into account when calculating the height of each sub view. r?Gijs draft
authorMike de Boer <mdeboer@mozilla.com>
Wed, 17 May 2017 18:05:58 +0200
changeset 579664 949b29ba46cdccb21bfb293c5d7447e8ea4ebec3
parent 579661 5b0e36a0555d8414fb4c2c9b650447498a7ef9f3
child 579665 b916dad07ba3f9a8a5d4838a5fb8bb43704aca3b
push id59327
push usermdeboer@mozilla.com
push dateWed, 17 May 2017 16:09:54 +0000
reviewersGijs
bugs1364672
milestone55.0a1
Bug 1364672 - take the padding of the views into account when calculating the height of each sub view. r?Gijs It's ok to cache the padding size of the main view and re-use it in this case, because the padding is maintained for each view consistently. The performance characteristics are therefore maintained. MozReview-Commit-ID: GYT59NIiBET
browser/components/customizableui/PanelMultiView.jsm
--- a/browser/components/customizableui/PanelMultiView.jsm
+++ b/browser/components/customizableui/PanelMultiView.jsm
@@ -206,18 +206,20 @@ this.PanelMultiView = class {
     if (this._panelViews)
       return this._panelViews;
 
     this._panelViews = new SlidingPanelViews();
     this._panelViews.push(...this.node.getElementsByTagName("panelview"));
     return this._panelViews;
   }
   get _dwu() {
-    return this.window.QueryInterface(Ci.nsIInterfaceRequestor)
-                      .getInterface(Ci.nsIDOMWindowUtils);
+    if (this.__dwu)
+      return this.__dwu;
+    return this.__dwu = this.window.QueryInterface(Ci.nsIInterfaceRequestor)
+                                   .getInterface(Ci.nsIDOMWindowUtils);
   }
   get _currentSubView() {
     return this.panelViews ? this.panelViews.currentView : this.__currentSubView;
   }
   set _currentSubView(panel) {
     if (this.panelViews)
       this.panelViews.currentView = panel;
     else
@@ -303,17 +305,17 @@ this.PanelMultiView = class {
       this._subViews.removeEventListener("overflow", this);
       this._mainViewContainer.removeEventListener("overflow", this);
       this._clickCapturer.removeEventListener("click", this);
     }
     this._panel.removeEventListener("popupshowing", this);
     this._panel.removeEventListener("popupshown", this);
     this._panel.removeEventListener("popuphidden", this);
     this.node = this._clickCapturer = this._viewContainer = this._mainViewContainer =
-      this._subViews = this._viewStack = null;
+      this._subViews = this._viewStack = this.__dwu = null;
   }
 
   goBack(target) {
     let [current, previous] = this.panelViews.back();
     return this.showSubView(current, target, previous);
   }
 
   setMainView(aNewMainView) {
@@ -381,18 +383,22 @@ this.PanelMultiView = class {
       let previousViewNode = aPreviousView || this._currentSubView;
       let playTransition = (!!previousViewNode && previousViewNode != viewNode);
 
       let dwu, previousRect;
       if (playTransition || this.panelViews) {
         dwu = this._dwu;
         previousRect = previousViewNode.__lastKnownBoundingRect =
           dwu.getBoundsWithoutFlushing(previousViewNode);
-        if (this.panelViews && !this._mainViewWidth)
+        if (this.panelViews && !this._mainViewWidth) {
           this._mainViewWidth = previousRect.width;
+          let top = dwu.getBoundsWithoutFlushing(previousViewNode.firstChild).top;
+          let bottom = dwu.getBoundsWithoutFlushing(previousViewNode.lastChild).bottom;
+          this._viewVerticalPadding = previousRect.height - (bottom - top);
+        }
       }
 
       // 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);
@@ -503,17 +509,17 @@ this.PanelMultiView = class {
               // When showing two nodes at the same time (one partly out of view,
               // but that doesn't seem to make a difference in this case) inside
               // a XUL node container, the flexible box layout on the vertical
               // axis gets confused. I.e. it lies.
               // So what we need to resort to here is count the height of each
               // individual child element of the view.
               viewRect.height = [viewNode.header, ...viewNode.children].reduce((acc, node) => {
                 return acc + dwu.getBoundsWithoutFlushing(node).height;
-              }, 0);
+              }, this._viewVerticalPadding);
             }
           }
 
           // Set the viewContainer dimensions to make sure only the current view
           // is visible.
           this._viewContainer.style.height = viewRect.height + "px";
           this._viewContainer.style.width = viewRect.width + "px";