1 <style> 2 #sync-events-table, 3 #sync-events-table th, 4 #sync-events-table td { 5 border: 1px black solid; 6 } 7 8 #sync-events-table { 9 width: 100%; 10 } 11 12 #sync-events > tr { 13 vertical-align: top; 14 } 15 </style> 16 17 <table id="sync-events-table"> 18 <thead> 19 <th>Time</th> 20 <th>Submodule</th> 21 <th>Event</th> 22 <th>Details</th> 23 </thead> 24 <tbody id="sync-events"> 25 </tbody> 26 </table> 27 28 <script> 29 (function() { 30 function makeLogEntryNode(entry) { 31 var timeNode = document.createElement('td'); 32 timeNode.innerText = entry.date; 33 34 var submoduleNode = document.createElement('td'); 35 submoduleNode.innerText = entry.submodule; 36 37 var eventNode = document.createElement('td'); 38 eventNode.innerText = entry.event; 39 40 var details = document.createElement('pre'); 41 details.innerText = JSON.stringify(entry.details, null, 2); 42 var detailsNode = document.createElement('td'); 43 detailsNode.appendChild(details); 44 45 var node = document.createElement('tr'); 46 node.appendChild(timeNode); 47 node.appendChild(submoduleNode); 48 node.appendChild(eventNode); 49 node.appendChild(detailsNode); 50 51 return node; 52 } 53 54 var syncEvents = document.getElementById('sync-events'); 55 56 var entries = chrome.sync.log.entries; 57 for (var i = 0; i < entries.length; ++i) { 58 syncEvents.appendChild(makeLogEntryNode(entries[i])); 59 } 60 61 chrome.sync.log.addEventListener('append', function(event) { 62 syncEvents.appendChild(makeLogEntryNode(event.detail)); 63 }); 64 })(); 65 </script> 66
