test_tabs_menu.html (2945B)
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 <!DOCTYPE HTML> 5 <html class="theme-light"> 6 <!-- 7 Test all-tabs menu. 8 --> 9 <head> 10 <meta charset="utf-8"> 11 <title>Tabs component All-tabs menu test</title> 12 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 13 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"> 14 <link rel="stylesheet" type="text/css" href="chrome://devtools/skin/variables.css"> 15 <link rel="stylesheet" type="text/css" href="chrome://devtools/skin/common.css"> 16 <link rel="stylesheet" type="text/css" href="chrome://devtools/content/shared/components/tabs/Tabs.css"> 17 <link rel="stylesheet" type="text/css" href="chrome://devtools/content/inspector/components/InspectorTabPanel.css"> 18 </head> 19 <body> 20 <pre id="test"> 21 <script src="head.js" type="application/javascript"></script> 22 <script type="application/javascript"> 23 24 'use strict' 25 26 window.onload = async function () { 27 try { 28 const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom"); 29 const { Component, createFactory } = browserRequire("devtools/client/shared/vendor/react"); 30 const dom = require("devtools/client/shared/vendor/react-dom-factories"); 31 const Tabbar = createFactory(browserRequire("devtools/client/shared/components/tabs/TabBar")); 32 33 // Create container for the TabBar. Set smaller width 34 // to ensure that tabs won't fit and the all-tabs menu 35 // needs to appear. 36 const tabBarBox = document.createElement("div"); 37 tabBarBox.style.width = "200px"; 38 tabBarBox.style.height = "200px"; 39 tabBarBox.style.border = "1px solid lightgray"; 40 document.body.appendChild(tabBarBox); 41 42 // Render the tab-bar. 43 const tabbar = Tabbar({ 44 showAllTabsMenu: true, 45 }); 46 47 const tabbarReact = ReactDOM.render(tabbar, tabBarBox); 48 49 class TabPanelClass extends Component { 50 render() { 51 return dom.div({}, "content"); 52 } 53 } 54 55 // Test panel. 56 const TabPanel = createFactory(TabPanelClass); 57 58 // Create a few panels. 59 await addTabWithPanel(1); 60 await addTabWithPanel(2); 61 await addTabWithPanel(3); 62 await addTabWithPanel(4); 63 await addTabWithPanel(5); 64 65 // Make sure the all-tabs menu is there. 66 const allTabsMenu = tabBarBox.querySelector(".all-tabs-menu"); 67 ok(allTabsMenu, "All-tabs menu must be rendered"); 68 69 function addTabWithPanel(tabId) { 70 return setState(tabbarReact, Object.assign({}, tabbarReact.state, { 71 tabs: tabbarReact.state.tabs.concat({id: `${tabId}`, 72 title: `tab-${tabId}`, panel: TabPanel}), 73 })); 74 } 75 } catch(e) { 76 ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e)); 77 } finally { 78 SimpleTest.finish(); 79 } 80 }; 81 </script> 82 </pre> 83 </body> 84 </html>