browser_inspector_highlighter-preview.js (2317B)
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 highlighter is correctly displayed and picker mode is not stopped after 8 // a Ctrl-click (Cmd-click on OSX). 9 10 const TEST_URI = `data:text/html;charset=utf-8, 11 <p id="one">one</p><p id="two">two</p><p id="three">three</p>`; 12 const IS_OSX = Services.appinfo.OS === "Darwin"; 13 14 add_task(async function () { 15 const { inspector, toolbox } = await openInspectorForURL(TEST_URI); 16 17 const body = await getNodeFront("body", inspector); 18 is( 19 inspector.selection.nodeFront, 20 body, 21 "By default the body node is selected" 22 ); 23 24 info("Start the element picker"); 25 await startPicker(toolbox); 26 27 info("Shift-clicking element #one should select it but keep the picker ON"); 28 await clickElement("#one", inspector, true); 29 await checkElementSelected("#one", inspector); 30 checkPickerMode(toolbox, true); 31 32 info("Shift-clicking element #two should select it but keep the picker ON"); 33 await clickElement("#two", inspector, true); 34 await checkElementSelected("#two", inspector); 35 checkPickerMode(toolbox, true); 36 37 info("Clicking element #three should select it and turn the picker OFF"); 38 await clickElement("#three", inspector, false); 39 await checkElementSelected("#three", inspector); 40 checkPickerMode(toolbox, false); 41 }); 42 43 async function clickElement(selector, inspector, preview) { 44 const onSelectionChanged = inspector.once("inspector-updated"); 45 await safeSynthesizeMouseEventAtCenterInContentPage(selector, { 46 [IS_OSX ? "metaKey" : "ctrlKey"]: preview, 47 }); 48 await onSelectionChanged; 49 } 50 51 async function checkElementSelected(selector, inspector) { 52 const el = await getNodeFront(selector, inspector); 53 is( 54 inspector.selection.nodeFront, 55 el, 56 `The element ${selector} is now selected` 57 ); 58 } 59 60 function checkPickerMode(toolbox, isOn) { 61 const pickerButton = toolbox.doc.querySelector("#command-button-pick"); 62 is( 63 pickerButton.classList.contains("checked"), 64 isOn, 65 "The picker mode is correct" 66 ); 67 is( 68 pickerButton.getAttribute("aria-pressed"), 69 isOn ? "true" : "false", 70 "The picker mode is correct" 71 ); 72 }