browser_webconsole_nodes_highlight.js

Enable keyboard shortcuts

/* 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/. */

"use strict";

// Check hovering logged nodes highlight them in the content page.

const HTML = `

  <!DOCTYPE html>

  <html>

    <body>

      <h1>Node Highlight  Test</h1>

    </body>

    <script>

      function logNode(selector) {

        console.log(document.querySelector(selector));

    </script>

  </html>

`;

const TEST_URI = "data:text/html;charset=utf-8," + encodeURI(HTML);

add_task(async function () {

  const hud = await openNewTabAndConsole(TEST_URI);

  const toolbox = hud.toolbox;

  const highlighterTestFront = await getHighlighterTestFront(toolbox);

  const highlighter = toolbox.getHighlighter();

  let onHighlighterShown;

  let onHighlighterHidden;

  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {

    content.wrappedJSObject.logNode("h1");

});

  const msg = await waitFor(() => findConsoleAPIMessage(hud, "<h1>"));

  const node = msg.querySelector(".objectBox-node");

  Assert.notStrictEqual(node, null, "Node was logged as expected");

  const view = node.ownerDocument.defaultView;

  const nonHighlightEl = toolbox.doc.getElementById(

    "toolbox-meatball-menu-button"

);

  info("Highlight the node by moving the cursor on it");

  onHighlighterShown = highlighter.waitForHighlighterShown();

  EventUtils.synthesizeMouseAtCenter(node, { type: "mousemove" }, view);

  const { nodeFront } = await onHighlighterShown;

  is(nodeFront.displayName, "h1", "The correct node was highlighted");

  isVisible = await highlighterTestFront.isHighlighting();

  ok(isVisible, "Highlighter is displayed");

  info("Unhighlight the node by moving away from the node");

  onHighlighterHidden = highlighter.waitForHighlighterHidden();

  EventUtils.synthesizeMouseAtCenter(

    nonHighlightEl,

    { type: "mousemove" },

    view

);

  await onHighlighterHidden;

  ok(true, "node-unhighlight event was fired when moving away from the node");

  info("Check we don't have zombie highlighters when briefly hovering a node");

  onHighlighterShown = highlighter.waitForHighlighterShown();

  onHighlighterHidden = highlighter.waitForHighlighterHidden();

  // Move hover the node and then right after move out.

  EventUtils.synthesizeMouseAtCenter(node, { type: "mousemove" }, view);

  EventUtils.synthesizeMouseAtCenter(

    nonHighlightEl,

    { type: "mousemove" },

    view

);

  await Promise.all([onHighlighterShown, onHighlighterHidden]);

  ok(true, "The highlighter was removed");

  isVisible = await highlighterTestFront.isHighlighting();

  is(isVisible, false, "The highlighter is not displayed anymore");

});