Bug 1399909 - Prevent the inspector resizing its left pane during load. r=gl

Today, inspector startup is clunky and is made is many steps
in which the left pane with the markup view is loaded full width
before the rule view is opened. It blinks and resize things.

* display the left pane (inspector-main-content) only when the size of panels
  is set by the splitter.
* fix markupbox hidding while loading as "collapsed" wasn't working
* setup the splitter with the right size immediately
* prevent unnecessary renders in split-box

MozReview-Commit-ID: HvTnmzKpbjy

--HG--
extra : rebase_source : c76407936fec54067e5fbf7653da956355fad887

devtools/client/inspector/inspector.js

@@ -278,6 +278,16 @@ Inspector.prototype = {
     this.isReady = false;
 
     this.setupSearchBox();
+
+    // Setup the splitter before the sidebar is displayed so,
+    // we don't miss any events.
+    this.setupSplitter();
+
+    // We can display right panel with: tab bar, markup view and breadbrumb. Right after
+    // the splitter set the right and left panel sizes, in order to avoid resizing it
+    // during load of the inspector.
+    this.panelDoc.getElementById("inspector-main-content").style.visibility = "visible";
+
     this.setupSidebar();
     this.setupExtensionSidebars();
 
@@ -477,10 +487,11 @@ Inspector.prototype = {
     let SplitBox = this.React.createFactory(this.browserRequire(
       "devtools/client/shared/components/splitter/split-box"));
 
+    let { width, height } = this.getSidebarSize();
     let splitter = SplitBox({
       className: "inspector-sidebar-splitter",
-      initialWidth: INITIAL_SIDEBAR_SIZE,
-      initialHeight: INITIAL_SIDEBAR_SIZE,
+      initialWidth: width,
+      initialHeight: height,
       splitterSize: 1,
       endPanelControl: true,
       startPanel: this.InspectorTabPanel({
@@ -496,11 +507,6 @@ Inspector.prototype = {
       this.panelDoc.getElementById("inspector-splitter-box"));
 
     this.panelWin.addEventListener("resize", this.onPanelWindowResize, true);
-
-    // Persist splitter state in preferences.
-    this.sidebar.on("show", this.onSidebarShown);
-    this.sidebar.on("hide", this.onSidebarHidden);
-    this.sidebar.on("destroy", this.onSidebarHidden);
   },
 
   /**
@@ -524,7 +530,7 @@ Inspector.prototype = {
     });
   },
 
-  onSidebarShown: function () {
+  getSidebarSize: function () {
     let width;
     let height;
 
@@ -540,8 +546,11 @@ Inspector.prototype = {
       width = INITIAL_SIDEBAR_SIZE;
       height = INITIAL_SIDEBAR_SIZE;
     }
+    return { width, height };
+  },
 
-    this._splitter.setState({width, height});
+  onSidebarShown: function () {
+    this._splitter.setState(this.getSidebarSize());
   },
 
   onSidebarHidden: function () {
@@ -666,9 +675,10 @@ Inspector.prototype = {
       this.sidebar.toggleTab(true, "fontinspector");
     }
 
-    // Setup the splitter before the sidebar is displayed so,
-    // we don't miss any events.
-    this.setupSplitter();
+    // Persist splitter state in preferences.
+    this.sidebar.on("show", this.onSidebarShown);
+    this.sidebar.on("hide", this.onSidebarHidden);
+    this.sidebar.on("destroy", this.onSidebarHidden);
 
     this.sidebar.show(defaultTab);
   },
@@ -1518,7 +1528,7 @@ Inspector.prototype = {
     this._markupFrame.setAttribute("tooltip", "aHTMLTooltip");
     this._markupFrame.addEventListener("contextmenu", this._onContextMenu);
 
-    this._markupBox.setAttribute("collapsed", true);
+    this._markupBox.style.visibility = "hidden";
     this._markupBox.appendChild(this._markupFrame);
 
     this._markupFrame.addEventListener("load", this._onMarkupFrameLoad, true);
@@ -1532,10 +1542,9 @@ Inspector.prototype = {
 
     this._markupFrame.contentWindow.focus();
 
-    this._markupBox.removeAttribute("collapsed");
-
     this.markup = new MarkupView(this, this._markupFrame, this._toolbox.win);
 
+    this._markupBox.style.visibility = "visible";
     this.emit("markuploaded");
   },
 

devtools/client/inspector/inspector.xhtml

@@ -45,7 +45,7 @@
   <div class="inspector-responsive-container theme-body inspector">
 
     <!-- Main Panel Content -->
-    <div id="inspector-main-content" class="devtools-main-content">
+    <div id="inspector-main-content" class="devtools-main-content" style="visibility: hidden;">
       <div id="inspector-toolbar" class="devtools-toolbar" nowindowdrag="true"
            data-localization-bundle="devtools/client/locales/inspector.properties">
         <button id="inspector-element-add-button" class="devtools-button"

devtools/client/shared/components/splitter/split-box.js

@@ -72,6 +72,18 @@ const SplitBox = React.createClass({
     }
   },
 
+  shouldComponentUpdate(nextProps, nextState) {
+    return nextState.width != this.state.width ||
+      nextState.height != this.state.height ||
+      nextState.vert != this.state.vert ||
+      nextProps.startPanel != this.props.startPanel ||
+      nextProps.endPanel != this.props.endPanel ||
+      nextProps.endPanelControl != this.props.endPanelControl ||
+      nextProps.minSize != this.props.minSize ||
+      nextProps.maxSize != this.props.maxSize ||
+      nextProps.splitterSize != this.props.splitterSize;
+  },
+
   // Dragging Events
 
   /**