[Sync] Split up about:sync html files to be more manageable

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
new file mode 100644
index 0000000000000000000000000000000000000000..305b8f54e92201a2f58bda5a4e4fbd2399208e0b
--- /dev/null
+++ b/chrome/browser/resources/sync_internals/about.html
@@ -0,0 +1,91 @@
+<script>
+(function () {
+// TODO(akalin): Make aboutInfo have key names likeThis and not
+// like_this.
+function refreshAboutInfo(aboutInfo) {
+  var aboutInfoDiv = document.getElementById('aboutInfo');
+  jstProcess(new JsEvalContext(aboutInfo), aboutInfoDiv);
+}
+
+function onLoad() {
+  chrome.sync.getAboutInfo(refreshAboutInfo);
+  chrome.sync.onSyncServiceStateChanged.addListener(function() {
+    chrome.sync.getAboutInfo(refreshAboutInfo);
+  });
+}
+
+document.addEventListener("DOMContentLoaded", onLoad, false);
+})();
+</script>
+<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>
+      </td>
+    </table>
+  </div>
+</div>