Bug 1367970 - when switching panels quickly, the auto-resize workaround can cause wonky animations. Clear the timeout when a new animation starts. r?Gijs draft
authorMike de Boer <mdeboer@mozilla.com>
Tue, 06 Jun 2017 18:18:42 +0200
changeset 589693 3069fea9efcab69d1cc0c494fa1bf6f72447a809
parent 589519 58ce95bc58ce4ba200413c8bed87786dccf3d105
child 631968 9ba78165c1fdaba2354405aee7846c99f2935030
push id62465
push usermdeboer@mozilla.com
push dateTue, 06 Jun 2017 16:22:35 +0000
reviewersGijs
bugs1367970
milestone55.0a1
Bug 1367970 - when switching panels quickly, the auto-resize workaround can cause wonky animations. Clear the timeout when a new animation starts. r?Gijs MozReview-Commit-ID: CpQFjDDm2BR
browser/components/customizableui/PanelMultiView.jsm
--- a/browser/components/customizableui/PanelMultiView.jsm
+++ b/browser/components/customizableui/PanelMultiView.jsm
@@ -527,16 +527,18 @@ this.PanelMultiView = class {
         }
 
         if (aAnchor)
           aAnchor.setAttribute("open", true);
         this._viewContainer.style.height = Math.max(previousRect.height, this._mainViewHeight) + "px";
         this._viewContainer.style.width = previousRect.width + "px";
 
         this._transitioning = true;
+        if (this._autoResizeWorkaroundTimer)
+          window.clearTimeout(this._autoResizeWorkaroundTimer);
         this._viewContainer.setAttribute("transition-reverse", reverse);
         let nodeToAnimate = reverse ? previousViewNode : viewNode;
 
         if (!reverse) {
           // We set the margin here to make sure the view is positioned next
           // to the view that is currently visible. The animation is taken
           // care of by transitioning the `transform: translateX()` property
           // instead.
@@ -599,17 +601,17 @@ this.PanelMultiView = class {
             onTransitionEnd();
             this._transitioning = false;
             this._resetKeyNavigation(previousViewNode);
 
             // Myeah, panel layout auto-resizing is a funky thing. We'll wait
             // another few milliseconds to remove the width and height 'fixtures',
             // to be sure we don't flicker annoyingly.
             // NB: HACK! Bug 1363756 is there to fix this.
-            window.setTimeout(() => {
+            this._autoResizeWorkaroundTimer = window.setTimeout(() => {
               // Only remove the height when the view is larger than the main
               // view, otherwise it'll snap back to its own height.
               if (viewNode == this._mainView || viewRect.height > this._mainViewHeight)
                 this._viewContainer.style.removeProperty("height");
               this._viewContainer.style.removeProperty("width");
             }, 500);
 
             // Take another breather, just like before, to wait for the 'current'