diff options
Diffstat (limited to '')
-rw-r--r-- | devtools/client/inspector/test/browser_inspector_highlighter-geometry_hide_on_interaction.js | 80 |
1 files changed, 80 insertions, 0 deletions
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-geometry_hide_on_interaction.js b/devtools/client/inspector/test/browser_inspector_highlighter-geometry_hide_on_interaction.js new file mode 100644 index 0000000000..4b44561b61 --- /dev/null +++ b/devtools/client/inspector/test/browser_inspector_highlighter-geometry_hide_on_interaction.js @@ -0,0 +1,80 @@ +/* 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"; + +// Test that the geometry highlighter gets hidden when the user performs other actions. + +const TEST_URL = `data:text/html;charset=utf-8, + <h1 style='background:yellow;position:absolute;left:5rem;'>Hello</h1>`; + +add_task(async function () { + const { inspector, toolbox } = await openInspectorForURL(TEST_URL); + + info("Select the absolute positioned element"); + await selectNode("h1", inspector); + const boxModelPanel = inspector.getPanel("boxmodel"); + + info("Click on the button enabling the highlighter"); + const button = await waitFor(() => + boxModelPanel.document.querySelector(".layout-geometry-editor") + ); + + let onHighlighterShown = getOnceHighlighterShown(inspector); + button.click(); + + await onHighlighterShown; + ok(true, "Highlighter is displayed"); + + info("Check that hovering a node in the markup view hides the highlighter"); + const h1Nodecontainer = await getContainerForSelector("h1", inspector); + + let onHighlighterHidden = getOnceHighlighterHidden(inspector); + EventUtils.synthesizeMouseAtCenter( + h1Nodecontainer.tagLine, + { type: "mousemove" }, + inspector.markup.doc.defaultView + ); + await onHighlighterHidden; + ok("Highlighter was hidden when hovering a node in the markup view"); + + info("Check that leaving the markupview shows the highlighter again"); + onHighlighterShown = getOnceHighlighterShown(inspector); + EventUtils.synthesizeMouseAtCenter( + button, + { type: "mousemove" }, + button.ownerDocument.defaultView + ); + await onHighlighterShown; + ok(true, "Highlighter is shown again when leaving the markup view"); + + info("Check that starting the node picker disable the highlighter"); + onHighlighterHidden = getOnceHighlighterHidden(inspector); + await startPicker(toolbox); + await onHighlighterHidden; + ok("Highlighter was hidden when using the node picker"); + + // stop the node picker + await toolbox.nodePicker.stop({ canceled: true }); + + info("Check that selecting another node does hide the highlighter"); + onHighlighterShown = onHighlighterShown = getOnceHighlighterShown(inspector); + button.click(); + await onHighlighterShown; + ok(true, "highlighter is displayed again"); + + onHighlighterHidden = onHighlighterHidden = + getOnceHighlighterHidden(inspector); + await selectNode("body", inspector); + await onHighlighterHidden; + ok(true, "Selecting another node hides the highlighter"); +}); + +function getOnceHighlighterShown(inspector) { + return inspector.highlighters.once("geometry-editor-highlighter-shown"); +} + +function getOnceHighlighterHidden(inspector) { + return inspector.highlighters.once("geometry-editor-highlighter-hidden"); +} |