mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-06 17:16:12 +00:00
116 lines
4.4 KiB
HTML
116 lines
4.4 KiB
HTML
<?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>
|