browser_markup_keybindings_03.js (2100B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 // Tests that selecting a node with the mouse (by clicking on the line) focuses 7 // the first focusable element in the corresponding MarkupContainer so that the 8 // keyboard can be used immediately. 9 10 const TEST_URL = `data:text/html;charset=utf8, 11 <div class='test-class'></div>Text node`; 12 13 add_task(async function () { 14 const { inspector } = await openInspectorForURL(TEST_URL); 15 const { walker } = inspector; 16 17 info("Select the test node to have the 2 test containers visible"); 18 await selectNode("div", inspector); 19 20 const divFront = await walker.querySelector(walker.rootNode, "div"); 21 const textFront = await walker.nextSibling(divFront); 22 23 info("Click on the MarkupContainer element for the text node"); 24 await clickContainer(textFront, inspector); 25 is( 26 inspector.markup.doc.activeElement, 27 getContainerForNodeFront(textFront, inspector).editor.textNode.valuePreRef 28 .current, 29 "The currently focused element is the node's text content" 30 ); 31 32 info("Click on the MarkupContainer element for the <div> node"); 33 await clickContainer(divFront, inspector); 34 is( 35 inspector.markup.doc.activeElement, 36 getContainerForNodeFront(divFront, inspector).editor.tag, 37 "The currently focused element is the div's tagname" 38 ); 39 40 info("Click on the test-class attribute, to make sure it gets focused"); 41 const editor = getContainerForNodeFront(divFront, inspector).editor; 42 const attributeEditor = editor.attrElements 43 .get("class") 44 .querySelector(".editable"); 45 46 const onFocus = once(attributeEditor, "focus"); 47 EventUtils.synthesizeMouseAtCenter( 48 attributeEditor, 49 { type: "mousedown" }, 50 inspector.markup.doc.defaultView 51 ); 52 EventUtils.synthesizeMouseAtCenter( 53 attributeEditor, 54 { type: "mouseup" }, 55 inspector.markup.doc.defaultView 56 ); 57 await onFocus; 58 59 is( 60 inspector.markup.doc.activeElement, 61 attributeEditor, 62 "The currently focused element is the div's class attribute" 63 ); 64 });