1 <script> 2 (function () { 3 // Contains the latest snapshot of sync about info. 4 chrome.sync.aboutInfo = {}; 5 6 // TODO(akalin): Make aboutInfo have key names likeThis and not 7 // like_this. 8 function refreshAboutInfo(aboutInfo) { 9 chrome.sync.aboutInfo = aboutInfo; 10 var aboutInfoDiv = document.getElementById('aboutInfo'); 11 jstProcess(new JsEvalContext(aboutInfo), aboutInfoDiv); 12 } 13 14 function onLoad() { 15 chrome.sync.getAboutInfo(refreshAboutInfo); 16 chrome.sync.onSyncServiceStateChanged.addListener(function() { 17 chrome.sync.getAboutInfo(refreshAboutInfo); 18 }); 19 } 20 21 document.addEventListener("DOMContentLoaded", onLoad, false); 22 })(); 23 </script> 24 25 <style> 26 div.column { 27 display: inline-block; 28 padding-right: 5em; 29 vertical-align: top; 30 } 31 32 div#aboutInfo h2 { 33 color: #4a8ee6; 34 font-size: 100%; 35 } 36 37 div#aboutInfo .err { 38 color: red; 39 } 40 41 table#aboutDetails tr:nth-child(odd) { 42 background: #eff3ff; 43 } 44 45 table#routingInfo tr:nth-child(odd) { 46 background: #ccffcc; 47 } 48 </style> 49 50 <div id='aboutInfo'> 51 <div class="column"> 52 <h2>Summary</h2> 53 <p jscontent="summary"/> 54 <p jsdisplay="unrecoverable_error_detected"> 55 <span class="err">Unrecoverable Error Detected!</span> 56 <span jscontent="unrecoverable_error_message"></span> 57 <span jscontent="unrecoverable_error_location"></span> 58 </p> 59 60 <h2>Sync URL</h2> 61 <p jscontent="service_url"/> 62 63 <h2>Details</h2> 64 <table id="aboutDetails"> 65 <tr> 66 <td>Authenticated</td> 67 <td> 68 <span jscontent="authenticated"></span> 69 <span jsdisplay="!authenticated" class="err" jscontent="auth_problem"></span> 70 </td> 71 </tr> 72 <tr> 73 <td>Last Synced</td> 74 <td jscontent="time_since_sync"/> 75 </tr> 76 <tr jsselect="details"> 77 <td jscontent="stat_name"/> 78 <td jscontent="stat_value"/> 79 </tr> 80 </table> 81 </div> 82 83 <div class="column"> 84 <h2>Routing Info</h2> 85 <table id="routingInfo"> 86 <tr jsselect="routing_info"> 87 <td jscontent="model_type"/> 88 <td jscontent="group"/> 89 </tr> 90 </table> 91 </div> 92 </div> 93