Bug 1441154 - Start the PanelMultiView sliding transition together with the height transition. r=Gijs

This fixes an issue where the two transition are not simultaneous.

MozReview-Commit-ID: 8JKunQV3MDI

--HG--
extra : rebase_source : f272ab4c60de4361b44e71403806cd84436280db

browser/components/customizableui/PanelMultiView.jsm

@@ -928,6 +928,10 @@ var PanelMultiView = class extends this.AssociatedToNode {
     // Use an outline instead of a border so that the size is not affected.
     deepestNode.style.outline = "1px solid var(--panel-separator-color)";
 
+    // Now that all the elements are in place for the start of the transition,
+    // give the layout code a chance to set the initial values.
+    await window.promiseDocumentFlushed(() => {});
+
     // Now set the viewContainer dimensions to that of the new view, which
     // kicks of the height animation.
     this._viewContainer.style.height = viewRect.height + "px";
@@ -938,8 +942,6 @@ var PanelMultiView = class extends this.AssociatedToNode {
     // sliding animation with smaller views.
     viewNode.style.width = viewRect.width + "px";
 
-    await window.promiseDocumentFlushed(() => {});
-
     // Kick off the transition!
     details.phase = TRANSITION_PHASES.TRANSITION;
     this._viewStack.style.transform = "translateX(" + (moveToLeft ? "" : "-") + deltaX + "px)";