Bug 1335419 - Lazy load and instanciate computed view, ruleview and font inspector. r=jdescottes
authorAlexandre Poirot <poirot.alex@gmail.com>
Tue, 31 Jan 2017 16:26:40 +0100
changeset 350651 24ec83d9d340e8278706286f01b7041008511fba
parent 350650 2d17b7839fd84b5aabd8b04b4b7cadbb237bca6e
child 350652 1765f0af5161deaedc07361edf8567d5c8a13eff
push id88685
push usercbook@mozilla.com
push dateFri, 31 Mar 2017 12:48:11 +0000
treeherdermozilla-inbound@aece477a513e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes
bugs1335419
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 1335419 - Lazy load and instanciate computed view, ruleview and font inspector. r=jdescottes MozReview-Commit-ID: CtI8w6Ao35u
devtools/client/inspector/boxmodel/test/head.js
devtools/client/inspector/computed/computed.js
devtools/client/inspector/fonts/test/head.js
devtools/client/inspector/inspector.js
devtools/client/inspector/layout/layout.js
devtools/client/inspector/rules/test/browser_rules_content_02.js
devtools/client/inspector/shared/highlighters-overlay.js
devtools/client/inspector/shared/test/browser_styleinspector_context-menu-copy-color_01.js
devtools/client/inspector/shared/test/browser_styleinspector_refresh_when_active.js
devtools/client/inspector/shared/test/head.js
devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-xul.js
devtools/client/inspector/test/browser_inspector_pseudoclass-lock.js
devtools/client/inspector/test/browser_inspector_search-sidebar.js
devtools/client/inspector/test/browser_inspector_textbox-menu.js
devtools/client/inspector/test/shared-head.js
devtools/client/responsivedesign/test/head.js
--- a/devtools/client/inspector/boxmodel/test/head.js
+++ b/devtools/client/inspector/boxmodel/test/head.js
@@ -57,17 +57,17 @@ function openBoxModelView() {
         return promise.resolve();
       };
     }
     mockHighlighter(data.toolbox);
 
     return {
       toolbox: data.toolbox,
       inspector: data.inspector,
-      view: data.inspector.computedview,
+      view: data.inspector.getPanel("computedview"),
       testActor: data.testActor
     };
   });
 }
 
 /**
  * Open the toolbox, with the inspector tool visible, and the layout view
  * sidebar tab selected to display the box model view with properties.
@@ -87,17 +87,17 @@ function openLayoutView() {
         return promise.resolve();
       };
     }
     mockHighlighter(data.toolbox);
 
     return {
       toolbox: data.toolbox,
       inspector: data.inspector,
-      boxmodel: data.inspector.boxmodel,
+      boxmodel: data.inspector.getPanel("boxmodel"),
       testActor: data.testActor
     };
   });
 }
 
 /**
  * Wait for the boxmodel-view-updated event.
  *
--- a/devtools/client/inspector/computed/computed.js
+++ b/devtools/client/inspector/computed/computed.js
@@ -622,17 +622,17 @@ CssComputedView.prototype = {
       onShowBoxModelHighlighterForNode,
     } = this.inspector.getCommonComponentProps();
 
     let {
       onHideBoxModelHighlighter,
       onShowBoxModelEditor,
       onShowBoxModelHighlighter,
       onToggleGeometryEditor,
-    } = this.inspector.boxmodel.getComponentProps();
+    } = this.inspector.getPanel("boxmodel").getComponentProps();
 
     let provider = createElement(
       Provider,
       { store: this.store },
       BoxModelApp({
         setSelectedNode,
         showBoxModelProperties: false,
         onHideBoxModelHighlighter,
--- a/devtools/client/inspector/fonts/test/head.js
+++ b/devtools/client/inspector/fonts/test/head.js
@@ -42,17 +42,17 @@ var openFontInspectorForURL = Task.async
   // Call selectNode again here to force a fontinspector update since we don't
   // know if the fontinspector-updated event has been sent while the inspector
   // was being opened or not.
   yield selectNode("body", inspector);
 
   return {
     toolbox,
     inspector,
-    view: inspector.fontInspector
+    view: inspector.getPanel("fontinspector")
   };
 });
 
 /**
  * Clears the preview input field, types new text into it and waits for the
  * preview images to be updated.
  *
  * @param {FontInspector} view - The FontInspector instance.
--- a/devtools/client/inspector/inspector.js
+++ b/devtools/client/inspector/inspector.js
@@ -18,21 +18,18 @@ var {Task} = require("devtools/shared/ta
 const {initCssProperties} = require("devtools/shared/fronts/css-properties");
 const nodeConstants = require("devtools/shared/dom-node-constants");
 const Telemetry = require("devtools/client/shared/telemetry");
 
 const Menu = require("devtools/client/framework/menu");
 const MenuItem = require("devtools/client/framework/menu-item");
 
 const {HTMLBreadcrumbs} = require("devtools/client/inspector/breadcrumbs");
-const BoxModel = require("devtools/client/inspector/boxmodel/box-model");
-const {FontInspector} = require("devtools/client/inspector/fonts/fonts");
 const GridInspector = require("devtools/client/inspector/grids/grid-inspector");
 const {InspectorSearch} = require("devtools/client/inspector/inspector-search");
-const {RuleViewTool} = require("devtools/client/inspector/rules/rules");
 const HighlightersOverlay = require("devtools/client/inspector/shared/highlighters-overlay");
 const ReflowTracker = require("devtools/client/inspector/shared/reflow-tracker");
 const {ToolSidebar} = require("devtools/client/inspector/toolsidebar");
 const MarkupView = require("devtools/client/inspector/markup/markup");
 const {CommandUtils} = require("devtools/client/shared/developer-toolbar");
 const {ViewHelpers} = require("devtools/client/shared/widgets/view-helpers");
 const clipboardHelper = require("devtools/shared/platform/clipboard");
 
@@ -90,16 +87,20 @@ function Inspector(toolbox) {
   EventEmitter.decorate(this);
 
   this._toolbox = toolbox;
   this._target = toolbox.target;
   this.panelDoc = window.document;
   this.panelWin = window;
   this.panelWin.inspector = this;
 
+  // Map [panel id => panel instance]
+  // Stores all the instances of sidebar panels like rule view, computed view, ...
+  this._panels = new Map();
+
   this.highlighters = new HighlightersOverlay(this);
   this.reflowTracker = new ReflowTracker(this._target);
   this.store = Store();
   this.telemetry = new Telemetry();
 
   this.nodeMenuTriggerInfo = null;
 
   this._handleRejectionIfNotDestroyed = this._handleRejectionIfNotDestroyed.bind(this);
@@ -110,16 +111,17 @@ function Inspector(toolbox) {
   this._updateSearchResultsLabel = this._updateSearchResultsLabel.bind(this);
   this.onNewSelection = this.onNewSelection.bind(this);
   this.onDetached = this.onDetached.bind(this);
   this.onPaneToggleButtonClicked = this.onPaneToggleButtonClicked.bind(this);
   this._onMarkupFrameLoad = this._onMarkupFrameLoad.bind(this);
   this.onPanelWindowResize = this.onPanelWindowResize.bind(this);
   this.onSidebarShown = this.onSidebarShown.bind(this);
   this.onSidebarHidden = this.onSidebarHidden.bind(this);
+  this.onSidebarSelect = this.onSidebarSelect.bind(this);
   this.onShowBoxModelHighlighterForNode =
     this.onShowBoxModelHighlighterForNode.bind(this);
 
   this._target.on("will-navigate", this._onBeforeNavigate);
   this._detectingActorFeatures = this._detectActorFeatures();
 }
 
 Inspector.prototype = {
@@ -536,57 +538,92 @@ Inspector.prototype = {
 
   onSidebarHidden: function () {
     // Store the current splitter size to preferences.
     let state = this._splitter.state;
     Services.prefs.setIntPref("devtools.toolsidebar-width.inspector", state.width);
     Services.prefs.setIntPref("devtools.toolsidebar-height.inspector", state.height);
   },
 
+  onSidebarSelect: function (event, toolId) {
+    // Save the currently selected sidebar panel
+    Services.prefs.setCharPref("devtools.inspector.activeSidebar", toolId);
+
+    // Then forces the panel creation by calling getPanel
+    // (This allows lazy loading the panels only once we select them)
+    this.getPanel(toolId);
+  },
+
+  /**
+   * Lazily get and create panel instances displayed in the sidebar
+   */
+  getPanel: function (id) {
+    if (this._panels.has(id)) {
+      return this._panels.get(id);
+    }
+    let panel;
+    switch (id) {
+      case "computedview":
+        const {ComputedViewTool} =
+          this.browserRequire("devtools/client/inspector/computed/computed");
+        panel = new ComputedViewTool(this, this.panelWin);
+        break;
+      case "ruleview":
+        const {RuleViewTool} = require("devtools/client/inspector/rules/rules");
+        panel = new RuleViewTool(this, this.panelWin);
+        break;
+      case "boxmodel":
+        // box-model isn't a panel on its own, it used to, now it is being used by
+        // computed view and layout which retrieves an instance via getPanel.
+        const BoxModel = require("devtools/client/inspector/boxmodel/box-model");
+        panel = new BoxModel(this, this.panelWin);
+        break;
+      case "fontinspector":
+        const {FontInspector} = require("devtools/client/inspector/fonts/fonts");
+        panel = new FontInspector(this, this.panelWin);
+        break;
+      default:
+        // This is a custom panel or a non lazy-loaded one.
+        return null;
+    }
+    this._panels.set(id, panel);
+    return panel;
+  },
+
   /**
    * Build the sidebar.
    */
   setupSidebar: function () {
     let tabbox = this.panelDoc.querySelector("#inspector-sidebar");
     this.sidebar = new ToolSidebar(tabbox, this, "inspector", {
       showAllTabsMenu: true
     });
+    this.sidebar.on("select", this.onSidebarSelect);
 
     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";
     }
 
     // Append all side panels
     this.sidebar.addExistingTab(
       "ruleview",
       INSPECTOR_L10N.getStr("inspector.sidebar.ruleViewTitle"),
       defaultTab == "ruleview");
 
     this.sidebar.addExistingTab(
       "computedview",
       INSPECTOR_L10N.getStr("inspector.sidebar.computedViewTitle"),
       defaultTab == "computedview");
 
