devtools/client/inspector/index.xhtml

   1 <?xml version="1.0" encoding="utf-8"?>
   2 <!-- This Source Code Form is subject to the terms of the Mozilla Public
   3    - License, v. 2.0. If a copy of the MPL was not distributed with this
   4    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
   5 <!DOCTYPE html>
   6
   7 <html xmlns="http://www.w3.org/1999/xhtml" dir="">
   8   <head>
   9     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  10
  11     <link rel="stylesheet" href="chrome://devtools/skin/breadcrumbs.css" />
  12     <link rel="stylesheet" href="chrome://devtools/skin/inspector.css" />
  13     <link rel="stylesheet" href="chrome://devtools/skin/badge.css" />
  14     <link rel="stylesheet" href="chrome://devtools/skin/rules.css" />
  15     <link rel="stylesheet" href="chrome://devtools/skin/compatibility.css" />
  16     <link rel="stylesheet" href="chrome://devtools/skin/computed.css" />
  17     <link rel="stylesheet" href="chrome://devtools/skin/changes.css" />
  18     <link rel="stylesheet" href="chrome://devtools/skin/fonts.css" />
  19     <link rel="stylesheet" href="chrome://devtools/skin/boxmodel.css" />
  20     <link rel="stylesheet" href="chrome://devtools/skin/layout.css" />
  21     <link rel="stylesheet" href="chrome://devtools/skin/animation.css" />
  22     <link
  23       rel="stylesheet"
  24       href="chrome://devtools/content/shared/components/tabs/Tabs.css"
  25     />
  26     <link
  27       rel="stylesheet"
  28       href="chrome://devtools/content/shared/components/SidebarToggle.css"
  29     />
  30     <link
  31       rel="stylesheet"
  32       href="chrome://devtools/content/inspector/components/InspectorTabPanel.css"
  33     />
  34     <link
  35       rel="stylesheet"
  36       href="chrome://devtools/content/shared/components/splitter/SplitBox.css"
  37     />
  38     <link
  39       rel="stylesheet"
  40       href="chrome://devtools/content/shared/components/Accordion.css"
  41     />
  42     <link
  43       rel="stylesheet"
  44       href="chrome://devtools/content/shared/components/reps/reps.css"
  45     />
  46     <!-- Needed for the ObjectInspector -->
  47     <link
  48       rel="stylesheet"
  49       href="chrome://devtools/content/shared/components/Tree.css"
  50     />
  51     <link
  52       rel="stylesheet"
  53       href="chrome://devtools/content/shared/components/object-inspector/components/ObjectInspector.css"
  54     />
  55     <link
  56       rel="stylesheet"
  57       href="chrome://devtools/content/shared/components/tree/TreeView.css"
  58     />
  59
  60     <script src="chrome://devtools/content/shared/theme-switching.js"></script>
  61     <script>
  62       /* eslint-disable */
  63       var isInChrome = window.location.href.includes("chrome:");
  64       if (isInChrome) {
  65         var exports = {};
  66         var { require, loader } = ChromeUtils.importESModule(
  67           "resource://devtools/shared/loader/Loader.sys.mjs"
  68         );
  69         var { BrowserLoader } = ChromeUtils.importESModule(
  70           "resource://devtools/shared/loader/browser-loader.sys.mjs"
  71         );
  72       }
  73     </script>
  74
  75     <script
  76       src="resource://devtools/client/inspector/inspector.js"
  77       defer="true"
  78     ></script>
  79   </head>
  80   <body class="theme-body" role="application">
  81     <div
  82       class="inspector-responsive-container theme-body inspector"
  83       data-localization-bundle="devtools/client/locales/inspector.properties"
  84     >
  85       <!-- Main Panel Content -->
  86       <div
  87         id="inspector-main-content"
  88         class="devtools-main-content"
  89         style="visibility: hidden"
  90       >
  91         <!-- Toolbar -->
  92         <div
  93           id="inspector-toolbar"
  94           class="devtools-toolbar devtools-input-toolbar"
  95           nowindowdrag="true"
  96         >
  97           <div id="inspector-search" class="devtools-searchbox">
  98             <input
  99               id="inspector-searchbox"
 100               class="devtools-searchinput"
 101               type="search"
 102               data-localization="placeholder=inspectorSearchHTML.label3"
 103             />
 104             <button
 105               id="inspector-searchinput-clear"
 106               class="devtools-searchinput-clear"
 107               hidden=""
 108               tabindex="-1"
 109             ></button>
 110           </div>
 111           <div id="inspector-searchlabel-container" hidden="">
 112             <div class="devtools-separator"></div>
 113             <span id="inspector-searchlabel"></span>
 114           </div>
 115           <div class="devtools-separator"></div>
 116           <button
 117             id="inspector-element-add-button"
 118             class="devtools-button"
 119             data-localization="title=inspectorAddNode.label"
 120           ></button>
 121           <button
 122             id="inspector-eyedropper-toggle"
 123             class="devtools-button"
 124           ></button>
 125         </div>
 126
 127         <!-- Markup Container -->
 128         <div id="markup-box"></div>
 129         <div id="inspector-breadcrumbs-toolbar" class="devtools-toolbar">
 130           <div
 131             id="inspector-breadcrumbs"
 132             class="breadcrumbs-widget-container"
 133             role="toolbar"
 134             data-localization="aria-label=inspector.breadcrumbs.label"
 135             tabindex="0"
 136           ></div>
 137         </div>
 138       </div>
 139
 140       <!-- Splitter -->
 141       <div id="inspector-splitter-box"></div>
 142
 143       <!-- Split Sidebar Container -->
 144       <div id="inspector-rules-container">
 145         <div id="inspector-rules-sidebar" hidden=""></div>
 146       </div>
 147
 148       <!-- Sidebar Container -->
 149       <div id="inspector-sidebar-container">
 150         <div id="inspector-sidebar" hidden=""></div>
 151       </div>
 152
 153       <!-- Sidebar Panel Definitions -->
 154       <div id="tabpanels" style="visibility: collapse">
 155         <div
 156           id="sidebar-panel-ruleview"
 157           class="theme-sidebar inspector-tabpanel"
 158         >
 159           <div id="ruleview-toolbar-container">
 160             <div
 161               id="ruleview-toolbar"
 162               class="devtools-toolbar devtools-input-toolbar"
 163             >
 164               <div class="devtools-searchbox">
 165                 <input
 166                   id="ruleview-searchbox"
 167                   class="devtools-filterinput"
 168                   type="search"
 169                   data-localization="aria-label=inspector.filterStyles.label;placeholder=inspector.filterStyles.placeholder"
 170                 />
 171                 <button
 172                   id="ruleview-searchinput-clear"
 173                   data-localization="title=inspector.filterStylesClearButton.title"
 174                   class="devtools-searchinput-clear"
 175                 ></button>
 176               </div>
 177               <div class="devtools-separator"></div>
 178               <div id="ruleview-command-toolbar">
 179                 <button
 180                   id="pseudo-class-panel-toggle"
 181                   data-localization="title=inspector.togglePseudo.tooltip"
 182                   class="devtools-button"
 183                   aria-controls="pseudo-class-panel"
 184                   aria-pressed="false"
 185                 ></button>
 186                 <button
 187                   id="class-panel-toggle"
 188                   data-localization="title=inspector.classPanel.toggleClass.tooltip"
 189                   class="devtools-button"
 190                   aria-controls="ruleview-class-panel"
 191                   aria-pressed="false"
 192                 ></button>
 193                 <button
 194                   id="ruleview-add-rule-button"
 195                   data-localization="title=inspector.addRule.tooltip"
 196                   class="devtools-button"
 197                 ></button>
 198                 <button
 199                   id="color-scheme-simulation-light-toggle"
 200                   data-localization="title=inspector.colorSchemeSimulationLight.tooltip"
 201                   class="devtools-button"
 202                   hidden=""
 203                   aria-pressed="false"
 204                 ></button>
 205                 <button
 206                   id="color-scheme-simulation-dark-toggle"
 207                   data-localization="title=inspector.colorSchemeSimulationDark.tooltip"
 208                   class="devtools-button"
 209                   hidden=""
 210                   aria-pressed="false"
 211                 ></button>
 212                 <button
 213                   id="print-simulation-toggle"
 214                   data-localization="title=inspector.printSimulation.tooltip"
 215                   class="devtools-button"
 216                   hidden=""
 217                   aria-pressed="false"
 218                 ></button>
 219               </div>
 220             </div>
 221             <div
 222               id="pseudo-class-panel"
 223               class="theme-toolbar ruleview-reveal-panel"
 224               hidden=""
 225             >
 226               <!-- Populated with checkbox inputs once the Rules view is instantiated -->
 227             </div>
 228             <div
 229               id="ruleview-class-panel"
 230               class="theme-toolbar ruleview-reveal-panel"
 231               hidden=""
 232             ></div>
 233           </div>
 234
 235           <div id="ruleview-container" class="ruleview" role="document">
 236             <div id="ruleview-container-focusable" tabindex="-1"></div>
 237           </div>
 238         </div>
 239
 240         <div
 241           id="sidebar-panel-computedview"
 242           class="theme-sidebar inspector-tabpanel"
 243         >
 244           <div
 245             id="computed-toolbar"
 246             class="devtools-toolbar devtools-input-toolbar"
 247           >
 248             <div class="devtools-searchbox">
 249               <input
 250                 id="computed-searchbox"
 251                 class="devtools-filterinput"
 252                 type="search"
 253                 data-localization="aria-label=inspector.filterStyles.label;placeholder=inspector.filterStyles.placeholder"
 254               />
 255               <button
 256                 id="computed-searchinput-clear"
 257                 class="devtools-searchinput-clear"
 258                 data-localization="title=inspector.filterStylesClearButton.title"
 259               ></button>
 260             </div>
 261             <div class="devtools-separator"></div>
 262             <input
 263               id="browser-style-checkbox"
 264               type="checkbox"
 265               class="includebrowserstyles"
 266             />
 267             <label
 268               id="browser-style-checkbox-label"
 269               for="browser-style-checkbox"
 270               data-localization="content=inspector.browserStyles.label"
 271             ></label>
 272           </div>
 273
 274           <div id="computed-container" role="document">
 275             <div id="computed-container-focusable" tabindex="-1">
 276               <ul
 277                 id="computed-property-container"
 278                 class="devtools-monospace"
 279                 tabindex="0"
 280                 dir="ltr"
 281               ></ul>
 282               <div
 283                 id="computed-no-results"
 284                 class="devtools-sidepanel-no-result"
 285                 hidden=""
 286                 data-localization="content=inspector.noProperties"
 287               ></div>
 288             </div>
 289           </div>
 290         </div>
 291       </div>
 292     </div>
 293   </body>
 294 </html>