Bug 1399265 - Avoid relayout when switching tab in devtools r=Honza
authorOriol Brufau <oriol-bugzilla@hotmail.com>
Sun, 24 Sep 2017 15:20:13 +0200
changeset 670636 94a5ac2157687d91f036212ce9f29fbab3e0334f
parent 670635 da264d9bdd7d404bf93ebf11a86921ff60dff57a
child 670637 c49501879fbc43e399f4dccbd2664985cafa8c33
push id81678
push userkgupta@mozilla.com
push dateTue, 26 Sep 2017 17:28:53 +0000
reviewersHonza
bugs1399265
milestone58.0a1
Bug 1399265 - Avoid relayout when switching tab in devtools r=Honza MozReview-Commit-ID: J0vsN0MiN1o
devtools/client/shared/components/tabs/tabs.js
--- a/devtools/client/shared/components/tabs/tabs.js
+++ b/devtools/client/shared/components/tabs/tabs.js
@@ -320,23 +320,22 @@ define(function (require, exports, modul
         .map((tab, index) => {
           let selected = selectedIndex === index;
           if (renderOnlySelected && !selected) {
             return null;
           }
 
           let id = tab.props.id;
 
-          // Use 'visibility:hidden' + 'width/height:0' for hiding
-          // content of non-selected tab. It's faster (not sure why)
-          // than display:none and visibility:collapse.
+          // Use 'visibility:hidden' + 'height:0' for hiding content of non-selected
+          // tab. It's faster than 'display:none' because it avoids triggering frame
+          // destruction and reconstruction. 'width' is not changed to avoid relayout.
           let style = {
             visibility: selected ? "visible" : "hidden",
             height: selected ? "100%" : "0",
-            width: selected ? "100%" : "0",
           };
 
           // Allows lazy loading panels by creating them only if they are selected,
           // then store a copy of the lazy created panel in `tab.panel`.
           if (typeof tab.panel == "function" && selected) {
             tab.panel = tab.panel(tab);
           }
           let panel = tab.panel || tab;