1 files changed, 97 insertions, 0 deletions
diff --git a/devtools/client/webconsole/test/browser_console_variables_view_highlighter.js b/devtools/client/webconsole/test/browser_console_variables_view_highlighter.js
new file mode 100644
index 000000000..c1b2194de
--- /dev/null
+++ b/devtools/client/webconsole/test/browser_console_variables_view_highlighter.js
@@ -0,0 +1,97 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Check that variables view is linked to the inspector for highlighting and
+// selecting DOM nodes
+
+"use strict";
+
+const TEST_URI = "http://example.com/browser/devtools/client/webconsole/" +
+                 "test/test-bug-952277-highlight-nodes-in-vview.html";
+
+var gWebConsole, gJSTerm, gVariablesView, gToolbox;
+
+function test() {
+  loadTab(TEST_URI).then(() => {
+    openConsole().then(hud => {
+      consoleOpened(hud);
+    });
+  });
+}
+
+function consoleOpened(hud) {
+  gWebConsole = hud;
+  gJSTerm = hud.jsterm;
+  gToolbox = gDevTools.getToolbox(hud.target);
+  gJSTerm.execute("document.querySelectorAll('p')").then(onQSAexecuted);
+}
+
+function onQSAexecuted(msg) {
+  ok(msg, "output message found");
+  let anchor = msg.querySelector("a");
+  ok(anchor, "object link found");
+
+  gJSTerm.once("variablesview-fetched", onNodeListViewFetched);
+
+  executeSoon(() =>
+    EventUtils.synthesizeMouse(anchor, 2, 2, {}, gWebConsole.iframeWindow)
+  );
+}
+
+function onNodeListViewFetched(event, variable) {
+  gVariablesView = variable._variablesView;
+  ok(gVariablesView, "variables view object");
+
+  // Transform the vview into an array we can filter properties from
+  let props = [...variable].map(([id, prop]) => [id, prop]);
+
+  // These properties are the DOM nodes ones
+  props = props.filter(v => v[0].match(/[0-9]+/));
+
+  function hoverOverDomNodeVariableAndAssertHighlighter(index) {
+    if (props[index]) {
+      let prop = props[index][1];
+
+      gToolbox.once("node-highlight", () => {
+        ok(true, "The highlighter was shown on hover of the DOMNode");
+        gToolbox.highlighterUtils.unhighlight().then(() => {
+          clickOnDomNodeVariableAndAssertInspectorSelected(index);
+        });
+      });
+
+      // Rather than trying to emulate a mouseenter event, let's call the
+      // variable's highlightDomNode and see if it has the desired effect
+      prop.highlightDomNode();
+    } else {
+      finishUp();
+    }
+  }
+
+  function clickOnDomNodeVariableAndAssertInspectorSelected(index) {
+    let prop = props[index][1];
+
+    // Make sure the inspector is initialized so we can listen to its events
+    gToolbox.initInspector().then(() => {
+      // Rather than trying to click on the value here, let's just call the
+      // variable's openNodeInInspector function and see if it has the
+      // desired effect
+      prop.openNodeInInspector().then(() => {
+        is(gToolbox.currentToolId, "inspector",
+           "The toolbox switched over the inspector on DOMNode click");
+        gToolbox.selectTool("webconsole").then(() => {
+          hoverOverDomNodeVariableAndAssertHighlighter(index + 1);
+        });
+      });
+    });
+  }
+
+  hoverOverDomNodeVariableAndAssertHighlighter(0);
+}
+
+function finishUp() {
+  gWebConsole = gJSTerm = gVariablesView = gToolbox = null;
+
+  finishTest();
+}