1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/devtools/styleinspector/computedview.xhtml Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,115 @@
1.4 +<?xml version="1.0"?>
1.5 +<!-- This Source Code Form is subject to the terms of the Mozilla Public
1.6 + - License, v. 2.0. If a copy of the MPL was not distributed with this
1.7 + - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
1.8 +
1.9 +<!DOCTYPE window [
1.10 + <!ENTITY % inspectorDTD SYSTEM "chrome://browser/locale/devtools/styleinspector.dtd">
1.11 + %inspectorDTD;
1.12 + <!ELEMENT loop ANY>
1.13 + <!ATTLIST li foreach CDATA #IMPLIED>
1.14 + <!ATTLIST div foreach CDATA #IMPLIED>
1.15 + <!ATTLIST loop foreach CDATA #IMPLIED>
1.16 + <!ATTLIST a target CDATA #IMPLIED>
1.17 + <!ATTLIST a __pathElement CDATA #IMPLIED>
1.18 + <!ATTLIST div _id CDATA #IMPLIED>
1.19 + <!ATTLIST div save CDATA #IMPLIED>
1.20 + <!ATTLIST table save CDATA #IMPLIED>
1.21 + <!ATTLIST loop if CDATA #IMPLIED>
1.22 + <!ATTLIST tr if CDATA #IMPLIED>
1.23 +]>
1.24 +
1.25 +<html xmlns="http://www.w3.org/1999/xhtml"
1.26 + xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
1.27 + class="theme-sidebar">
1.28 +
1.29 + <head>
1.30 +
1.31 + <title>&computedViewTitle;</title>
1.32 +
1.33 + <link rel="stylesheet" href="chrome://global/skin/global.css" type="text/css"/>
1.34 + <link rel="stylesheet" href="chrome://browser/skin/devtools/common.css" type="text/css"/>
1.35 + <link rel="stylesheet" href="chrome://browser/skin/devtools/computedview.css" type="text/css"/>
1.36 +
1.37 + <script type="application/javascript;version=1.8" src="theme-switching.js"/>
1.38 +
1.39 + <script type="application/javascript;version=1.8">
1.40 + window.setPanel = function(panel, iframe) {
1.41 + let {devtools} = Components.utils.import("resource://gre/modules/devtools/Loader.jsm", {});
1.42 + let inspector = devtools.require("devtools/styleinspector/style-inspector");
1.43 + this.computedview = new inspector.ComputedViewTool(panel, window, iframe);
1.44 + }
1.45 + window.onunload = function() {
1.46 + if (this.computedview) {
1.47 + this.computedview.destroy();
1.48 + }
1.49 + }
1.50 + </script>
1.51 + </head>
1.52 +
1.53 + <body>
1.54 +
1.55 + <!-- The output from #templateProperty (below) is appended here. -->
1.56 + <div id="propertyContainer" class="devtools-monospace">
1.57 + </div>
1.58 +
1.59 + <!-- When no properties are found the following block is displayed. -->
1.60 + <div id="noResults" hidden="">
1.61 + &noPropertiesFound;
1.62 + </div>
1.63 +
1.64 + <!-- The output from #templateRoot (below) is inserted here. -->
1.65 + <div id="root" class="devtools-monospace"></div>
1.66 +
1.67 + <!--
1.68 + To visually debug the templates without running firefox, alter the display:none
1.69 + -->
1.70 + <div style="display:none;">
1.71 + <!--
1.72 + templateRoot sits at the top of the window and contains the "include default
1.73 + styles" checkbox. For data it needs an instance of CssHtmlTree.
1.74 + -->
1.75 + <div id="templateRoot">
1.76 + <xul:hbox class="devtools-toolbar" flex="1" align="center">
1.77 + <xul:checkbox class="includebrowserstyles"
1.78 + save="${includeBrowserStylesCheckbox}"
1.79 + oncommand="${includeBrowserStylesChanged}" checked="false"
1.80 + label="&browserStylesLabel;"/>
1.81 + <xul:textbox class="devtools-searchinput" type="search" save="${searchField}"
1.82 + placeholder="&userStylesSearch;" flex="1"
1.83 + oncommand="${filterChanged}"/>
1.84 + </xul:hbox>
1.85 + </div>
1.86 +
1.87 +
1.88 + <!--
1.89 + A templateMatchedSelectors sits inside each templateProperties showing the
1.90 + list of selectors that affect that property. Each needs data like this:
1.91 + {
1.92 + matchedSelectorViews: ..., // from cssHtmlTree.propertyViews[name].matchedSelectorViews
1.93 + }
1.94 + This is a template so the parent does not need to be a table, except that
1.95 + using a div as the parent causes the DOM to muck with the tr elements
1.96 + -->
1.97 + <div id="templateMatchedSelectors">
1.98 + <loop foreach="selector in ${matchedSelectorViews}">
1.99 + <p>
1.100 + <span class="rule-link">
1.101 + <a target="_blank" class="link theme-link"
1.102 + onclick="${selector.openStyleEditor}"
1.103 + onkeydown="${selector.maybeOpenStyleEditor}"
1.104 + title="${selector.href}"
1.105 + sourcelocation="${selector.source}"
1.106 + tabindex="0">${selector.source}</a>
1.107 + </span>
1.108 + <span dir="ltr" class="rule-text ${selector.statusClass} theme-fg-color3" title="${selector.statusText}">
1.109 + ${selector.sourceText}
1.110 + <span class="other-property-value theme-fg-color1">${selector.outputFragment}</span>
1.111 + </span>
1.112 + </p>
1.113 + </loop>
1.114 + </div>
1.115 + </div>
1.116 +
1.117 + </body>
1.118 +</html>
