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..17b5f3b94fd0cc766b7633d2e58e00cb67b1a60f 100644
--- a/chrome/browser/resources/sync_internals/about.html
+++ b/chrome/browser/resources/sync_internals/about.html
@@ -14,19 +14,30 @@
   </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)">

[James Hawkins, 2014/03/24 23:08:32]

nit: 80 cols.

[rlarocque, 2014/03/24 23:34:19]

I tried to fix it, but I'm not sure if there are any particular rules about
wrapping HTML.  Let me know if I got it wrong.

+        <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">