diff options
Diffstat (limited to 'devtools/client/webconsole/test/browser/browser_webconsole_nodes_highlight.js')
-rw-r--r-- | devtools/client/webconsole/test/browser/browser_webconsole_nodes_highlight.js | 81 |
1 files changed, 81 insertions, 0 deletions
diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_nodes_highlight.js b/devtools/client/webconsole/test/browser/browser_webconsole_nodes_highlight.js new file mode 100644 index 0000000000..b95793c71c --- /dev/null +++ b/devtools/client/webconsole/test/browser/browser_webconsole_nodes_highlight.js @@ -0,0 +1,81 @@ +/* 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"); + ok(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"); +}); |