2011-08-30 05:12:02 -07:00
|
|
|
<!DOCTYPE html [
|
|
|
|
|
<!ENTITY % htmlDTD PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
|
|
|
|
|
%htmlDTD;
|
2011-10-27 08:35:13 -07:00
|
|
|
<!ENTITY % inspectorDTD SYSTEM "chrome://browser/locale/devtools/styleinspector.dtd">
|
2011-08-30 05:12:02 -07:00
|
|
|
%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"
|
2011-11-04 10:12:58 -07:00
|
|
|
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
|
2011-08-30 05:12:02 -07:00
|
|
|
<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. -->
|
2011-11-04 10:12:58 -07:00
|
|
|
<div id="root"></div>
|
2011-08-30 05:12:02 -07:00
|
|
|
|
2011-09-20 02:35:01 -07:00
|
|
|
<!-- The output from #templatePath (below) is inserted here. -->
|
|
|
|
|
<div id="path">
|
|
|
|
|
</div>
|
|
|
|
|
|
2011-08-30 09:40:29 -07:00
|
|
|
<!-- The output from #templateProperty (below) is appended here. -->
|
|
|
|
|
<div id="propertyContainer">
|
|
|
|
|
</div>
|
|
|
|
|
|
2011-11-04 10:12:58 -07:00
|
|
|
<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>
|
2011-11-05 15:19:02 -07:00
|
|
|
<xul:label class="legendKey unmatched">&unmatched;</xul:label>
|
2011-11-04 10:12:58 -07:00
|
|
|
<xul:spacer flex="1"/>
|
|
|
|
|
<xul:resizer dir="bottomright"/>
|
|
|
|
|
</xul:hbox>
|
2011-08-30 05:12:02 -07:00
|
|
|
<!--
|
|
|
|
|
To visually debug the templates without running firefox, alter the display:none
|
|
|
|
|
-->
|
|
|
|
|
<div style="display:none;">
|
|
|
|
|
<!--
|
2011-09-20 02:35:01 -07:00
|
|
|
templateRoot sits at the top of the window and contains the "include default
|
|
|
|
|
styles" checkbox. For data it needs an instance of CssHtmlTree.
|
2011-08-30 05:12:02 -07:00
|
|
|
-->
|
|
|
|
|
<div id="templateRoot">
|
2011-11-04 10:12:58 -07:00
|
|
|
<xul:hbox class="header" flex="1">
|
2011-09-20 02:35:01 -07:00
|
|
|
<label class="userStylesLabel" dir="${getRTLAttr}">
|
2011-11-04 10:12:58 -07:00
|
|
|
<input class="onlyuserstyles" save="${onlyUserStylesCheckbox}"
|
|
|
|
|
type="checkbox" onchange="${onlyUserStylesChanged}" checked=""/>
|
2011-09-20 02:35:01 -07:00
|
|
|
&userStylesLabel;
|
|
|
|
|
</label>
|
2011-11-04 10:12:58 -07:00
|
|
|
<xul:textbox class="searchfield" type="search" save="${searchField}"
|
|
|
|
|
placeholder="&userStylesSearch;"
|
|
|
|
|
oncommand="${filterChanged}"/>
|
|
|
|
|
</xul:hbox>
|
2011-09-20 02:35:01 -07:00
|
|
|
</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">
|
2011-11-04 10:12:58 -07:00
|
|
|
<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>
|
2011-08-30 05:12:02 -07:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!--
|
2011-08-30 09:40:29 -07:00
|
|
|
TemplateProperty lists the properties themselves. Each needs data like this:
|
2011-08-30 05:12:02 -07:00
|
|
|
{
|
2011-08-30 09:40:29 -07:00
|
|
|
property: ... // PropertyView from CssHtmlTree.jsm
|
2011-08-30 05:12:02 -07:00
|
|
|
}
|
|
|
|
|
-->
|
2011-08-30 09:40:29 -07:00
|
|
|
<div id="templateProperty">
|
2011-09-20 02:35:01 -07:00
|
|
|
<div class="${className}" save="${element}" dir="${getRTLAttr}">
|
2011-11-04 10:12:58 -07:00
|
|
|
<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>
|
2011-08-30 09:40:29 -07:00
|
|
|
</div>
|
2011-09-15 03:30:00 -07:00
|
|
|
<div save="${valueNode}" class="property-value" dir="ltr">${value}</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div save="${matchedSelectorsContainer}" class="rulelink" dir="${getRTLAttr}">
|
|
|
|
|
</div>
|
2011-11-05 15:19:02 -07:00
|
|
|
<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>
|
2011-08-30 05:12:02 -07:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!--
|
2011-09-15 03:30:00 -07:00
|
|
|
A templateMatchedSelectors sits inside each templateProperties showing the
|
|
|
|
|
list of selectors that affect that property. Each needs data like this:
|
2011-08-30 05:12:02 -07:00
|
|
|
{
|
2011-09-15 03:30:00 -07:00
|
|
|
matchedSelectorViews: ..., // from cssHtmlTree.propertyViews[name].matchedSelectorViews
|
2011-08-30 05:12:02 -07:00
|
|
|
}
|
|
|
|
|
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
|
|
|
|
|
-->
|
2011-09-15 03:30:00 -07:00
|
|
|
<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>
|
2011-11-05 15:19:02 -07:00
|
|
|
|
|
|
|
|
<!--
|
|
|
|
|
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>
|
2011-08-30 05:12:02 -07:00
|
|
|
</div>
|
2011-11-05 15:19:02 -07:00
|
|
|
|
2011-08-30 05:12:02 -07:00
|
|
|
</body>
|
|
|
|
|
</html>
|
