browser_inspector_picker-shift-key.js (4965B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 "use strict"; 6 7 // Test that the node picker can pick elements with pointer-events: none when holding Shift. 8 9 const TEST_URI = `data:text/html;charset=utf-8, 10 <!DOCTYPE html> 11 <main style="display:flex; margin-top: 100px;"> 12 <div id="pointer">Regular element</div> 13 <-- ⚠️ Make the element overlap with its parent so assertHighlightedNode can be used --> 14 <div id="nopointer" style="pointer-events: none;translate: 0 -10%; outline: 1px solid">Element with pointer-events: none</div> 15 <div id="transluscent" style="pointer-events: none;opacity: 0.1">Element with opacity of 0.1</div> 16 <div id="invisible" style="pointer-events: none;opacity: 0">Element with opacity of 0</div> 17 <div> 18 <header>Hello</header> 19 <div style="z-index:-1;position:relative;"> 20 <span id="negative-z-index-child">ZZ</span> 21 </div> 22 </div> 23 </main>`; 24 const IS_OSX = Services.appinfo.OS === "Darwin"; 25 26 add_task(async function () { 27 const { inspector, toolbox, highlighterTestFront } = 28 await openInspectorForURL(TEST_URI); 29 const body = await getNodeFront("body", inspector); 30 is( 31 inspector.selection.nodeFront, 32 body, 33 "By default the body node is selected" 34 ); 35 36 info("Start the element picker"); 37 await startPicker(toolbox); 38 39 info( 40 "Shift-clicking element with pointer-events: none does select the element" 41 ); 42 await clickElement({ 43 inspector, 44 selector: "#nopointer", 45 shiftKey: true, 46 }); 47 await checkElementSelected("#nopointer", inspector); 48 49 info("Shift-clicking element with default pointer-events value also works"); 50 await clickElement({ 51 inspector, 52 selector: "#pointer", 53 shiftKey: true, 54 }); 55 await checkElementSelected("#pointer", inspector); 56 57 info( 58 "Clicking element with pointer-events: none without holding Shift won't select the element but its parent" 59 ); 60 await clickElement({ 61 inspector, 62 selector: "#nopointer", 63 shiftKey: false, 64 }); 65 await checkElementSelected("main", inspector); 66 67 info("Shift-clicking transluscent visible element works"); 68 await clickElement({ 69 inspector, 70 selector: "#transluscent", 71 shiftKey: true, 72 }); 73 await checkElementSelected("#transluscent", inspector); 74 75 info("Shift-clicking invisible element select its parent"); 76 await clickElement({ 77 inspector, 78 selector: "#invisible", 79 shiftKey: true, 80 }); 81 await checkElementSelected("main", inspector); 82 83 info("Shift-clicking element with negative z-index parent works"); 84 await hoverElement( 85 inspector, 86 "#negative-z-index-child", 87 undefined, 88 undefined, 89 { 90 shiftKey: true, 91 } 92 ); 93 is( 94 await highlighterTestFront.getHighlighterNodeTextContent( 95 "box-model-infobar-id" 96 ), 97 "#negative-z-index-child", 98 "The highlighter is shown on #negative-z-index-child" 99 ); 100 101 await clickElement({ 102 inspector, 103 selector: "#negative-z-index-child", 104 shiftKey: true, 105 }); 106 await checkElementSelected("#negative-z-index-child", inspector); 107 108 info("Hover pointer-events element without holding Shift"); 109 await hoverElement(inspector, "#nopointer"); 110 111 ok( 112 await highlighterTestFront.assertHighlightedNode("main"), 113 "The highlighter is shown on the expected node" 114 ); 115 116 info("Pressing Shift should highlight the pointer-events element"); 117 let onHovered = inspector.toolbox.nodePicker.once("picker-node-hovered"); 118 await BrowserTestUtils.synthesizeKey( 119 "VK_SHIFT", 120 { type: "keydown" }, 121 gBrowser.selectedBrowser 122 ); 123 await onHovered; 124 ok(true, "Got a picker-node-hovered event when pressing shift"); 125 ok( 126 await highlighterTestFront.assertHighlightedNode("#nopointer"), 127 "The highlighter is shown on the expected node" 128 ); 129 130 info("Releasing Shift should unhighlight the pointer-events element"); 131 onHovered = inspector.toolbox.nodePicker.once("picker-node-hovered"); 132 await BrowserTestUtils.synthesizeKey( 133 "VK_SHIFT", 134 { type: "keyup" }, 135 gBrowser.selectedBrowser 136 ); 137 await onHovered; 138 ok(true, "Got a picker-node-hovered event when releasing shift"); 139 ok( 140 await highlighterTestFront.assertHighlightedNode("main"), 141 "The highlighter is shown on the expected node" 142 ); 143 }); 144 145 async function clickElement({ selector, inspector, shiftKey }) { 146 const onSelectionChanged = inspector.once("inspector-updated"); 147 await safeSynthesizeMouseEventAtCenterInContentPage(selector, { 148 shiftKey, 149 // Hold meta/ctrl so we don't have to start the picker again 150 [IS_OSX ? "metaKey" : "ctrlKey"]: true, 151 }); 152 await onSelectionChanged; 153 } 154 155 async function checkElementSelected(selector, inspector) { 156 const el = await getNodeFront(selector, inspector); 157 is( 158 inspector.selection.nodeFront, 159 el, 160 `The element ${selector} is now selected` 161 ); 162 }