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..894e9dc0bd34bdf78b116001c9d7b7b9f88a3ad0
--- /dev/null
+++ b/chrome/browser/resources/quota_internals/event_handler.js
@@ -0,0 +1,497 @@
+// 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 {}.
+ * @param {Object} obj Object to be checked.
+ */
+function isEmptyObject(obj) {
+  for (var i in obj)
+    return false;
+  return true;
+}
+
+/**
+ * Copy properties from |src| to |dest|.
+ * @param {Object} src Source of the copy.
+ * @param {Object} dest Destination of the copy.
+ * @return {Object} |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.
+ * @param {Element} element Element to be localized.
+ */
+var localize_ = function(element) {
+  if (window.i18nTemplate && cr.quota.localizedStrings)
+    i18nTemplate.process(element, cr.quota.localizedStrings);
+};
+
+var normalizer_ = {
+  /**
+   * Returns 'N/A' (Not Available) text if |v| is undefined.
+   * @param {Object} v Object to print.
+   * @return {string} 'N/A' or ''.
+   */
+  avail_: function(v) {
+    return v === undefined ?
+        '<span i18n-content="text-not_available">N/A</span>' : '';
+  },
+
+  /**
+   * Returns 'true', 'false' or 'N/A' for boolean |v|.
+   * @param {?boolean} v Boolean to print.
+   * @return {string} 'N/A', 'true' or 'false'.
+   */
+  bool: function(v) {
+    return normalizer_.avail_(v) ||
+        (v ? '<span i18n-content="text-true">true</span>' :
+             '<span i18n-content="text-false">false</span>');
+  },
+
+  /**
+   * Returns |v| itself unless |v| is not undefined,
+   * else returns 'N/A' text.
+   * @param {?string} v String to print.
+   * @return {string} 'N/A' or |v|.
+   */
+  text: function(v) {
+    return normalizer_.avail_(v) || v;
+  },
+
+  /**
+   * Returns formatted string from toString'ed integer.
+   * e.g. numBytes(123456789) = "123.45 MB (123,456,789 B)"
+   * If |v| is undefined, this function returns "N/A".
+   * @param {?string} v Digits to print.
+   * @return {string} 'N/A' or formatted |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;
+    })();
+  },
+
+  /**
+   * Return formatted date |v| unless |v| is not undefined.
+   * @param {?number} v Number of milliseconds since
+   *   UNIX epock time (0:00, Jan 1, 1970, UTC).
+   * @return {string} Formatted text of date or 'N/A'.
+   */
+  date: function(v) {
+      return normalizer_.avail_(v) || (function() {
+      // TODO(tzik): show relative time
+      return new Date(v).toString();
+    })();
+  },
+
+  /**
+   * Return toString'ed number |v| unless |v| is not undefined.
+   * @param {?number} v Number to print.
+   * @return {string} toString'ed |v| or 'N/A'.
+   */
+  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} Initialized |storage_object|.
+ */
+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} Initialized |host_object|.
+ */
+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} Initialized |origin_object|.
+ */
+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.
+ * @param {CustomEvent} event AvailableSpaceUpdated event.
+ */
+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.
+ * @param {CustomEvent} event GlobalDataUpdated event.
+ */
+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.
+ * @param {CustomEvent} event HostDataUpdated event.
+ */
+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.
+ * @param {CustomEvent} event OriginDataUpdated event.
+ */
+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.
+ * @param {CustomEvent} event StatisticsUpdated event.
+ */
+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);
+  }
+}
+
+/**
+ * Update description on 'tree-item-description' field with
+ * selected item in Tree view.
+ */
+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} Dump result object from |tree_view_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} Dump result object from |stats|.
+ */
+function dumpStatsToObj() {
+  var result = {};
+  for (var key in stats)
+    result[key] = stats[key].detail;
+  return result;
+}
+
+/**
+ * Event handler for 'dump-button' 'click'ed.
+ * Dump and show all data from WebUI page to 'dump-field' element.
+ */
+function dump() {
+  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);
+})();