sync: Display protocol events on about:sync

chrome/browser/resources/sync_internals/about.html

Index: chrome/browser/resources/sync_internals/about.html
diff --git a/chrome/browser/resources/sync_internals/about.html b/chrome/browser/resources/sync_internals/about.html
index 766e1bcabd60edb5adb305dd6309c567147af8a4..4aa8e34b186736201b054a25b06e861ff20a6d44 100644
--- a/chrome/browser/resources/sync_internals/about.html
+++ b/chrome/browser/resources/sync_internals/about.html
@@ -14,19 +14,32 @@
   </div>
 </div>
 
-<div id='aboutInfo'>
+<div id='about-info'>
   <div class="section" jsselect="details">
     <h2 jscontent="title"></h2>
-    <table class="aboutDetails">
+    <table class="about-details">
       <tr jsselect="data"
-            jsvalues="class:$this.is_valid ? '' : 'uninitialized'"
-            jseval='highlightIfChanged(this, this.children[1].innerText, stat_value)'>
+            jsvalues="class:$this.is_valid ? '' : 'uninitialized'">
         <td class="detail" jscontent="stat_name" width=50%></td>
         <td class="value" jscontent="stat_value" width=50%></td>
       </tr>
     </table>
   </div>
 
+  <div id="traffic-event-container-wrapper" jsskip="true">
+    <h2>Sync Protocol Log</h2>
+    <div id="traffic-event-container">
+      <div class="traffic-event-entry"
+           jsselect="events"
+           jseval="chrome.sync.about_tab.addExpandListener(this)">
+        <span class="time" jscontent="(new Date(time)).toLocaleString()"></span>
+        <span class="type" jscontent="type"></span>
+        <pre class="details" jscontent="details"></pre>
+        <pre class="proto" jscontent="JSON.stringify(proto, null, 2)"></pre>
+      </div>
+    </div>
+  </div>
+
   <div class="section" style="overflow-x: auto">
     <h2>Type Info</h2>
     <table id="typeInfo">