1 files changed, 147 insertions, 0 deletions
diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-inspector-integration.js b/devtools/client/debugger/test/mochitest/browser_dbg-inspector-integration.js
new file mode 100644
index 0000000000..1135a18a97
--- /dev/null
+++ b/devtools/client/debugger/test/mochitest/browser_dbg-inspector-integration.js
@@ -0,0 +1,147 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
+
+// Tests that clicking the DOM node button in any ObjectInspect
+// opens the Inspector panel
+
+"use strict";
+
+add_task(async function () {
+  // Ensures the end panel is wide enough to show the inspector icon
+  await pushPref("devtools.debugger.end-panel-size", 600);
+  // Disable 3-pane inspector as it might trigger unwanted server communication.
+  await pushPref("devtools.inspector.three-pane-enabled", false);
+
+  const dbg = await initDebugger("doc-script-switching.html");
+  const { toolbox } = dbg;
+  const highlighterTestFront = await getHighlighterTestFront(toolbox);
+  const highlighter = toolbox.getHighlighter();
+
+  // Bug 1562165: the WhyPaused element is displayed for a few hundred ms when adding an
+  // expression, which can break synthesizeMouseAtCenter. So here we wait for the
+  // whyPaused element to be displayed then hidden before testing the highlight feature.
+  const onWhyPausedDisplayed = waitUntil(() =>
+    dbg.win.document.querySelector(".why-paused")
+  );
+  await addExpression(dbg, "window.document.querySelector('button')");
+  // TODO: Remove when Bug 1562165 lands.
+  await onWhyPausedDisplayed;
+  // TODO: Remove when Bug 1562165 lands.
+  await waitUntil(() => !dbg.win.document.querySelector(".why-paused"));
+
+  info(
+    "Check that hovering over DOM element highlights the node in content panel"
+  );
+  let onNodeHighlight = highlighter.waitForHighlighterShown();
+
+  info("Mouseover the open in inspector button");
+  const inspectorNode = await waitFor(() => findElement(dbg, "openInspector"));
+  const view = inspectorNode.ownerDocument.defaultView;
+  EventUtils.synthesizeMouseAtCenter(
+    inspectorNode,
+    { type: "mouseover" },
+    view
+  );
+
+  info("Wait for highligther to be shown");
+  const { nodeFront } = await onNodeHighlight;
+  is(nodeFront.displayName, "button", "The correct node was highlighted");
+
+  info("Check that moving the mouse away from the node hides the highlighter");
+  let onNodeUnhighlight = highlighter.waitForHighlighterHidden();
+  const nonHighlightEl = inspectorNode.closest(".object-node");
+  EventUtils.synthesizeMouseAtCenter(
+    nonHighlightEl,
+    { type: "mouseover" },
+    view
+  );
+
+  await onNodeUnhighlight;
+  isVisible = await highlighterTestFront.isHighlighting();
+  is(isVisible, false, "The highlighter is not displayed anymore");
+
+  info("Check we don't have zombie highlighters when briefly hovering a node");
+  onNodeHighlight = highlighter.waitForHighlighterShown();
+  onNodeUnhighlight = highlighter.waitForHighlighterHidden();
+
+  // Move hover the node and then, right after, move out.
+  EventUtils.synthesizeMouseAtCenter(
+    inspectorNode,
+    { type: "mousemove" },
+    view
+  );
+  EventUtils.synthesizeMouseAtCenter(
+    nonHighlightEl,
+    { type: "mousemove" },
+    view
+  );
+
+  await Promise.all([onNodeHighlight, onNodeUnhighlight]);
+  isVisible = await highlighterTestFront.isHighlighting();
+  is(isVisible, false, "The highlighter is not displayed anymore - no zombie");
+
+  info("Ensure panel changes when button is clicked");
+  // Loading the inspector panel at first, to make it possible to listen for
+  // new node selections
+  const inspector = await toolbox.loadTool("inspector");
+  const onInspectorSelected = toolbox.once("inspector-selected");
+  const onInspectorUpdated = inspector.once("inspector-updated");
+  const onNewNode = toolbox.selection.once("new-node-front");
+
+  inspectorNode.click();
+
+  await onInspectorSelected;
+  await onInspectorUpdated;
+  const inspectorNodeFront = await onNewNode;
+
+  ok(true, "Inspector selected and new node got selected");
+  is(
+    inspectorNodeFront.displayName,
+    "button",
+    "The expected node was selected"
+  );
+});
+
+add_task(async function () {
+  // Disable 3-pane inspector as it might trigger unwanted server communication.
+  await pushPref("devtools.inspector.three-pane-enabled", false);
+
+  const dbg = await initDebugger("doc-event-handler.html");
+  const { toolbox } = dbg;
+
+  invokeInTab("synthesizeClick");
+  await waitForPaused(dbg);
+
+  findElement(dbg, "frame", 2).focus();
+  clickElement(dbg, "frame", 2);
+  await waitForPaused(dbg);
+  await waitForSelectedSource(dbg, "doc-event-handler.html");
+
+  // Hover over the token to launch preview popup
+  await tryHovering(dbg, 5, 8, "popup");
+
+  info("Wait for top level node to expand and child nodes to load");
+  await waitUntil(
+    () => dbg.win.document.querySelectorAll(".preview-popup .node").length > 1
+  );
+
+  // Click the first inspector button to view node in inspector
+  await waitForElement(dbg, "openInspector");
+
+  // Loading the inspector panel at first, to make it possible to listen for
+  // new node selections
+  const inspector = await toolbox.loadTool("inspector");
+
+  const onInspectorSelected = toolbox.once("inspector-selected");
+  const onInspectorUpdated = inspector.once("inspector-updated");
+  const onNewNode = toolbox.selection.once("new-node-front");
+
+  findElement(dbg, "openInspector").click();
+
+  await onInspectorSelected;
+  await onInspectorUpdated;
+  await onNewNode;
+
+  ok(true, "Inspector selected and new node got selected");
+});