Bug 1318060 - Add onInspectIconClick prop and associated test. r=Honza
authorMatt R <matthieu.rigolot@gmail.com>
Mon, 08 Apr 2019 11:32:54 +0200
changeset 468511 46c255ed5a314a9ff548eaf77b53b85ffa432866
parent 468510 4c17b4deacd3538880c61a347a8c53c884e6fce0
child 468512 86b54cfca31f806cc151bddc96d228aafb71f988
push id112730
push userntim.bugs@gmail.com
push dateTue, 09 Apr 2019 15:39:18 +0000
treeherdermozilla-inbound@46c255ed5a31 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza
bugs1318060
milestone68.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 1318060 - Add onInspectIconClick prop and associated test. r=Honza Differential Revision: https://phabricator.services.mozilla.com/D26487
devtools/client/dom/content/components/DomTree.js
devtools/client/dom/test/browser.ini
devtools/client/dom/test/browser_dom_nodes_select.js
--- a/devtools/client/dom/content/components/DomTree.js
+++ b/devtools/client/dom/content/components/DomTree.js
@@ -68,40 +68,57 @@ class DomTree extends Component {
     } = this.props;
 
     const columns = [{
       "id": "value",
     }];
 
     let onDOMNodeMouseOver;
     let onDOMNodeMouseOut;
+    let onInspectIconClick;
     const toolbox = DomProvider.getToolbox();
     if (toolbox) {
       onDOMNodeMouseOver = async (grip, options = {}) => {
         await toolbox.initInspector();
         if (!toolbox.highlighter) {
           return null;
         }
         const nodeFront = await toolbox.walker.gripToNodeFront(grip);
         return toolbox.highlighter.highlight(nodeFront, options);
       };
       onDOMNodeMouseOut = (forceHide = false) => {
         return toolbox.highlighter
           ? toolbox.highlighter.unhighlight(forceHide)
           : null;
       };
+      onInspectIconClick = async (grip) => {
+        await toolbox.initInspector();
+        const onSelectInspector = toolbox.selectTool("inspector", "inspect_dom");
+        const onGripNodeToFront = toolbox.walker.gripToNodeFront(grip);
+        const [
+          front,
+          inspector,
+        ] = await Promise.all([onGripNodeToFront, onSelectInspector]);
+
+        const onInspectorUpdated = inspector.once("inspector-updated");
+        const onNodeFrontSet = toolbox.selection
+          .setNodeFront(front, { reason: "console" });
+
+        return Promise.all([onNodeFrontSet, onInspectorUpdated]);
+      };
     }
 
     // This is the integration point with Reps. The DomTree is using
     // Reps to render all values. The code also specifies default rep
     // used for data types that don't have its own specific template.
     const renderValue = props => {
       return Rep(Object.assign({}, props, {
         onDOMNodeMouseOver,
         onDOMNodeMouseOut,
+        onInspectIconClick,
         defaultRep: Grip,
         cropLimit: 50,
       }));
     };
 
     return (
       TreeView({
         columns,
--- a/devtools/client/dom/test/browser.ini
+++ b/devtools/client/dom/test/browser.ini
@@ -9,8 +9,9 @@ support-files =
   !/devtools/client/shared/test/frame-script-utils.js
   !/devtools/client/shared/test/shared-head.js
   !/devtools/client/shared/test/telemetry-test-helpers.js
 
 [browser_dom_array.js]
 [browser_dom_basic.js]
 [browser_dom_refresh.js]
 [browser_dom_nodes_highlight.js]
+[browser_dom_nodes_select.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/dom/test/browser_dom_nodes_select.js
@@ -0,0 +1,41 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TEST_PAGE_URL = URL_ROOT + "page_dom_nodes.html";
+
+/**
+ * Checks whether hovering nodes highlight them in the content page
+ */
+add_task(async function() {
+  info("Test DOM panel node highlight started");
+
+  const { panel } = await addTestTab(TEST_PAGE_URL);
+  const toolbox = gDevTools.getToolbox(panel.target);
+  const node = getRowByIndex(panel, 2);
+
+  // Loading the inspector panel at first, to make it possible to listen for
+  // new node selections
+
+  await toolbox.loadTool("inspector");
+  const inspector = toolbox.getPanel("inspector");
+
+  const openInInspectorIcon = node.querySelector(".open-inspector");
+  ok(node !== null, "Node was logged as expected");
+
+  info("Clicking on the inspector icon and waiting for the " +
+       "inspector to be selected");
+  const onInspectorSelected = toolbox.once("inspector-selected");
+  const onInspectorUpdated = inspector.once("inspector-updated");
+  const onNewNode = toolbox.selection.once("new-node-front");
+
+  openInInspectorIcon.click();
+
+  await onInspectorSelected;
+  await onInspectorUpdated;
+  const nodeFront = await onNewNode;
+
+  ok(true, "Inspector selected and new node got selected");
+  is(nodeFront.displayName, "h1", "The expected node was selected");
+});