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() { 30function 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 54var syncEvents = document.getElementById('sync-events'); 55 56var entries = chrome.sync.log.entries; 57for (var i = 0; i < entries.length; ++i) { 58 syncEvents.appendChild(makeLogEntryNode(entries[i])); 59} 60 61chrome.sync.log.addEventListener('append', function(event) { 62 syncEvents.appendChild(makeLogEntryNode(event.detail)); 63}); 64})(); 65</script> 66