browser_inspector_highlighter-eyedropper-events.js (5105B)
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 "use strict"; 5 6 // Test the eyedropper mouse and keyboard handling. 7 8 const { TYPES } = ChromeUtils.importESModule( 9 "resource://devtools/shared/highlighters.mjs" 10 ); 11 const HIGHLIGHTER_TYPE = TYPES.EYEDROPPER; 12 const ID = "eye-dropper-"; 13 const TEST_URI = ` 14 <style> 15 html{width:100%;height:100%;} 16 </style> 17 <body>eye-dropper test</body>`; 18 19 const MOVE_EVENTS_DATA = [ 20 { type: "mouse", x: 200, y: 100, expected: { x: 200, y: 100 } }, 21 { type: "mouse", x: 100, y: 200, expected: { x: 100, y: 200 } }, 22 { type: "keyboard", key: "VK_LEFT", expected: { x: 99, y: 200 } }, 23 { 24 type: "keyboard", 25 key: "VK_LEFT", 26 shift: true, 27 expected: { x: 89, y: 200 }, 28 }, 29 { type: "keyboard", key: "VK_RIGHT", expected: { x: 90, y: 200 } }, 30 { 31 type: "keyboard", 32 key: "VK_RIGHT", 33 shift: true, 34 expected: { x: 100, y: 200 }, 35 }, 36 { type: "keyboard", key: "VK_DOWN", expected: { x: 100, y: 201 } }, 37 { 38 type: "keyboard", 39 key: "VK_DOWN", 40 shift: true, 41 expected: { x: 100, y: 211 }, 42 }, 43 { type: "keyboard", key: "VK_UP", expected: { x: 100, y: 210 } }, 44 { type: "keyboard", key: "VK_UP", shift: true, expected: { x: 100, y: 200 } }, 45 // Mouse initialization for left and top snapping 46 { type: "mouse", x: 7, y: 7, expected: { x: 7, y: 7 } }, 47 // Left Snapping 48 { 49 type: "keyboard", 50 key: "VK_LEFT", 51 shift: true, 52 expected: { x: 0, y: 7 }, 53 desc: "Left Snapping to x=0", 54 }, 55 // Top Snapping 56 { 57 type: "keyboard", 58 key: "VK_UP", 59 shift: true, 60 expected: { x: 0, y: 0 }, 61 desc: "Top Snapping to y=0", 62 }, 63 // Mouse initialization for right snapping 64 { 65 type: "mouse", 66 x: width => width - 5, 67 y: 0, 68 expected: { 69 x: width => width - 5, 70 y: 0, 71 }, 72 }, 73 // Right snapping 74 { 75 type: "keyboard", 76 key: "VK_RIGHT", 77 shift: true, 78 expected: { 79 x: width => width, 80 y: 0, 81 }, 82 desc: "Right snapping to x=max window width available", 83 }, 84 // Mouse initialization for bottom snapping 85 { 86 type: "mouse", 87 x: 0, 88 y: (width, height) => height - 5, 89 expected: { 90 x: 0, 91 y: (width, height) => height - 5, 92 }, 93 }, 94 // Bottom snapping 95 { 96 type: "keyboard", 97 key: "VK_DOWN", 98 shift: true, 99 expected: { 100 x: 0, 101 y: (width, height) => height, 102 }, 103 desc: "Bottom snapping to y=max window height available", 104 }, 105 ]; 106 107 add_task(async function () { 108 const { inspector, highlighterTestFront } = await openInspectorForURL( 109 "data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI) 110 ); 111 const helper = await getHighlighterHelperFor(HIGHLIGHTER_TYPE)({ 112 inspector, 113 highlighterTestFront, 114 }); 115 116 helper.prefix = ID; 117 118 await helper.show("html"); 119 await respondsToMoveEvents(helper); 120 await respondsToReturnAndEscape(helper); 121 122 helper.finalize(); 123 }); 124 125 async function respondsToMoveEvents(helper) { 126 info( 127 "Checking that the eyedropper responds to events from the mouse and keyboard" 128 ); 129 const { mouse } = helper; 130 const { width, height } = await SpecialPowers.spawn( 131 gBrowser.selectedBrowser, 132 [], 133 () => { 134 const rect = content.document 135 .querySelector("html") 136 .getBoundingClientRect(); 137 return { width: rect.width, height: rect.height }; 138 } 139 ); 140 141 for (let { type, x, y, key, shift, expected, desc } of MOVE_EVENTS_DATA) { 142 x = typeof x === "function" ? x(width, height) : x; 143 y = typeof y === "function" ? y(width, height) : y; 144 expected.x = 145 typeof expected.x === "function" ? expected.x(width, height) : expected.x; 146 expected.y = 147 typeof expected.y === "function" ? expected.y(width, height) : expected.y; 148 149 if (typeof desc === "undefined") { 150 info(`Simulating a ${type} event to move to ${expected.x} ${expected.y}`); 151 } else { 152 info(`Simulating ${type} event: ${desc}`); 153 } 154 155 if (type === "mouse") { 156 await mouse.move(x, y); 157 } else if (type === "keyboard") { 158 const options = shift ? { shiftKey: true } : {}; 159 await EventUtils.synthesizeAndWaitKey(key, options); 160 } 161 await checkPosition(expected, helper); 162 } 163 } 164 165 async function checkPosition({ x, y }, { getElementAttribute }) { 166 const style = await getElementAttribute("root", "style"); 167 is( 168 style, 169 `top:${y}px;left:${x}px;`, 170 `The eyedropper is at the expected ${x} ${y} position` 171 ); 172 } 173 174 async function respondsToReturnAndEscape({ isElementHidden, show }) { 175 info("Simulating return to select the color and hide the eyedropper"); 176 177 await EventUtils.synthesizeAndWaitKey("VK_RETURN", {}); 178 let hidden = await isElementHidden("root"); 179 ok(hidden, "The eyedropper has been hidden"); 180 181 info("Showing the eyedropper again and simulating escape to hide it"); 182 183 await show("html"); 184 await EventUtils.synthesizeAndWaitKey("VK_ESCAPE", {}); 185 hidden = await isElementHidden("root"); 186 ok(hidden, "The eyedropper has been hidden again"); 187 }