[Sync] Clean up about:sync

chrome/browser/resources/sync_internals/sync_node_browser.html

Index: chrome/browser/resources/sync_internals/sync_node_browser.html
diff --git a/chrome/browser/resources/sync_internals/sync_node_browser.html b/chrome/browser/resources/sync_internals/sync_node_browser.html
index bddc2a054c528370e91505f965aa61c8f6a556d2..7f8b96d0237074592c621b689eee5e42dfa99e8e 100644
--- a/chrome/browser/resources/sync_internals/sync_node_browser.html
+++ b/chrome/browser/resources/sync_internals/sync_node_browser.html
@@ -9,7 +9,7 @@ document.addEventListener("DOMContentLoaded", onLoad, false);
 
 function updateNodeBrowser(nodeInfo) {
   var nodeBrowser = document.getElementById('nodeBrowser');
-  nodeInfo.specifics = JSON.stringify(nodeInfo.specifics);
+  nodeInfo.specifics = JSON.stringify(nodeInfo.specifics, null, 2);
   jstProcess(new JsEvalContext(nodeInfo), nodeBrowser);
 }
 
@@ -18,17 +18,56 @@ function processNodeLink(link) {
   chrome.sync.getNodeById(id, updateNodeBrowser);
 }
 </script>
-<div class="desc"><h2> Node Browser </h2></div>
-<ul id='nodeBrowser'>
-  <li>ID: <span jscontent='id'></span></li>
-  <li>Modification Time: <span jscontent='modificationTime'></span></li>
-  <li>Parent: <a jscontent='parentId' href="#" onclick="processNodeLink(this); return false"></a></li>
-  <li>Is Folder: <span jscontent='isFolder'></span></li>
-  <li>Title: <span jscontent='title'></span></li>
-  <li>Type: <span jscontent='type'></span></li>
-  <li>Specifics: <span jscontent='specifics'></span></li>
-  <li>External ID: <span jscontent='externalId'></span></li>
-  <li>Predecessor: <a jscontent='predecessorId' href="#" onclick="processNodeLink(this); return false"></a></li>
-  <li>Successor: <a jscontent='successorId' href="#" onclick="processNodeLink(this); return false"></a></li>
-  <li>First Child: <a jscontent='firstChildId' href="#" onclick="processNodeLink(this); return false"></a></li>
-</ul>
+
+<style>
+table#nodeBrowser tr:nth-child(odd) {
+  background: #eff3ff;
+}
+</style>
+
+<table id='nodeBrowser'>
+  <tr>
+    <td>ID</td>
+    <td jscontent='id'></td>
+  </tr>
+  <tr>
+    <td>Modification Time</td>
+    <td jscontent='modificationTime'></td>
+  </tr>
+  <tr>
+    <td>Parent</td>
+    <td><a jscontent='parentId' href="#" onclick="processNodeLink(this); return false"></a></td>
+  </tr>
+  <tr>
+    <td>Is Folder</td>
+    <td jscontent='isFolder'></td>
+  </tr>
+  <tr>
+    <td>Title</td>
+    <td jscontent='title'></td>
+  </tr>
+  <tr>
+    <td>Type</td>
+    <td jscontent='type'></td>
+  </tr>
+  <tr>
+    <td>Specifics</td>
+    <td><pre jscontent='specifics'></pre></td>
+  </tr>
+  <tr>
+    <td>External ID</td>
+    <td jscontent='externalId'></td>
+  </tr>
+  <tr>
+    <td>Predecessor</td>
+    <td><a jscontent='predecessorId' href="#" onclick="processNodeLink(this); return false"></a></td>
+  </tr>
+  <tr>
+    <td>Successor</td>
+    <td><a jscontent='successorId' href="#" onclick="processNodeLink(this); return false"></a></td>
+  </tr>
+  <tr>
+    <td>First Child</td>
+    <td><a jscontent='firstChildId' href="#" onclick="processNodeLink(this); return false"></a></td>
+  </tr>
+</table>