summaryrefslogtreecommitdiffstats
path: root/chrome
diff options
context:
space:
mode:
authorakalin@chromium.org <akalin@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98>2011-02-18 01:16:28 +0000
committerakalin@chromium.org <akalin@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98>2011-02-18 01:16:28 +0000
commitbe8ed8c16785252f73e20e73f6d3177fee50bbb4 (patch)
treea1362a56e49fee7b52cb355620c574b55dc2610a /chrome
parenta57325e1cc8220abfb09d5d0fb9189472b35f641 (diff)
downloadchromium_src-be8ed8c16785252f73e20e73f6d3177fee50bbb4.zip
chromium_src-be8ed8c16785252f73e20e73f6d3177fee50bbb4.tar.gz
chromium_src-be8ed8c16785252f73e20e73f6d3177fee50bbb4.tar.bz2
[Sync] Split up about:sync html files to be more manageable
Split up sync_index.html into chrome_sync.js and various included html files. Added simple Event and AsyncFunction classes to abstract out the grungy WebUI communication details. BUG=69500 TEST= Review URL: http://codereview.chromium.org/6531038 git-svn-id: svn://svn.chromium.org/chrome/trunk/src@75345 0039d316-1c4b-4281-b951-d872f2087c98
Diffstat (limited to 'chrome')
-rw-r--r--chrome/browser/resources/sync_internals/about.css105
-rw-r--r--chrome/browser/resources/sync_internals/about.html91
-rw-r--r--chrome/browser/resources/sync_internals/chrome_sync.js215
-rw-r--r--chrome/browser/resources/sync_internals/notifications.html56
-rw-r--r--chrome/browser/resources/sync_internals/sync_events.html61
-rw-r--r--chrome/browser/resources/sync_internals/sync_index.html362
-rw-r--r--chrome/browser/resources/sync_internals/sync_node_browser.html34
7 files changed, 570 insertions, 354 deletions
diff --git a/chrome/browser/resources/sync_internals/about.css b/chrome/browser/resources/sync_internals/about.css
new file mode 100644
index 0000000..0cd868d
--- /dev/null
+++ b/chrome/browser/resources/sync_internals/about.css
@@ -0,0 +1,105 @@
+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
new file mode 100644
index 0000000..305b8f5
--- /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>
diff --git a/chrome/browser/resources/sync_internals/chrome_sync.js b/chrome/browser/resources/sync_internals/chrome_sync.js
new file mode 100644
index 0000000..c8dbcc6
--- /dev/null
+++ b/chrome/browser/resources/sync_internals/chrome_sync.js
@@ -0,0 +1,215 @@
+var chrome = chrome || {};
+// TODO(akalin): Add mocking code for e.g. chrome.send() so that we
+// can test this without rebuilding chrome.
+chrome.sync = chrome.sync || {};
+(function () {
+
+// This Event class is a simplified version of the one from
+// event_bindings.js.
+function Event() {
+ this.listeners_ = [];
+}
+
+Event.prototype.addListener = function(listener) {
+ this.listeners_.push(listener);
+};
+
+Event.prototype.removeListener = function(listener) {
+ var i = this.findListener_(listener);
+ if (i == -1) {
+ return;
+ }
+ this.listeners_.splice(i, 1);
+};
+
+Event.prototype.hasListener = function(listener) {
+ return this.findListener_(listener) > -1;
+};
+
+Event.prototype.hasListeners = function(listener) {
+ return this.listeners_.length > 0;
+};
+
+// Returns the index of the given listener, or -1 if not found.
+Event.prototype.findListener_ = function(listener) {
+ for (var i = 0; i < this.listeners_.length; i++) {
+ if (this.listeners_[i] == listener) {
+ return i;
+ }
+ }
+ return -1;
+};
+
+// Fires the event. Called by the actual event callback.
+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);
+ }
+ }
+};
+
+// Sync service events.
+chrome.sync.onSyncServiceStateChanged = new Event();
+
+// Notification events.
+chrome.sync.onSyncNotificationStateChange = new Event();
+chrome.sync.onSyncIncomingNotification = new Event();
+
+// Sync manager events.
+chrome.sync.onChangesApplied = new Event();
+chrome.sync.onChangesComplete = new Event();
+chrome.sync.onSyncCycleCompleted = new Event();
+chrome.sync.onAuthError = new Event();
+chrome.sync.onUpdatedToken = new Event();
+chrome.sync.onPassphraseRequired = new Event();
+chrome.sync.onPassphraseAccepted = new Event();
+chrome.sync.onInitializationComplete = new Event();
+chrome.sync.onPaused = new Event();
+chrome.sync.onResumed = new Event();
+chrome.sync.onStopSyncingPermanently = new Event();
+chrome.sync.onClearServerDataSucceeded = new Event();
+chrome.sync.onClearServerDataFailed = new Event();
+
+function AsyncFunction(name) {
+ this.name_ = name;
+ this.callbacks_ = [];
+}
+
+// Calls the function, assuming the last argument is a callback to be
+// called with the return value.
+AsyncFunction.prototype.call = function() {
+ var args = Array.prototype.slice.call(arguments);
+ this.callbacks_.push(args.pop());
+ chrome.send(this.name_, args);
+}
+
+// Handle a reply, assuming that messages are processed in FIFO order.
+AsyncFunction.prototype.handleReply = function() {
+ var args = Array.prototype.slice.call(arguments);
+ var callback = this.callbacks_.shift();
+ try {
+ callback.apply(null, args);
+ } catch (e) {
+ console.error(e);
+ }
+}
+
+// Sync service functions.
+chrome.sync.getAboutInfo_ = new AsyncFunction('getAboutInfo');
+chrome.sync.getAboutInfo = function(callback) {
+ chrome.sync.getAboutInfo_.call(callback);
+}
+
+// Notification functions.
+chrome.sync.getNotificationState_ =
+ new AsyncFunction('getNotificationState');
+chrome.sync.getNotificationState = function(callback) {
+ chrome.sync.getNotificationState_.call(callback);
+}
+
+// Node lookup functions.
+chrome.sync.getRootNode_ = new AsyncFunction('getRootNode');
+chrome.sync.getRootNode = function(callback) {
+ chrome.sync.getRootNode_.call(callback);
+}
+
+chrome.sync.getNodeById_ = new AsyncFunction('getNodeById');
+chrome.sync.getNodeById = function(id, callback) {
+ chrome.sync.getNodeById_.call(id, callback);
+}
+
+})();
+
+// TODO(akalin): Rewrite the C++ side to not need the handlers below.
+
+// Sync service event handlers.
+
+function onSyncServiceStateChanged() {
+ chrome.sync.onSyncServiceStateChanged.dispatch_();
+}
+
+// Notification event handlers.
+
+function onSyncNotificationStateChange(notificationsEnabled) {
+ chrome.sync.onSyncNotificationStateChange.dispatch_(notificationsEnabled);
+}
+
+function onSyncIncomingNotification(changedTypes) {
+ chrome.sync.onSyncIncomingNotification.dispatch_(changedTypes);
+}
+
+// Sync manager event handlers.
+
+function onChangesApplied(modelType, changes) {
+ chrome.sync.onChangesApplied.dispatch_(modelType, changes);
+}
+
+function onChangesComplete(modelType) {
+ chrome.sync.onChangesComplete.dispatch_(modelType);
+}
+
+function onSyncCycleCompleted(snapshot) {
+ chrome.sync.onSyncCycleCompleted.dispatch_(snapshot);
+}
+
+function onAuthError(authError) {
+ chrome.sync.onAuthError.dispatch_(authError);
+}
+
+function onUpdatedToken(token) {
+ chrome.sync.onUpdatedToken.dispatch_(token);
+}
+
+function onPassphraseRequired(forDecryption) {
+ chrome.sync.onPassphraseRequired.dispatch_(forDecryption);
+}
+
+function onPassphraseAccepted(bootstrapToken) {
+ chrome.sync.onPassphraseAccepted.dispatch_(bootstrapToken);
+}
+
+function onInitializationComplete() {
+ chrome.sync.onInitializationComplete.dispatch_();
+}
+
+function onPaused() {
+ chrome.sync.onPaused.dispatch_();
+}
+
+function onResumed() {
+ chrome.sync.onResumed.dispatch_();
+}
+
+function onStopSyncingPermanently() {
+ chrome.sync.onStopSyncingPermanently.dispatch_();
+}
+
+function onClearServerDataSucceeded() {
+ chrome.sync.onClearServerDataSucceeded();
+}
+
+function onClearServerDataFailed() {
+ chrome.sync.onClearServerDataFailed();
+}
+
+// Function reply handlers.
+
+function onGetAboutInfoFinished(aboutInfo) {
+ chrome.sync.getAboutInfo_.handleReply(aboutInfo);
+}
+
+function onGetNotificationStateFinished(notificationState) {
+ chrome.sync.getNotificationState_.handleReply(notificationState);
+}
+
+function onGetRootNodeFinished(rootNode) {
+ chrome.sync.getRootNode_.handleReply(rootNode);
+}
+
+function onGetNodeByIdFinished(node) {
+ chrome.sync.getNodeById_.handleReply(node);
+}
diff --git a/chrome/browser/resources/sync_internals/notifications.html b/chrome/browser/resources/sync_internals/notifications.html
new file mode 100644
index 0000000..67fc97b
--- /dev/null
+++ b/chrome/browser/resources/sync_internals/notifications.html
@@ -0,0 +1,56 @@
+<script>
+(function () {
+function updateNotificationsEnabledInfo(notificationsEnabled) {
+ var notificationsEnabledInfo =
+ document.getElementById('notificationsEnabledInfo');
+ jstProcess(
+ new JsEvalContext({ 'notificationsEnabled': notificationsEnabled }),
+ notificationsEnabledInfo);
+}
+
+function onLoad() {
+ chrome.sync.getNotificationState(updateNotificationsEnabledInfo);
+ chrome.sync.onSyncNotificationStateChange.addListener(
+ updateNotificationsEnabledInfo);
+
+ var notificationCounts = {};
+ chrome.sync.onSyncIncomingNotification.addListener(function(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);
+ });
+}
+
+document.addEventListener("DOMContentLoaded", onLoad, false);
+})();
+</script>
+
+<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>
+
diff --git a/chrome/browser/resources/sync_internals/sync_events.html b/chrome/browser/resources/sync_internals/sync_events.html
new file mode 100644
index 0000000..feb4117
--- /dev/null
+++ b/chrome/browser/resources/sync_internals/sync_events.html
@@ -0,0 +1,61 @@
+<script>
+(function() {
+function onLoad() {
+ // TODO(akalin): Do something with these notifications.
+ chrome.sync.onChangesApplied.addListener(function (modelType, changes) {
+ console.log('onChangesApplied: ' + modelType + ': ' +
+ JSON.stringify(changes));
+ });
+
+ chrome.sync.onChangesComplete.addListener(function (modelType) {
+ console.log('onChangesComplete: ' + modelType);
+ });
+
+ chrome.sync.onSyncCycleCompleted.addListener(function (snapshot) {
+ console.log('onSyncCycleCompleted: ' + JSON.stringify(snapshot));
+ });
+
+ chrome.sync.onAuthError.addListener(function (authError) {
+ console.log('onAuthError: ' + JSON.stringify(authError));
+ });
+
+ chrome.sync.onUpdatedToken.addListener(function (token) {
+ console.log('onUpdatedToken: ' + token);
+ });
+
+ chrome.sync.onPassphraseRequired.addListener(function (forDecryption) {
+ console.log('onPassphraseRequired: ' + forDecryption);
+ });
+
+ chrome.sync.onPassphraseAccepted.addListener(function (bootstrapToken) {
+ console.log('onPassphraseAccepted: ' + bootstrapToken);
+ });
+
+ chrome.sync.onInitializationComplete.addListener(function () {
+ console.log('onInitializationComplete');
+ });
+
+ chrome.sync.onPaused.addListener(function () {
+ console.log('onPaused');
+ });
+
+ chrome.sync.onResumed.addListener(function () {
+ console.log('onResumed');
+ });
+
+ chrome.sync.onStopSyncingPermanently.addListener(function () {
+ console.log('onStopSyncingPermanently');
+ });
+
+ chrome.sync.onClearServerDataSucceeded.addListener(function () {
+ console.log('onClearServerDataSucceeded');
+ });
+
+ chrome.sync.onClearServerDataFailed.addListener(function () {
+ console.log('onClearServerDataFailed');
+ });
+}
+
+document.addEventListener("DOMContentLoaded", onLoad, false);
+})();
+</script>
diff --git a/chrome/browser/resources/sync_internals/sync_index.html b/chrome/browser/resources/sync_internals/sync_index.html
index ccc7543..f765c350 100644
--- a/chrome/browser/resources/sync_internals/sync_index.html
+++ b/chrome/browser/resources/sync_internals/sync_index.html
@@ -4,360 +4,14 @@
<!-- 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>
+<!-- Used by about.html. -->
+<link rel="stylesheet" href="about.css" />
</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>
diff --git a/chrome/browser/resources/sync_internals/sync_node_browser.html b/chrome/browser/resources/sync_internals/sync_node_browser.html
new file mode 100644
index 0000000..bddc2a0
--- /dev/null
+++ b/chrome/browser/resources/sync_internals/sync_node_browser.html
@@ -0,0 +1,34 @@
+<script>
+(function() {
+function onLoad() {
+ chrome.sync.getRootNode(updateNodeBrowser);
+}
+
+document.addEventListener("DOMContentLoaded", onLoad, false);
+})();
+
+function updateNodeBrowser(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.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>