gecko/browser/devtools/styleinspector/csshtmltree.xul

109 lines
3.9 KiB
XML

<?xml version="1.0"?>
<!-- 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/global.css"?>
<?xml-stylesheet href="chrome://browser/content/devtools/styleinspector.css" type="text/css"?>
<?xml-stylesheet href="chrome://browser/skin/devtools/csshtmltree.css" type="text/css"?>
<!DOCTYPE window [
<!ENTITY % inspectorDTD SYSTEM "chrome://browser/locale/devtools/styleinspector.dtd">
%inspectorDTD;
<!ELEMENT loop ANY>
<!ATTLIST li foreach CDATA #IMPLIED>
<!ATTLIST div foreach CDATA #IMPLIED>
<!ATTLIST loop foreach CDATA #IMPLIED>
<!ATTLIST a target CDATA #IMPLIED>
<!ATTLIST a __pathElement CDATA #IMPLIED>
<!ATTLIST div _id CDATA #IMPLIED>
<!ATTLIST div save CDATA #IMPLIED>
<!ATTLIST table save CDATA #IMPLIED>
<!ATTLIST loop if CDATA #IMPLIED>
<!ATTLIST tr if CDATA #IMPLIED>
]>
<xul:window xmlns="http://www.w3.org/1999/xhtml"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
title="&computedViewTitle;">
<script type="application/javascript;version=1.8">
window.setPanel = function(panel, iframe) {
Components.utils.import("resource:///modules/devtools/StyleInspector.jsm");
this.computedview = new ComputedViewTool(panel, window, iframe);
}
window.onunload = function() {
if (this.computedview) {
this.computedview.destroy();
}
}
</script>
<!-- The output from #templateRoot (below) is inserted here. -->
<div id="root"></div>
<!-- When no properties are found the following block is displayed. -->
<div id="noResults" hidden="">
&noPropertiesFound;
</div>
<!-- The output from #templateProperty (below) is appended here. -->
<table id="propertyContainer">
</table>
<xul:hbox id="footer">
<xul:label class="legendKey bestmatch">&bestMatch;</xul:label>
<xul:label class="legendKey matched">&matched;</xul:label>
<xul:label class="legendKey parentmatch">&parentMatch;</xul:label>
</xul:hbox>
<!--
To visually debug the templates without running firefox, alter the display:none
-->
<div style="display:none;">
<!--
templateRoot sits at the top of the window and contains the "include default
styles" checkbox. For data it needs an instance of CssHtmlTree.
-->
<div id="templateRoot">
<xul:hbox class="headerControls" flex="1" align="center">
<xul:checkbox class="onlyuserstyles" save="${onlyUserStylesCheckbox}"
oncommand="${onlyUserStylesChanged}" checked="true"
label="&userStylesLabel;"/>
<xul:textbox class="searchfield" type="search" save="${searchField}"
placeholder="&userStylesSearch;" flex="1"
oncommand="${filterChanged}"/>
</xul:hbox>
</div>
<!--
A templateMatchedSelectors sits inside each templateProperties showing the
list of selectors that affect that property. Each needs data like this:
{
matchedSelectorViews: ..., // from cssHtmlTree.propertyViews[name].matchedSelectorViews
}
This is a template so the parent does not need to be a table, except that
using a div as the parent causes the DOM to muck with the tr elements
-->
<div id="templateMatchedSelectors">
<table>
<loop foreach="selector in ${matchedSelectorViews}">
<tr>
<td dir="ltr" class="rule-text ${selector.statusClass}">
${selector.humanReadableText(__element)}
</td>
<td class="rule-link">
<a target="_blank" class="link"
onclick="${selector.openStyleEditor}"
onkeydown="${selector.maybeOpenStyleEditor}"
title="${selector.selectorInfo.href}"
tabindex="0">${selector.selectorInfo.source}</a>
</td>
</tr>
</loop>
</table>
</div>
</div>
</xul:window>