Home | History | Annotate | Download | only in sync_internals 
      1 <script src="chrome://sync-internals/about.js"></script>
      2 
      3 <style>
      4 div#aboutInfo {
      5   -webkit-columns: 3;
      6 }
      7 
      8 div#aboutInfo h2 {
      9   color: #4a8ee6;
     10   font-size: 100%;
     11   margin-bottom: 0;
     12 }
     13 
     14 div#aboutInfo .err {
     15   color: red;
     16 }
     17 
     18 div#aboutInfo div.section {
     19   display: inline-block;
     20   width: 100%;
     21   -webkit-column-break-inside: avoid;
     22 }
     23 
     24 table.aboutDetails {
     25   width: 100%;
     26 }
     27 
     28 table.aboutDetails tr:nth-child(odd) {
     29   background: #eff3ff;
     30 }
     31 
     32 div#aboutInfo div.section > td#detail {
     33   width: 50%;
     34 }
     35 
     36 div#aboutInfo div.section > td#value {
     37   width: 50%;
     38 }
     39 
     40 table#typeInfo tr.error {
     41  background: #ffcccc;
     42 }
     43 
     44 table#typeInfo tr.warning {
     45  background: #ffffcc;
     46 }
     47 
     48 table#typeInfo tr.ok {
     49  background: #ccffcc;
     50 }
     51 
     52 @-webkit-keyframes highlight1 {
     53   0% { background: #ffff00; }
     54   100% { background: #ffffff; }
     55 }
     56 
     57 @-webkit-keyframes highlight2 {
     58   0% { background: #9b9ea6; }
     59   100% { background: #eff3ff; }
     60 }
     61 
     62 table.aboutDetails tr[highlighted] {
     63   -webkit-animation-name: highlight1;
     64   -webkit-animation-duration: 3s;
     65   -webkit-animation-timing-function: linear;
     66 }
     67 
     68 table.aboutDetails tr[highlighted]:nth-child(odd) {
     69   -webkit-animation-name: highlight2;
     70   -webkit-animation-duration: 3s;
     71   -webkit-animation-timing-function: linear;
     72 }
     73 
     74 table.aboutDetails tr.uninitialized {
     75   color: #7f7f7f;
     76 }
     77 
     78 </style>
     79 
     80 <div id='aboutInfo'>
     81   <div class="section" jsselect="details">
     82     <h2 jscontent="title"></h2>
     83     <table class="aboutDetails">
     84       <tr jsselect="data"
     85             jsvalues="class:$this.is_valid ? '' : 'uninitialized'"
     86             jseval='highlightIfChanged(this, this.children[1].innerText, stat_value)'>
     87         <td class="detail" jscontent="stat_name" width=50%></td>
     88         <td class="value" jscontent="stat_value" width=50%></td>
     89       </tr>
     90     </table>
     91   </div>
     92 
     93   <div class="section" style="overflow-x: auto">
     94     <h2>Type Info</h2>
     95     <table id="typeInfo">
     96       <tr jsselect="type_status" jsvalues="class:$this.status">
     97         <td jscontent="name" width=50%></td>
     98         <td jscontent="value" width=30%></td>
     99         <td jscontent="num_entries" width=10%></td>
    100         <td jscontent="num_live" width=10%></td>
    101       </tr>
    102     </table>
    103   </div>
    104 
    105   <div class="section" jsdisplay="unrecoverable_error_detected">
    106     <p>
    107       <span class="err" jscontent="unrecoverable_error_message"></span>
    108     </p>
    109   </div>
    110 
    111   <div class="section" jsdisplay="actionable_error_detected">
    112     <p>
    113       <h2>Actionable Error</h2>
    114       <table id="actionableError">
    115         <tr jsselect="actionable_error">
    116           <td jscontent="stat_name"></td>
    117           <td jscontent="stat_value"></td>
    118         </tr>
    119       </table>
    120     </p>
    121   </div>
    122 </div>
    123