blob: 4ab8a9db2b1e70b8011db20ed55b2d78c877180d (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
<?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/. -->
<!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>
]>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
class="theme-sidebar">
<head>
<title>&computedViewTitle;</title>
<link rel="stylesheet" href="chrome://global/skin/global.css" type="text/css"/>
<link rel="stylesheet" href="chrome://browser/skin/devtools/common.css" type="text/css"/>
<link rel="stylesheet" href="chrome://browser/skin/devtools/computedview.css" type="text/css"/>
<script type="application/javascript;version=1.8" src="theme-switching.js"/>
<script type="application/javascript;version=1.8">
window.setPanel = function(panel, iframe) {
let {devtools} = Components.utils.import("resource://gre/modules/devtools/Loader.jsm", {});
let inspector = devtools.require("devtools/styleinspector/style-inspector");
this.computedview = new inspector.ComputedViewTool(panel, window, iframe);
}
window.onunload = function() {
if (this.computedview) {
this.computedview.destroy();
}
}
</script>
</head>
<body>
<!-- The output from #templateProperty (below) is appended here. -->
<div id="propertyContainer" class="devtools-monospace">
</div>
<!-- When no properties are found the following block is displayed. -->
<div id="noResults" hidden="">
&noPropertiesFound;
</div>
<!-- The output from #templateRoot (below) is inserted here. -->
<div id="root" class="devtools-monospace"></div>
<!--
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="devtools-toolbar" flex="1" align="center">
<xul:checkbox class="includebrowserstyles"
save="${includeBrowserStylesCheckbox}"
oncommand="${includeBrowserStylesChanged}" checked="false"
label="&browserStylesLabel;"/>
<xul:textbox class="devtools-searchinput" 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">
<loop foreach="selector in ${matchedSelectorViews}">
<p>
<span class="rule-link">
<a target="_blank" class="link theme-link"
onclick="${selector.openStyleEditor}"
onkeydown="${selector.maybeOpenStyleEditor}"
title="${selector.href}"
sourcelocation="${selector.source}"
tabindex="0">${selector.source}</a>
</span>
<span dir="ltr" class="rule-text ${selector.statusClass} theme-fg-color3" title="${selector.statusText}">
${selector.sourceText}
<span class="other-property-value theme-fg-color1">${selector.outputFragment}</span>
</span>
</p>
</loop>
</div>
</div>
</body>
</html>
|
