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..10b6bd345a815dafd817acd7c054d563303fe855
--- /dev/null
+++ b/chrome/browser/resources/quota_internals/event_handler.js
@@ -0,0 +1,522 @@
+// 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';
+
+/**
+ * @param {Object} object Object to be checked.
+ * @return {boolean} true if |object| is {}.
+ * @private
+ */
+function isEmptyObject_(object) {
+  for (var i in object)
+    return false;
+  return true;
+}
+
+/**
+ * Copy properties from |source| to |destination|.
+ * @param {Object} source Source of the copy.
+ * @param {Object} destination Destination of the copy.
+ * @return {Object} |destination|.
+ * @private
+ */
+function copyAttributes_(source, destination) {
+  for (var i in source)
+    destination[i] = source[i];
+  return destination;
+};
+
+/**
+ * Apply localization to |element| with i18n_template.js if available.
+ * @param {Element} element Element to be localized.
+ * @private
+ */
+function localize_(element) {
+  if (window.i18nTemplate && window.templateData)
+    i18nTemplate.process(element, templateData);
+};
+
+/**
+ * Returns 'N/A' (Not Available) text if |value| is undefined.
+ * @param {Object} value Object to print.
+ * @return {string} 'N/A' or ''.
+ * @private
+ */
+function checkIfAvailable_(value) {
+  return value === undefined ? 'N/A' : '';
+}
+
+/**
+ * Returns |value| itself if |value| is not undefined,
+ * else returns 'N/A' text.
+ * @param {?string} value String to print.
+ * @return {string} 'N/A' or |value|.
+ * @private
+ */
+function stringToText_(value) {
+  return checkIfAvailable_(value) || value;
+}
+
+/**
+ * Separates |value| into segments.
+ * The length of first segment is at most |maxLength|.
+ * Length of other following segments are just |maxLength|.
+ * e.g. separateBackward_('abcdefghijk', 4) == ['abc','defg','hijk'];
+ * @param {string} value String to be separated.
+ * @param {number} maxLength Max length of segments.
+ * @return {Array.<string>} Array of segments.
+ * @private
+ */
+function separateBackward_(value, maxLength) {
+  var result = [];
+  while (value.length > maxLength) {
+    result.unshift(value.slice(-3));
+    value = value.slice(0, -3);
+  }
+  result.unshift(value);
+  return result;
+}
+
+/**
+ * Returns formatted string from number as number of bytes.
+ * e.g. numBytesToText(123456789) = '123.45 MB (123,456,789 B)'.
+ * If |value| is undefined, this function returns 'N/A'.
+ * @param {?number} value Number to print.
+ * @return {string} 'N/A' or formatted |value|.
+ * @private
+ */
+function numBytesToText_(value) {
+  var result = checkIfAvailable_(value);
+  if (result)
+    return result;
+
+  var segments = separateBackward_(value.toString(), 3);
+  result = segments.join(',') + ' B';
+
+  if (segments.length > 1) {
+    var UNIT = [' B', ' KB', ' MB', ' GB', ' TB', ' PB'];
+    result = segments[0] + '.' + segments[1].slice(0, 2) +
+        UNIT[Math.min(segments.length, UNIT.length) - 1] +
+        ' (' + result + ')';
+  }
+
+  return result;
+}
+
+/**
+ * Return formatted date |value| if |value| is not undefined.
+ * If |value| is undefined, this function returns 'N/A'.
+ * @param {?number} value Number of milliseconds since
+ *   UNIX epoch time (0:00, Jan 1, 1970, UTC).
+ * @return {string} Formatted text of date or 'N/A'.
+ * @private
+ */
+function dateToText(value) {
+  var result = checkIfAvailable_(value);
+  if (result)
+    return result;
+
+  var lastAccessTime = new Date(value);
+  var now = new Date();
+  var delta = Date.now() - value;
+
+  var SECOND = 1000;
+  var MINUTE = 60 * SECOND;
+  var HOUR = 60 * MINUTE;
+  var DAY = 23 * HOUR;
+  var WEEK = 7 * DAY;
+
+  var SHOW_SECOND = 5 * MINUTE;
+  var SHOW_MINUTE = 5 * HOUR;
+  var SHOW_HOUR = 3 * DAY;
+  var SHOW_DAY = 2 * WEEK;
+  var SHOW_WEEK = 3 * 30 * DAY;
+
+  if (delta < 0) {
+    result = 'access from future ';
+  } else if (delta < SHOW_SECOND) {
+    result = Math.ceil(delta / SECOND) + ' sec ago ';
+  } else if (delta < SHOW_MINUTE) {
+    result = Math.ceil(delta / MINUTE) + ' min ago ';
+  } else if (delta < SHOW_HOUR) {
+    result = Math.ceil(delta / HOUR) + ' hr ago ';
+  } else if (delta < SHOW_WEEK) {
+    result = Math.ceil(delta / DAY) + ' day ago ';
+  }
+
+  result += '(' + lastAccessTime.toString() + ')';
+  return result;
+}
+
+/**
+ * Available disk space.
+ * @type {number|undefined}
+ */
+var availableSpace = undefined;
+
+/**
+ * Root of the quota data tree,
+ * holding userdata as |treeViewObject.detail|.
+ * @type {cr.ui.Tree}
+ */
+var treeViewObject = undefined;
+
+/**
+ * Key-value styled statistics data.
+ * This WebUI does not touch contents, just show.
+ * The value is hold as |statistics[key].detail|.
+ * @type {Object<string,Element>}
+ */
+var statistics = {};
+
+/**
+ * Initialize and return |treeViewObject|.
+ * @return {cr.ui.Tree} Initialized |treeViewObject|.
+ */
+function getTreeViewObject() {
+  if (!treeViewObject) {
+    treeViewObject = $('tree-view');
+    cr.ui.decorate(treeViewObject, cr.ui.Tree);
+    treeViewObject.detail = {payload: {}, children: {}};
+    treeViewObject.addEventListener('change', updateDescription);
+  }
+  return treeViewObject;
+}
+
+/**
+ * Initialize and return a tree item, that represents specified storage type.
+ * @param {!string} type Storage type.
+ * @return {cr.ui.TreeItem} Initialized |storageObject|.
+ */
+function getStorageObject(type) {
+  var treeViewObject = getTreeViewObject();
+  var storageObject = treeViewObject.detail.children[type];
+  if (!storageObject) {
+    storageObject = new cr.ui.TreeItem({
+        label: type,
+        detail: {payload: {}, children: {}}
+    });
+    storageObject.mayHaveChildren_ = true;
+    treeViewObject.detail.children[type] = storageObject;
+    treeViewObject.add(storageObject);
+  }
+  return storageObject;
+}
+
+/**
+ * Initialize and return a tree item, that represents specified
+ *  storage type and hostname.
+ * @param {!string} type Storage type.
+ * @param {!string} host Hostname.
+ * @return {cr.ui.TreeItem} Initialized |hostObject|.
+ */
+function getHostObject(type, host) {
+  var storageObject = getStorageObject(type);
+  var hostObject = storageObject.detail.children[host];
+  if (!hostObject) {
+    hostObject = new cr.ui.TreeItem({
+        label: host,
+        detail: {payload: {}, children: {}}
+    });
+    hostObject.mayHaveChildren_ = true;
+    storageObject.detail.children[host] = hostObject;
+    storageObject.add(hostObject);
+  }
+  return hostObject;
+}
+
+/**
+ * Initialize and return a tree item, that 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 |originObject|.
+ */
+function getOriginObject(type, host, origin) {
+  var hostObject = getHostObject(type, host);
+  var originObject = hostObject.detail.children[origin];
+  if (!originObject) {
+    originObject = new cr.ui.TreeItem({
+        label: origin,
+        detail: {payload: {}, children: {}}
+    });
+    originObject.mayHaveChildren_ = false;
+    hostObject.detail.children[origin] = originObject;
+    hostObject.add(originObject);
+  }
+  return originObject;
+}
+
+/**
+ * Event Handler for |cr.quota.onAvailableSpaceUpdated|.
+ * |event.detail| contains |availableSpace|.
+ * |availableSpace| represents total available disk space.
+ * @param {CustomEvent} event AvailableSpaceUpdated event.
+ */
+function handleAvailableSpace(event) {
+  /**
+   * @type {string}
+   */
+  availableSpace = event.detail;
+  $('diskspace-entry').innerHTML = numBytesToText_(availableSpace);
+};
+
+/**
+ * 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.
+ *   |unlimitedUsage|:
+ *     Total storage usage of unlimited-quota origins.
+ *   |quota|:
+ *     Total quota of the storage.
+ *
+ *  |usage|, |unlimitedUsage| and |quota| can be missing,
+ *  and some additional fields can be included.
+ * @param {CustomEvent} event GlobalDataUpdated event.
+ */
+function handleGlobalData(event) {
+  /**
+   * @type {{
+   *         type: {!string},
+   *         usage: {?number},
+   *         unlimitedUsage: {?number}
+   *         quota: {?string}
+   *       }}
+   */
+  var data = event.detail;
+  var storageObject = getStorageObject(data.type);
+  copyAttributes_(data, storageObject.detail.payload);
+  storageObject.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.
+ *   |quota|:
+ *     Per-host quota.
+ *
+ * |usage| and |quota| can be missing,
+ * and some additional fields can be included.
+ * @param {CustomEvent} event HostDataUpdated event.
+ */
+function handleHostData(event) {
+  /**
+   * @type {Array<{
+   *         host: {!string},
+   *         type: {!string},
+   *         usage: {?number},
+   *         quota: {?number}
+   *       }}
+   */
+  var dataArray = event.detail;
+
+  for (var i = 0; i < dataArray.length; ++i) {
+    var data = dataArray[i];
+    var hostObject = getHostObject(data.type, data.host);
+    copyAttributes_(data, hostObject.detail.payload);
+    hostObject.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.
+ *   |inUse|:
+ *     true if the origin is in use.
+ *   |usedCount|:
+ *     Used count of the storage from the origin.
+ *   |lastAccessTime|:
+ *     Last storage access time from the origin.
+ *     Number of milliseconds since UNIX epoch (Jan 1, 1970, 0:00:00 UTC).
+ *
+ * |inUse|, |usedCount| and |lastAccessTime| can be missing,
+ * and some additional fields can be included.
+ * @param {CustomEvent} event OriginDataUpdated event.
+ */
+function handleOriginData(event) {
+  /**
+   * @type {Array<{
+   *         origin: {!string},
+   *         type: {!string},
+   *         host: {!string},
+   *         inUse: {?boolean},
+   *         usedCount: {?number},
+   *         lastAccessTime: {?number}
+   *       }>}
+   */
+  var dataArray = event.detail;
+
+  for (var i = 0; i < dataArray.length; ++i) {
+    var data = dataArray[i];
+    var originObject = getOriginObject(data.type, data.host, data.origin);
+    copyAttributes_(data, originObject.detail.payload);
+    originObject.reveal();
+  }
+}
+
+/**
+ * Event Handler for |cr.quota.onStatisticsUpdated|.
+ * |event.detail| contains misc statistics data as dictionary.
+ * @param {CustomEvent} event StatisticsUpdated event.
+ */
+function handleStatistics(event) {
+  /**
+   * @type {Object.<string>}
+   */
+  var data = event.detail;
+  for (var key in data) {
+    var entry = statistics[key];
+    if (!entry) {
+      entry = cr.doc.createElement('tr');
+      $('stat-entries').appendChild(entry);
+      statistics[key] = entry;
+    }
+    entry.detail = data[key];
+    entry.innerHTML =
+        '<td>' + stringToText_(key) + '</td>' +
+        '<td>' + stringToText_(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', numBytesToText_],
+                       ['unlimitedUsage', 'Usage of Unlimited Origins',
+                        numBytesToText_],
+                       ['quota', 'Quota', numBytesToText_],
+                       ['inUse', 'Origin is in use?'],
+                       ['usedCount', 'Used count'],
+                       ['lastAccessTime', 'Last Access Time',
+                        dateToText]
+                      ];
+    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] || stringToText_;
+
+      var row = cr.doc.createElement('tr');
+      row.innerHTML =
+          '<td>' + label + '</td>' +
+          '<td>' + normalize(entry) + '</td>';
+      localize_(row);
+      tbody.appendChild(row);
+    }
+  }
+}
+
+/**
+ * Dump |treeViewObject| or subtree to a object.
+ * @param {?{cr.ui.Tree|cr.ui.TreeItem}} opt_treeitem
+ * @return {Object} Dump result object from |treeViewObject|.
+ */
+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 |statistics| to a object.
+ * @return {Object} Dump result object from |statistics|.
+ */
+function dumpStatisticsToObj() {
+  var result = {};
+  for (var key in statistics)
+    result[key] = statistics[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({availableSpace: availableSpace}, null, 2) + '\n' +
+      separator +
+      'Usage And Quota\n' +
+      separator +
+      JSON.stringify(dumpTreeToObj(), null, 2) + '\n' +
+      separator +
+      'Misc Statistics\n' +
+      separator +
+      JSON.stringify(dumpStatisticsToObj(), 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);
+})();