gecko/browser/devtools/styleinspector/csshtmltree.xul

<?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">

<!-- 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>