Bug 1567276 - Refactor inspector to inspectorFront. r=rcaliman

Differential Revision: https://phabricator.services.mozilla.com/D38554

devtools/client/debugger/test/mochitest/browser_dbg-inspector-integration.js

@@ -10,8 +10,8 @@ function waitForInspectorPanelChange(dbg) {
 
   return new Promise(resolve => {
     toolbox.getPanelWhenReady("inspector").then(() => {
-      ok(toolbox.inspector, "Inspector is shown.");
+      ok(toolbox.inspectorFront, "Inspector is shown.");
-      resolve(toolbox.inspector);
+      resolve(toolbox.inspectorFront);
     });
   });
 }
@@ -31,9 +31,14 @@ add_task(async function() {
 
   // Ensure hovering over button highlights the node in content pane
   const view = inspectorNode.ownerDocument.defaultView;
-  const onNodeHighlight = toolbox.target.once("inspector")
+  const onNodeHighlight = toolbox.target
+    .once("inspector")
     .then(inspector => inspector.highlighter.once("node-highlight"));
-  EventUtils.synthesizeMouseAtCenter(inspectorNode, {type: "mousemove"}, view);
+  EventUtils.synthesizeMouseAtCenter(
+    inspectorNode,
+    { type: "mousemove" },
+    view
+  );
   const nodeFront = await onNodeHighlight;
   is(nodeFront.displayName, "button", "The correct node was highlighted");
 

devtools/client/definitions.js

@@ -161,7 +161,7 @@ Tools.inspector = {
 
   preventClosingOnKey: true,
   onkey: function(panel, toolbox) {
-    toolbox.inspector.nodePicker.togglePicker();
+    toolbox.inspectorFront.nodePicker.togglePicker();
   },
 
   isTargetSupported: function(target) {
@@ -617,7 +617,7 @@ function createHighlightButton(highlighterName, id) {
     isTargetSupported: target => !target.chrome,
     async onClick(event, toolbox) {
       await toolbox.initInspector();
-      const highlighter = await toolbox.inspector.getOrCreateHighlighterByType(
+      const highlighter = await toolbox.inspectorFront.getOrCreateHighlighterByType(
         highlighterName
       );
       if (highlighter.isShown()) {

devtools/client/framework/test/browser_keybindings_01.js

@@ -104,12 +104,12 @@ add_task(async function() {
   async function inspectorShouldBeOpenAndHighlighting(inspector) {
     is(toolbox.currentToolId, "inspector", "Correct tool has been loaded");
 
-    await toolbox.inspector.nodePicker.once("picker-started");
+    await toolbox.inspectorFront.nodePicker.once("picker-started");
 
     ok(true, "picker-started event received, highlighter started");
     inspector.synthesizeKey();
 
-    await toolbox.inspector.nodePicker.once("picker-stopped");
+    await toolbox.inspectorFront.nodePicker.once("picker-stopped");
     ok(true, "picker-stopped event received, highlighter stopped");
   }
 

devtools/client/framework/toolbox.js

@@ -496,7 +496,7 @@ Toolbox.prototype = {
    * Get the toolbox's inspector front. Note that it may not always have been
    * initialized first. Use `initInspector()` if needed.
    */
-  get inspector() {
+  get inspectorFront() {
     return this._inspector;
   },
 
@@ -1720,10 +1720,10 @@ Toolbox.prototype = {
     if (currentPanel.togglePicker) {
       currentPanel.togglePicker(focus);
     } else {
-      if (!this.inspector) {
+      if (!this.inspectorFront) {
         await this.initInspector();
       }
-      this.inspector.nodePicker.togglePicker(focus);
+      this.inspectorFront.nodePicker.togglePicker(focus);
     }
   },
 
@@ -1737,7 +1737,7 @@ Toolbox.prototype = {
       if (currentPanel.cancelPicker) {
         currentPanel.cancelPicker();
       } else {
-        this.inspector.nodePicker.cancel();
+        this.inspectorFront.nodePicker.cancel();
       }
       // Stop the console from toggling.
       event.stopImmediatePropagation();
@@ -1748,7 +1748,7 @@ Toolbox.prototype = {
     this.tellRDMAboutPickerState(true);
     this.pickerButton.isChecked = true;
     await this.selectTool("inspector", "inspect_dom");
-    this.on("select", this.inspector.nodePicker.stop);
+    this.on("select", this.inspectorFront.nodePicker.stop);
   },
 
   _onPickerStarted: async function() {
@@ -1758,7 +1758,7 @@ Toolbox.prototype = {
 
   _onPickerStopped: function() {
     this.tellRDMAboutPickerState(false);
-    this.off("select", this.inspector.nodePicker.stop);
+    this.off("select", this.inspectorFront.nodePicker.stop);
     this.doc.removeEventListener("keypress", this._onPickerKeypress, true);
     this.pickerButton.isChecked = false;
   },
@@ -1881,7 +1881,7 @@ Toolbox.prototype = {
    * Update the buttons.
    */
   updateToolboxButtons() {
-    const inspector = this.inspector;
+    const inspector = this.inspectorFront;
     // two of the buttons have highlighters that need to be cleared
     // on will-navigate, otherwise we hold on to the stale highlighter
     const hasHighlighters =
@@ -3267,14 +3267,23 @@ Toolbox.prototype = {
         // TODO: replace with getFront once inspector is separated from the toolbox
         // TODO: remove these bindings
         this._inspector = await this.target.getInspector();
-        this._walker = this.inspector.walker;
+        this._walker = this.inspectorFront.walker;
-        this._highlighter = this.inspector.highlighter;
+        this._highlighter = this.inspectorFront.highlighter;
-        this._selection = this.inspector.selection;
+        this._selection = this.inspectorFront.selection;
 
-        this.inspector.nodePicker.on("picker-starting", this._onPickerStarting);
+        this.inspectorFront.nodePicker.on(
-        this.inspector.nodePicker.on("picker-started", this._onPickerStarted);
+          "picker-starting",
-        this.inspector.nodePicker.on("picker-stopped", this._onPickerStopped);
+          this._onPickerStarting
-        this.inspector.nodePicker.on(
+        );
+        this.inspectorFront.nodePicker.on(
+          "picker-started",
+          this._onPickerStarted
+        );
+        this.inspectorFront.nodePicker.on(
+          "picker-stopped",
+          this._onPickerStopped
+        );
+        this.inspectorFront.nodePicker.on(
           "picker-node-canceled",
           this._onPickerCanceled
         );

devtools/client/inspector/animation/animation.js

@@ -150,11 +150,11 @@ class AnimationInspector {
     this.provider = provider;
 
     this.inspector.sidebar.on("select", this.onSidebarSelectionChanged);
-    this.inspector.inspector.nodePicker.on(
+    this.inspector.inspectorFront.nodePicker.on(
       "picker-started",
       this.onElementPickerStarted
     );
-    this.inspector.inspector.nodePicker.on(
+    this.inspector.inspectorFront.nodePicker.on(
       "picker-stopped",
       this.onElementPickerStopped
     );
@@ -183,11 +183,11 @@ class AnimationInspector {
       "inspector-sidebar-resized",
       this.onSidebarResized
     );
-    this.inspector.inspector.nodePicker.off(
+    this.inspector.inspectorFront.nodePicker.off(
       "picker-started",
       this.onElementPickerStarted
     );
-    this.inspector.inspector.nodePicker.off(
+    this.inspector.inspectorFront.nodePicker.off(
       "picker-stopped",
       this.onElementPickerStopped
     );
@@ -711,7 +711,7 @@ class AnimationInspector {
   }
 
   toggleElementPicker() {
-    this.inspector.inspector.nodePicker.togglePicker();
+    this.inspector.inspectorFront.nodePicker.togglePicker();
   }
 
   async update() {

devtools/client/inspector/fonts/fonts.js

@@ -852,7 +852,7 @@ class FontInspector {
   async onToggleFontHighlight(font, show, isForCurrentElement = true) {
     if (!this.fontsHighlighter) {
       try {
-        this.fontsHighlighter = await this.inspector.inspector.getHighlighterByType(
+        this.fontsHighlighter = await this.inspector.inspectorFront.getHighlighterByType(
           "FontsHighlighter"
         );
       } catch (e) {

devtools/client/inspector/inspector.js

@@ -227,8 +227,8 @@ Inspector.prototype = {
     return this._toolbox;
   },
 
-  get inspector() {
+  get inspectorFront() {
-    return this.toolbox.inspector;
+    return this.toolbox.inspectorFront;
   },
 
   get walker() {
@@ -417,7 +417,7 @@ Inspector.prototype = {
   },
 
   _getPageStyle: function() {
-    return this.inspector.getPageStyle().then(pageStyle => {
+    return this.inspectorFront.getPageStyle().then(pageStyle => {
       this.pageStyle = pageStyle;
     }, this._handleRejectionIfNotDestroyed);
   },
@@ -1208,7 +1208,7 @@ Inspector.prototype = {
    */
   async supportsEyeDropper() {
     try {
-      return await this.inspector.supportsHighlighters();
+      return await this.inspectorFront.supportsHighlighters();
     } catch (e) {
       console.error(e);
       return false;
@@ -1706,14 +1706,14 @@ Inspector.prototype = {
   },
 
   startEyeDropperListeners: function() {
-    this.inspector.once("color-pick-canceled", this.onEyeDropperDone);
+    this.inspectorFront.once("color-pick-canceled", this.onEyeDropperDone);
-    this.inspector.once("color-picked", this.onEyeDropperDone);
+    this.inspectorFront.once("color-picked", this.onEyeDropperDone);
     this.walker.once("new-root", this.onEyeDropperDone);
   },
 
   stopEyeDropperListeners: function() {
-    this.inspector.off("color-pick-canceled", this.onEyeDropperDone);
+    this.inspectorFront.off("color-pick-canceled", this.onEyeDropperDone);
-    this.inspector.off("color-picked", this.onEyeDropperDone);
+    this.inspectorFront.off("color-picked", this.onEyeDropperDone);
     this.walker.off("new-root", this.onEyeDropperDone);
   },
 
@@ -1736,7 +1736,7 @@ Inspector.prototype = {
     this.telemetry.scalarSet(TELEMETRY_EYEDROPPER_OPENED, 1);
     this.eyeDropperButton.classList.add("checked");
     this.startEyeDropperListeners();
-    return this.inspector
+    return this.inspectorFront
       .pickColorFromPage({ copyOnSelect: true })
       .catch(console.error);
   },
@@ -1753,7 +1753,7 @@ Inspector.prototype = {
 
     this.eyeDropperButton.classList.remove("checked");
     this.stopEyeDropperListeners();
-    return this.inspector.cancelPickColorFromPage().catch(console.error);
+    return this.inspectorFront.cancelPickColorFromPage().catch(console.error);
   },
 
   /**

devtools/client/inspector/markup/markup-context-menu.js

@@ -79,7 +79,7 @@ class MarkupContextMenu {
    * This method is here for the benefit of copying links.
    */
   _copyAttributeLink(link) {
-    this.inspector.inspector
+    this.inspector.inspectorFront
       .resolveRelativeURL(link, this.selection.nodeFront)
       .then(url => {
         clipboardHelper.copyString(url);

devtools/client/inspector/markup/markup.js

@@ -183,11 +183,11 @@ function MarkupView(inspector, frame, controllerWindow) {
   this.walker.on("mutations", this._mutationObserver);
   this.win.addEventListener("copy", this._onCopy);
   this.win.addEventListener("mouseup", this._onMouseUp);
-  this.inspector.inspector.nodePicker.on(
+  this.inspector.inspectorFront.nodePicker.on(
     "picker-node-canceled",
     this._onToolboxPickerCanceled
   );
-  this.inspector.inspector.nodePicker.on(
+  this.inspector.inspectorFront.nodePicker.on(
     "picker-node-hovered",
     this._onToolboxPickerHover
   );
@@ -932,7 +932,7 @@ MarkupView.prototype = {
 
     if (type === "uri" || type === "cssresource" || type === "jsresource") {
       // Open link in a new tab.
-      this.inspector.inspector
+      this.inspector.inspectorFront
         .resolveRelativeURL(link, this.inspector.selection.nodeFront)
         .then(url => {
           if (type === "uri") {
@@ -2245,7 +2245,7 @@ MarkupView.prototype = {
     this._elt.removeEventListener("mouseout", this._onMouseOut);
     this._frame.removeEventListener("focus", this._onFocus);
     this.inspector.selection.off("new-node-front", this._onNewSelection);
-    this.inspector.inspector.nodePicker.off(
+    this.inspector.inspectorFront.nodePicker.off(
       "picker-node-hovered",
       this._onToolboxPickerHover
     );

devtools/client/inspector/markup/test/browser_markup_links_04.js

@@ -140,7 +140,7 @@ add_task(async function() {
       info("Get link from node attribute");
       const link = await nodeFront.getAttribute(test.attributeName);
       info("Resolve link to absolue URL");
-      const expected = await inspector.inspector.resolveRelativeURL(
+      const expected = await inspector.inspectorFront.resolveRelativeURL(
         link,
         nodeFront
       );

devtools/client/inspector/rules/new-rules.js

@@ -328,7 +328,7 @@ class RulesView {
     }
 
     try {
-      const front = this.inspector.inspector;
+      const front = this.inspector.inspectorFront;
       this._selectorHighlighter = await front.getHighlighterByType(
         "SelectorHighlighter"
       );

devtools/client/inspector/rules/rules.js

@@ -322,7 +322,7 @@ CssRuleView.prototype = {
     }
 
     try {
-      const front = this.inspector.inspector;
+      const front = this.inspector.inspectorFront;
       const h = await front.getHighlighterByType("SelectorHighlighter");
       this.selectorHighlighter = h;
       return h;

devtools/client/inspector/rules/test/browser_rules_colorpicker-hides-element-picker.js

@@ -12,7 +12,9 @@ add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
 
   const { view, toolbox } = await openRuleView();
-  const pickerStopped = toolbox.inspector.nodePicker.once("picker-stopped");
+  const pickerStopped = toolbox.inspectorFront.nodePicker.once(
+    "picker-stopped"
+  );
 
   await startPicker(toolbox);
 

devtools/client/inspector/rules/test/browser_rules_eyedropper.js

@@ -95,7 +95,7 @@ async function runTest(testActor, inspector, view) {
 async function testESC(swatch, inspector, testActor) {
   info("Press escape");
   const onCanceled = new Promise(resolve => {
-    inspector.inspector.once("color-pick-canceled", resolve);
+    inspector.inspectorFront.once("color-pick-canceled", resolve);
   });
   await testActor.synthesizeKey({ key: "VK_ESCAPE", options: {} });
   await onCanceled;
@@ -107,7 +107,7 @@ async function testESC(swatch, inspector, testActor) {
 async function testSelect(view, swatch, inspector, testActor) {
   info("Click at x:10px y:10px");
   const onPicked = new Promise(resolve => {
-    inspector.inspector.once("color-picked", resolve);
+    inspector.inspectorFront.once("color-picked", resolve);
   });
   // The change to the content is done async after rule view change
   const onRuleViewChanged = view.once("ruleview-changed");

devtools/client/inspector/shared/highlighters-overlay.js

@@ -34,7 +34,7 @@ class HighlightersOverlay {
    */
   constructor(inspector) {
     this.inspector = inspector;
-    this.inspectorFront = this.inspector.inspector;
+    this.inspectorFront = this.inspector.inspectorFront;
     this.store = this.inspector.store;
     this.target = this.inspector.target;
     this.telemetry = this.inspector.telemetry;

devtools/client/inspector/shared/style-inspector-menu.js

@@ -414,7 +414,7 @@ StyleInspectorMenu.prototype = {
 
     let message;
     try {
-      const inspectorFront = this.inspector.inspector;
+      const inspectorFront = this.inspector.inspectorFront;
       const imageUrl = this._clickedNodeInfo.value.url;
       const data = await inspectorFront.getImageDataFromURL(imageUrl);
       message = await data.data.string();

devtools/client/inspector/shared/tooltips-overlay.js

@@ -422,7 +422,7 @@ TooltipsOverlay.prototype = {
       naturalWidth = size.naturalWidth;
       naturalHeight = size.naturalHeight;
     } else {
-      const inspectorFront = this.view.inspector.inspector;
+      const inspectorFront = this.view.inspector.inspectorFront;
       const { data, size } = await inspectorFront.getImageDataFromURL(
         imageUrl,
         maxDim

devtools/client/inspector/test/browser_inspector_highlighter-03.js

@@ -66,7 +66,7 @@ add_task(async function() {
   await testActor.isNodeCorrectlyHighlighted(iframeBodySelector, is);
 
   info("Waiting for the element picker to deactivate.");
-  await inspector.inspector.nodePicker.stop();
+  await inspector.inspectorFront.nodePicker.stop();
 
   function moveMouseOver(selector, x, y) {
     info("Waiting for element " + selector + " to be highlighted");
@@ -76,6 +76,6 @@ add_task(async function() {
       y,
       options: { type: "mousemove" },
     });
-    return inspector.inspector.nodePicker.once("picker-node-hovered");
+    return inspector.inspectorFront.nodePicker.once("picker-node-hovered");
   }
 });

devtools/client/inspector/test/browser_inspector_highlighter-07.js

@@ -95,6 +95,6 @@ add_task(async function() {
       y,
       options: { type: "mousemove" },
     });
-    return inspector.inspector.nodePicker.once("picker-node-hovered");
+    return inspector.inspectorFront.nodePicker.once("picker-node-hovered");
   }
 });

devtools/client/inspector/test/browser_inspector_highlighter-by-type.js

@@ -18,23 +18,27 @@ add_task(async function() {
   await unknownHighlighterTypeShouldntBeAccepted(inspector);
 });
 
-async function onlyOneInstanceOfMainHighlighter({ inspector }) {
+async function onlyOneInstanceOfMainHighlighter({ inspectorFront }) {
   info("Check that the inspector always sends back the same main highlighter");
 
-  const h1 = await inspector.getHighlighter(false);
+  const h1 = await inspectorFront.getHighlighter(false);
-  const h2 = await inspector.getHighlighter(false);
+  const h2 = await inspectorFront.getHighlighter(false);
   is(h1, h2, "The same highlighter front was returned");
 
   is(h1.typeName, "highlighter", "The right front type was returned");
 }
 
-async function manyInstancesOfCustomHighlighters({ inspector }) {
+async function manyInstancesOfCustomHighlighters({ inspectorFront }) {
-  const h1 = await inspector.getHighlighterByType("BoxModelHighlighter");
+  const h1 = await inspectorFront.getHighlighterByType("BoxModelHighlighter");
-  const h2 = await inspector.getHighlighterByType("BoxModelHighlighter");
+  const h2 = await inspectorFront.getHighlighterByType("BoxModelHighlighter");
   ok(h1 !== h2, "getHighlighterByType returns new instances every time (1)");
 
-  const h3 = await inspector.getHighlighterByType("CssTransformHighlighter");
+  const h3 = await inspectorFront.getHighlighterByType(
-  const h4 = await inspector.getHighlighterByType("CssTransformHighlighter");
+    "CssTransformHighlighter"
+  );
+  const h4 = await inspectorFront.getHighlighterByType(
+    "CssTransformHighlighter"
+  );
   ok(h3 !== h4, "getHighlighterByType returns new instances every time (2)");
   ok(
     h3 !== h1 && h3 !== h2,
@@ -51,9 +55,11 @@ async function manyInstancesOfCustomHighlighters({ inspector }) {
   await h4.finalize();
 }
 
-async function showHideMethodsAreAvailable({ inspector }) {
+async function showHideMethodsAreAvailable({ inspectorFront }) {
-  const h1 = await inspector.getHighlighterByType("BoxModelHighlighter");
+  const h1 = await inspectorFront.getHighlighterByType("BoxModelHighlighter");
-  const h2 = await inspector.getHighlighterByType("CssTransformHighlighter");
+  const h2 = await inspectorFront.getHighlighterByType(
+    "CssTransformHighlighter"
+  );
 
   ok("show" in h1, "Show method is present on the front API");
   ok("show" in h2, "Show method is present on the front API");
@@ -64,7 +70,7 @@ async function showHideMethodsAreAvailable({ inspector }) {
   await h2.finalize();
 }
 
-async function unknownHighlighterTypeShouldntBeAccepted({ inspector }) {
+async function unknownHighlighterTypeShouldntBeAccepted({ inspectorFront }) {
-  const h = await inspector.getHighlighterByType("whatever");
+  const h = await inspectorFront.getHighlighterByType("whatever");
   ok(!h, "No highlighter was returned for the invalid type");
 }

devtools/client/inspector/test/browser_inspector_highlighter-cancel.js

@@ -39,7 +39,7 @@ add_task(async function() {
   function cancelPickerByShortcut() {
     info("Key pressed. Waiting for picker to be canceled.");
     testActor.synthesizeKey({ key: "VK_ESCAPE", options: {} });
-    return inspector.inspector.nodePicker.once("picker-node-canceled");
+    return inspector.inspectorFront.nodePicker.once("picker-node-canceled");
   }
 
   function moveMouseOver(selector) {

devtools/client/inspector/test/browser_inspector_highlighter-cssgrid_01.js

@@ -42,7 +42,7 @@ add_task(async function() {
   const { inspector, testActor } = await openInspectorForURL(
     "data:text/html;charset=utf-8," + encodeURIComponent(TEST_URL)
   );
-  const front = inspector.inspector;
+  const front = inspector.inspectorFront;
   const highlighter = await front.getHighlighterByType(HIGHLIGHTER_TYPE);
 
   await isHiddenByDefault(testActor, highlighter);

devtools/client/inspector/test/browser_inspector_highlighter-cssgrid_02.js

@@ -23,7 +23,7 @@ add_task(async function() {
   const { inspector, testActor } = await openInspectorForURL(
     "data:text/html;charset=utf-8," + encodeURIComponent(TEST_URL)
   );
-  const front = inspector.inspector;
+  const front = inspector.inspectorFront;
   const highlighter = await front.getHighlighterByType(HIGHLIGHTER_TYPE);
 
   info("Try to show the highlighter on the grid container");

devtools/client/inspector/test/browser_inspector_highlighter-cssshape_01.js

@@ -30,7 +30,7 @@ const SHAPE_TYPES = [
 
 add_task(async function() {
   const { inspector, testActor } = await openInspectorForURL(TEST_URL);
-  const front = inspector.inspector;
+  const front = inspector.inspectorFront;
   const highlighter = await front.getHighlighterByType(HIGHLIGHTER_TYPE);
 
   await isHiddenByDefault(testActor, highlighter);

devtools/client/inspector/test/browser_inspector_highlighter-cssshape_02.js

@@ -11,7 +11,7 @@ const HIGHLIGHTER_TYPE = "ShapesHighlighter";
 
 add_task(async function() {
   const { inspector, testActor } = await openInspectorForURL(TEST_URL);
-  const front = inspector.inspector;
+  const front = inspector.inspectorFront;
   const highlighter = await front.getHighlighterByType(HIGHLIGHTER_TYPE);
 
   await polygonHasCorrectAttrs(testActor, inspector, highlighter);

devtools/client/inspector/test/browser_inspector_highlighter-csstransform_01.js

@@ -23,7 +23,7 @@ add_task(async function() {
   const { inspector, testActor } = await openInspectorForURL(
     "data:text/html;charset=utf-8," + encodeURI(TEST_URL)
   );
-  const front = inspector.inspector;
+  const front = inspector.inspectorFront;
 
   const highlighter = await front.getHighlighterByType(
     "CssTransformHighlighter"

devtools/client/inspector/test/browser_inspector_highlighter-csstransform_02.js

@@ -22,7 +22,7 @@ const TEST_URL = URL_ROOT + "doc_inspector_highlighter_csstransform.html";
 
 add_task(async function() {
   const { inspector, testActor } = await openInspectorForURL(TEST_URL);
-  const front = inspector.inspector;
+  const front = inspector.inspectorFront;
 
   const highlighter = await front.getHighlighterByType(
     "CssTransformHighlighter"

devtools/client/inspector/test/browser_inspector_highlighter-iframes_01.js

@@ -70,7 +70,7 @@ add_task(async function() {
   );
 
   info("Waiting for element picker to deactivate.");
-  await inspector.inspector.nodePicker.stop();
+  await inspector.inspectorFront.nodePicker.stop();
 
   function moveMouseOver(selector) {
     info("Waiting for element " + selector + " to be highlighted");
@@ -80,6 +80,8 @@ add_task(async function() {
         options: { type: "mousemove" },
         center: true,
       })
-      .then(() => inspector.inspector.nodePicker.once("picker-node-hovered"));
+      .then(() =>
+        inspector.inspectorFront.nodePicker.once("picker-node-hovered")
+      );
   }
 });

devtools/client/inspector/test/browser_inspector_highlighter-keybinding_01.js

@@ -54,12 +54,12 @@ add_task(async function() {
   info("First child selection test Passed.");
 
   info("Stopping the picker");
-  await toolbox.inspector.nodePicker.stop();
+  await toolbox.inspectorFront.nodePicker.stop();
 
   function doKeyHover(args) {
     info("Key pressed. Waiting for element to be highlighted/hovered");
     testActor.synthesizeKey(args);
-    return toolbox.inspector.nodePicker.once("picker-node-hovered");
+    return toolbox.inspectorFront.nodePicker.once("picker-node-hovered");
   }
 
   function moveMouseOver(selector) {
@@ -69,6 +69,6 @@ add_task(async function() {
       center: true,
       selector: selector,
     });
-    return toolbox.inspector.nodePicker.once("picker-node-hovered");
+    return toolbox.inspectorFront.nodePicker.once("picker-node-hovered");
   }
 });

devtools/client/inspector/test/browser_inspector_highlighter-keybinding_02.js

@@ -48,12 +48,12 @@ add_task(async function() {
   info("Previously chosen child is remembered. Passed.");
 
   info("Stopping the picker");
-  await toolbox.inspector.nodePicker.stop();
+  await toolbox.inspectorFront.nodePicker.stop();
 
   function doKeyHover(args) {
     info("Key pressed. Waiting for element to be highlighted/hovered");
     const onHighlighterReady = toolbox.once("highlighter-ready");
-    const onPickerNodeHovered = toolbox.inspector.nodePicker.once(
+    const onPickerNodeHovered = toolbox.inspectorFront.nodePicker.once(
       "picker-node-hovered"
     );
     testActor.synthesizeKey(args);
@@ -63,7 +63,7 @@ add_task(async function() {
   function moveMouseOver(selector) {
     info("Waiting for element " + selector + " to be highlighted");
     const onHighlighterReady = toolbox.once("highlighter-ready");
-    const onPickerNodeHovered = toolbox.inspector.nodePicker.once(
+    const onPickerNodeHovered = toolbox.inspectorFront.nodePicker.once(
       "picker-node-hovered"
     );
     testActor.synthesizeMouse({

devtools/client/inspector/test/browser_inspector_highlighter-keybinding_03.js

@@ -57,20 +57,20 @@ add_task(async function() {
     return promise.all([
       inspector.selection.once("new-node-front"),
       inspector.once("inspector-updated"),
-      inspector.inspector.nodePicker.once("picker-stopped"),
+      inspector.inspectorFront.nodePicker.once("picker-stopped"),
     ]);
   }
 
   function doKeyStop(args) {
     info("Key pressed. Waiting for picker to be canceled");
     testActor.synthesizeKey(args);
-    return inspector.inspector.nodePicker.once("picker-stopped");
+    return inspector.inspectorFront.nodePicker.once("picker-stopped");
   }
 
   function moveMouseOver(selector) {
     info("Waiting for element " + selector + " to be highlighted");
     const onHighlighterReady = toolbox.once("highlighter-ready");
-    const onPickerNodeHovered = inspector.inspector.nodePicker.once(
+    const onPickerNodeHovered = inspector.inspectorFront.nodePicker.once(
       "picker-node-hovered"
     );
     testActor.synthesizeMouse({

devtools/client/inspector/test/browser_inspector_highlighter-keybinding_04.js

@@ -15,7 +15,7 @@ add_task(async function() {
   await startPicker(toolbox);
 
   info("Start using the picker by hovering over nodes");
-  const onHover = toolbox.inspector.nodePicker.once("picker-node-hovered");
+  const onHover = toolbox.inspectorFront.nodePicker.once("picker-node-hovered");
   testActor.synthesizeMouse({
     options: { type: "mousemove" },
     center: true,
@@ -24,7 +24,7 @@ add_task(async function() {
   await onHover;
 
   info("Press escape and wait for the picker to stop");
-  const onPickerStopped = toolbox.inspector.nodePicker.once(
+  const onPickerStopped = toolbox.inspectorFront.nodePicker.once(
     "picker-node-canceled"
   );
   testActor.synthesizeKey({

devtools/client/inspector/test/browser_inspector_highlighter-rulers_01.js

@@ -23,7 +23,7 @@ const RULERS_TEXT_STEP = 100;
 
 add_task(async function() {
   const { inspector, testActor } = await openInspectorForURL(TEST_URL);
-  const front = inspector.inspector;
+  const front = inspector.inspectorFront;
 
   const highlighter = await front.getHighlighterByType("RulersHighlighter");
 

devtools/client/inspector/test/browser_inspector_highlighter-rulers_02.js

@@ -15,7 +15,7 @@ const ID = "rulers-highlighter-";
 
 add_task(async function() {
   const { inspector, testActor } = await openInspectorForURL(TEST_URL);
-  const front = inspector.inspector;
+  const front = inspector.inspectorFront;
 
   const highlighter = await front.getHighlighterByType("RulersHighlighter");
 

devtools/client/inspector/test/browser_inspector_highlighter-rulers_03.js

@@ -17,7 +17,7 @@ var { Toolbox } = require("devtools/client/framework/toolbox");
 
 add_task(async function() {
   const { inspector, testActor } = await openInspectorForURL(TEST_URL);
-  const front = inspector.inspector;
+  const front = inspector.inspectorFront;
 
   const highlighter = await front.getHighlighterByType("RulersHighlighter");
 

devtools/client/inspector/test/browser_inspector_highlighter-selector_01.js

@@ -49,7 +49,7 @@ requestLongerTimeout(5);
 
 add_task(async function() {
   const { inspector, testActor } = await openInspectorForURL(TEST_URL);
-  const front = inspector.inspector;
+  const front = inspector.inspectorFront;
   const highlighter = await front.getHighlighterByType("SelectorHighlighter");
 
   const contextNode = await getNodeFront("body", inspector);

devtools/client/inspector/test/browser_inspector_highlighter-selector_02.js

@@ -42,7 +42,7 @@ requestLongerTimeout(5);
 
 add_task(async function() {
   const { inspector, testActor } = await openInspectorForURL(TEST_URL);
-  const front = inspector.inspector;
+  const front = inspector.inspectorFront;
   const highlighter = await front.getHighlighterByType("SelectorHighlighter");
 
   for (const { inIframe, selector, containerCount } of TEST_DATA) {

devtools/client/inspector/test/browser_inspector_highlighter-xbl.js

@@ -37,6 +37,6 @@ add_task(async function() {
       center: true,
       selector: selector,
     });
-    return inspector.inspector.nodePicker.once("picker-node-hovered");
+    return inspector.inspectorFront.nodePicker.once("picker-node-hovered");
   }
 });

devtools/client/inspector/test/browser_inspector_iframe-navigation.js

@@ -40,5 +40,5 @@ add_task(async function() {
   ok(isVisible, "Inspector is highlighting after iframe nav.");
 
   info("Stopping element picker.");
-  await toolbox.inspector.nodePicker.stop();
+  await toolbox.inspectorFront.nodePicker.stop();
 });

devtools/client/inspector/test/browser_inspector_picker-stop-on-tool-change.js

@@ -13,7 +13,9 @@ const TEST_URI =
 
 add_task(async function() {
   const { toolbox } = await openInspectorForURL(TEST_URI);
-  const pickerStopped = toolbox.inspector.nodePicker.once("picker-stopped");
+  const pickerStopped = toolbox.inspectorFront.nodePicker.once(
+    "picker-stopped"
+  );
 
   info("Starting the inspector picker");
   await startPicker(toolbox);

devtools/client/inspector/test/browser_inspector_switch-to-inspector-on-pick.js

@@ -67,7 +67,7 @@ add_task(async function() {
   await startPickerAndAssertSwitchToInspector(toolbox);
 
   info("Stoppping element picker.");
-  await toolbox.inspector.nodePicker.stop();
+  await toolbox.inspectorFront.nodePicker.stop();
 
   checkResults();
 });

devtools/client/inspector/test/head.js

@@ -76,7 +76,7 @@ var navigateTo = async function(inspector, url) {
 var startPicker = async function(toolbox, skipFocus) {
   info("Start the element picker");
   toolbox.win.focus();
-  await toolbox.inspector.nodePicker.start();
+  await toolbox.inspectorFront.nodePicker.start();
   if (!skipFocus) {
     // By default make sure the content window is focused since the picker may not focus
     // the content window by default.
@@ -129,7 +129,9 @@ function pickElement(inspector, testActor, selector, x, y) {
  */
 function hoverElement(inspector, testActor, selector, x, y) {
   info("Waiting for element " + selector + " to be hovered");
-  const onHovered = inspector.inspector.nodePicker.once("picker-node-hovered");
+  const onHovered = inspector.inspectorFront.nodePicker.once(
+    "picker-node-hovered"
+  );
   testActor.synthesizeMouse({ selector, x, y, options: { type: "mousemove" } });
   return onHovered;
 }
@@ -504,7 +506,7 @@ async function poll(check, desc, attempts = 10, timeBetweenAttempts = 200) {
  */
 const getHighlighterHelperFor = type =>
   async function({ inspector, testActor }) {
-    const front = inspector.inspector;
+    const front = inspector.inspectorFront;
     const highlighter = await front.getHighlighterByType(type);
 
     let prefix = "";

devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip.js

@@ -236,34 +236,34 @@ class SwatchColorPickerTooltip extends SwatchBasedEditorTooltip {
   }
 
   _openEyeDropper() {
-    const { inspector, toolbox, telemetry } = this.inspector;
+    const { inspectorFront, toolbox, telemetry } = this.inspector;
 
     telemetry
       .getHistogramById(TELEMETRY_PICKER_EYEDROPPER_OPEN_COUNT)
       .add(true);
 
     // cancelling picker(if it is already selected) on opening eye-dropper
-    inspector.nodePicker.cancel();
+    inspectorFront.nodePicker.cancel();
 
     // pickColorFromPage will focus the content document. If the devtools are in a
     // separate window, the colorpicker tooltip will be closed before pickColorFromPage
     // resolves. Flip the flag early to avoid issues with onTooltipHidden().
     this.eyedropperOpen = true;
 
-    inspector.pickColorFromPage({ copyOnSelect: false }).then(() => {
+    inspectorFront.pickColorFromPage({ copyOnSelect: false }).then(() => {
       // close the colorpicker tooltip so that only the eyedropper is open.
       this.hide();
 
       this.tooltip.emit("eyedropper-opened");
     }, console.error);
 
-    inspector.once("color-picked", color => {
+    inspectorFront.once("color-picked", color => {
       toolbox.win.focus();
       this._selectColor(color);
       this._onEyeDropperDone();
     });
 
-    inspector.once("color-pick-canceled", () => {
+    inspectorFront.once("color-pick-canceled", () => {
       this._onEyeDropperDone();
     });
   }

devtools/client/styleeditor/StyleEditorUI.jsm

@@ -158,7 +158,7 @@ StyleEditorUI.prototype = {
     this._walker = this._toolbox.walker;
 
     try {
-      this._highlighter = await this._toolbox.inspector.getHighlighterByType(
+      this._highlighter = await this._toolbox.inspectorFront.getHighlighterByType(
         SELECTOR_HIGHLIGHTER_TYPE
       );
     } catch (e) {

devtools/client/webconsole/test/mochitest/head.js

@@ -1139,7 +1139,7 @@ function isReverseSearchInputFocused(hud) {
  */
 async function selectNodeWithPicker(toolbox, testActor, selector) {
   const inspector = toolbox.getPanel("inspector");
-  const inspectorFront = inspector.inspector;
+  const inspectorFront = inspector.inspectorFront;
 
   const onPickerStarted = inspectorFront.nodePicker.once("picker-started");
   inspectorFront.nodePicker.start();

devtools/client/webreplay/mochitest/browser_rr_inspector-02.js

@@ -28,7 +28,7 @@ add_task(async function() {
 
   info("Waiting for element picker to become active.");
   toolbox.win.focus();
-  await toolbox.inspector.nodePicker.start();
+  await toolbox.inspectorFront.nodePicker.start();
 
   info("Moving mouse over div.");
   await moveMouseOver("#maindiv", 1, 1);
@@ -50,6 +50,6 @@ add_task(async function() {
       y,
       options: { type: "mousemove" },
     });
-    return inspector.inspector.nodePicker.once("picker-node-hovered");
+    return inspector.inspectorFront.nodePicker.once("picker-node-hovered");
   }
 });