[Sync] Clean up about:sync

Converted from table-based layout to CSS positioning.

Cleaned up markup and styles.

Fixed some bugs in chrome_sync.js.

This is in preparation for putting the top-level divs in a tabbed view.

BUG=69500
TEST=

Review URL: http://codereview.chromium.org/6538047

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@75463 0039d316-1c4b-4281-b951-d872f2087c98

6 files changed, 169 insertions, 211 deletions

diff --git a/chrome/browser/resources/sync_internals/about.css b/chrome/browser/resources/sync_internals/about.css
deleted file mode 100644
index 0cd868d..0000000
--- a/chrome/browser/resources/sync_internals/about.css
+++ /dev/null
@@ -1,105 +0,0 @@
-body {
-  padding: 0.75em;
-  margin: 0;
-  min-width: 45em;
-}
-h1 {
-  font-size: 110%;
-  font-weight: bold;
-  color: #4a8ee6;
-  letter-spacing: -1px;
-  padding: 0;
-  margin: 0;
-}
-h2 {
-  font-size: 110%;
-  letter-spacing: -1px;
-  font-weight: normal;
-  color: #4a8ee6;
-  margin: 0 0 0 -38px;
-  padding: 0.5em 1em 0.5em 38px;
-  color: #3a75bd;
-  border-top: 1px solid #3a75bd;
-}
-h2:first-child {
-  border-top: 0;
-  padding-top: 0;
-}
-div#header {
-  padding: 0.6em 1em 0.75em 0;
-  margin-bottom: 0.75em;
-  position: relative;
-  overflow: hidden;
-  background: #5296de;
-  background-size: 100%;
-  border: 1px solid #3a75bd;
-  border-radius: 6px;
-  color: white;
-  text-shadow: 0 0 2px black;
-}
-div#header h1 {
-  padding-left: 37px;
-  margin: 0;
-  display: inline;
-  background: url('../../resources/shared/images/gear.png') 12px 60% no-repeat;
-  color: white;
-}
-.err {
-  color: red;
-}
-div#header p {
-  font-style: italic;
-  padding: 0;
-  margin: 0;
-  color: white;
-  padding-left: 0.4em;
-  display: inline;
-}
-table.list {
-  line-height: 200%;
-  border-collapse: collapse;
-  table-layout: fixed;
-}
-table.list:not([class*='filtered']) tr:nth-child(odd) td {
-  background: #eff3ff;
-}
-table.list#details2 tr:nth-child(odd) td {
-  background: #ccffcc
-}
-table.list td {
-  padding: 0 0.5em;
-  vertical-align: top;
-  line-height: 1.4em;
-  padding-top: 0.35em;
-}
-table.list tr td:nth-last-child(1),
-table.list tr th:nth-last-child(1) {
-  padding-right: 1em;
-}
-
-table.list:not([class*='filtered']) .tab .name {
-  padding-left: 1.5em;
-}
-table.list .name {
-}
-table.list .name div {
-  height: 1.6em;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-table.list .number {
-  width: 7em;
-  text-align: right;
-}
-table.list tr:not([class*='firstRow']) > *:nth-child(1),
-table.list tr:not([class*='firstRow']) > *:nth-child(4),
-table.list tr.firstRow th:nth-child(1),
-table.list tr.firstRow th:nth-child(2) {
-  border-right: 1px solid #b5c6de;
-}
-table.list#details .name {
-  padding-left: 25px;
-  background-position: 5px center;
-  background-repeat: no-repeat;
-}
diff --git a/chrome/browser/resources/sync_internals/about.html b/chrome/browser/resources/sync_internals/about.html
index 305b8f5..46eb448 100644
--- a/chrome/browser/resources/sync_internals/about.html
+++ b/chrome/browser/resources/sync_internals/about.html
@@ -17,75 +17,72 @@ function onLoad() {
 document.addEventListener("DOMContentLoaded", onLoad, false);
 })();
 </script>
