Home | History | Annotate | Download | only in resources 
      1 <!DOCTYPE HTML>
      2 <html i18n-values="dir:textdirection;"><head>
      3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      4 <title i18n-content="title"></title>
      5 
      6 <style>
      7 body {
      8   font-size: 84%;
      9   font-family: Arial, Helvetica, sans-serif;
     10   padding: 0.75em;
     11   margin: 0;
     12   min-width: 45em;
     13 }
     14 
     15 h1, h2 {
     16  font-size: 120%;
     17  letter-spacing: -1px;
     18  margin: 0;
     19 }
     20 
     21 h1 {
     22   font-weight: bold;
     23   color: #4a8ee6;
     24   padding: 0;
     25 }
     26 
     27 h2 {
     28   font-weight: normal;
     29   padding: 0.5em 1em;
     30   color: #3a75bd;
     31   -webkit-margin-start: -38px;
     32   -webkit-padding-start: 38px;
     33   border-top: 1px solid #3a75bd;
     34   padding-top: 0.5em;
     35 }
     36 
     37 h2:first-child {
     38   border-top: 0;
     39   padding-top: 0;
     40   float: left;
     41   vertical-align: text-bottom;
     42 }
     43 
     44 #header {
     45   padding: 0.6em 1em 0.75em 0;
     46   margin-bottom: 0.75em;
     47   position: relative;
     48   overflow: hidden;
     49   background: #5296de;
     50   background-size: 100%;
     51   border: 1px solid #3a75bd;
     52   border-radius: 6px;
     53   color: white;
     54   text-shadow: 0 0 2px black;
     55 }
     56 
     57 html[dir='rtl'] #header {
     58   padding: 0.6em 0 0.75em 1em;
     59 }
     60 
     61 #header h1 {
     62   -webkit-padding-start: 3em;
     63   margin: 0;
     64   display: inline;
     65   background: url('shared/images/gear.png') no-repeat;
     66   background-position: 12px 60%;
     67   color: white;
     68 }
     69 
     70 html[dir='rtl'] #header h1 {
     71   background-position-left: auto;
     72   backgroun-position-right: 12px;
     73 }
     74 
     75 #header p {
     76   font-size: 84%;
     77   font-style: italic;
     78   padding: 0;
     79   margin: 0;
     80   color: white;
     81   -webkit-padding-start: 0.4em;
     82   display: inline;
     83 }
     84 
     85 .list {
     86   line-height: 200%;
     87   border-collapse: collapse;
     88   font-size: 84%;
     89   table-layout: fixed;
     90   width: 100%;
     91 }
     92 .list:not(.filtered) tr:nth-child(odd) td {
     93   background: #eff3ff;
     94 }
     95 
     96 .list td {
     97   padding: 0 0.5em;
     98   vertical-align: top;
     99   line-height: 1.4em;
    100   padding-top: 0.35em;
    101   font-family: 'Courier New', monospace;
    102   white-space: pre;
    103 }
    104 
    105 .list tr td:nth-last-child(1),
    106 .list tr th:nth-last-child(1) {
    107   -webkit-padding-end: 1em;
    108 }
    109 
    110 .list:not(.filtered) .tab .name {
    111   -webkit-padding-start: 1.5em;
    112 }
    113 
    114 .list .name {
    115   width: 20%;
    116 }
    117 
    118 .list .button_cell {
    119   width: 7%;
    120 }
    121 
    122 .list .name div {
    123   height: 1.6em;
    124   overflow: hidden;
    125   white-space: nowrap;
    126   text-overflow: ellipsis;
    127 }
    128 
    129 .button_hidden {
    130   display: none;
    131 }
    132 
    133 .number_expanded, .number_collapsed  {
    134   text-align: left;
    135   width: 80%;
    136 }
    137 
    138 html[dir='rtl'] .number_expanded, html[dir='rtl'] .number_collapsed  {
    139   text-align: right;
    140 }
    141 
    142 tr:not(.firstRow) > *:nth-child(1),
    143 tr:not(.firstRow) > *:nth-child(2),
    144 tr.firstRow th:nth-child(1),
    145 tr.firstRow th:nth-child(2) {
    146   -webkit-border-end: 1px solid #b5c6de;
    147 }
    148 
    149 .name {
    150   background-position: 5em center;
    151   background-repeat: no-repeat;
    152 }
    153 
    154 html[dir='rtl'] #details .name {
    155   background-position-left: auto;
    156   background-position-right: 5em;
    157 }
    158 
    159 .number_collapsed .stat_value {
    160   display: none;
    161 }
    162 
    163 .number_expanded .stat_value {
    164   display: auto;
    165 }
    166 
    167 #anchor {
    168   display: none;
    169 }
    170 
    171 .globalButton {
    172   float: left;
    173   margin: 1px 5px;
    174 }
    175 
    176 html[dir='rtl'] .globalButton {
    177   float: right;
    178 }
    179 </style>
    180 <script src="shared/js/local_strings.js"></script>
    181 <script>
    182 var localStrings;
    183 
    184 function getValueDivForButton(button) {
    185   return document.getElementById(button.id.substr(0, button.id.length - 4));
    186 }
    187 
    188 function getButtonForValueDiv(valueDiv) {
    189   return document.getElementById(valueDiv.id + '-btn');
    190 }
    191 
    192 function changeCollapsedStatus() {
    193   var valueDiv = getValueDivForButton(this);
    194   if (valueDiv.parentNode.className == 'number_collapsed') {
    195     valueDiv.parentNode.className = 'number_expanded';
    196     this.textContent = localStrings.getString('collapse_btn');
    197   } else {
    198     valueDiv.parentNode.className = 'number_collapsed';
    199     this.textContent = localStrings.getString('expand_btn');
    200   }
    201 }
    202 
    203 function collapseAll() {
    204   var valueDivs = document.getElementsByClassName('stat_value');
    205   for(var i = 0; i < valueDivs.length; i++) {
    206     var button = getButtonForValueDiv(valueDivs[i]);
    207     if (button && button.className != 'button_hidden') {
    208       button.textContent = localStrings.getString('expand_btn');
    209       valueDivs[i].parentNode.className = 'number_collapsed';
    210     }
    211   }
    212 }
    213 
    214 function expandAll() {
    215   var valueDivs = document.getElementsByClassName('stat_value');
    216   for(var i = 0; i < valueDivs.length; i++) {
    217     var button = getButtonForValueDiv(valueDivs[i]);
    218     if (button && button.className != 'button_hidden') {
    219       button.textContent = localStrings.getString('collapse_btn');
    220       valueDivs[i].parentNode.className = 'number_expanded';
    221     }
    222   }
    223 }
    224 
    225 document.addEventListener('DOMContentLoaded', function() {
    226   localStrings = new LocalStrings();    
    227     
    228   var collapseAllBtn = document.getElementById('collapseAll');
    229   collapseAllBtn.onclick = collapseAll;
    230   
    231   var expandAllBtn = document.getElementById('expandAll');
    232   expandAllBtn.onclick = expandAll;
    233   
    234   var anchorName = document.getElementById('anchor').textContent;
    235   var valueDivs = document.getElementsByClassName('stat_value');
    236   for(var i = 0; i < valueDivs.length; i++) {
    237     var button = getButtonForValueDiv(valueDivs[i]);
    238     button.onclick = changeCollapsedStatus;
    239     if (valueDivs[i].textContent.split('\n').length > 1) {
    240       button.textContent = localStrings.getString('expand_btn');
    241       valueDivs[i].parentNode.className = 'number_collapsed';
    242     } else {
    243       button.className = 'button_hidden';
    244     }
    245   }    
    246 });
    247 </script>
    248 
    249 </head>
    250 <body id="t">
    251   <div id="header">
    252     <h1 i18n-content="title"></h1>
    253     <p i18n-content="description"></p>
    254   </div>
    255   <div id="content">
    256     <h2 i18n-content="table_title"></h2>
    257     <div id="anchor" jscontent="anchor"></div>
    258     <button id="expandAll" class="globalButton" i18n-content="expand_all_btn">
    259     </button>
    260     <button id="collapseAll" class="globalButton" 
    261         i18n-content="collapse_all_btn"></button>
    262     <table class="list" id="details">
    263       <tr jsselect="details">
    264         <td class="name"><a jsvalues="name:anchor_value"><div
    265             jscontent="stat_name"></div></a></td>
    266         <td class="button_cell"><button jsvalues="id:stat_name + '-value-btn'"
    267             class="expand_status"></button></td>
    268         <td class="number"><div class="stat_value" jscontent="stat_value"
    269             jsvalues="id:stat_name + '-value'"></div></td>
    270       </tr>
    271     </table>
    272   </div>
    273 </body>
    274 </html>
    275