Bug 1358387 - Avoid style flush when setting the statuspanel's current width as its min-width on status label changes. r=florian
authorDão Gottwald <dao@mozilla.com>
Sun, 28 May 2017 07:49:36 +0200
changeset 409213 d2ee41a263fc99c39957abdc1c74ff3403eec230
parent 409212 024c52408261d759497f856579112b1a779729f7
child 409214 c88e2ecc9472a1c9983c924362e71f598635e36b
push id7391
push usermtabara@mozilla.com
push dateMon, 12 Jun 2017 13:08:53 +0000
treeherdermozilla-beta@2191d7f87e2e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersflorian
bugs1358387
milestone55.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 1358387 - Avoid style flush when setting the statuspanel's current width as its min-width on status label changes. r=florian MozReview-Commit-ID: 6eReuAxAwtK
browser/base/content/tabbrowser.xml
--- a/browser/base/content/tabbrowser.xml
+++ b/browser/base/content/tabbrowser.xml
@@ -7732,19 +7732,30 @@
 
       <property name="label">
         <setter><![CDATA[
           if (!this.label) {
             this.removeAttribute("mirror");
             this.removeAttribute("sizelimit");
           }
 
-          this.style.minWidth = this.getAttribute("type") == "status" &&
-                                this.getAttribute("previoustype") == "status"
-                                  ? getComputedStyle(this).width : "";
+          if (this.getAttribute("type") == "status" &&
+              this.getAttribute("previoustype") == "status") {
+            // Before updating the label, set the panel's current width as its
+            // min-width to let the panel grow but not shrink and prevent
+            // unnecessary flicker while loading pages. We only care about the
+            // panel's width once it has been painted, so we can do this
+            // without flushing layout.
+            this.style.minWidth =
+              window.QueryInterface(Ci.nsIInterfaceRequestor)
+                    .getInterface(Ci.nsIDOMWindowUtils)
+                    .getBoundsWithoutFlushing(this).width + "px";
+          } else {
+            this.style.minWidth = "";
+          }
 
           if (val) {
             this.setAttribute("label", val);
             this.removeAttribute("inactive");
             this._mouseTargetRect = null;
             MousePosTracker.addListener(this);
           } else {
             this.setAttribute("inactive", "true");