+
+<style>
+div.column {
+  display: inline-block;
+  padding-right: 5em;
+  vertical-align: top;
+}
+
+div#aboutInfo h2 {
+  color: #4a8ee6;
+  font-size: 100%;
+}
+
+div#aboutInfo .err {
+  color: red;
+}
+
+table#aboutDetails tr:nth-child(odd) {
+  background: #eff3ff;
+}
+
+table#routingInfo tr:nth-child(odd) {
+  background: #ccffcc;
+}
+</style>
+
 <div id='aboutInfo'>
-  <div id='header'>
-    <h1>Sync Internals</h1>
-    <p>Sync engine diagnostic data</p>
-  </div>
-  <div id='content'>
-    <table width="100%">
-      <tr>
-        <td width="20%">
-          <span class="desc"><h2>Summary</h2></span>
-          <strong jscontent="summary"></strong>
-        </td>
-        <td>
-          <div class="desc" jsdisplay="unrecoverable_error_detected">
-            <span class="err">Unrecoverable Error Detected!</span>
-            <div jscontent="unrecoverable_error_message"></div>
-            <div jscontent="unrecoverable_error_location"></div>
-          </div>
-        </td>
-      </tr>
-      <tr>
-        <td colspan="2">
-          <span class="desc"><h2>Sync URL</h2></span>
-          <strong jscontent="service_url"></strong>
-        </td>
-      </tr>
-    </table>
-    <br /><br /><br />
-    <table>
-      <tr>
-        <td>
-        <div class="desc"><h2>Details</h2></div>
-        <table class='list' id='details'>
-          <tr>
-            <td class='name'>Authenticated</td>
-            <td class='number'>
-              <div jscontent="authenticated"></div>
-              <div jsdisplay="!authenticated"
-                   class="err"
-                   jscontent="auth_problem"></div>
-            </td>
-          </tr>
-          <tr>
-            <td class='name'>Last Synced</td>
-            <td class='number' jscontent="time_since_sync"></td>
-          </tr>
-          <tr jsselect="details">
-            <td class='name'>
-              <div jscontent="stat_name"></div>
-            </td>
-            <td class='number'>
-              <div jscontent="stat_value"></div>
-            </td>
-          </tr>
-        </table>
-      </td>
-      <td valign="top">
-        <div class="desc"><h2>Routing Info</h2></div>
-        <table class='list' id='details2'>
-          <tr jsselect="routing_info">
-            <td class ='name'>
-              <div jscontent="model_type"></div>
-            </td>
-            <td class='number'>
-              <div jscontent="group"></div>
-            </td>
-          </tr>
-        </table>
+<div class="column">
+  <h2>Summary</h2>
+  <p jscontent="summary"/>
+  <p jsdisplay="unrecoverable_error_detected">
+    <span class="err">Unrecoverable Error Detected!</span>
+    <span jscontent="unrecoverable_error_message"></span>
+    <span jscontent="unrecoverable_error_location"></span>
+  </p>
+
+  <h2>Sync URL</h2>
+  <p jscontent="service_url"/>
+
+  <h2>Details</h2>
+  <table id="aboutDetails">
+    <tr>
+      <td>Authenticated</td>
+      <td>
+        <span jscontent="authenticated"></span>
+        <span jsdisplay="!authenticated" class="err" jscontent="auth_problem"></span>
       </td>
-    </table>
-  </div>
+    </tr>
+    <tr>
+      <td>Last Synced</td>
+      <td jscontent="time_since_sync"/>
+    </tr>
+    <tr jsselect="details">
+      <td jscontent="stat_name"/>
+      <td jscontent="stat_value"/>
+    </tr>
+  </table>
+</div>
+
+<div class="column">
+  <h2>Routing Info</h2>
+  <table id="routingInfo">
+    <tr jsselect="routing_info">
+      <td jscontent="model_type"/>
+      <td jscontent="group"/>
+    </tr>
+  </table>
+</div>
 </div>
diff --git a/chrome/browser/resources/sync_internals/chrome_sync.js b/chrome/browser/resources/sync_internals/chrome_sync.js
index c8dbcc6..3e5d21f 100644
--- a/chrome/browser/resources/sync_internals/chrome_sync.js
+++ b/chrome/browser/resources/sync_internals/chrome_sync.js
@@ -40,14 +40,20 @@ Event.prototype.findListener_ = function(listener) {
   return -1;
 };
 
