gecko-dev/devtools/client/inspector/inspector.xul

333 lines
17 KiB
XML

<?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/. -->
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://devtools/content/shared/widgets/widgets.css" type="text/css"?>
<?xml-stylesheet href="chrome://devtools/content/inspector/inspector.css" type="text/css"?>
<?xml-stylesheet href="chrome://devtools/skin/widgets.css" type="text/css"?>
<?xml-stylesheet href="chrome://devtools/skin/inspector.css" type="text/css"?>
<?xml-stylesheet href="chrome://devtools/skin/rules.css" type="text/css"?>
<?xml-stylesheet href="chrome://devtools/skin/computed.css" type="text/css"?>
<?xml-stylesheet href="chrome://devtools/skin/fonts.css" type="text/css"?>
<?xml-stylesheet href="chrome://devtools/skin/layout.css" type="text/css"?>
<!DOCTYPE window [
<!ENTITY % inspectorDTD SYSTEM "chrome://devtools/locale/inspector.dtd"> %inspectorDTD;
<!ENTITY % styleinspectorDTD SYSTEM "chrome://devtools/locale/styleinspector.dtd"> %styleinspectorDTD;
<!ENTITY % fontinspectorDTD SYSTEM "chrome://devtools/locale/font-inspector.dtd"> %fontinspectorDTD;
<!ENTITY % layoutviewDTD SYSTEM "chrome://devtools/locale/layoutview.dtd"> %layoutviewDTD;
]>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml">
<script type="application/javascript;version=1.8"
src="chrome://devtools/content/shared/theme-switching.js"/>
<popupset id="inspectorPopupSet">
<!-- Used by the Markup Panel and the Highlighter -->
<menupopup id="inspector-node-popup">
<menuitem id="node-menu-edithtml"
label="&inspectorHTMLEdit.label;"
accesskey="&inspectorHTMLEdit.accesskey;"
oncommand="inspector.editHTML()"/>
<menuitem id="node-menu-add"
label="&inspectorAddNode.label;"
accesskey="&inspectorAddNode.accesskey;"
oncommand="inspector.addNode()"/>
<menuitem id="node-menu-duplicatenode"
label="&inspectorDuplicateNode.label;"
oncommand="inspector.duplicateNode()"/>
<menuitem id="node-menu-delete"
label="&inspectorHTMLDelete.label;"
accesskey="&inspectorHTMLDelete.accesskey;"
oncommand="inspector.deleteNode()"/>
<menu label="&inspectorAttributesSubmenu.label;"
accesskey="&inspectorAttributesSubmenu.accesskey;">
<menupopup>
<menuitem id="node-menu-add-attribute"
label="&inspectorAddAttribute.label;"
accesskey="&inspectorAddAttribute.accesskey;"
oncommand="inspector.onAddAttribute()"/>
<menuitem id="node-menu-edit-attribute"
label="&inspectorEditAttribute.label;"
accesskey="&inspectorEditAttribute.accesskey;"
oncommand="inspector.onEditAttribute()"/>
<menuitem id="node-menu-remove-attribute"
label="&inspectorRemoveAttribute.label;"
accesskey="&inspectorRemoveAttribute.accesskey;"
oncommand="inspector.onRemoveAttribute()"/>
</menupopup>
</menu>
<menuseparator/>
<menuitem id="node-menu-pseudo-hover"
label=":hover" type="checkbox"
oncommand="inspector.togglePseudoClass(':hover')"/>
<menuitem id="node-menu-pseudo-active"
label=":active" type="checkbox"
oncommand="inspector.togglePseudoClass(':active')"/>
<menuitem id="node-menu-pseudo-focus"
label=":focus" type="checkbox"
oncommand="inspector.togglePseudoClass(':focus')"/>
<menuseparator/>
<menu label="&inspectorCopyHTMLSubmenu.label;">
<menupopup>
<menuitem id="node-menu-copyinner"
label="&inspectorCopyInnerHTML.label;"
accesskey="&inspectorCopyInnerHTML.accesskey;"
oncommand="inspector.copyInnerHTML()"/>
<menuitem id="node-menu-copyouter"
label="&inspectorCopyOuterHTML.label;"
accesskey="&inspectorCopyOuterHTML.accesskey;"
oncommand="inspector.copyOuterHTML()"/>
<menuitem id="node-menu-copyuniqueselector"
label="&inspectorCopyCSSSelector.label;"
accesskey="&inspectorCopyCSSSelector.accesskey;"
oncommand="inspector.copyUniqueSelector()"/>
<menuitem id="node-menu-copyimagedatauri"
label="&inspectorImageDataUri.label;"
oncommand="inspector.copyImageDataUri()"/>
</menupopup>
</menu>
<menu label="&inspectorPasteHTMLSubmenu.label;">
<menupopup>
<menuitem id="node-menu-pasteinnerhtml"
label="&inspectorPasteInnerHTML.label;"
accesskey="&inspectorPasteInnerHTML.accesskey;"
oncommand="inspector.pasteInnerHTML()"/>
<menuitem id="node-menu-pasteouterhtml"
label="&inspectorPasteOuterHTML.label;"
accesskey="&inspectorPasteOuterHTML.accesskey;"
oncommand="inspector.pasteOuterHTML()"/>
<menuitem id="node-menu-pastebefore"
label="&inspectorHTMLPasteBefore.label;"
accesskey="&inspectorHTMLPasteBefore.accesskey;"
oncommand="inspector.pasteAdjacentHTML('beforeBegin')"/>
<menuitem id="node-menu-pasteafter"
label="&inspectorHTMLPasteAfter.label;"
accesskey="&inspectorHTMLPasteAfter.accesskey;"
oncommand="inspector.pasteAdjacentHTML('afterEnd')"/>
<menuitem id="node-menu-pastefirstchild"
label="&inspectorHTMLPasteFirstChild.label;"
accesskey="&inspectorHTMLPasteFirstChild.accesskey;"
oncommand="inspector.pasteAdjacentHTML('afterBegin')"/>
<menuitem id="node-menu-pastelastchild"
label="&inspectorHTMLPasteLastChild.label;"
accesskey="&inspectorHTMLPasteLastChild.accesskey;"
oncommand="inspector.pasteAdjacentHTML('beforeEnd')"/>
</menupopup>
</menu>
<menuseparator/>
<menuitem id="node-menu-expand"
label="&inspectorExpandNode.label;"
oncommand="inspector.expandNode()"/>
<menuitem id="node-menu-collapse"
label="&inspectorCollapseNode.label;"
oncommand="inspector.collapseNode()"/>
<menuseparator/>
<menuitem id="node-menu-scrollnodeintoview"
label="&inspectorScrollNodeIntoView.label;"
accesskey="&inspectorScrollNodeIntoView.accesskey;"
oncommand="inspector.scrollNodeIntoView()"/>
<menuitem id="node-menu-screenshotnode"
label="&inspectorScreenshotNode.label;"
oncommand="inspector.screenshotNode()" />
<menuitem id="node-menu-useinconsole"
label="&inspectorUseInConsole.label;"
oncommand="inspector.useInConsole()"/>
<menuitem id="node-menu-showdomproperties"
label="&inspectorShowDOMProperties.label;"
oncommand="inspector.showDOMProperties()"/>
<menuseparator id="node-menu-link-separator"/>
<menuitem id="node-menu-link-follow"
oncommand="inspector.onFollowLink()"/>
<menuitem id="node-menu-link-copy"
oncommand="inspector.onCopyLink()"/>
</menupopup>
</popupset>
<box flex="1" class="devtools-responsive-container theme-body">
<vbox flex="1" class="devtools-main-content">
<toolbar id="inspector-toolbar"
class="devtools-toolbar"
nowindowdrag="true">
<toolbarbutton id="inspector-element-add-button"
class="devtools-toolbarbutton"
tooltiptext="&inspectorAddNode.label;"
oncommand="inspector.addNode()" />
<spacer flex="1"/>
<box id="inspector-searchlabel" />
<textbox id="inspector-searchbox"
type="search"
timeout="50"
class="devtools-searchinput"
placeholder="&inspectorSearchHTML.label3;"/>
<toolbarbutton id="inspector-pane-toggle"
class="devtools-toolbarbutton"
tabindex="0" />
</toolbar>
<vbox flex="1" id="markup-box">
</vbox>
<toolbar id="inspector-breadcrumbs-toolbar"
class="devtools-toolbar"
nowindowdrag="true">
<arrowscrollbox id="inspector-breadcrumbs"
class="breadcrumbs-widget-container"
flex="1" orient="horizontal"
clicktoscroll="true"/>
</toolbar>
</vbox>
<splitter class="devtools-side-splitter"/>
<tabbox id="inspector-sidebar" handleCtrlTab="false" class="devtools-sidebar-tabs" hidden="true">
<tabs>
<tab id="sidebar-tab-ruleview"
label="&ruleViewTitle;"
crop="end"/>
<tab id="sidebar-tab-computedview"
label="&computedViewTitle;"
crop="end"/>
<tab id="sidebar-tab-fontinspector"
label="&fontInspectorTitle;"
crop="end"
hidden="true"/>
<tab id="sidebar-tab-layoutview"
label="&layoutViewTitle;"
crop="end"/>
</tabs>
<tabpanels flex="1">
<tabpanel id="sidebar-panel-ruleview" class="devtools-monospace theme-sidebar inspector-tabpanel">
<html:div id="ruleview-toolbar-container" class="devtools-toolbar">
<html:div id="ruleview-toolbar">
<html:div class="devtools-searchbox">
<html:input id="ruleview-searchbox"
class="devtools-searchinput devtools-rule-searchbox"
type="search"
placeholder="&filterStylesPlaceholder;"/>
<html:button id="ruleview-searchinput-clear" class="devtools-searchinput-clear"></html:button>
</html:div>
<html:div id="ruleview-command-toolbar">
<html:button id="ruleview-add-rule-button" title="&addRuleButtonTooltip;" class="devtools-button"></html:button>
<html:button id="pseudo-class-panel-toggle" title="&togglePseudoClassPanel;" class="devtools-button"></html:button>
</html:div>
</html:div>
<html:div id="pseudo-class-panel" hidden="true">
<html:label><html:input id="pseudo-hover-toggle" type="checkbox" value=":hover" tabindex="-1" />:hover</html:label>
<html:label><html:input id="pseudo-active-toggle" type="checkbox" value=":active" tabindex="-1" />:active</html:label>
<html:label><html:input id="pseudo-focus-toggle" type="checkbox" value=":focus" tabindex="-1" />:focus</html:label>
</html:div>
</html:div>
<html:div id="ruleview-container" class="ruleview">
</html:div>
</tabpanel>
<tabpanel id="sidebar-panel-computedview" class="devtools-monospace theme-sidebar inspector-tabpanel">
<html:div class="devtools-toolbar">
<html:div class="devtools-searchbox">
<html:input id="computedview-searchbox"
class="devtools-searchinput devtools-rule-searchbox"
type="search"
placeholder="&filterStylesPlaceholder;"/>
<html:button id="computedview-searchinput-clear" class="devtools-searchinput-clear"></html:button>
</html:div>
<checkbox id="browser-style-checkbox"
class="includebrowserstyles"
checked="false"
label="&browserStylesLabel;"/>
</html:div>
<html:div id="propertyContainer">
</html:div>
<html:div id="noResults" hidden="">
&noPropertiesFound;
</html:div>
</tabpanel>
<tabpanel id="sidebar-panel-fontinspector" class="devtools-monospace theme-sidebar inspector-tabpanel">
<html:div class="devtools-toolbar">
<html:div class="devtools-searchbox">
<html:input id="font-preview-text-input"
class="devtools-textinput"
type="search"
placeholder="&previewHint;"/>
</html:div>
</html:div>
<html:div id="font-container">
<html:ul id="all-fonts"></html:ul>
<html:button id="font-showall">&showAllFonts;</html:button>
</html:div>
<html:div id="font-template">
<html:section class="font">
<html:div class="font-preview-container">
<html:img class="font-preview"></html:img>
</html:div>
<html:div class="font-info">
<html:h1 class="font-name"></html:h1>
<html:span class="font-is-local">&system;</html:span>
<html:span class="font-is-remote">&remote;</html:span>
<html:p class="font-format-url">
<html:input readonly="readonly" class="font-url"></html:input>
<html:span class="font-format"></html:span>
</html:p>
<html:p class="font-css">&usedAs; "<html:span class="font-css-name"></html:span>"</html:p>
<html:pre class="font-css-code"></html:pre>
</html:div>
</html:section>
</html:div>
</tabpanel>
<tabpanel id="sidebar-panel-layoutview" class="devtools-monospace theme-sidebar inspector-tabpanel">
<html:div id="layout-container">
<html:p id="layout-header">
<html:span id="layout-element-size"></html:span>
<html:section id="layout-position-group">
<html:button class="devtools-button" id="layout-geometry-editor" title="&geometry.button.tooltip;"></html:button>
<html:span id="layout-element-position"></html:span>
</html:section>
</html:p>
<html:div id="layout-main">
<html:span class="layout-legend" data-box="margin" title="&margin.tooltip;">&margin.tooltip;</html:span>
<html:div id="layout-margins" data-box="margin" title="&margin.tooltip;">
<html:span class="layout-legend" data-box="border" title="&border.tooltip;">&border.tooltip;</html:span>
<html:div id="layout-borders" data-box="border" title="&border.tooltip;">
<html:span class="layout-legend" data-box="padding" title="&padding.tooltip;">&padding.tooltip;</html:span>
<html:div id="layout-padding" data-box="padding" title="&padding.tooltip;">
<html:div id="layout-content" data-box="content" title="&content.tooltip;">
</html:div>
</html:div>
</html:div>
</html:div>
<html:p class="layout-border layout-top"><html:span data-box="border" class="layout-editable" title="border-top"></html:span></html:p>
<html:p class="layout-border layout-right"><html:span data-box="border" class="layout-editable" title="border-right"></html:span></html:p>
<html:p class="layout-border layout-bottom"><html:span data-box="border" class="layout-editable" title="border-bottom"></html:span></html:p>
<html:p class="layout-border layout-left"><html:span data-box="border" class="layout-editable" title="border-left"></html:span></html:p>
<html:p class="layout-margin layout-top"><html:span data-box="margin" class="layout-editable" title="margin-top"></html:span></html:p>
<html:p class="layout-margin layout-right"><html:span data-box="margin" class="layout-editable" title="margin-right"></html:span></html:p>
<html:p class="layout-margin layout-bottom"><html:span data-box="margin" class="layout-editable" title="margin-bottom"></html:span></html:p>
<html:p class="layout-margin layout-left"><html:span data-box="margin" class="layout-editable" title="margin-left"></html:span></html:p>
<html:p class="layout-padding layout-top"><html:span data-box="padding" class="layout-editable" title="padding-top"></html:span></html:p>
<html:p class="layout-padding layout-right"><html:span data-box="padding" class="layout-editable" title="padding-right"></html:span></html:p>
<html:p class="layout-padding layout-bottom"><html:span data-box="padding" class="layout-editable" title="padding-bottom"></html:span></html:p>
<html:p class="layout-padding layout-left"><html:span data-box="padding" class="layout-editable" title="padding-left"></html:span></html:p>
<html:p class="layout-size"><html:span data-box="content" title="&content.tooltip;"></html:span></html:p>
</html:div>
<html:div style="display: none">
<html:p id="layout-dummy"></html:p>
</html:div>
</html:div>
</tabpanel>
</tabpanels>
</tabbox>
</box>
</window>