Add chrome://quota-internals/ resources

chrome/browser/resources/quota_internals/event_handler.js

Index: chrome/browser/resources/quota_internals/event_handler.js
diff --git a/chrome/browser/resources/quota_internals/event_handler.js b/chrome/browser/resources/quota_internals/event_handler.js
new file mode 100644
index 0000000000000000000000000000000000000000..a72a95e629ecddbd7c0c00bc65134253d0969592
--- /dev/null
+++ b/chrome/browser/resources/quota_internals/event_handler.js
@@ -0,0 +1,448 @@
+// Copyright (c) 2011 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// require cr.js
+// require cr/event_target.js
+// require cr/ui.js
+// require cr/ui/tabs.js
+// require cr/ui/tree.js
+// require cr/util.js
+
+(function() {
+'use strict';
+
+/**
+ * Return true if |obj| is {}
+ */
+function isEmptyObject(obj) {
+  for (var i in obj)
+    return false;
+  return true;
+}
+
+/**
+ * Copy properties from |src| to |dest|.
+ */
+var overwrite_ = function(src, dest) {
+  for (var i in src)
+    dest[i] = src[i];
+  return dest;
+};
+
+/**
+ * Apply localization to |element| with i18n_template.js if available.
+ */
+var localize_ = function(element) {
+  if (window.i18nTemplate && cr.quota.localizedStrings)
+    i18nTemplate.process(element, cr.quota.localizedStrings);
+};
+
+var normalizer_ = {

[Evan Stade, 2011/06/04 02:43:17]

comments for all of these

[tzik, 2011/06/06 10:57:44]

Done.

+  avail_: function(v) {
+    return v === undefined ?
+        '<span i18n-content="text-not_available">N/A</span>' : '';
+  },
+
+  bool: function(v) {
+    return normalizer_.avail_(v) ||
+        (v ? '<span i18n-content="text-true">true</span>' :
+             '<span i18n-content="text-false">false</span>');
+  },
+
+  text: function(v) {
+    return normalizer_.avail_(v) || v;
+  },
+
+  numBytes: function(v) {
+    return normalizer_.avail_(v) || (function() {
+      var result = ' B';
+      var prefix_index = 0;
+      while (v.length > 3) {
+        result = ',' + v.slice(-3) + result;
+        v = v.slice(0, -3);
+        ++prefix_index;
+      }
+
+      if (prefix_index > 0) {
+        var p = result.slice(1, 3);
+        result = v + result;
+
+        var PREFIX = [' ', ' K', ' M', ' G', ' T', ' P'];
+        prefix_index = Math.min(prefix_index, PREFIX.length - 1);
+        result =
+            v + '.' + p +
+            PREFIX[prefix_index] + 'B' +
+            ' (' + result + ')';
+      } else {
+        result = v + result;
+      }
+
+      return result;
+    })();
+  },
+
+  date: function(v) {
+      return normalizer_.avail_(v) || (function() {
+      // TODO(tzik): show relative time
+      return new Date(v).toString();
+    })();
+  },
+
+  num: function(v) {
+    return normalizer_.avail_(v) || v.toString();
+  }
+};
+
+/**
+ * Available disk space
+ * @type {number|undefined}
+ */
+var available_space = undefined;
+
+/**
+ * Root of the quota data tree,
+ * holding userdata as |tree_view_object.detail|.
+ * @type {cr.ui.Tree}
+ */
+var tree_view_object = undefined;
+
+/**
+ * Key-value styled statistics data.
+ * This WebUI does not touch contents, just show.
+ * The value is hold as |stats[key].detail|
+ * @type {Object<string,Element>}
+ */
+var stats = {};
+
+/**
+ * Initialize and return |tree_view_object|.
+ * @return {cr.ui.Tree} Initialized |tree_view_object|.
+ */
+function getTreeViewObject() {
+  if (!tree_view_object) {
+    tree_view_object = $('tree-view');
+    cr.ui.decorate(tree_view_object, cr.ui.Tree);
+    tree_view_object.detail = {payload: {}, children: {}};
+    tree_view_object.addEventListener('change', updateDescription);
+  }
+  return tree_view_object;
+}
+
+/**
+ * Initialize and return a tree item represents specified storage type.
+ * @param {!string} type Storage type.
+ * @return {cr.ui.TreeItem}
+ */
+function getStorageObject(type) {
+  var tree_view_object = getTreeViewObject();
+  var storage_object = tree_view_object.detail.children[type];
+  if (!storage_object) {
+    storage_object = new cr.ui.TreeItem({
+        label: type,
+        detail: {payload: {}, children: {}}
+    });
+    storage_object.mayHaveChildren_ = true;
+    tree_view_object.detail.children[type] = storage_object;
+    tree_view_object.add(storage_object);
+  }
+  return storage_object;
+}
+
+/**
+ * Initialize and return a tree item represents specified
+ *  storage type and hostname.
+ * @param {!string} type Storage type.
+ * @param {!string} host Hostname.
+ * @return {cr.ui.TreeItem}
+ */
+function getHostObject(type, host) {
+  var storage_object = getStorageObject(type);
+  var host_object = storage_object.detail.children[host];
+  if (!host_object) {
+    host_object = new cr.ui.TreeItem({
+        label: host,
+        detail: {payload: {}, children: {}}
+    });
+    host_object.mayHaveChildren_ = true;
+    storage_object.detail.children[host] = host_object;
+    storage_object.add(host_object);
+  }
+  return host_object;
+}
+
+/**
+ * Iinitialize and return a tree item represents specified
+ * storage type, hostname and origin url.
+ * @param {!string} type Storage type.
+ * @param {!string} host Hostname.
+ * @param {!string} origin Origin URL.
+ * @return {cr.ui.TreeItem}
+ */
+function getOriginObject(type, host, origin) {
+  var host_object = getHostObject(type, host);
+  var origin_object = host_object.detail.children[origin];
+  if (!origin_object) {
+    origin_object = new cr.ui.TreeItem({
+        label: origin,
+        detail: {payload: {}, children: {}}
+    });
+    origin_object.mayHaveChildren_ = false;
+    host_object.detail.children[origin] = origin_object;
+    host_object.add(origin_object);
+  }
+  return origin_object;
+}
+
+/**
+ * Event Handler for |cr.quota.onAvailableSpaceUpdated|.
+ * |event.detail| contains |available_space| size.
+ * |available_space| is a (toString'ed) 64bit integer,
+ * that represents total available disk space.
+ */
+function handleAvailableSpace(event) {
+  /**
+   * @type {string}
+   */
+  available_space = event.detail;
+  $('diskspace-entry').innerHTML = normalizer_.numBytes(available_space);
+};
+
+/**
+ * Event Handler for |cr.quota.onGlobalDataUpdated|.
+ * |event.detail| contains a record which has:
+ *   |type|:
+ *     Storage type, that is either 'temporary' or 'persistent'
+ *   |usage|:
+ *     Total storage usage of all hosts,
+ *     toString'ed 64bit integer.
+ *   |unlimited_usage|:
+ *     Total storage usage of unlimited-quota origins,
+ *     toString'ed 64bit integer.
+ *   |quota|:
+ *     Total quota of the storage, toString'ed 64bit integer.
+ *
+ *  |usage|, |unlimited_usage| and |quota| can be missing,
+ *  and some additional field can be included.
+ */
+function handleGlobalData(event) {
+  /**
+   * @type {{
+   *         type: {!string},
+   *         usage: {?string},
+   *         unlimited_usage: {?string}
+   *         quota: {?string}
+   *       }}
+   */
+  var data = event.detail;
+  var storage_object = getStorageObject(data.type);
+  overwrite_(data, storage_object.detail.payload);
+  storage_object.reveal();
+};
+
+/**
+ * Event Handler for |cr.quota.onHostDataUpdated|.
+ * |event.detail| contains records which have:
+ *   |host|:
+ *     Hostname of the entry. (e.g. 'example.com')
+ *   |type|:
+ *     Storage type. 'temporary' or 'persistent'
+ *   |usage|:
+ *     Total storage usage of the host, toString'ed 64bit integer.
+ *   |quota|:
+ *     Per-host quota, toString'ed 64bit integer.
+ *
+ * |usage| and |quota| can be missing,
+ * and some additional field can be included.
+ */
+function handleHostData(event) {
+  /**
+   * @type {Array<{
+   *         host: {!string},
+   *         type: {!string},
+   *         usage: {?string},
+   *         quota: {?string}
+   *       }}
+   */
+  var data_array = event.detail;
+
+  for (var i = 0; i < data_array.length; ++i) {
+    var data = data_array[i];
+    var host_object = getHostObject(data.type, data.host);
+    overwrite_(data, host_object.detail.payload);
+    host_object.reveal();
+  }
+}
+
+/**
+ * Event Handler for |cr.quota.onOriginDataUpdated|.
+ * |event.detail| contains records which have:
+ *   |origin|:
+ *     Origin URL of the entry.
+ *   |type|:
+ *     Storage type of the entry. 'temporary' or 'persistent'.
+ *   |host|:
+ *     Hostname of the entry.
+ *   |in_use|:
+ *     Whether the origin is in use or not.
+ *   |used_count|:
+ *     Used count of the storage from the origin.
+ *   |last_access_time|:
+ *     Last storage access time from the origin.
+ *     Number of seconds since Jan 1, 1970.
+ *
+ * |in_use|, |used_count| and |last_access_time| can be missing,
+ * and some additional field can be included.
+ */
+function handleOriginData(event) {
+  /**
+   * @type {Array<{
+   *         origin: {!string},
+   *         type: {!string},
+   *         host: {!string},
+   *         in_use: {?boolean},
+   *         used_count: {?number},
+   *         last_access_time: {?number}
+   *       }>}
+   */
+  var data_array = event.detail;
+
+  for (var i = 0; i < data_array.length; ++i) {
+    var data = data_array[i];
+    var origin_object = getOriginObject(data.type, data.host, data.origin);
+    overwrite_(data, origin_object.detail.payload);
+    origin_object.reveal();
+  }
+}
+
+/**
+ * Event Handler for |cr.quota.onStatisticsUpdated|.
+ * |event.detail| contains misc statistics data as dictionary.
+ */
+function handleStatistics(event) {
+  var data = event.detail;
+  for (var key in data) {
+    var entry = stats[key];
+    if (!entry) {
+      entry = cr.doc.createElement('tr');
+      $('stat-entries').appendChild(entry);
+      stats[key] = entry;
+    }
+    entry.detail = data[key];
+    entry.innerHTML =
+        '<td>' + normalizer_.text(key) + '</td>' +
+        '<td>' + normalizer_.text(entry.detail) + '</td>';
+    localize_(entry);
+  }
+}
+
+function updateDescription() {
+  var item = getTreeViewObject().selectedItem;
+  var tbody = $('tree-item-description');
+  tbody.innerHTML = '';
+
+  if (item) {
+    var keyAndLabel = [['type', 'Storage Type'],
+                       ['host', 'Host Name'],
+                       ['origin', 'Origin URL'],
+                       ['usage', 'Total Storage Usage', normalizer_.numBytes],
+                       ['unlimited_usage', 'Usage of Unlimited Origins',
+                        normalizer_.numBytes],
+                       ['quota', 'Quota', normalizer_.numBytes],
+                       ['in_use', 'Origin is in use?'],
+                       ['used_count', 'Used count'],
+                       ['last_access_time', 'Last Access Time',
+                        normalizer_.date]
+                      ];
+    for (var i = 0; i < keyAndLabel.length; ++i) {
+      var key = keyAndLabel[i][0];
+      var label = keyAndLabel[i][1];
+      var entry = item.detail.payload[key];
+      if (entry === undefined)
+        continue;
+
+      var normalize = keyAndLabel[i][2] || normalizer_.text;
+
+      var row = cr.doc.createElement('tr');
+      row.innerHTML =
+          '<td>' + label + '</td>' +
+          '<td>' + normalize(entry) + '</td>';
+      localize_(row);
+      tbody.appendChild(row);
+    }
+  }
+}
+
+/**
+ * Dump |tree_view_object| or subtree to a object.
+ * @param {?{cr.ui.Tree|cr.ui.TreeItem}} opt_treeitem
+ * @return {Object}
+ */
+function dumpTreeToObj(opt_treeitem) {
+  var treeitem = opt_treeitem || getTreeViewObject();
+  var res = {};
+  res.payload = treeitem.detail.payload;
+  res.children = [];
+  for (var i in treeitem.detail.children) {
+    var child = treeitem.detail.children[i];
+    res.children.push(dumpTreeToObj(child));
+  }
+
+  if (isEmptyObject(res.payload))
+    delete res.payload;
+
+  if (res.children.length == 0)
+    delete res.children;
+  return res;
+}
+
+/**
+ * Dump |stats| to a object.
+ * @return {Object}
+ */
+function dumpStatsToObj() {
+  var result = {};
+  for (var key in stats)
+    result[key] = stats[key].detail;
+  return result;
+}
+
+/**
+ * Dump and show all data from WebUI page.
+ */
+function dump() {

[Evan Stade, 2011/06/04 02:43:17]

when is this used?

[tzik, 2011/06/06 10:57:44]

That is used below,  as event handler of dump-button "click".

+  var separator = '========\n';
+
+  $('dump-field').textContent =
+      separator +
+      'Summary\n' +
+      separator +
+      JSON.stringify({available_space: available_space}, null, 2) + '\n' +
+      separator +
+      'Usage And Quota\n' +
+      separator +
+      JSON.stringify(dumpTreeToObj(), null, 2) + '\n' +
+      separator +
+      'Misc Statistics\n' +
+      separator +
+      JSON.stringify(dumpStatsToObj(), null, 2);
+}
+
+function onLoad() {
+  cr.ui.decorate('tabbox', cr.ui.TabBox);
+  localize_(document);
+
+  cr.quota.onAvailableSpaceUpdated.addEventListener('update',
+                                                    handleAvailableSpace);
+  cr.quota.onGlobalDataUpdated.addEventListener('update', handleGlobalData);
+  cr.quota.onHostDataUpdated.addEventListener('update', handleHostData);
+  cr.quota.onOriginDataUpdated.addEventListener('update', handleOriginData);
+  cr.quota.onStatisticsUpdated.addEventListener('update', handleStatistics);
+  cr.quota.requestData();
+
+  $('refresh-button').addEventListener('click', cr.quota.requestData, false);
+  $('dump-button').addEventListener('click', dump, false);
+}
+
+cr.doc.addEventListener('DOMContentLoaded', onLoad, false);
+})();