Bug 1383367: Part 3 - Defer getComputedStyle call if a reflow is currently pending. r?mconley draft
authorKris Maglione <maglione.k@gmail.com>
Fri, 21 Jul 2017 19:55:29 -0700
changeset 614858 218661e7a72abb84793945e01b65d032bb70cdec
parent 614857 f5b7850725bca7aa7f4ff4d23cf3b516be368d4e
child 638986 03a507d8fa9f8121bee55abcadde1905105c8d30
push id70146
push usermaglione.k@gmail.com
push dateTue, 25 Jul 2017 03:29:21 +0000
reviewersmconley
bugs1383367
milestone56.0a1
Bug 1383367: Part 3 - Defer getComputedStyle call if a reflow is currently pending. r?mconley MozReview-Commit-ID: 33IRfOlaBxP
browser/base/content/browser.js
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -8657,17 +8657,17 @@ var ToolbarIconColor = {
         break;
     }
   },
 
   // a cache of luminance values for each toolbar
   // to avoid unnecessary calls to getComputedStyle
   _toolbarLuminanceCache: new Map(),
 
-  inferFromText(reason, reasonValue) {
+  async inferFromText(reason, reasonValue) {
     if (!this._initialized)
       return;
     function parseRGB(aColorString) {
       let rgb = aColorString.match(/^rgba?\((\d+), (\d+), (\d+)/);
       rgb.shift();
       return rgb.map(x => parseInt(x));
     }
 
@@ -8694,30 +8694,32 @@ var ToolbarIconColor = {
     let toolbarSelector = "#navigator-toolbox > toolbar:not([collapsed=true]):not(#addon-bar)";
     if (AppConstants.platform == "macosx")
       toolbarSelector += ":not([type=menubar])";
 
     // The getComputedStyle calls and setting the brighttext are separated in
     // two loops to avoid flushing layout and making it dirty repeatedly.
     let cachedLuminances = this._toolbarLuminanceCache;
     let luminances = new Map();
-    for (let toolbar of document.querySelectorAll(toolbarSelector)) {
-      // toolbars *should* all have ids, but guard anyway to avoid blowing up
-      let cacheKey = toolbar.id && toolbar.id + JSON.stringify(this._windowState);
-      // lookup cached luminance value for this toolbar in this window state
-      let luminance = cacheKey && cachedLuminances.get(cacheKey);
-      if (isNaN(luminance)) {
-        let [r, g, b] = parseRGB(getComputedStyle(toolbar).color);
-        luminance = 0.2125 * r + 0.7154 * g + 0.0721 * b;
-        if (cacheKey) {
-          cachedLuminances.set(cacheKey, luminance);
+    await BrowserUtils.promiseLayoutFlushed(document, "style", () => {
+      for (let toolbar of document.querySelectorAll(toolbarSelector)) {
+        // toolbars *should* all have ids, but guard anyway to avoid blowing up
+        let cacheKey = toolbar.id && toolbar.id + JSON.stringify(this._windowState);
+        // lookup cached luminance value for this toolbar in this window state
+        let luminance = cacheKey && cachedLuminances.get(cacheKey);
+        if (isNaN(luminance)) {
+          let [r, g, b] = parseRGB(getComputedStyle(toolbar).color);
+          luminance = 0.2125 * r + 0.7154 * g + 0.0721 * b;
+          if (cacheKey) {
+            cachedLuminances.set(cacheKey, luminance);
+          }
         }
+        luminances.set(toolbar, luminance);
       }
-      luminances.set(toolbar, luminance);
-    }
+    });
 
     for (let [toolbar, luminance] of luminances) {
       if (luminance <= 110)
         toolbar.removeAttribute("brighttext");
       else
         toolbar.setAttribute("brighttext", "true");
     }
   }