browser_PanelMultiView_focus.js (5160B)
1 /* Any copyright is dedicated to the Public Domain. 2 * http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 /** 7 * Test the focus behavior when opening PanelViews. 8 */ 9 10 let gAnchor; 11 let gPanel; 12 let gPanelMultiView; 13 let gMainView; 14 let gMainButton; 15 let gMainSubButton; 16 let gSubView; 17 let gSubButton; 18 19 function createWith(doc, tag, props) { 20 let el = doc.createXULElement(tag); 21 for (let prop in props) { 22 el.setAttribute(prop, props[prop]); 23 } 24 return el; 25 } 26 27 add_setup(async function () { 28 let navBar = document.getElementById("nav-bar"); 29 gAnchor = document.createXULElement("toolbarbutton"); 30 // Must be focusable in order for key presses to work. 31 gAnchor.style["-moz-user-focus"] = "normal"; 32 navBar.appendChild(gAnchor); 33 let onPress = event => 34 PanelMultiView.openPopup(gPanel, gAnchor, { 35 triggerEvent: event, 36 }); 37 gAnchor.addEventListener("keypress", onPress); 38 gAnchor.addEventListener("click", onPress); 39 gAnchor.setAttribute("aria-label", "test label"); 40 gPanel = document.createXULElement("panel"); 41 navBar.appendChild(gPanel); 42 gPanelMultiView = document.createXULElement("panelmultiview"); 43 gPanelMultiView.setAttribute("mainViewId", "testMainView"); 44 gPanel.appendChild(gPanelMultiView); 45 46 gMainView = document.createXULElement("panelview"); 47 gMainView.id = "testMainView"; 48 gPanelMultiView.appendChild(gMainView); 49 gMainButton = createWith(document, "button", { label: "gMainButton" }); 50 gMainView.appendChild(gMainButton); 51 gMainSubButton = createWith(document, "button", { label: "gMainSubButton" }); 52 gMainView.appendChild(gMainSubButton); 53 gMainSubButton.addEventListener("command", () => 54 gPanelMultiView.showSubView("testSubView", gMainSubButton) 55 ); 56 57 gSubView = document.createXULElement("panelview"); 58 gSubView.id = "testSubView"; 59 gPanelMultiView.appendChild(gSubView); 60 gSubButton = createWith(document, "button", { label: "gSubButton" }); 61 gSubView.appendChild(gSubButton); 62 63 registerCleanupFunction(() => { 64 gAnchor.remove(); 65 gPanel.remove(); 66 }); 67 }); 68 69 // Activate the main view by pressing a key. Focus should be moved inside. 70 add_task(async function testMainViewByKeypress() { 71 gAnchor.focus(); 72 await gCUITestUtils.openPanelMultiView(gPanel, gMainView, () => 73 EventUtils.synthesizeKey(" ") 74 ); 75 Assert.equal( 76 document.activeElement, 77 gMainButton, 78 "Focus on button in main view" 79 ); 80 await gCUITestUtils.hidePanelMultiView(gPanel, () => 81 PanelMultiView.hidePopup(gPanel) 82 ); 83 }); 84 85 // Activate the main view by clicking the mouse. Focus should not be moved 86 // inside. 87 add_task(async function testMainViewByClick() { 88 await gCUITestUtils.openPanelMultiView(gPanel, gMainView, () => 89 gAnchor.click() 90 ); 91 Assert.notEqual( 92 document.activeElement, 93 gMainButton, 94 "Focus not on button in main view" 95 ); 96 await gCUITestUtils.hidePanelMultiView(gPanel, () => 97 PanelMultiView.hidePopup(gPanel) 98 ); 99 }); 100 101 // Activate the subview by pressing a key. Focus should be moved to the first 102 // button after the Back button. 103 add_task(async function testSubViewByKeypress() { 104 await gCUITestUtils.openPanelMultiView(gPanel, gMainView, () => 105 gAnchor.click() 106 ); 107 while (document.activeElement != gMainSubButton) { 108 EventUtils.synthesizeKey("KEY_Tab", { shiftKey: true }); 109 } 110 let shown = BrowserTestUtils.waitForEvent(gSubView, "ViewShown"); 111 EventUtils.synthesizeKey(" "); 112 await shown; 113 Assert.equal( 114 document.activeElement, 115 gSubButton, 116 "Focus on first button after Back button in subview" 117 ); 118 await gCUITestUtils.hidePanelMultiView(gPanel, () => 119 PanelMultiView.hidePopup(gPanel) 120 ); 121 }); 122 123 // Activate the subview by clicking the mouse. Focus should not be moved 124 // inside. 125 add_task(async function testSubViewByClick() { 126 await gCUITestUtils.openPanelMultiView(gPanel, gMainView, () => 127 gAnchor.click() 128 ); 129 let shown = BrowserTestUtils.waitForEvent(gSubView, "ViewShown"); 130 gMainSubButton.click(); 131 await shown; 132 let backButton = gSubView.querySelector(".subviewbutton-back"); 133 Assert.notEqual( 134 document.activeElement, 135 backButton, 136 "Focus not on Back button in subview" 137 ); 138 Assert.notEqual( 139 document.activeElement, 140 gSubButton, 141 "Focus not on button after Back button in subview" 142 ); 143 await gCUITestUtils.hidePanelMultiView(gPanel, () => 144 PanelMultiView.hidePopup(gPanel) 145 ); 146 }); 147 148 // Test that focus is restored when going back to a previous view. 149 add_task(async function testBackRestoresFocus() { 150 await gCUITestUtils.openPanelMultiView(gPanel, gMainView, () => 151 gAnchor.click() 152 ); 153 while (document.activeElement != gMainSubButton) { 154 EventUtils.synthesizeKey("KEY_Tab", { shiftKey: true }); 155 } 156 let shown = BrowserTestUtils.waitForEvent(gSubView, "ViewShown"); 157 EventUtils.synthesizeKey(" "); 158 await shown; 159 shown = BrowserTestUtils.waitForEvent(gMainView, "ViewShown"); 160 EventUtils.synthesizeKey("KEY_ArrowLeft"); 161 await shown; 162 Assert.equal( 163 document.activeElement, 164 gMainSubButton, 165 "Focus on sub button in main view" 166 ); 167 await gCUITestUtils.hidePanelMultiView(gPanel, () => 168 PanelMultiView.hidePopup(gPanel) 169 ); 170 });