browser/devtools/styleinspector/computedview.xhtml@6474c204b198 (annotated)
browser/devtools/styleinspector/computedview.xhtml
Wed, 31 Dec 2014 06:09:35 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:09:35 +0100
- changeset 0
- 6474c204b198
- permissions
- -rw-r--r--
Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.
| michael@0 | 1 | <?xml version="1.0"?> |
| michael@0 | 2 | <!-- This Source Code Form is subject to the terms of the Mozilla Public |
| michael@0 | 3 | - License, v. 2.0. If a copy of the MPL was not distributed with this |
| michael@0 | 4 | - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> |
| michael@0 | 5 | |
| michael@0 | 6 | <!DOCTYPE window [ |
| michael@0 | 7 | <!ENTITY % inspectorDTD SYSTEM "chrome://browser/locale/devtools/styleinspector.dtd"> |
| michael@0 | 8 | %inspectorDTD; |
| michael@0 | 9 | <!ELEMENT loop ANY> |
| michael@0 | 10 | <!ATTLIST li foreach CDATA #IMPLIED> |
| michael@0 | 11 | <!ATTLIST div foreach CDATA #IMPLIED> |
| michael@0 | 12 | <!ATTLIST loop foreach CDATA #IMPLIED> |
| michael@0 | 13 | <!ATTLIST a target CDATA #IMPLIED> |
| michael@0 | 14 | <!ATTLIST a __pathElement CDATA #IMPLIED> |
| michael@0 | 15 | <!ATTLIST div _id CDATA #IMPLIED> |
| michael@0 | 16 | <!ATTLIST div save CDATA #IMPLIED> |
| michael@0 | 17 | <!ATTLIST table save CDATA #IMPLIED> |
| michael@0 | 18 | <!ATTLIST loop if CDATA #IMPLIED> |
| michael@0 | 19 | <!ATTLIST tr if CDATA #IMPLIED> |
| michael@0 | 20 | ]> |
| michael@0 | 21 | |
| michael@0 | 22 | <html xmlns="http://www.w3.org/1999/xhtml" |
| michael@0 | 23 | xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" |
| michael@0 | 24 | class="theme-sidebar"> |
| michael@0 | 25 | |
| michael@0 | 26 | <head> |
| michael@0 | 27 | |
| michael@0 | 28 | <title>&computedViewTitle;</title> |
| michael@0 | 29 | |
| michael@0 | 30 | <link rel="stylesheet" href="chrome://global/skin/global.css" type="text/css"/> |
| michael@0 | 31 | <link rel="stylesheet" href="chrome://browser/skin/devtools/common.css" type="text/css"/> |
| michael@0 | 32 | <link rel="stylesheet" href="chrome://browser/skin/devtools/computedview.css" type="text/css"/> |
| michael@0 | 33 | |
| michael@0 | 34 | <script type="application/javascript;version=1.8" src="theme-switching.js"/> |
| michael@0 | 35 | |
| michael@0 | 36 | <script type="application/javascript;version=1.8"> |
| michael@0 | 37 | window.setPanel = function(panel, iframe) { |
| michael@0 | 38 | let {devtools} = Components.utils.import("resource://gre/modules/devtools/Loader.jsm", {}); |
| michael@0 | 39 | let inspector = devtools.require("devtools/styleinspector/style-inspector"); |
| michael@0 | 40 | this.computedview = new inspector.ComputedViewTool(panel, window, iframe); |
| michael@0 | 41 | } |
| michael@0 | 42 | window.onunload = function() { |
| michael@0 | 43 | if (this.computedview) { |
| michael@0 | 44 | this.computedview.destroy(); |
| michael@0 | 45 | } |
| michael@0 | 46 | } |
| michael@0 | 47 | </script> |
| michael@0 | 48 | </head> |
| michael@0 | 49 | |
| michael@0 | 50 | <body> |
| michael@0 | 51 | |
| michael@0 | 52 | <!-- The output from #templateProperty (below) is appended here. --> |
| michael@0 | 53 | <div id="propertyContainer" class="devtools-monospace"> |
| michael@0 | 54 | </div> |
| michael@0 | 55 | |
| michael@0 | 56 | <!-- When no properties are found the following block is displayed. --> |
| michael@0 | 57 | <div id="noResults" hidden=""> |
| michael@0 | 58 | &noPropertiesFound; |
| michael@0 | 59 | </div> |
| michael@0 | 60 | |
| michael@0 | 61 | <!-- The output from #templateRoot (below) is inserted here. --> |
| michael@0 | 62 | <div id="root" class="devtools-monospace"></div> |
| michael@0 | 63 | |
| michael@0 | 64 | <!-- |
| michael@0 | 65 | To visually debug the templates without running firefox, alter the display:none |
| michael@0 | 66 | --> |
| michael@0 | 67 | <div style="display:none;"> |
| michael@0 | 68 | <!-- |
| michael@0 | 69 | templateRoot sits at the top of the window and contains the "include default |
| michael@0 | 70 | styles" checkbox. For data it needs an instance of CssHtmlTree. |
| michael@0 | 71 | --> |
| michael@0 | 72 | <div id="templateRoot"> |
| michael@0 | 73 | <xul:hbox class="devtools-toolbar" flex="1" align="center"> |
| michael@0 | 74 | <xul:checkbox class="includebrowserstyles" |
| michael@0 | 75 | save="${includeBrowserStylesCheckbox}" |
| michael@0 | 76 | oncommand="${includeBrowserStylesChanged}" checked="false" |
| michael@0 | 77 | label="&browserStylesLabel;"/> |
| michael@0 | 78 | <xul:textbox class="devtools-searchinput" type="search" save="${searchField}" |
| michael@0 | 79 | placeholder="&userStylesSearch;" flex="1" |
| michael@0 | 80 | oncommand="${filterChanged}"/> |
| michael@0 | 81 | </xul:hbox> |
| michael@0 | 82 | </div> |
| michael@0 | 83 | |
| michael@0 | 84 | |
| michael@0 | 85 | <!-- |
| michael@0 | 86 | A templateMatchedSelectors sits inside each templateProperties showing the |
| michael@0 | 87 | list of selectors that affect that property. Each needs data like this: |
| michael@0 | 88 | { |
| michael@0 | 89 | matchedSelectorViews: ..., // from cssHtmlTree.propertyViews[name].matchedSelectorViews |
| michael@0 | 90 | } |
| michael@0 | 91 | This is a template so the parent does not need to be a table, except that |
| michael@0 | 92 | using a div as the parent causes the DOM to muck with the tr elements |
| michael@0 | 93 | --> |
| michael@0 | 94 | <div id="templateMatchedSelectors"> |
| michael@0 | 95 | <loop foreach="selector in ${matchedSelectorViews}"> |
| michael@0 | 96 | <p> |
| michael@0 | 97 | <span class="rule-link"> |
| michael@0 | 98 | <a target="_blank" class="link theme-link" |
| michael@0 | 99 | onclick="${selector.openStyleEditor}" |
| michael@0 | 100 | onkeydown="${selector.maybeOpenStyleEditor}" |
| michael@0 | 101 | title="${selector.href}" |
| michael@0 | 102 | sourcelocation="${selector.source}" |
| michael@0 | 103 | tabindex="0">${selector.source}</a> |
| michael@0 | 104 | </span> |
| michael@0 | 105 | <span dir="ltr" class="rule-text ${selector.statusClass} theme-fg-color3" title="${selector.statusText}"> |
| michael@0 | 106 | ${selector.sourceText} |
| michael@0 | 107 | <span class="other-property-value theme-fg-color1">${selector.outputFragment}</span> |
| michael@0 | 108 | </span> |
| michael@0 | 109 | </p> |
| michael@0 | 110 | </loop> |
| michael@0 | 111 | </div> |
| michael@0 | 112 | </div> |
| michael@0 | 113 | |
| michael@0 | 114 | </body> |
| michael@0 | 115 | </html> |
