Backed out changeset 8a1615be322c (bug 1369095) for failing browser-chrome's browser_page_action_menu.js with "page-action-multiView" == "page-action-sendToDeviceView". r=backout

browser/components/customizableui/PanelMultiView.jsm

@@ -252,8 +252,6 @@ this.PanelMultiView = class {
       document.getAnonymousElementByAttribute(this.node, "anonid", "subViews");
     this._viewStack =
       document.getAnonymousElementByAttribute(this.node, "anonid", "viewStack");
-    this._offscreenViewStack =
-      document.getAnonymousElementByAttribute(this.node, "anonid", "offscreenViewStack");
 
     XPCOMUtils.defineLazyGetter(this, "_panelViewCache", () => {
       let viewCacheId = this.node.getAttribute("viewCacheId");
@@ -445,7 +443,6 @@ this.PanelMultiView = class {
           // of the main view, i.e. whilst the panel is shown and/ or visible.
           if (!this._mainViewHeight) {
             this._mainViewHeight = previousRect.height;
-            this._viewContainer.style.minHeight = this._mainViewHeight + "px";
           }
         }
       }
@@ -531,106 +528,114 @@ this.PanelMultiView = class {
 
         if (aAnchor)
           aAnchor.setAttribute("open", true);
-
-        // Set the viewContainer dimensions to make sure only the current view
-        // is visible.
         this._viewContainer.style.height = Math.max(previousRect.height, this._mainViewHeight) + "px";
         this._viewContainer.style.width = previousRect.width + "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);
 
-        this._viewBoundsOffscreen(viewNode, viewRect => {
+        this._transitioning = true;
-          this._transitioning = true;
+        if (this._autoResizeWorkaroundTimer)
-          if (this._autoResizeWorkaroundTimer)
+          window.clearTimeout(this._autoResizeWorkaroundTimer);
-            window.clearTimeout(this._autoResizeWorkaroundTimer);
+        this._viewContainer.setAttribute("transition-reverse", reverse);
-          this._viewContainer.setAttribute("transition-reverse", reverse);
+        let nodeToAnimate = reverse ? previousViewNode : viewNode;
-          let nodeToAnimate = reverse ? previousViewNode : viewNode;
 
-          if (!reverse) {
+        if (!reverse) {
-            // We set the margin here to make sure the view is positioned next
+          // We set the margin here to make sure the view is positioned next
-            // to the view that is currently visible. The animation is taken
+          // to the view that is currently visible. The animation is taken
-            // care of by transitioning the `transform: translateX()` property
+          // care of by transitioning the `transform: translateX()` property
-            // instead.
+          // instead.
-            // Once the transition finished, we clean both properties up.
+          // Once the transition finished, we clean both properties up.
-            nodeToAnimate.style.marginInlineStart = previousRect.width + "px";
+          nodeToAnimate.style.marginInlineStart = previousRect.width + "px";
+        }
+
+        // Set the transition style and listen for its end to clean up and
+        // make sure the box sizing becomes dynamic again.
+        // Somehow, putting these properties in PanelUI.css doesn't work for
+        // newly shown nodes in a XUL parent node.
+        nodeToAnimate.style.transition = "transform ease-" + (reverse ? "in" : "out") +
+          " var(--panelui-subview-transition-duration)";
+        nodeToAnimate.style.willChange = "transform";
+        nodeToAnimate.style.borderInlineStart = "1px solid var(--panel-separator-color)";
+
+        // Wait until after the first paint to ensure setting 'current=true'
+        // has taken full effect; once both views are visible, we want to
+        // correctly measure rects using `dwu.getBoundsWithoutFlushing`.
+        window.addEventListener("MozAfterPaint", () => {
+          let viewRect = viewNode.__lastKnownBoundingRect;
+          if (!viewRect) {
+            viewRect = dwu.getBoundsWithoutFlushing(viewNode);
+            if (!reverse) {
+              // 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;
+              }, this._viewVerticalPadding);
+            }
           }
 
-          // Set the transition style and listen for its end to clean up and
+          // Set the viewContainer dimensions to make sure only the current view
-          // make sure the box sizing becomes dynamic again.
+          // is visible.
-          // Somehow, putting these properties in PanelUI.css doesn't work for
+          this._viewContainer.style.height = Math.max(viewRect.height, this._mainViewHeight) + "px";
-          // newly shown nodes in a XUL parent node.
+          this._viewContainer.style.width = viewRect.width + "px";
-          nodeToAnimate.style.transition = "transform ease-" + (reverse ? "in" : "out") +
-            " var(--panelui-subview-transition-duration)";
-          nodeToAnimate.style.willChange = "transform";
-          nodeToAnimate.style.borderInlineStart = "1px solid var(--panel-separator-color)";
 
-          // Wait until after the first paint to ensure setting 'current=true'
+          // The 'magic' part: build up the amount of pixels to move right or left.
-          // has taken full effect; once both views are visible, we want to
+          let moveToLeft = (this._dir == "rtl" && !reverse) || (this._dir == "ltr" && reverse);
-          // correctly measure rects using `dwu.getBoundsWithoutFlushing`.
+          let movementX = reverse ? viewRect.width : previousRect.width;
-          window.addEventListener("MozAfterPaint", () => {
+          let moveX = (moveToLeft ? "" : "-") + movementX;
-            // Now set the viewContainer dimensions to that of the new view, which
+          nodeToAnimate.style.transform = "translateX(" + moveX + "px)";
-            // kicks of the height animation.
+          // We're setting the width property to prevent flickering during the
-            this._viewContainer.style.height = Math.max(viewRect.height, this._mainViewHeight) + "px";
+          // sliding animation with smaller views.
-            this._viewContainer.style.width = viewRect.width + "px";
+          nodeToAnimate.style.width = viewRect.width + "px";
-            this._panel.removeAttribute("width");
-            this._panel.removeAttribute("height");
 
-            // The 'magic' part: build up the amount of pixels to move right or left.
+          let listener;
-            let moveToLeft = (this._dir == "rtl" && !reverse) || (this._dir == "ltr" && reverse);
+          this._viewContainer.addEventListener("transitionend", listener = ev => {
-            let movementX = reverse ? viewRect.width : previousRect.width;
+            // It's quite common that `height` on the view container doesn't need
-            let moveX = (moveToLeft ? "" : "-") + movementX;
+            // to transition, so we make sure to do all the work on the transform
-            nodeToAnimate.style.transform = "translateX(" + moveX + "px)";
+            // transition-end, because that is guaranteed to happen.
-            // We're setting the width property to prevent flickering during the
+            if (ev.target != nodeToAnimate || ev.propertyName != "transform")
-            // sliding animation with smaller views.
+              return;
-            nodeToAnimate.style.width = viewRect.width + "px";
 
-            let listener;
+            this._viewContainer.removeEventListener("transitionend", listener);
-            this._viewContainer.addEventListener("transitionend", listener = ev => {
+            onTransitionEnd();
-              // It's quite common that `height` on the view container doesn't need
+            this._transitioning = false;
-              // to transition, so we make sure to do all the work on the transform
+            this._resetKeyNavigation(previousViewNode);
-              // transition-end, because that is guaranteed to happen.
-              if (ev.target != nodeToAnimate || ev.propertyName != "transform")
-                return;
 
-              this._viewContainer.removeEventListener("transitionend", listener);
+            // Myeah, panel layout auto-resizing is a funky thing. We'll wait
-              onTransitionEnd();
+            // another few milliseconds to remove the width and height 'fixtures',
-              this._transitioning = false;
+            // to be sure we don't flicker annoyingly.
-              this._resetKeyNavigation(previousViewNode);
+            // NB: HACK! Bug 1363756 is there to fix this.
-
+            this._autoResizeWorkaroundTimer = window.setTimeout(() => {
-              // Myeah, panel layout auto-resizing is a funky thing. We'll wait
+              // Only remove the height when the view is larger than the main
-              // another few milliseconds to remove the width and height 'fixtures',
+              // view, otherwise it'll snap back to its own height.
-              // to be sure we don't flicker annoyingly.
+              if (viewNode == this._mainView || viewRect.height > this._mainViewHeight)
-              // NB: HACK! Bug 1363756 is there to fix this.
-              this._autoResizeWorkaroundTimer = window.setTimeout(() => {
                 this._viewContainer.style.removeProperty("height");
-                this._viewContainer.style.removeProperty("width");
+              this._viewContainer.style.removeProperty("width");
-              }, 500);
+            }, 500);
 
-              // Take another breather, just like before, to wait for the 'current'
+            // Take another breather, just like before, to wait for the 'current'
-              // attribute removal to take effect. This prevents a flicker.
+            // attribute removal to take effect. This prevents a flicker.
-              // The cleanup we do doesn't affect the display anymore, so we're not
+            // The cleanup we do doesn't affect the display anymore, so we're not
-              // too fussed about the timing here.
+            // too fussed about the timing here.
-              window.addEventListener("MozAfterPaint", () => {
+            window.addEventListener("MozAfterPaint", () => {
-                nodeToAnimate.style.removeProperty("border-inline-start");
+              nodeToAnimate.style.removeProperty("border-inline-start");
-                nodeToAnimate.style.removeProperty("transition");
+              nodeToAnimate.style.removeProperty("transition");
-                nodeToAnimate.style.removeProperty("transform");
+              nodeToAnimate.style.removeProperty("transform");
-                nodeToAnimate.style.removeProperty("width");
+              nodeToAnimate.style.removeProperty("width");
 
-                if (!reverse)
+              if (!reverse)
-                  viewNode.style.removeProperty("margin-inline-start");
+                viewNode.style.removeProperty("margin-inline-start");
-                if (aAnchor)
+              if (aAnchor)
-                  aAnchor.removeAttribute("open");
+                aAnchor.removeAttribute("open");
 
-                this._viewContainer.removeAttribute("transition-reverse");
+              this._viewContainer.removeAttribute("transition-reverse");
 
-                evt = new window.CustomEvent("ViewShown", { bubbles: true, cancelable: false });
+              evt = new window.CustomEvent("ViewShown", { bubbles: true, cancelable: false });
-                viewNode.dispatchEvent(evt);
+              viewNode.dispatchEvent(evt);
-              }, { once: true });
+            }, { once: true });
-            });
+          });
-          }, { once: true });
+        }, { once: true });
-        });
       } else if (!this.panelViews) {
         this._transitionHeight(() => {
           viewNode.setAttribute("current", true);
@@ -644,36 +649,6 @@ this.PanelMultiView = class {
     })().catch(e => Cu.reportError(e));
   }
 
-  /**
-   * Calculate the correct bounds of a panelview node offscreen to minimize the
-   * amount of paint flashing and keep the stack vs panel layouts from interfering.
-   *
-   * @param {panelview} viewNode Node to measure the bounds of.
-   * @param {Function}  callback Called when we got the measurements in and pass
-   *                             them on as its first argument.
-   */
-  _viewBoundsOffscreen(viewNode, callback) {
-    if (viewNode.__lastKnownBoundingRect) {
-      callback(viewNode.__lastKnownBoundingRect);
-      return;
-    }
-
-    let oldSibling = viewNode.nextSibling || null;
-    this._offscreenViewStack.appendChild(viewNode);
-
-    this.window.addEventListener("MozAfterPaint", () => {
-      let viewRect = this._dwu.getBoundsWithoutFlushing(viewNode);
-
-      try {
-        this._viewStack.insertBefore(viewNode, oldSibling);
-      } catch (ex) {
-        this._viewStack.appendChild(viewNode);
-      }
-
-      callback(viewRect);
-    }, { once: true });
-  }
-
   /**
    * Applies the height transition for which <panelmultiview> is designed.
    *

browser/components/customizableui/content/panelUI.css

@@ -48,16 +48,4 @@ photonpanelmultiview[transitioning] {
   pointer-events: none;
 }
 
-.panel-viewcontainer.offscreen {
-  position: absolute;
-  top: 100000px;
-  left: 100000px;
-}
-
-.panel-viewcontainer.offscreen,
-.panel-viewcontainer.offscreen > .panel-viewstack {
-  margin: 0;
-  padding: 0;
-}
-
 /* END photon adjustments */

browser/components/customizableui/content/panelUI.xml

@@ -58,9 +58,6 @@
           <children includes="panelview"/>
         </xul:stack>
       </xul:box>
-      <xul:box class="panel-viewcontainer offscreen">
-        <xul:box anonid="offscreenViewStack" class="panel-viewstack"/>
-      </xul:box>
     </content>
   </binding>
 

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

@@ -353,6 +353,12 @@ photonpanelmultiview panelview[title] {
   padding-top: 0;
 }
 
+photonpanelmultiview .panel-subview-body {
+  /*XXXmikedeboer this flex is unnecessary, so I unset it for our case. It might
+                  break other panels, though, so I refrain from removing it above. */
+  -moz-box-flex: unset;
+}
+
 /* END photonpanelview adjustments */
 
 .cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent {