browser_toolbox_visibility.js (5542B)
1 /* Any copyright is dedicated to the Public Domain. 2 * http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 const TEST_URL = "data:text/html,test for toolbox visibility"; 5 6 const { Toolbox } = require("resource://devtools/client/framework/toolbox.js"); 7 8 add_task(async function () { 9 info("Open a first tab with devtools opened against it"); 10 const tab1 = await addTab(TEST_URL); 11 const toolbox = await gDevTools.showToolboxForTab(tab1); 12 is( 13 toolbox.win.document.visibilityState, 14 "visible", 15 "The toolbox is visible after opening on the first tab" 16 ); 17 18 const tab2 = BrowserTestUtils.addTab(gBrowser); 19 is( 20 toolbox.win.document.visibilityState, 21 "visible", 22 "The toolbox is still visibile after opening a second tab as a background tab" 23 ); 24 const inspector = toolbox.getPanel("inspector"); 25 info(" Select the second tab to hide the devtools"); 26 let onToolboxVisibilityChange = waitForVisibilityChange(toolbox.win); 27 let onPanelVisibilityChange = waitForVisibilityChange(inspector.panelWin); 28 gBrowser.selectedTab = tab2; 29 info("Wait for toolbox visibility change"); 30 await onToolboxVisibilityChange; 31 info("Wait for panel visibility change"); 32 await onPanelVisibilityChange; 33 is( 34 toolbox.win.document.visibilityState, 35 "hidden", 36 "The toolbox becomes hidden when selecting the second tab" 37 ); 38 is( 39 inspector.panelWin.document.visibilityState, 40 "hidden", 41 "The inspector becomes hidden when selecting the second tab" 42 ); 43 44 info(" Select the first tab again to show the devtools"); 45 onToolboxVisibilityChange = waitForVisibilityChange(toolbox.win); 46 onPanelVisibilityChange = waitForVisibilityChange(inspector.panelWin); 47 gBrowser.selectedTab = tab1; 48 info("Wait for toolbox visibility change"); 49 await onToolboxVisibilityChange; 50 info("Wait for panel visibility change"); 51 await onPanelVisibilityChange; 52 is( 53 toolbox.win.document.visibilityState, 54 "visible", 55 "The toolbox becomes visible when going back to its related first tab" 56 ); 57 is( 58 inspector.panelWin.document.visibilityState, 59 "visible", 60 "The inspector becomes visible when going back to its related first tab" 61 ); 62 63 info("Switch to independent window for devtools"); 64 await toolbox.switchHost(Toolbox.HostType.WINDOW); 65 is( 66 toolbox.win.document.visibilityState, 67 "visible", 68 "The toolbox stays visibile when switching to WINDOW host type" 69 ); 70 is( 71 inspector.panelWin.document.visibilityState, 72 "visible", 73 "The inspector stays visibile when switching to WINDOW host type" 74 ); 75 76 info( 77 "Switch the tab to ensure the DevTools stays visible when in WINDOW host" 78 ); 79 await BrowserTestUtils.switchTab(gBrowser, tab2); 80 is( 81 toolbox.win.document.visibilityState, 82 "visible", 83 "The toolbox in WINDOW host stays visibile when switching tabs in firefox" 84 ); 85 is( 86 inspector.panelWin.document.visibilityState, 87 "visible", 88 "The inspector also stays visibile when switching tabs in firefox" 89 ); 90 await BrowserTestUtils.switchTab(gBrowser, tab1); 91 92 info("Switch back to in-browser bottom host"); 93 await toolbox.switchHost(Toolbox.HostType.BOTTOM); 94 95 onPanelVisibilityChange = waitForVisibilityChange(inspector.panelWin); 96 const { hud } = await toolbox.selectTool("webconsole"); 97 is(hud.ui.document.visibilityState, "visible", "The console is visible"); 98 info("Wait for inspector panel visibility change"); 99 await onPanelVisibilityChange; 100 is( 101 inspector.panelWin.document.visibilityState, 102 "hidden", 103 "The inspector becomes hidden when moving to the web console" 104 ); 105 106 info("Select the other tab once again to hide DevTools"); 107 onToolboxVisibilityChange = waitForVisibilityChange(toolbox.win); 108 onPanelVisibilityChange = waitForVisibilityChange(hud.ui.window); 109 gBrowser.selectedTab = tab2; 110 info("Wait for toolbox visibility change"); 111 await onToolboxVisibilityChange; 112 info("Wait for panel visibility change"); 113 await onPanelVisibilityChange; 114 is( 115 toolbox.win.document.visibilityState, 116 "hidden", 117 "The toolbox becomes hidden when selecting the second tab" 118 ); 119 is( 120 hud.ui.document.visibilityState, 121 "hidden", 122 "The inspector becomes hidden when selecting the second tab" 123 ); 124 125 info( 126 "Select the inspector and raise the toolbox to switch to its related tab" 127 ); 128 await toolbox.selectTool("inspector"); 129 onToolboxVisibilityChange = waitForVisibilityChange(toolbox.win); 130 onPanelVisibilityChange = waitForVisibilityChange(inspector.panelWin); 131 const onConsolePanelVisibilityChange = waitForVisibilityChange(hud.ui.window); 132 toolbox.raise(); 133 info("Wait for toolbox visibility change after raising the toolbox"); 134 await onToolboxVisibilityChange; 135 info("Wait for panel visibility change"); 136 await onPanelVisibilityChange; 137 info("Wait for console panel visibility change"); 138 await onConsolePanelVisibilityChange; 139 is( 140 toolbox.win.document.visibilityState, 141 "visible", 142 "The tab and toolbox are becoming visible when raising the toolbox" 143 ); 144 is( 145 inspector.panelWin.document.visibilityState, 146 "visible", 147 "The inspector is also becoming visible when raising the toolbox" 148 ); 149 is( 150 hud.ui.document.visibilityState, 151 "hidden", 152 "The console is now hidden as we moved to the inspector" 153 ); 154 155 await toolbox.destroy(); 156 gBrowser.removeCurrentTab(); 157 gBrowser.removeCurrentTab(); 158 }); 159 160 function waitForVisibilityChange(win) { 161 return new Promise(r => { 162 win.document.addEventListener("visibilitychange", r, { 163 once: true, 164 }); 165 }); 166 }