browser/devtools/styleinspector/csshtmltree.xhtml
author Rob Campbell <rcampbell@mozilla.com>
Sat, 05 Nov 2011 19:19:02 -0300
changeset 79839 90b03b0aa9ee1b3d40cfb9e2609fd21ab27adb78
parent 79838 b5d68f1763ed56f83230750e7574390dd4140476
permissions -rw-r--r--
Backout part 2 - Bug 689759 rev b73aa0bd2b4e, Bug 698762 rev 2967e93cdb44, a=bustage

<!DOCTYPE html [
  <!ENTITY % htmlDTD PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
  %htmlDTD;
  <!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>
]>
<!-- ***** BEGIN LICENSE BLOCK *****
   - Version: MPL 1.1/GPL 2.0/LGPL 2.1
   -
   - The contents of this file are subject to the Mozilla Public License Version
   - 1.1 (the "License"); you may not use this file except in compliance with
   - the License. You may obtain a copy of the License at
   - http://www.mozilla.org/MPL/
   -
   - Software distributed under the License is distributed on an "AS IS" basis,
   - WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
   - for the specific language governing rights and limitations under the
   - License.
   -
   - The Original Code is the Mozilla Inspector Module.
   -
   - The Initial Developer of the Original Code is The Mozilla Foundation.
   - Portions created by the Initial Developer are Copyright (C) 2011
   - the Initial Developer. All Rights Reserved.
   -
   - Contributor(s):
   -   Joe Walker (jwalker@mozilla.com) (original author)
   -   Mihai Șucan <mihai.sucan@gmail.com>
   -   Michael Ratcliffe <mratcliffe@mozilla.com>
   -
   - Alternatively, the contents of this file may be used under the terms of
   - either the GNU General Public License Version 2 or later (the "GPL"), or
   - the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
   - in which case the provisions of the GPL or the LGPL are applicable instead
   - of those above. If you wish to allow use of your version of this file only
   - under the terms of either the GPL or the LGPL, and not to allow others to
   - use your version of this file under the terms of the MPL, indicate your
   - decision by deleting the provisions above and replace them with the notice
   - and other provisions required by the LGPL or the GPL. If you do not delete
   - the provisions above, a recipient may use your version of this file under
   - the terms of any one of the MPL, the GPL or the LGPL.
   -
   - ***** END LICENSE BLOCK ***** -->
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<head>
  <meta http-equiv="Content-Type"
    content="application/xhtml+xml; charset=UTF-8" />
  <link rel="stylesheet" type="text/css"
    href="chrome://browser/skin/devtools/csshtmltree.css" />
</head>
<body role="application">

<!-- The output from #templateRoot (below) is inserted here. -->
<div id="root"></div>

<!-- The output from #templatePath (below) is inserted here. -->
<div id="path">
</div>

<!-- The output from #templateProperty (below) is appended here. -->
<div id="propertyContainer">
</div>

<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:label class="legendKey unmatched">&unmatched;</xul:label>
  <xul:spacer flex="1"/>
  <xul:resizer dir="bottomright"/>
</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="header" flex="1">
      <label class="userStylesLabel" dir="${getRTLAttr}">
        <input class="onlyuserstyles" save="${onlyUserStylesCheckbox}"
               type="checkbox" onchange="${onlyUserStylesChanged}" checked=""/>
        &userStylesLabel;
      </label>
      <xul:textbox class="searchfield" type="search" save="${searchField}"
                    placeholder="&userStylesSearch;"
                    oncommand="${filterChanged}"/>
    </xul:hbox>
  </div>

  <!--
  templatePath sits just below the top of the window showing what we're looking
  at. For data it needs an instance of CssHtmlTree.
  -->
  <div id="templatePath">
    <span class="selectedElementLabel" dir="${getRTLAttr}">
      &selectedElementLabel;
    </span>
    <!-- following broken in RTL mode, see bug 699900 -->
    <ol>
      <li foreach="item in ${pathElements}" dir="${getRTLAttr}">
        <a href="#" onclick="${pathClick}" __pathElement="${item.element}">
          ${__element.pathElement = item.element; item.display}
        </a>
      </li>
    </ol>
  </div>

  <!--
  TemplateProperty lists the properties themselves. Each needs data like this:
  {
    property: ... // PropertyView from CssHtmlTree.jsm
  }
  -->
  <div id="templateProperty">
    <div class="${className}" save="${element}" dir="${getRTLAttr}">
      <div class="property-header" save="${propertyHeader}"
           onclick="${propertyHeaderClick}">
        <div save="${matchedExpander}" class="match expander" dir="${getRTLAttr}"></div>
        <div class="property-name" dir="${getRTLAttr}">${name}</div>
        <div class="helplink-container">
          <a href="${link}" class="helplink" title="&helpLinkTitle;" onclick="${mdnLinkClick}">
            &helpLinkTitle;
          </a>
        </div>
        <div save="${valueNode}" class="property-value" dir="ltr">${value}</div>
      </div>

      <div save="${matchedSelectorsContainer}" class="rulelink" dir="${getRTLAttr}">
      </div>
      <div save="${unmatchedSelectorsContainer}" class="rulelink" dir="${getRTLAttr}">
        <div save="${unmatchedTitleBlock}" onclick="${unmatchedSelectorsClick}"
             class="rule-unmatched">
          <div save="${unmatchedExpander}" class="expander" dir="${getRTLAttr}"></div>
          <div save="${unmatchedSelectorsTitleNode}">&unmatchedSelectors;</div>
        </div>
        <div save="${unmatchedSelectorTable}" class="unmatchedSelectorTable"
             dir="${getRTLAttr}"></div>
      </div>
    </div>
  </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" href="view-source:${selector.selectorInfo.href}" class="link"
                title="${selector.selectorInfo.href}">${selector.selectorInfo.source}</a>
          </td>
        </tr>
      </loop>
    </table>
  </div>

  <!--
  A templateUnmatchedSelectors sits inside each templateProperties showing the
  list of selectors that do not affect that property. Each needs data like this:
  {
    unmatchedSelectorViews: ..., // from cssHtmlTree.propertyViews[name].unmatchedSelectorViews
  }
  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="templateUnmatchedSelectors">
    <table>
      <loop foreach="selector in ${unmatchedSelectorViews}">
        <tr>
          <td dir="ltr" class="rule-text ${selector.statusClass}">
            ${selector.humanReadableText(__element)}
          </td>
          <td class="rule-link">
            <a target="_blank" href="view-source:${selector.selectorInfo.href}" class="link"
                title="${selector.selectorInfo.href}">${selector.selectorInfo.source}</a>
          </td>
        </tr>
      </loop>
    </table>
  </div>
</div>

</body>
</html>