Bug 1483354 - use promiseDocumentFlushed to execute tabstrip scrolling after creating a background tab, r=dao

Depends on D13675

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

--HG--
extra : moz-landing-system : lando

browser/base/content/tabbrowser.xml

@@ -934,39 +934,50 @@
           if (aTab.pinned || aTab.hidden || this.getAttribute("overflow") != "true")
             return;
 
-          var scrollRect = this.arrowScrollbox.scrollClientRect;
-          var tab = aTab.getBoundingClientRect();
+          this._lastTabToScrollIntoView = aTab;
+          if (!this._backgroundTabScrollPromise) {
+            this._backgroundTabScrollPromise = window.promiseDocumentFlushed(() => {
+              let lastTabRect = this._lastTabToScrollIntoView.getBoundingClientRect();
+              let selectedTab = this.selectedItem;
+              if (selectedTab.pinned) {
+                selectedTab = null;
+              } else {
+                selectedTab = selectedTab.getBoundingClientRect();
+                selectedTab = {left: selectedTab.left, right: selectedTab.right};
+              }
+              delete this._lastTabToScrollIntoView;
+              delete this._backgroundTabScrollPromise;
+              return [
+                this.arrowScrollbox.scrollClientRect,
+                {left: lastTabRect.left, right: lastTabRect.right},
+                selectedTab,
+              ];
+            }).then(([scrollRect, tab, selected]) => {
+              // Is the new tab already completely visible?
+              if (scrollRect.left <= tab.left && tab.right <= scrollRect.right)
+                return;
 
-          // DOMRect left/right properties are immutable.
-          tab = {left: tab.left, right: tab.right};
+              if (this.arrowScrollbox.smoothScroll) {
+                // Can we make both the new tab and the selected tab completely visible?
+                if (!selected ||
+                    Math.max(tab.right - selected.left, selected.right - tab.left) <=
+                      scrollRect.width) {
+                  this.arrowScrollbox.ensureElementIsVisible(aTab);
+                  return;
+                }
 
-          // Is the new tab already completely visible?
-          if (scrollRect.left <= tab.left && tab.right <= scrollRect.right)
-            return;
+                this.arrowScrollbox.scrollByPixels(RTL_UI ?
+                                                     selected.right - scrollRect.right :
+                                                     selected.left - scrollRect.left);
+              }
 
-          if (this.arrowScrollbox.smoothScroll) {
-            let selectedTab = this.selectedItem;
-            let selected = !selectedTab.pinned &&
-                           selectedTab.getBoundingClientRect();
-
-            // Can we make both the new tab and the selected tab completely visible?
-            if (!selected ||
-                Math.max(tab.right - selected.left, selected.right - tab.left) <=
-                  scrollRect.width) {
-              this.arrowScrollbox.ensureElementIsVisible(aTab);
-              return;
-            }
-
-            this.arrowScrollbox.scrollByPixels(RTL_UI ?
-                                                 selected.right - scrollRect.right :
-                                                 selected.left - scrollRect.left);
-          }
-
-          if (!this._animateElement.hasAttribute("highlight")) {
-            this._animateElement.setAttribute("highlight", "true");
-            setTimeout(function(ele) {
-              ele.removeAttribute("highlight");
-            }, 150, this._animateElement);
+              if (!this._animateElement.hasAttribute("highlight")) {
+                this._animateElement.setAttribute("highlight", "true");
+                setTimeout(function(ele) {
+                  ele.removeAttribute("highlight");
+                }, 150, this._animateElement);
+              }
+            });
           }
         ]]></body>
       </method>