Bug 1919041 - Handle interrupting sidebar animation. r=sidebar-reviewers,kcochrane,sclements

Differential Revision: https://phabricator.services.mozilla.com/D222297

browser/components/sidebar/browser-sidebar.js

@@ -221,6 +221,7 @@ var SidebarController = {
   _localesObserverAdded: false,
   _mainResizeObserverAdded: false,
   _mainResizeObserver: null,
+  _ongoingAnimations: [],
 
   /**
    * @type {MutationObserver | null}
@@ -858,10 +859,24 @@ var SidebarController = {
       this._splitter,
       tabbox,
     ];
+    let resetElements = () => {
+      for (let el of animatingElements) {
+        el.style.minWidth =
+          el.style.maxWidth =
+          el.style.marginLeft =
+          el.style.marginRight =
+            "";
+      }
+    };
+    if (this._ongoingAnimations.length) {
+      this._ongoingAnimations.forEach(a => a.cancel());
+      this._ongoingAnimations = [];
+      resetElements();
+    }
     let getRects = () => {
       return animatingElements.map(e => e.getBoundingClientRect());
     };
-    let fromRects = await window.promiseDocumentFlushed(getRects);
+    let fromRects = getRects();
 
     this.toggleExpanded();
 
@@ -932,13 +947,11 @@ var SidebarController = {
         )
       );
     }
+    this._ongoingAnimations = animations;
     await Promise.allSettled(animations.map(a => a.finished));
-    for (let el of animatingElements) {
-      el.style.minWidth =
-        el.style.maxWidth =
-        el.style.marginLeft =
-        el.style.marginRight =
-          "";
+    if (this._ongoingAnimations === animations) {
+      this._ongoingAnimations = [];
+      resetElements();
     }
   },