The Tor Browser: browser/devtools/styleinspector/computedview.xhtml@6474c204b198

Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.

     1 <?xml version="1.0"?>

     2 <!-- This Source Code Form is subject to the terms of the Mozilla Public

     3    - License, v. 2.0. If a copy of the MPL was not distributed with this

     4    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->

     6 <!DOCTYPE window [

     7   <!ENTITY % inspectorDTD SYSTEM "chrome://browser/locale/devtools/styleinspector.dtd">

     8   %inspectorDTD;

     9   <!ELEMENT loop ANY>

    10   <!ATTLIST li foreach CDATA #IMPLIED>

    11   <!ATTLIST div foreach CDATA #IMPLIED>

    12   <!ATTLIST loop foreach CDATA #IMPLIED>

    13   <!ATTLIST a target CDATA #IMPLIED>

    14   <!ATTLIST a __pathElement CDATA #IMPLIED>

    15   <!ATTLIST div _id CDATA #IMPLIED>

    16   <!ATTLIST div save CDATA #IMPLIED>

    17   <!ATTLIST table save CDATA #IMPLIED>

    18   <!ATTLIST loop if CDATA #IMPLIED>

    19   <!ATTLIST tr if CDATA #IMPLIED>

    20 ]>

    22 <html xmlns="http://www.w3.org/1999/xhtml"

    23       xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"

    24       class="theme-sidebar">

    26   <head>

    28     <title>&computedViewTitle;</title>

    30     <link rel="stylesheet" href="chrome://global/skin/global.css"  type="text/css"/>

    31     <link rel="stylesheet" href="chrome://browser/skin/devtools/common.css"  type="text/css"/>

    32     <link rel="stylesheet" href="chrome://browser/skin/devtools/computedview.css"  type="text/css"/>

    34     <script type="application/javascript;version=1.8" src="theme-switching.js"/>

    36     <script type="application/javascript;version=1.8">

    37       window.setPanel = function(panel, iframe) {

    38         let {devtools} = Components.utils.import("resource://gre/modules/devtools/Loader.jsm", {});

    39         let inspector = devtools.require("devtools/styleinspector/style-inspector");

    40         this.computedview = new inspector.ComputedViewTool(panel, window, iframe);

    41       }

    42       window.onunload = function() {

    43         if (this.computedview) {

    44           this.computedview.destroy();

    45         }

    46       }

    47     </script>

    48   </head>

    50   <body>

    52     <!-- The output from #templateProperty (below) is appended here. -->

    53     <div id="propertyContainer" class="devtools-monospace">

    54     </div>

    56     <!-- When no properties are found the following block is displayed. -->

    57     <div id="noResults" hidden="">

    58       &noPropertiesFound;

    59     </div>

    61     <!-- The output from #templateRoot (below) is inserted here. -->

    62     <div id="root" class="devtools-monospace"></div>

    64     <!--

    65     To visually debug the templates without running firefox, alter the display:none

    66     -->

    67     <div style="display:none;">

    68       <!--

    69       templateRoot sits at the top of the window and contains the "include default

    70       styles" checkbox. For data it needs an instance of CssHtmlTree.

    71       -->

    72       <div id="templateRoot">

    73         <xul:hbox class="devtools-toolbar" flex="1" align="center">

    74           <xul:checkbox class="includebrowserstyles"

    75                         save="${includeBrowserStylesCheckbox}"

    76                         oncommand="${includeBrowserStylesChanged}" checked="false"

    77                         label="&browserStylesLabel;"/>

    78           <xul:textbox class="devtools-searchinput" type="search" save="${searchField}"

    79                       placeholder="&userStylesSearch;" flex="1"

    80                       oncommand="${filterChanged}"/>

    81         </xul:hbox>

    82       </div>

    85       <!--

    86       A templateMatchedSelectors sits inside each templateProperties showing the

    87       list of selectors that affect that property. Each needs data like this:

    88       {

    89         matchedSelectorViews: ..., // from cssHtmlTree.propertyViews[name].matchedSelectorViews

    90       }

    91       This is a template so the parent does not need to be a table, except that

    92       using a div as the parent causes the DOM to muck with the tr elements

    93       -->

    94       <div id="templateMatchedSelectors">

    95         <loop foreach="selector in ${matchedSelectorViews}">

    96           <p>

    97             <span class="rule-link">

    98               <a target="_blank" class="link theme-link"

    99                   onclick="${selector.openStyleEditor}"

   100                   onkeydown="${selector.maybeOpenStyleEditor}"

   101                   title="${selector.href}"

   102                   sourcelocation="${selector.source}"

   103                   tabindex="0">${selector.source}</a>

   104             </span>

   105             <span dir="ltr" class="rule-text ${selector.statusClass} theme-fg-color3" title="${selector.statusText}">

   106               ${selector.sourceText}

   107               <span class="other-property-value theme-fg-color1">${selector.outputFragment}</span>

   108             </span>

   109           </p>

   110         </loop>

   111       </div>

   112     </div>

   114   </body>

   115 </html>

The Tor Browser / file revision