-// Fires the event.  Called by the actual event callback.
+// Fires the event.  Called by the actual event callback.  Any
+// exceptions thrown by a listener are caught and logged.
 Event.prototype.dispatch_ = function() {
   var args = Array.prototype.slice.call(arguments);
   for (var i = 0; i < this.listeners_.length; i++) {
     try {
       this.listeners_[i].apply(null, args);
     } catch (e) {
-      console.error(e);
+      if (e instanceof Error) {
+        // Non-standard, but useful.
+        console.error(e.stack);
+      } else {
+        console.error(e);
+      }
     }
   }
 };
@@ -90,12 +96,10 @@ AsyncFunction.prototype.call = function() {
 // Handle a reply, assuming that messages are processed in FIFO order.
 AsyncFunction.prototype.handleReply = function() {
   var args = Array.prototype.slice.call(arguments);
+  // Remove the callback before we call it since the callback may
+  // throw.
   var callback = this.callbacks_.shift();
-  try {
-    callback.apply(null, args);
-  } catch (e) {
-    console.error(e);
-  }
+  callback.apply(null, args);
 }
 
 // Sync service functions.
diff --git a/chrome/browser/resources/sync_internals/notifications.html b/chrome/browser/resources/sync_internals/notifications.html
index 67fc97b..3120361 100644
--- a/chrome/browser/resources/sync_internals/notifications.html
+++ b/chrome/browser/resources/sync_internals/notifications.html
@@ -38,19 +38,18 @@ document.addEventListener("DOMContentLoaded", onLoad, false);
 })();
 </script>
 
-<div class="desc"><h2> Notifications </h2></div>
+<style>
+table#notificationCountsInfo tr:nth-child(odd) {
+  background: #eff3ff;
+}
+</style>
+
 <p id='notificationsEnabledInfo'>
   Enabled: <span jscontent='notificationsEnabled'></span>
 </p>
-
-<table class='list' id='notificationCountsInfo'>
+<table id='notificationCountsInfo'>
   <tr jsselect='notificationCounts'>
-    <td class='name'>
-      <div jscontent='modelType'></div>
-    </td>
-    <td class='number'>
-      <div jscontent='notificationCount'></div>
-    </td>
+    <td jscontent='modelType'/>
+    <td jscontent='notificationCount'/>
   </tr>
 </table>
-
diff --git a/chrome/browser/resources/sync_internals/sync_index.html b/chrome/browser/resources/sync_internals/sync_index.html
index f765c350..100ead35 100644
--- a/chrome/browser/resources/sync_internals/sync_index.html
+++ b/chrome/browser/resources/sync_internals/sync_index.html
@@ -5,13 +5,37 @@
 chrome/test/functional/special_tabs.py. -->
 <title>Sync Internals</title>
 <script src="chrome_sync.js"></script>
-<!-- Used by about.html. -->
-<link rel="stylesheet" href="about.css" />
 </head>
 <body i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize">
-<include src="about.html" />
-<include src="notifications.html" />
-<include src="sync_node_browser.html" />
+
+<style>
+div.topLevel {
+  display: inline-block;
+  padding-right: 5em;
+  vertical-align: top;
+}
+
+h1.topLevel {
+  font-size: 150%;
+}
+</style>
+
+<!-- TODO(akalin): Add tab-style navigation. -->
+
+<div class="topLevel" id="about">
+  <h1 class="topLevel">About</h1>
+  <include src="about.html" />
+</div>
+<div class="topLevel" id="notifications">
+  <h1 class="topLevel">Notifications</h1>
+  <include src="notifications.html" />
+</div>
+<div class="topLevel" id="syncNodeBrowser">
+  <h1 class="topLevel">Node Browser</h1>
+  <include src="sync_node_browser.html" />
+</div>
+
 <include src="sync_events.html" />
+
 </body>
 </html>
diff --git a/chrome/browser/resources/sync_internals/sync_node_browser.html b/chrome/browser/resources/sync_internals/sync_node_browser.html
index bddc2a0..7f8b96d 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>