Bug 1354789 - Cache layout information needed in _positionPinnedTabs. r=florian draft
authorDão Gottwald <dao@mozilla.com>
Mon, 10 Apr 2017 15:19:52 +0200
changeset 559723 a57b249f57be9043a96b5448907f71eea832d3b1
parent 559154 2a3ecdb7d1ea814708021fee6735b3aedcf03e48
child 623476 b024eb90715a5ee106347086e72431099df89420
push id53180
push userdgottwald@mozilla.com
push dateMon, 10 Apr 2017 13:20:13 +0000
reviewersflorian
bugs1354789
milestone55.0a1
Bug 1354789 - Cache layout information needed in _positionPinnedTabs. r=florian MozReview-Commit-ID: 7RmuvvsXFTy
browser/base/content/browser-compacttheme.js
browser/base/content/tabbrowser.xml
--- a/browser/base/content/browser-compacttheme.js
+++ b/browser/base/content/browser-compacttheme.js
@@ -62,17 +62,17 @@ var CompactTheme = {
       this.refreshBrowserDisplay();
     }
   },
 
   refreshBrowserDisplay() {
     // Don't touch things on the browser if gBrowserInit.onLoad hasn't
     // yet fired.
     if (this.initialized) {
-      gBrowser.tabContainer._positionPinnedTabs();
+      gBrowser.tabContainer.themeLayoutChanged();
     }
   },
 
   _toggleStyleSheet(enabled) {
     let wasEnabled = this.isStyleSheetEnabled;
     if (enabled) {
       // The stylesheet may not have been created yet if it wasn't
       // needed on initial load.  Make it now.
--- a/browser/base/content/tabbrowser.xml
+++ b/browser/base/content/tabbrowser.xml
@@ -6058,41 +6058,56 @@
 
           if (this.hasAttribute("using-closing-tabs-spacer")) {
             this.removeAttribute("using-closing-tabs-spacer");
             this._closingTabsSpacer.style.width = 0;
           }
         ]]></body>
       </method>
 
+      <method name="themeLayoutChanged">
+        <body><![CDATA[
+          this._positionPinnedTabs(true);
+        ]]></body>
+      </method>
+
       <field name="_lastNumPinned">0</field>
+      <field name="_pinnedTabsLayoutCache">null</field>
       <method name="_positionPinnedTabs">
+        <parameter name="aThemeLayoutChanged"/>
         <body><![CDATA[
+          if (aThemeLayoutChanged) {
+            this._pinnedTabsLayoutCache = null;
+          }
+
           var numPinned = this.tabbrowser._numPinnedTabs;
           var doPosition = this.getAttribute("overflow") == "true" &&
                            numPinned > 0;
 
           if (doPosition) {
             this.setAttribute("positionpinnedtabs", "true");
 
-            let scrollButtonWidth = this.mTabstrip._scrollButtonDown.getBoundingClientRect().width;
-            let paddingStart = this.mTabstrip.scrollboxPaddingStart;
-            let pinnedTabWidth;
+            let layoutData = this._pinnedTabsLayoutCache;
+            if (!layoutData) {
+              let tabstrip = this.mTabstrip;
+              layoutData = this._pinnedTabsLayoutCache = {
+                pinnedTabWidth: this.childNodes[0].getBoundingClientRect().width,
+                paddingStart: tabstrip.scrollboxPaddingStart,
+                scrollButtonWidth: tabstrip._scrollButtonDown.getBoundingClientRect().width
+              };
+            }
+
             let width = 0;
-
             for (let i = numPinned - 1; i >= 0; i--) {
               let tab = this.childNodes[i];
-              if (!pinnedTabWidth) {
-                pinnedTabWidth = tab.getBoundingClientRect().width;
-              }
-              width += pinnedTabWidth;
-              tab.style.marginInlineStart = -(width + scrollButtonWidth + paddingStart) + "px";
-            }
-
-            this.style.paddingInlineStart = width + paddingStart + "px";
+              width += layoutData.pinnedTabWidth;
+              tab.style.marginInlineStart =
+                -(width + layoutData.scrollButtonWidth + layoutData.paddingStart) + "px";
+            }
+            this.style.paddingInlineStart = width + layoutData.paddingStart + "px";
           } else {
             this.removeAttribute("positionpinnedtabs");
 
             for (let i = 0; i < numPinned; i++) {
               let tab = this.childNodes[i];
               tab.style.marginInlineStart = "";
             }