Toolbox.html

Toolbox.html

<!-- The following iframe is created by devtools/client/framework/toolbox-hosts.js:82. src="about:blank" -->
<iframe xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" class="devtools-toolbox-bottom-iframe" height="458" tooltip="aHTMLTooltip" src="about:devtools-toolbox" aria-label="Developer Tools"/>
  <vbox xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="toolbox-container" flex="1">
    <div xmlns="http://www.w3.org/1999/xhtml" id="toolbox-toolbar-mount">
      <div data-reactroot="" class="devtools-tabbar">
        <!-- The following div is created by devtools/client/framework/components/toolbox-toolbar.js:107 renderToolboxButtons() -->
        <div id="toolbox-buttons-start">
          BUTTONS...
        </div>
      </div>
    </div>
  </vbox>
  <vbox xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" flex="1" class="theme-body">
    <box id="toolbox-deck" flex="1000" minheight="75">
      <vbox class="toolbox-panel theme-body" id="toolbox-panel-options"/>
      <vbox class="toolbox-panel theme-toolbar" id="toolbox-panel-inspector" selected="true" aria-selected="true">
        <!-- The folowing iframe is created by devtools/client/framework/toolbox.js:1456 loadTool() src="chrome://devtools/content/inspector/inspector.xhtml" (definition.url comes from devtools/client/definitions.js) -->
        <iframe class="toolbox-panel-iframe" id="toolbox-panel-iframe-inspector" flex="1" forceOwnRefreshDriver="" tooltip="aHTMLTooltip" style="visibility: visible;" src="chrome://devtools/content/inspector/inspector.xhtml" aria-label="Inspector Panel">
          <div xmlns="http://www.w3.org/1999/xhtml" id="markup-box">
            <!-- The following iframe is created by devtools/client/inspector/inspector.js:1435 (_initMarkup()) -->
            <iframe flex="1" tooltip="aHTMLTooltip" src="markup/markup.xhtml" aria-label="Markup View"></iframe>
            <div xmlns="http://www.w3.org/1999/xhtml" class="splitter" style="flex: 0 0 1px;"></div>
            <div xmlns="http://www.w3.org/1999/xhtml" class="controlled" style="width: 397px;">
              <div class="devtools-inspector-tab-panel">
                <div id="inspector-sidebar-container">
                  <div xmlns="http://www.w3.org/1999/xhtml" id="inspector-sidebar">
                    <div data-reactroot="" class="devtools-sidebar-tabs">
                      <div class="tabs ">
                        <nav class="tabs-navigation"></nav>
                        <div xmlns="http://www.w3.org/1999/xhtml" class="panels">
                          <div id="ruleview-panel" class="tab-panel-box" role="tabpanel" aria-labelledby="ruleview-tab" style="visibility: visible; height: 100%; width: 100%;">
                            <div class="devtools-inspector-tab-panel">
                              <div id="sidebar-panel-ruleview" class="devtools-monospace theme-sidebar inspector-tabpanel" data-localization-bundle="devtools/client/locales/inspector.properties">
                                <div xmlns="http://www.w3.org/1999/xhtml" id="ruleview-toolbar-container" class="devtools-toolbar">
                                  <div xmlns="http://www.w3.org/1999/xhtml" id="ruleview-container" class="ruleview">
                                    ...
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </iframe>
      </vbox>
      <vbox class="toolbox-panel theme-toolbar"/>
      <vbox class="toolbox-panel theme-toolbar" id="toolbox-panel-jsdebugger">
        <!-- The folowing iframe is created by devtools/client/framework/toolbox.js:1456 loadTool() src="chrome://devtools/content/debugger/new/index.html" (definition.url comes from devtools/client/definitions.js) -->
        <iframe xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" class="toolbox-panel-iframe" id="toolbox-panel-iframe-jsdebugger" flex="1" forceOwnRefreshDriver="" tooltip="aHTMLTooltip" style="visibility: visible;" src="chrome://devtools/content/debugger/new/index.html" aria-label="Debugger Panel"/>
      </vbox>
      <vbox class="toolbox-panel theme-toolbar" id="toolbox-panel-styleeditor">
        <!-- The folowing iframe is created by devtools/client/framework/toolbox.js:1456 loadTool() src="chrome://devtools/content/styleeditor/styleeditor.xul" (definition.url comes from devtools/client/definitions.js) -->
        <iframe xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" class="toolbox-panel-iframe" id="toolbox-panel-iframe-styleeditor" flex="1" forceOwnRefreshDriver="" tooltip="aHTMLTooltip" style="visibility: visible;" src="chrome://devtools/content/styleeditor/styleeditor.xul" aria-label="Style Editor Panel"/>
      </vbox>
      <vbox class="toolbox-panel theme-toolbar" id="toolbox-panel-shadereditor">
        <!-- The folowing iframe is created by devtools/client/framework/toolbox.js:1456 loadTool() src="chrome://devtools/content/shadereditor/shadereditor.xul" (definition.url comes from devtools/client/definitions.js) -->
        <iframe xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" class="toolbox-panel-iframe" id="toolbox-panel-iframe-shadereditor" flex="1" forceOwnRefreshDriver="" tooltip="aHTMLTooltip" style="visibility: visible;" src="chrome://devtools/content/shadereditor/shadereditor.xul" aria-label="Shader Editor Panel"/>
      </vbox>
      <vbox class="toolbox-panel theme-toolbar" id="toolbox-panel-canvasdebugger">
        <!-- The folowing iframe is created by devtools/client/framework/toolbox.js:1456 loadTool() src="chrome://devtools/content/canvasdebugger/canvasdebugger.xul" (definition.url comes from devtools/client/definitions.js) -->
        <iframe xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" class="toolbox-panel-iframe" id="toolbox-panel-iframe-canvasdebugger" flex="1" forceOwnRefreshDriver="" tooltip="aHTMLTooltip" style="visibility: visible;" src="chrome://devtools/content/canvasdebugger/canvasdebugger.xul" aria-label="Canvas Panel"/>
      </vbox>
      <vbox class="toolbox-panel theme-toolbar" id="toolbox-panel-performance">
        <!-- The folowing iframe is created by devtools/client/framework/toolbox.js:1456 loadTool() src="chrome://devtools/content/performance/performance.xul" (definition.url comes from devtools/client/definitions.js) -->
        <iframe xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" class="toolbox-panel-iframe" id="toolbox-panel-iframe-performance" flex="1" forceOwnRefreshDriver="" tooltip="aHTMLTooltip" style="visibility: visible;" src="chrome://devtools/content/performance/performance.xul" aria-label="Performance Panel"/>
      </vbox>
      <vbox class="toolbox-panel theme-toolbar" id="toolbox-panel-memory">
        <!-- The folowing iframe is created by devtools/client/framework/toolbox.js:1456 loadTool() src="chrome://devtools/content/memory/memory.xhtml" (definition.url comes from devtools/client/definitions.js) -->
        <iframe xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" class="toolbox-panel-iframe" id="toolbox-panel-iframe-memory" flex="1" forceOwnRefreshDriver="" tooltip="aHTMLTooltip" style="visibility: visible;" src="chrome://devtools/content/memory/memory.xhtml" aria-label="Memory Panel"/>
      </vbox>
      <vbox class="toolbox-panel theme-toolbar" id="toolbox-panel-netmonitor">
        <!-- The folowing iframe is created by devtools/client/framework/toolbox.js:1456 loadTool() src="chrome://devtools/content/netmonitor/index.html" (definition.url comes from devtools/client/definitions.js) -->
        <iframe xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" class="toolbox-panel-iframe" id="toolbox-panel-iframe-netmonitor" flex="1" forceOwnRefreshDriver="" tooltip="aHTMLTooltip" style="visibility: visible;" src="chrome://devtools/content/netmonitor/index.html" aria-label="Network Panel"/>
      </vbox>
      <vbox class="toolbox-panel theme-toolbar" id="toolbox-panel-storage">
        <!-- The folowing iframe is created by devtools/client/framework/toolbox.js:1456 loadTool() src="chrome://devtools/content/storage/storage.xul" (definition.url comes from devtools/client/definitions.js) -->
        <iframe xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" class="toolbox-panel-iframe" id="toolbox-panel-iframe-storage" flex="1" forceOwnRefreshDriver="" tooltip="aHTMLTooltip" style="visibility: visible;" src="chrome://devtools/content/storage/storage.xul" aria-label="Storage Panel"/>
      </vbox>
    <vbox class="toolbox-panel theme-toolbar" id="toolbox-panel-webaudioeditor">
      <!-- The folowing iframe is created by devtools/client/framework/toolbox.js:1456 loadTool() src="chrome://devtools/content/webaudioeditor/webaudioeditor.xul" (definition.url comes from devtools/client/definitions.js) -->
        <iframe xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" class="toolbox-panel-iframe" id="toolbox-panel-iframe-webaudioeditor" flex="1" forceOwnRefreshDriver="" tooltip="aHTMLTooltip" style="visibility: visible;" src="chrome://devtools/content/webaudioeditor/webaudioeditor.xul" aria-label="Web Audio Panel"/>
      </vbox>
      <vbox class="toolbox-panel theme-toolbar" id="toolbox-panel-scratchpad">
        <!-- The folowing iframe is created by devtools/client/framework/toolbox.js:1456 loadTool() src="chrome://devtools/content/scratchpad/scratchpad.xul" (definition.url comes from devtools/client/definitions.js) -->
        <iframe xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" class="toolbox-panel-iframe" id="toolbox-panel-iframe-scratchpad" flex="1" forceOwnRefreshDriver="" tooltip="aHTMLTooltip" style="visibility: visible;" src="chrome://devtools/content/scratchpad/scratchpad.xul" aria-label="Scratchpad Panel"/>
      </vbox>
      <vbox class="toolbox-panel theme-toolbar" id="toolbox-panel-dom">
        <!-- The folowing iframe is created by devtools/client/framework/toolbox.js:1456 loadTool() src="chrome://devtools/content/dom/dom.html" (definition.url comes from devtools/client/definitions.js) -->
        <iframe xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" class="toolbox-panel-iframe" id="toolbox-panel-iframe-dom" flex="1" forceOwnRefreshDriver="" tooltip="aHTMLTooltip" style="visibility: visible;" src="chrome://devtools/content/dom/dom.html" aria-label="DOM Panel"/>
      </vbox>
    </box>
    <splitter id="toolbox-console-splitter" class="devtools-horizontal-splitter" hidden="true"/>
    <box minheight="75" flex="1" id="toolbox-panel-webconsole" collapsed="true" height="216"/>
  </vbox>

This is only a skeleton to show how our tools are structured. The inspector iframe also has some information. This is by no means all of our code but simply gives an indication of structure.