Bug 1575240 - inspect(x) should show x in the appropriate panel. r=nchevobbe

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

--HG--
extra : moz-landing-system : lando

devtools/client/framework/toolbox.js

@@ -3389,23 +3389,21 @@ Toolbox.prototype = {
       objectActor.preview &&
       objectActor.preview.nodeType === domNodeConstants.ELEMENT_NODE
     ) {
-      // Open the inspector and select the DOM Element.
-      await this.loadTool("inspector");
-      const inspector = this.getPanel("inspector");
-      const nodeFound = await inspector.inspectNodeActor(
-        objectActor.actor,
-        inspectFromAnnotation
-      );
-      if (nodeFound) {
-        await this.selectTool("inspector");
-      }
-    } else if (
-      objectActor.type !== "null" &&
-      objectActor.type !== "undefined"
-    ) {
+      return this.viewElementInInspector(objectActor, inspectFromAnnotation);
+    }
+
+    if (objectActor.class == "Function") {
+      const { url, line } = objectActor.location;
+      return this.viewSourceInDebugger(url, line);
+    }
+
+    if (objectActor.type !== "null" && objectActor.type !== "undefined") {
       // Open then split console and inspect the object in the variables view,
       // when the objectActor doesn't represent an undefined or null value.
-      await this.openSplitConsole();
+      if (this.currentToolId != "webconsole") {
+        await this.openSplitConsole();
+      }
+
       const panel = this.getPanel("webconsole");
       panel.hud.ui.inspectObjectActor(objectActor);
     }
@@ -3795,6 +3793,19 @@ Toolbox.prototype = {
     );
   },
 
+  viewElementInInspector: async function(objectActor, inspectFromAnnotation) {
+    // Open the inspector and select the DOM Element.
+    await this.loadTool("inspector");
+    const inspector = this.getPanel("inspector");
+    const nodeFound = await inspector.inspectNodeActor(
+      objectActor.actor,
+      inspectFromAnnotation
+    );
+    if (nodeFound) {
+      await this.selectTool("inspector");
+    }
+  },
+
   /**
    * Opens source in debugger. Falls back to plain "view-source:".
    * @see devtools/client/shared/source-utils.js

devtools/client/webconsole/test/browser/browser.ini

@@ -130,6 +130,8 @@ support-files =
   test-non-javascript-mime-worker.html
   test-primitive-stacktrace.html
   test-reopen-closed-tab.html
+  test-simple-function.html
+  test-simple-function.js
   test-sourcemap-error-01.html
   test-sourcemap-error-01.js
   test-sourcemap-error-02.html
@@ -261,6 +263,7 @@ skip-if = (os == "win" && processor == "aarch64") # disabled on aarch64 due to 1
 [browser_jsterm_history_nav.js]
 [browser_jsterm_history_persist.js]
 [browser_jsterm_inspect.js]
+[browser_jsterm_inspect_panels.js]
 [browser_jsterm_instance_of.js]
 [browser_jsterm_middle_click_paste.js]
 tags = clipboard

devtools/client/webconsole/test/browser/browser_jsterm_inspect_panels.js

@@ -0,0 +1,67 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Check that the inspect() jsterm helper function works.
+
+"use strict";
+
+const TEST_URI =
+  "https://example.com/browser/devtools/client/webconsole/test/browser/" +
+  "test-simple-function.html";
+
+add_task(async function() {
+  const hud = await openNewTabAndConsole(TEST_URI);
+
+  await testInspectingElement(hud);
+  await testInspectingFunction(hud);
+});
+
+async function testInspectingElement(hud) {
+  info("Test `inspect(el)`");
+  execute(hud, "inspect(document.querySelector('p'))");
+  await waitForSelectedElementInInspector(hud.toolbox, "p");
+  ok(true, "inspected element is now selected in the inspector");
+}
+
+async function testInspectingFunction(hud) {
+  info("Test `inspect(test)`");
+  execute(hud, "inspect(test)");
+
+  await waitFor(() => {
+    const dbg = hud.toolbox.getPanel("jsdebugger");
+    if (!dbg) {
+      return false;
+    }
+
+    const selectedLocation = dbg._selectors.getSelectedLocation(
+      dbg._getState()
+    );
+
+    if (!selectedLocation) {
+      return false;
+    }
+
+    return (
+      selectedLocation.sourceId.includes("test-simple-function.js") &&
+      selectedLocation.line == 3
+    );
+  });
+
+  ok(true, "inspected function is now selected in the debugger");
+}
+
+async function waitForSelectedElementInInspector(toolbox, displayName) {
+  return waitFor(() => {
+    const inspector = toolbox.getPanel("inspector");
+    if (!inspector) {
+      return false;
+    }
+
+    const selection = inspector.selection;
+    return (
+      selection &&
+      selection.nodeFront &&
+      selection.nodeFront.displayName == displayName
+    );
+  });
+}

devtools/client/webconsole/test/browser/test-simple-function.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html dir="ltr" xml:lang="en-US" lang="en-US">
+  <head>
+    <script src="test-simple-function.js"></script>
+  </head>
+  <body>
+    <p>Test inspecting an element</p>
+  </body>
+</html>

devtools/client/webconsole/test/browser/test-simple-function.js

@@ -0,0 +1,5 @@
+"use strict";
+
+window.test = function() {
+  console.log("simple function");
+};

devtools/client/webconsole/webconsole-wrapper.js

@@ -242,7 +242,13 @@ class WebConsoleWrapper {
         },
         getMappedExpression: this.hud.getMappedExpression.bind(this.hud),
         getPanelWindow: () => webConsoleUI.window,
-        inspectObjectActor: webConsoleUI.inspectObjectActor.bind(webConsoleUI),
+        inspectObjectActor: objectActor => {
+          if (this.toolbox) {
+            this.toolbox.inspectObjectActor(objectActor);
+          } else {
+            webConsoleUI.inspectObjectActor(objectActor);
+          }
+        },
       };
 
       // Set `openContextMenu` this way so, `serviceContainer` variable