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

chrome/browser/resources/sync_internals/sync_index.html

Index: chrome/browser/resources/sync_internals/sync_index.html
diff --git a/chrome/browser/resources/sync_internals/sync_index.html b/chrome/browser/resources/sync_internals/sync_index.html
index ccc7543dcdb26fc11286cc8c6232c191239d0a18..8536030da79a7189d18754d36244a05c8f231149 100644
--- a/chrome/browser/resources/sync_internals/sync_index.html
+++ b/chrome/browser/resources/sync_internals/sync_index.html
@@ -4,360 +4,12 @@
 <!-- If you change the title, make sure you also update
 chrome/test/functional/special_tabs.py. -->
 <title>Sync Internals</title>
-<script>
-function onLoad() {
-  chrome.send('getAboutInfo');
-  chrome.send('getNotificationState');
-  chrome.send('getRootNode');
-}
-
-function onGetAboutInfoFinished(aboutInfo) {
-  var aboutInfoDiv = document.getElementById('aboutInfo');
-  jstProcess(new JsEvalContext(aboutInfo), aboutInfoDiv);
-}
-
-function onGetNotificationStateFinished(notificationsEnabled) {
-  onSyncNotificationStateChange(notificationsEnabled);
-}
-
-function onGetRootNodeFinished(rootNodeInfo) {
-  onGetNodeByIdFinished(rootNodeInfo);
-}
-
-function onGetNodeByIdFinished(nodeInfo) {
-  var nodeBrowser = document.getElementById('nodeBrowser');
-  nodeInfo.specifics = JSON.stringify(nodeInfo.specifics);
-  jstProcess(new JsEvalContext(nodeInfo), nodeBrowser);
-}
-
-function processNodeLink(link) {
-  var id = link.text;
-  chrome.send('getNodeById', [id]);
-}
-
-function onSyncServiceStateChanged() {
-  chrome.send('getAboutInfo');
-}
-
-function onSyncNotificationStateChange(notificationsEnabled) {
-  var notificationsEnabledInfo =
-    document.getElementById('notificationsEnabledInfo');
-  jstProcess(
-      new JsEvalContext({ 'notificationsEnabled': notificationsEnabled }),
-      notificationsEnabledInfo);
-}
-
-var notificationCounts = {};
-
-function onSyncIncomingNotification(changedTypes) {
-  for (var i = 0; i < changedTypes.length; ++i) {
-    var changedType = changedTypes[i];
-    notificationCounts[changedType] = notificationCounts[changedType] || 0;
-    ++notificationCounts[changedType];
-  }
-
-  var infos = [];
-  for (var k in notificationCounts) {
-    var info = { 'modelType': k, 'notificationCount': notificationCounts[k] };
-    infos.push(info);
-  }
-
-  var notificationCountsInfo =
-    document.getElementById('notificationCountsInfo');
-  jstProcess(new JsEvalContext({ 'notificationCounts': infos }),
-             notificationCountsInfo);
-}
-
-// TODO(akalin): Do something with these notifications.
-
-function onChangesApplied(modelType, changes) {
-  console.log('onChangesApplied: ' + modelType + ': ' + JSON.stringify(changes));
-}
-
-function onChangesComplete(modelType) {
- console.log('onChangesComplete: ' + modelType);
-}
-
-function onSyncCycleCompleted(snapshot) {
-  console.log('onSyncCycleCompleted: ' + JSON.stringify(snapshot));
-}
-
-function onAuthError(authError) {
-  console.log('onAuthError: ' + JSON.stringify(authError));
-}
-
-function onUpdatedToken(token) {
-  console.log('onUpdatedToken: ' + token);
-}
-
-function onPassphraseRequired(forDecryption) {
-  console.log('onPassphraseRequired: ' + forDecryption);
-}
-
-function onPassphraseAccepted(bootstrapToken) {
-  console.log('onPassphraseAccepted: ' + bootstrapToken);
-}
-
-function onInitializationComplete() {
-  console.log('onInitializationComplete');
-}
-
-function onPaused() {
-  console.log('onPaused');
-}
-
-function onResumed() {
-  console.log('onResumed');
-}
-
-function onStopSyncingPermanently() {
-  console.log('onStopSyncingPermanently');
-}
-
-function onClearServerDataSucceeded() {
-  console.log('onClearServerDataSucceeded');
-}
-
-function onClearServerDataFailed() {
-  console.log('onClearServerDataFailed');
-}
-</script>
-
-<style type="text/css">
-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;
-  padding: 0;
-  margin: 0;
-  padding: 0.5em 1em;
-  color: #3a75bd;
-  margin-left: -38px;
-  padding-left: 38px;
-
-  border-top: 1px solid #3a75bd;
-  padding-top: 0.5em;
-
-}
-h2:first-child {
-  border-top: 0;
-  padding-top: 0;
-}
-
-div#header {
-  padding: 0.75em 1em;
-  padding-top: 0.6em;
-  padding-left: 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;
-}
-</style>
-
+<script src="chrome_sync.js"></script>
 </head>
-<body i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize"
-      onload="onLoad()">
-
-<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 />
-    <h2>  </h2>
-    <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"
-                   style="color:red"
-                   jscontent="auth_problem"></div>
-            </td>
-          </tr>
-          </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>
-
-<div class="desc"><h2> Notifications </h2></div>
-<p id='notificationsEnabledInfo'>
-  Enabled: <span jscontent='notificationsEnabled'></span>
-</p>
-
-<table class='list' id='notificationCountsInfo'>
-  <tr jsselect='notificationCounts'>
-    <td class='name'>
-      <div jscontent='modelType'></div>
-    </td>
-    <td class='number'>
-      <div jscontent='notificationCount'></div>
-    </td>
-  </tr>
-</table>
-</td>
-
-<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>
-
+<body i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize">
+<include src="about.html" />
+<include src="notifications.html" />
+<include src="sync_node_browser.html" />
+<include src="sync_events.html" />
 </body>
 </html>