diff options
Diffstat (limited to 'devtools/client/inspector/inspector.xhtml')
| -rw-r--r-- | devtools/client/inspector/inspector.xhtml | 231 |
1 files changed, 231 insertions, 0 deletions
diff --git a/devtools/client/inspector/inspector.xhtml b/devtools/client/inspector/inspector.xhtml new file mode 100644 index 000000000..f43f6bb8c --- /dev/null +++ b/devtools/client/inspector/inspector.xhtml @@ -0,0 +1,231 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this + - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> +<!DOCTYPE html> + +<html xmlns="http://www.w3.org/1999/xhtml" dir=""> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> + + <link rel="stylesheet" href="chrome://devtools/skin/widgets.css"/> + <link rel="stylesheet" href="chrome://devtools/skin/inspector.css"/> + <link rel="stylesheet" href="chrome://devtools/skin/rules.css"/> + <link rel="stylesheet" href="chrome://devtools/skin/computed.css"/> + <link rel="stylesheet" href="chrome://devtools/skin/fonts.css"/> + <link rel="stylesheet" href="chrome://devtools/skin/boxmodel.css"/> + <link rel="stylesheet" href="chrome://devtools/skin/layout.css"/> + <link rel="stylesheet" href="chrome://devtools/skin/animationinspector.css"/> + <link rel="stylesheet" href="resource://devtools/client/shared/components/sidebar-toggle.css"/> + <link rel="stylesheet" href="resource://devtools/client/shared/components/tabs/tabs.css"/> + <link rel="stylesheet" href="resource://devtools/client/shared/components/tabs/tabbar.css"/> + <link rel="stylesheet" href="resource://devtools/client/inspector/components/inspector-tab-panel.css"/> + <link rel="stylesheet" href="resource://devtools/client/shared/components/splitter/split-box.css"/> + <link rel="stylesheet" href="resource://devtools/client/inspector/layout/components/Accordion.css"/> + + <script type="application/javascript;version=1.8" + src="chrome://devtools/content/shared/theme-switching.js"></script> + <script type="application/javascript;version=1.8" src="inspector.js" defer="true"></script> +</head> +<body class="theme-body" role="application"> + <div class="inspector-responsive-container theme-body inspector"> + + <!-- Main Panel Content --> + <div id="inspector-main-content" class="devtools-main-content"> + <div id="inspector-toolbar" class="devtools-toolbar" nowindowdrag="true" + data-localization-bundle="devtools/client/locales/inspector.properties"> + <button id="inspector-element-add-button" class="devtools-button" + data-localization="title=inspectorAddNode.label"></button> + <div class="devtools-toolbar-spacer"></div> + <span id="inspector-searchlabel"></span> + <div id="inspector-search" class="devtools-searchbox has-clear-btn"> + <input id="inspector-searchbox" class="devtools-searchinput" + type="search" + data-localization="placeholder=inspectorSearchHTML.label3"/> + <button id="inspector-searchinput-clear" class="devtools-searchinput-clear" tabindex="-1"></button> + </div> + <button id="inspector-eyedropper-toggle" + class="devtools-button command-button-invertable"></button> + <div id="inspector-sidebar-toggle-box"></div> + </div> + <div id="markup-box"></div> + <div id="inspector-breadcrumbs-toolbar" class="devtools-toolbar"> + <div id="inspector-breadcrumbs" class="breadcrumbs-widget-container" + role="group" data-localization="aria-label=inspector.breadcrumbs.label" tabindex="0"></div> + </div> + </div> + + <!-- Splitter --> + <div + xmlns="http://www.w3.org/1999/xhtml" + id="inspector-splitter-box"> + </div> + + <!-- Sidebar Container --> + <div id="inspector-sidebar-container"> + <div + xmlns="http://www.w3.org/1999/xhtml" + id="inspector-sidebar" + hidden="true"></div> + </div> + + <!-- Sidebar panel definitions --> + <div id="tabpanels" style="visibility:collapse"> + <div id="sidebar-panel-ruleview" class="devtools-monospace theme-sidebar inspector-tabpanel" + data-localization-bundle="devtools/client/locales/inspector.properties"> + <div id="ruleview-toolbar-container" class="devtools-toolbar"> + <div id="ruleview-toolbar"> + <div class="devtools-searchbox has-clear-btn"> + <input id="ruleview-searchbox" + class="devtools-filterinput devtools-rule-searchbox" + type="search" + data-localization="placeholder=inspector.filterStyles.placeholder"/> + <button id="ruleview-searchinput-clear" class="devtools-searchinput-clear"></button> + </div> + <div id="ruleview-command-toolbar"> + <button id="ruleview-add-rule-button" data-localization="title=inspector.addRule.tooltip" class="devtools-button"></button> + <button id="pseudo-class-panel-toggle" data-localization="title=inspector.togglePseudo.tooltip" class="devtools-button"></button> + </div> + </div> + <div id="pseudo-class-panel" hidden="true"> + <label><input id="pseudo-hover-toggle" type="checkbox" value=":hover" tabindex="-1" />:hover</label> + <label><input id="pseudo-active-toggle" type="checkbox" value=":active" tabindex="-1" />:active</label> + <label><input id="pseudo-focus-toggle" type="checkbox" value=":focus" tabindex="-1" />:focus</label> + </div> + </div> + + <div id="ruleview-container" class="ruleview"> + <div id="ruleview-container-focusable" tabindex="-1"> + </div> + </div> + </div> + + <div id="sidebar-panel-computedview" class="devtools-monospace theme-sidebar inspector-tabpanel" + data-localization-bundle="devtools/client/locales/inspector.properties"> + <div id="computedview-toolbar" class="devtools-toolbar"> + <div class="devtools-searchbox has-clear-btn"> + <input id="computedview-searchbox" + class="devtools-filterinput devtools-rule-searchbox" + type="search" + data-localization="placeholder=inspector.filterStyles.placeholder"/> + <button id="computedview-searchinput-clear" class="devtools-searchinput-clear"></button> + </div> + <input id="browser-style-checkbox" + type="checkbox" + class="includebrowserstyles"/> + <label id="browser-style-checkbox-label" for="browser-style-checkbox" + data-localization="content=inspector.browserStyles.label"></label> + </div> + + <div id="computedview-container"> + <div id="computedview-container-focusable" tabindex="-1"> + <div id="boxmodel-wrapper" tabindex="0" + data-localization-bundle="devtools/client/locales/boxmodel.properties"> + <div id="boxmodel-header"> + <div id="boxmodel-expander" class="expander theme-twisty expandable" open=""></div> + <span data-localization="content=boxmodel.title"></span> + </div> + + <div id="boxmodel-container"> + <div id="boxmodel-main"> + <span class="boxmodel-legend" data-box="margin" data-localization="content=boxmodel.margin;title=boxmodel.margin"></span> + <div id="boxmodel-margins" data-box="margin" data-localization="title=boxmodel.margin"> + <span class="boxmodel-legend" data-box="border" data-localization="content=boxmodel.border;title=boxmodel.border"></span> + <div id="boxmodel-borders" data-box="border" data-localization="title=boxmodel.border"> + <span class="boxmodel-legend" data-box="padding" data-localization="content=boxmodel.padding;title=boxmodel.padding"></span> + <div id="boxmodel-padding" data-box="padding" data-localization="title=boxmodel.padding"> + <div id="boxmodel-content" data-box="content" data-localization="title=boxmodel.content"> + </div> + </div> + </div> + </div> + + <p class="boxmodel-margin boxmodel-top"><span data-box="margin" class="boxmodel-editable" title="margin-top"></span></p> + <p class="boxmodel-margin boxmodel-right"><span data-box="margin" class="boxmodel-editable" title="margin-right"></span></p> + <p class="boxmodel-margin boxmodel-bottom"><span data-box="margin" class="boxmodel-editable" title="margin-bottom"></span></p> + <p class="boxmodel-margin boxmodel-left"><span data-box="margin" class="boxmodel-editable" title="margin-left"></span></p> + + <p class="boxmodel-border boxmodel-top"><span data-box="border" class="boxmodel-editable" title="border-top"></span></p> + <p class="boxmodel-border boxmodel-right"><span data-box="border" class="boxmodel-editable" title="border-right"></span></p> + <p class="boxmodel-border boxmodel-bottom"><span data-box="border" class="boxmodel-editable" title="border-bottom"></span></p> + <p class="boxmodel-border boxmodel-left"><span data-box="border" class="boxmodel-editable" title="border-left"></span></p> + + <p class="boxmodel-padding boxmodel-top"><span data-box="padding" class="boxmodel-editable" title="padding-top"></span></p> + <p class="boxmodel-padding boxmodel-right"><span data-box="padding" class="boxmodel-editable" title="padding-right"></span></p> + <p class="boxmodel-padding boxmodel-bottom"><span data-box="padding" class="boxmodel-editable" title="padding-bottom"></span></p> + <p class="boxmodel-padding boxmodel-left"><span data-box="padding" class="boxmodel-editable" title="padding-left"></span></p> + + <p class="boxmodel-size"> + <span data-box="content" data-localization="title=boxmodel.content"></span> + </p> + </div> + + <div id="boxmodel-info"> + <span id="boxmodel-element-size"></span> + <section id="boxmodel-position-group"> + <button class="devtools-button" id="layout-geometry-editor" + data-localization="title=boxmodel.geometryButton.tooltip"></button> + <span id="boxmodel-element-position"></span> + </section> + </div> + + <div style="display: none"> + <p id="boxmodel-dummy"></p> + </div> + </div> + </div> + + <div id="propertyContainer" class="theme-separator" tabindex="0"> + </div> + + <div id="computedview-no-results" hidden="" data-localization="content=inspector.noProperties"></div> + </div> + </div> + </div> + + <div id="sidebar-panel-fontinspector" class="devtools-monospace theme-sidebar inspector-tabpanel" + data-localization-bundle="devtools/client/locales/font-inspector.properties"> + <div class="devtools-toolbar"> + <div class="devtools-searchbox"> + <input id="font-preview-text-input" class="devtools-textinput" type="search" + data-localization="placeholder=fontinspector.previewText"/> + </div> + <label id="font-showall" class="theme-link" + data-localization="content=fontinspector.seeAll; + title=fontinspector.seeAll.tooltip"></label> + </div> + + <div id="font-container"> + <ul id="all-fonts"></ul> + </div> + + <div id="font-template"> + <section class="font"> + <div class="font-preview-container"> + <img class="font-preview"></img> + </div> + <div class="font-info"> + <h1 class="font-name"></h1> + <span class="font-is-local" data-localization="content=fontinspector.system"></span> + <span class="font-is-remote" data-localization="content=fontinspector.remote"></span> + <p class="font-format-url"> + <input readonly="readonly" class="font-url"></input> + <span class="font-format"></span> + </p> + <p class="font-css"> + <span data-localization="content=fontinspector.usedAs"></span> "<span class="font-css-name"></span>" + </p> + <pre class="font-css-code"></pre> + </div> + </section> + </div> + </div> + + <div id="sidebar-panel-animationinspector" class="devtools-monospace theme-sidebar inspector-tabpanel"> + <iframe class="devtools-inspector-tab-frame"></iframe> + </div> + </div> + + </div> +</body> +</html> |