From 8d53b63ee837d365872fd9bd95277526c05e39b6 Mon Sep 17 00:00:00 2001 From: Jason Laster Date: Fri, 30 Aug 2019 20:43:13 +0000 Subject: [PATCH] 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 | 41 +++++++----- .../webconsole/test/browser/browser.ini | 3 + .../browser/browser_jsterm_inspect_panels.js | 67 +++++++++++++++++++ .../test/browser/test-simple-function.html | 9 +++ .../test/browser/test-simple-function.js | 5 ++ .../client/webconsole/webconsole-wrapper.js | 8 ++- 6 files changed, 117 insertions(+), 16 deletions(-) create mode 100644 devtools/client/webconsole/test/browser/browser_jsterm_inspect_panels.js create mode 100644 devtools/client/webconsole/test/browser/test-simple-function.html create mode 100644 devtools/client/webconsole/test/browser/test-simple-function.js diff --git a/devtools/client/framework/toolbox.js b/devtools/client/framework/toolbox.js index d2f1cbf5c314..471b67328f94 100644 --- a/devtools/client/framework/toolbox.js +++ b/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 diff --git a/devtools/client/webconsole/test/browser/browser.ini b/devtools/client/webconsole/test/browser/browser.ini index 5cbd0cd08ea9..848e8f80b855 100644 --- a/devtools/client/webconsole/test/browser/browser.ini +++ b/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 diff --git a/devtools/client/webconsole/test/browser/browser_jsterm_inspect_panels.js b/devtools/client/webconsole/test/browser/browser_jsterm_inspect_panels.js new file mode 100644 index 000000000000..1d8615a9c60a --- /dev/null +++ b/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 + ); + }); +} diff --git a/devtools/client/webconsole/test/browser/test-simple-function.html b/devtools/client/webconsole/test/browser/test-simple-function.html new file mode 100644 index 000000000000..1c328fbb5ff2 --- /dev/null +++ b/devtools/client/webconsole/test/browser/test-simple-function.html @@ -0,0 +1,9 @@ + + + + + + +

Test inspecting an element

+ + diff --git a/devtools/client/webconsole/test/browser/test-simple-function.js b/devtools/client/webconsole/test/browser/test-simple-function.js new file mode 100644 index 000000000000..770a19bc99cd --- /dev/null +++ b/devtools/client/webconsole/test/browser/test-simple-function.js @@ -0,0 +1,5 @@ +"use strict"; + +window.test = function() { + console.log("simple function"); +}; diff --git a/devtools/client/webconsole/webconsole-wrapper.js b/devtools/client/webconsole/webconsole-wrapper.js index 81a59e5c50c2..15d651279771 100644 --- a/devtools/client/webconsole/webconsole-wrapper.js +++ b/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