Bug 1315208 - Remove explicit call to `ReactDOM.render` in the LayoutView r=Honza

devtools/client/inspector/inspector.js

@@ -534,6 +534,12 @@ Inspector.prototype = {
 
     let defaultTab = Services.prefs.getCharPref("devtools.inspector.activeSidebar");
 
+    this._setDefaultSidebar = (event, toolId) => {
+      Services.prefs.setCharPref("devtools.inspector.activeSidebar", toolId);
+    };
+
+    this.sidebar.on("select", this._setDefaultSidebar);
+
     if (!Services.prefs.getBoolPref("devtools.fontinspector.enabled") &&
        defaultTab == "fontinspector") {
       defaultTab = "ruleview";
@@ -550,22 +556,10 @@ Inspector.prototype = {
       INSPECTOR_L10N.getStr("inspector.sidebar.computedViewTitle"),
       defaultTab == "computedview");
 
-    this._setDefaultSidebar = (event, toolId) => {
-      Services.prefs.setCharPref("devtools.inspector.activeSidebar", toolId);
-    };
-
-    this.sidebar.on("select", this._setDefaultSidebar);
-
     this.ruleview = new RuleViewTool(this, this.panelWin);
     this.computedview = new ComputedViewTool(this, this.panelWin);
 
     if (Services.prefs.getBoolPref("devtools.layoutview.enabled")) {
-      this.sidebar.addExistingTab(
-        "layoutview",
-        INSPECTOR_L10N.getStr("inspector.sidebar.layoutViewTitle"),
-        defaultTab == "layoutview"
-      );
-
       const {LayoutView} = require("devtools/client/inspector/layout/layout");
       this.layoutview = new LayoutView(this, this.panelWin);
     }

devtools/client/inspector/inspector.xhtml

@@ -191,11 +191,6 @@
         </div>
       </div>
 
-      <div id="sidebar-panel-layoutview" class="devtools-monospace theme-sidebar inspector-tabpanel"
-           data-localization-bundle="devtools/client/locales/inspector.properties">
-        <div id="layoutview-container"></div>
-      </div>
-
       <div id="sidebar-panel-fontinspector" class="devtools-monospace theme-sidebar inspector-tabpanel"
                 data-localization-bundle="devtools/client/locales/font-inspector.properties">
         <div class="devtools-toolbar">

devtools/client/inspector/layout/components/App.js

@@ -18,7 +18,7 @@ const App = createClass({
   render() {
     return dom.div(
       {
-        id: "layoutview-container-focusable",
+        id: "layoutview-container",
       },
       Accordion({
         items: [

devtools/client/inspector/layout/layout.js

@@ -4,14 +4,17 @@
 
 "use strict";
 
-const { createFactory, createElement } =
-  require("devtools/client/shared/vendor/react");
-const ReactDOM = require("devtools/client/shared/vendor/react-dom");
+const Services = require("Services");
+const { createFactory, createElement } = require("devtools/client/shared/vendor/react");
 const { Provider } = require("devtools/client/shared/vendor/react-redux");
 
 const App = createFactory(require("./components/app"));
 const Store = require("./store");
 
+const { LocalizationHelper } = require("devtools/shared/l10n");
+const INSPECTOR_L10N =
+      new LocalizationHelper("devtools/client/locales/inspector.properties");
+
 function LayoutView(inspector, window) {
   this.inspector = inspector;
   this.document = window.document;
@@ -24,8 +27,21 @@ LayoutView.prototype = {
 
   init() {
     let store = this.store = Store();
-    let provider = createElement(Provider, { store }, App());
-    ReactDOM.render(provider, this.document.querySelector("#layoutview-container"));
+    let provider = createElement(Provider, {
+      store,
+      id: "layoutview",
+      title: INSPECTOR_L10N.getStr("inspector.sidebar.layoutViewTitle"),
+      key: "layoutview",
+    }, App());
+
+    let defaultTab = Services.prefs.getCharPref("devtools.inspector.activeSidebar");
+
+    this.inspector.addSidebarTab(
+      "layoutview",
+      INSPECTOR_L10N.getStr("inspector.sidebar.layoutViewTitle"),
+      provider,
+      defaultTab == "layoutview"
+    );
   },
 
   destroy() {

devtools/client/themes/layout.css

@@ -2,22 +2,9 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-#sidebar-panel-layoutview {
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-}
-
 #layoutview-container {
   height: 100%;
-  overflow: auto;
-}
-
-#layoutview-container-focusable {
-  height: 100%;
-  outline: none;
+  width: 100%;
 }
 
 .layoutview-no-grids {