-    this.ruleview = new RuleViewTool(this, this.panelWin);
-    this.boxmodel = new BoxModel(this, this.panelWin);
-
-    const {ComputedViewTool} =
-      this.browserRequire("devtools/client/inspector/computed/computed");
-    this.computedview = new ComputedViewTool(this, this.panelWin);
-
     if (Services.prefs.getBoolPref("devtools.layoutview.enabled")) {
+      // Grid and layout panels aren't lazy-loaded as their module end up
+      // calling inspector.addSidebarTab
       this.gridInspector = new GridInspector(this, this.panelWin);
 
       const LayoutView = this.browserRequire("devtools/client/inspector/layout/layout");
       this.layoutview = new LayoutView(this, this.panelWin);
     }
 
     if (this.target.form.animationsActor) {
       this.sidebar.addFrameTab(
@@ -598,17 +635,16 @@ Inspector.prototype = {
 
     if (Services.prefs.getBoolPref("devtools.fontinspector.enabled") &&
         this.canGetUsedFontFaces) {
       this.sidebar.addExistingTab(
         "fontinspector",
         INSPECTOR_L10N.getStr("inspector.sidebar.fontInspectorTitle"),
         defaultTab == "fontinspector");
 
-      this.fontInspector = new FontInspector(this, this.panelWin);
       this.sidebar.toggleTab(true, "fontinspector");
     }
 
     // Setup the splitter before the sidebar is displayed so,
     // we don't miss any events.
     this.setupSplitter();
 
     this.sidebar.show(defaultTab);
@@ -921,47 +957,36 @@ Inspector.prototype = {
 
     this.cancelUpdate();
 
     this.target.off("will-navigate", this._onBeforeNavigate);
     this.target.off("thread-paused", this.updateDebuggerPausedWarning);
     this.target.off("thread-resumed", this.updateDebuggerPausedWarning);
     this._toolbox.off("select", this.updateDebuggerPausedWarning);
 
-    if (this.ruleview) {
-      this.ruleview.destroy();
+    for (let [, panel] of this._panels) {
+      panel.destroy();
     }
-
-    if (this.boxmodel) {
-      this.boxmodel.destroy();
-    }
-
-    if (this.computedview) {
-      this.computedview.destroy();
-    }
+    this._panels.clear();
 
     if (this.gridInspector) {
       this.gridInspector.destroy();
     }
 
     if (this.layoutview) {
       this.layoutview.destroy();
     }
 
-    if (this.fontInspector) {
-      this.fontInspector.destroy();
-    }
-
     let cssPropertiesDestroyer = this._cssPropertiesLoaded.then(({front}) => {
       if (front) {
         front.destroy();
       }
     });
 
-    this.sidebar.off("select", this._setDefaultSidebar);
+    this.sidebar.off("select", this.onSidebarSelect);
     let sidebarDestroyer = this.sidebar.destroy();
 
     this.teardownSplitter();
 
     this.teardownToolbar();
     this.breadcrumbs.destroy();
     this.selection.off("new-node-front", this.onNewSelection);
     this.selection.off("detached-front", this.onDetached);
--- a/devtools/client/inspector/layout/layout.js
+++ b/devtools/client/inspector/layout/layout.js
@@ -37,17 +37,17 @@ LayoutView.prototype = {
       onShowBoxModelHighlighterForNode,
     } = this.inspector.getCommonComponentProps();
 
     let {
       onHideBoxModelHighlighter,
       onShowBoxModelEditor,
       onShowBoxModelHighlighter,
       onToggleGeometryEditor,
-    } = this.inspector.boxmodel.getComponentProps();
+    } = this.inspector.getPanel("boxmodel").getComponentProps();
 
     let {
       getSwatchColorPickerTooltip,
       onSetGridOverlayColor,
       onShowGridAreaHighlight,
       onShowGridCellHighlight,
       onToggleGridHighlighter,
       onToggleShowGridLineNumbers,
--- a/devtools/client/inspector/rules/test/browser_rules_content_02.js
+++ b/devtools/client/inspector/rules/test/browser_rules_content_02.js
@@ -17,20 +17,20 @@ const CONTENT = `
   </body>
 `;
 
 add_task(function* () {
   let tab = yield addTab("data:text/html;charset=utf-8," + CONTENT);
 
   let testActor = yield getTestActorWithoutToolbox(tab);
   let inspector = yield clickOnInspectMenuItem(testActor, "span");
-  yield getRuleViewSelectorHighlighterIcon(inspector.ruleview.view,
+  yield getRuleViewSelectorHighlighterIcon(inspector.getPanel("ruleview").view,
                                            "element", 3);
 
-  checkRuleViewContent(inspector.ruleview.view);
+  checkRuleViewContent(inspector.getPanel("ruleview").view);
 });
 
 function checkRuleViewContent({styleDocument}) {
   info("Making sure the rule-view contains the expected content");
 
   let headers = [...styleDocument.querySelectorAll(".ruleview-header")];
   is(headers.length, 3, "There are 3 headers for inherited rules");
 
--- a/devtools/client/inspector/shared/highlighters-overlay.js
+++ b/devtools/client/inspector/shared/highlighters-overlay.js
@@ -295,17 +295,17 @@ HighlightersOverlay.prototype = {
    * @param  {Boolean} active
    *         Whether or not the grid icon should be active.
    */
   _toggleRuleViewGridIcon: function (node, active) {
     if (this.inspector.selection.nodeFront != node) {
       return;
     }
 
-    let ruleViewEl = this.inspector.ruleview.view.element;
+    let ruleViewEl = this.inspector.getPanel("ruleview").view.element;
 
     for (let gridIcon of ruleViewEl.querySelectorAll(".ruleview-grid")) {
       gridIcon.classList.toggle("active", active);
     }
   },
 
   /**
    * Hide the currently shown hovered highlighter.
@@ -387,17 +387,18 @@ HighlightersOverlay.prototype = {
     }
 
     // Only one highlighter can be displayed at a time, hide the currently shown.
     this._hideHoveredHighlighter();
 
     this._lastHovered = event.target;
 
     let view = this.isRuleView ?
-      this.inspector.ruleview.view : this.inspector.computedview.computedView;
+      this.inspector.getPanel("ruleview").view :
+      this.inspector.getPanel("computedview").computedView;
     let nodeInfo = view.getNodeInfo(event.target);
     if (!nodeInfo) {
       return;
     }
 
     // Choose the type of highlighter required for the hovered node.
     let type;
     if (this._isRuleViewTransform(nodeInfo) ||
--- a/devtools/client/inspector/shared/test/browser_styleinspector_context-menu-copy-color_01.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_context-menu-copy-color_01.js
@@ -19,17 +19,17 @@ add_task(function* () {
   yield testView("ruleview", inspector);
   yield testView("computedview", inspector);
 });
 
 function* testView(viewId, inspector) {
   info("Testing " + viewId);
 
   yield inspector.sidebar.select(viewId);
-  let view = inspector[viewId].view || inspector[viewId].computedView;
+  let view = inspector.getPanel(viewId).view || inspector.getPanel(viewId).computedView;
   yield selectNode("div", inspector);
 
   testIsColorValueNode(view);
   testIsColorPopupOnAllNodes(view);
   yield clearCurrentNodeSelection(inspector);
 }
 
 /**
--- a/devtools/client/inspector/shared/test/browser_styleinspector_refresh_when_active.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_refresh_when_active.js
@@ -15,24 +15,21 @@ add_task(function* () {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = yield openRuleView();
 
   yield selectNode("#one", inspector);
 
   is(getRuleViewPropertyValue(view, "element", "color"), "red",
     "The rule-view shows the properties for test node one");
 
-  let cView = inspector.computedview.computedView;
-  let prop = getComputedViewProperty(cView, "color");
-  ok(!prop, "The computed-view doesn't show the properties for test node one");
-
   info("Switching to the computed-view");
   let onComputedViewReady = inspector.once("computed-view-refreshed");
   selectComputedView(inspector);
   yield onComputedViewReady;
+  let cView = inspector.getPanel("computedview").computedView;
 
   ok(getComputedViewPropertyValue(cView, "color"), "#F00",
     "The computed-view shows the properties for test node one");
 
   info("Selecting test node two");
   yield selectNode("#two", inspector);
 
   ok(getComputedViewPropertyValue(cView, "color"), "#00F",
--- a/devtools/client/inspector/shared/test/head.js
+++ b/devtools/client/inspector/shared/test/head.js
@@ -38,17 +38,17 @@ registerCleanupFunction(() => {
  * Most of these functions are async too and return promises.
  *
  * All tests should follow the following pattern:
  *
  * add_task(function*() {
  *   yield addTab(TEST_URI);
  *   let {toolbox, inspector} = yield openInspector();
  *   inspector.sidebar.select(viewId);
- *   let view = inspector[viewId].view;
+ *   let view = inspector.getPanel(viewId).view;
  *   yield selectNode("#test", inspector);
  *   yield someAsyncTestFunction(view);
  * });
  *
  * add_task is the way to define the testcase in the test file. It accepts
  * a single generator-function argument.
  * The generator function should yield any async call.
  *
--- a/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-xul.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-xul.js
@@ -16,17 +16,17 @@ add_task(function* () {
   info("Check the inspector toolbar");
   let button = inspector.panelDoc.querySelector("#inspector-eyedropper-toggle");
   ok(isDisabled(button), "The button is hidden in the toolbar");
 
   info("Check the color picker");
   yield selectNode("#scale", inspector);
 
   // Find the color swatch in the rule-view.
-  let ruleView = inspector.ruleview.view;
+  let ruleView = inspector.getPanel("ruleview").view;
   let ruleViewDocument = ruleView.styleDocument;
   let swatchEl = ruleViewDocument.querySelector(".ruleview-colorswatch");
 
   info("Open the color picker");
   let cPicker = ruleView.tooltips.colorPicker;
   let onColorPickerReady = cPicker.once("ready");
   swatchEl.click();
   yield onColorPickerReady;
@@ -40,17 +40,17 @@ add_task(function* () {
   info("Check the inspector toolbar in HTML document");
   button = inspector.panelDoc.querySelector("#inspector-eyedropper-toggle");
   ok(!isDisabled(button), "The button is enabled in the toolbar");
 
   info("Check the color picker in HTML document");
   // Find the color swatch in the rule-view.
   yield selectNode("h1", inspector);
 
-  ruleView = inspector.ruleview.view;
+  ruleView = inspector.getPanel("ruleview").view;
   ruleViewDocument = ruleView.styleDocument;
   swatchEl = ruleViewDocument.querySelector(".ruleview-colorswatch");
 
   info("Open the color picker in HTML document");
   cPicker = ruleView.tooltips.colorPicker;
   onColorPickerReady = cPicker.once("ready");
   swatchEl.click();
   yield onColorPickerReady;
--- a/devtools/client/inspector/test/browser_inspector_pseudoclass-lock.js
+++ b/devtools/client/inspector/test/browser_inspector_pseudoclass-lock.js
@@ -20,17 +20,17 @@ const TEST_URL = "data:text/html;charset
 
 add_task(function* () {
   info("Creating the test tab and opening the rule-view");
   let {toolbox, inspector, testActor} = yield openInspectorForURL(TEST_URL);
 
   info("Selecting the ruleview sidebar");
   inspector.sidebar.select("ruleview");
 
-  let view = inspector.ruleview.view;
+  let view = inspector.getPanel("ruleview").view;
 
   info("Selecting the test node");
   yield selectNode("#div-1", inspector);
 
   yield togglePseudoClass(inspector);
   yield assertPseudoAddedToNode(inspector, testActor, view, "#div-1");
 
   yield togglePseudoClass(inspector);
--- a/devtools/client/inspector/test/browser_inspector_search-sidebar.js
+++ b/devtools/client/inspector/test/browser_inspector_search-sidebar.js
@@ -59,16 +59,17 @@ function clickInComputedView(inspector) 
 
 function isInInspectorSearchBox(inspector) {
   // Focus ends up in an anonymous child of the XUL textbox.
   ok(inspector.panelDoc.activeElement.closest("#inspector-searchbox"),
      "The inspector search field is focused when ctrl+F is pressed");
 }
 
 function isInRuleViewSearchBox(inspector) {
-  is(inspector.panelDoc.activeElement, inspector.ruleview.view.searchField,
+  is(inspector.panelDoc.activeElement, inspector.getPanel("ruleview").view.searchField,
      "The rule-view search field is focused when ctrl+F is pressed");
 }
 
 function isInComputedViewSearchBox(inspector) {
-  is(inspector.panelDoc.activeElement, inspector.computedview.computedView.searchField,
+  is(inspector.panelDoc.activeElement,
+     inspector.getPanel("computedview").computedView.searchField,
      "The computed-view search field is focused when ctrl+F is pressed");
 }
--- a/devtools/client/inspector/test/browser_inspector_textbox-menu.js
+++ b/devtools/client/inspector/test/browser_inspector_textbox-menu.js
@@ -33,17 +33,17 @@ add_task(function* () {
 
   info("Testing the markup-view textcontent");
   EventUtils.sendKey("tab", inspector.panelWin);
   yield checkTextBox(inspector.markup.doc.activeElement, toolbox);
   // Blur this last markup-view field, since we're moving on to the rule-view next.
   EventUtils.sendKey("escape", inspector.panelWin);
 
   info("Testing the rule-view selector");
-  let ruleView = inspector.ruleview.view;
+  let ruleView = inspector.getPanel("ruleview").view;
   let cssRuleEditor = getRuleViewRuleEditor(ruleView, 1);
   EventUtils.synthesizeMouse(cssRuleEditor.selectorText, 0, 0, {}, inspector.panelWin);
   yield checkTextBox(inspector.panelDoc.activeElement, toolbox);
 
   info("Testing the rule-view property name");
   EventUtils.sendKey("tab", inspector.panelWin);
   yield checkTextBox(inspector.panelDoc.activeElement, toolbox);
 
--- a/devtools/client/inspector/test/shared-head.js
+++ b/devtools/client/inspector/test/shared-head.js
@@ -75,23 +75,23 @@ var openInspectorSidebarTab = Task.async
  *
  * @return a promise that resolves when the inspector is ready and the rule view
  * is visible and ready
  */
 function openRuleView() {
   return openInspectorSidebarTab("ruleview").then(data => {
     // Replace the view to use a custom throttle function that can be triggered manually
     // through an additional ".flush()" property.
-    data.inspector.ruleview.view.throttle = manualThrottle();
+    data.inspector.getPanel("ruleview").view.throttle = manualThrottle();
 
     return {
       toolbox: data.toolbox,
       inspector: data.inspector,
       testActor: data.testActor,
-      view: data.inspector.ruleview.view
+      view: data.inspector.getPanel("ruleview").view
     };
   });
 }
 
 /**
  * Open the toolbox, with the inspector tool visible, and the computed-view
  * sidebar tab selected.
  *
@@ -99,43 +99,43 @@ function openRuleView() {
  * view is visible and ready
  */
 function openComputedView() {
   return openInspectorSidebarTab("computedview").then(data => {
     return {
       toolbox: data.toolbox,
       inspector: data.inspector,
       testActor: data.testActor,
-      view: data.inspector.computedview.computedView
+      view: data.inspector.getPanel("computedview").computedView
     };
   });
 }
 
 /**
  * Select the rule view sidebar tab on an already opened inspector panel.
  *
  * @param {InspectorPanel} inspector
  *        The opened inspector panel
  * @return {CssRuleView} the rule view
  */
 function selectRuleView(inspector) {
   inspector.sidebar.select("ruleview");
-  return inspector.ruleview.view;
+  return inspector.getPanel("ruleview").view;
 }
 
 /**
  * Select the computed view sidebar tab on an already opened inspector panel.
  *
  * @param {InspectorPanel} inspector
  *        The opened inspector panel
  * @return {CssComputedView} the computed view
  */
 function selectComputedView(inspector) {
   inspector.sidebar.select("computedview");
-  return inspector.computedview.computedView;
+  return inspector.getPanel("computedview").computedView;
 }
 
 /**
  * Get the NodeFront for a node that matches a given css selector, via the
  * protocol.
  * @param {String|NodeFront} selector
  * @param {InspectorPanel} inspector The instance of InspectorPanel currently
  * loaded in the toolbox
--- a/devtools/client/responsivedesign/test/head.js
+++ b/devtools/client/responsivedesign/test/head.js
@@ -145,17 +145,17 @@ var openInspectorSideBar = Task.async(fu
   let {toolbox, inspector} = yield openInspector();
 
   info("Selecting the " + id + " sidebar");
   inspector.sidebar.select(id);
 
   return {
     toolbox: toolbox,
     inspector: inspector,
-    view: inspector[id].view || inspector[id].computedView
+    view: inspector.getPanel(id).view || inspector.getPanel(id).computedView
   };
 });
 
 /**
  * Checks whether the inspector's sidebar corresponding to the given id already
  * exists
  * @param {InspectorPanel}
  * @param {String}