Bug 1456056 - Part 1. Improve the performance of toolbar tabs overflow. r=jdescottes
authorMantaroh Yoshinaga <mantaroh@gmail.com>
Thu, 31 May 2018 10:22:31 +0900
changeset 420816 2995e423a7b2508fcf7a3580502748903327b499
parent 420815 bc7e36fffaa7e042db451cbf5f75595fdf109857
child 420817 a2fe3122cc9124271af99192e65768f2f7761301
push id103894
push usercsabou@mozilla.com
push dateFri, 01 Jun 2018 09:46:36 +0000
treeherdermozilla-inbound@e99ff79303ea [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes
bugs1456056
milestone62.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1456056 - Part 1. Improve the performance of toolbar tabs overflow. r=jdescottes This patch will two impprove performances: * Remove unnecesarry reflow by using the DOMWindowUtils.getBoundsWithoutFlushing(). This is a tiny performance improvement. Previous code will reflow on each tab width caclculation. * Change requestIdleCallback's timeout to 100ms. If user resize the devtool's width over time, overflow calculation will occur every 300ms. This patch will reduce this delay. MozReview-Commit-ID: FxZuK0wGxHk
devtools/client/framework/components/ToolboxTabs.js
--- a/devtools/client/framework/components/ToolboxTabs.js
+++ b/devtools/client/framework/components/ToolboxTabs.js
@@ -105,21 +105,26 @@ class ToolboxTabs extends Component {
     return !this.equalToolIdArray(prevPanels, nextPanels);
   }
 
   /**
    * Update the Map of tool id and tool tab width.
    */
   updateCachedToolTabsWidthMap() {
     let thisNode = findDOMNode(this);
+    let utils = window.QueryInterface(Ci.nsIInterfaceRequestor)
+        .getInterface(Ci.nsIDOMWindowUtils);
+    // Force a reflow before calling getBoundingWithoutFlushing on each tab.
+    thisNode.clientWidth;
+
     for (let tab of thisNode.querySelectorAll(".devtools-tab")) {
       let tabId = tab.id.replace("toolbox-tab-", "");
       if (!this._cachedToolTabsWidthMap.has(tabId)) {
-        let cs = getComputedStyle(tab);
-        this._cachedToolTabsWidthMap.set(tabId, parseInt(cs.width, 10));
+        let rect = utils.getBoundsWithoutFlushing(tab);
+        this._cachedToolTabsWidthMap.set(tabId, rect.width);
       }
     }
   }
 
   /**
    * Update the overflowed tab array from currently displayed tool tab.
    * If calculated result is the same as the current overflowed tab array, this
    * function will not update state.
@@ -172,17 +177,17 @@ class ToolboxTabs extends Component {
       this.setState({ overflowedTabIds: willOverflowTabs });
     }
   }
 
   resizeHandler(evt) {
     window.cancelIdleCallback(this._resizeTimerId);
     this._resizeTimerId = window.requestIdleCallback(() => {
       this.updateOverflowedTabs();
-    }, { timeout: 300 });
+    }, { timeout: 100 });
   }
 
   /**
    * Render a button to access overflowed tools, displayed only when the toolbar
    * presents an overflow.
    */
   renderToolsChevronButton() {
     let {