Add chrome://quota-internals/ resources

(split from issue 7038034)

BUG=84397
TEST=None

Committed: http://src.chromium.org/viewvc/chrome?view=rev&revision=90447

Review URL: http://codereview.chromium.org/7053009

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@90623 0039d316-1c4b-4281-b951-d872f2087c98

13 files changed, 830 insertions, 0 deletions

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 0000000..10b6bd3
--- /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);
+})();
diff --git a/chrome/browser/resources/quota_internals/main.css b/chrome/browser/resources/quota_internals/main.css
new file mode 100644
index 0000000..5753406
--- /dev/null
+++ b/chrome/browser/resources/quota_internals/main.css
@@ -0,0 +1,25 @@
+/*
+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.
+*/
+
+th, td {
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+  text-align: center;
+}
+
+#tree-view-container {
+  float: left;
+  min-width: 15em;
+  width: 20%;
+}
+
+tr:nth-child(odd) {
+  background: #eeeeff;
+}
+
+.tree-item:not([may-have-children]) > .tree-row > .tree-label {
+  background-image: url("../shared/images/icon_file.png");
+}
diff --git a/chrome/browser/resources/quota_internals/main.html b/chrome/browser/resources/quota_internals/main.html
new file mode 100644
index 0000000..f4293da
--- /dev/null
+++ b/chrome/browser/resources/quota_internals/main.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<!--
+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.
+-->
+<html i18n-values="dir:textdirection;">
+<title>Quota Internals</title>
+<link rel="stylesheet" href="main.css"/>
+
+<script src="chrome://resources/js/util.js"></script>
+<script src="chrome://resources/js/cr.js"></script>
+<script src="chrome://resources/js/cr/event_target.js"></script>
+<script src="chrome://resources/js/i18n_template.js"></script>
+
+<link rel="stylesheet" href="chrome://resources/css/tabs.css">
+<link rel="stylesheet" href="chrome://resources/css/tree.css">
+<script src="chrome://resources/js/cr/ui.js"></script>
+<script src="chrome://resources/js/cr/ui/tabs.js"></script>
+<script src="chrome://resources/js/cr/ui/tree.js"></script>
+<script src="chrome://resources/css/tree.css.js"></script>
+<script src="chrome://resources/js/cr/ui/focus_outline_manager.js"></script>
+
+<script src="message_dispatcher.js"></script>
+<script src="event_handler.js"></script>
+
+<body i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize">
+
+<tabbox>
+  <tabs>
+    <tab>Summary</tab>
+    <tab>Usage &amp; Quota</tab>
+    <tab>Data</tab>
+  </tabs>
+  <tabpanels>
+    <tabpanel>
+      <!-- Summary -->
+      <h2>Summary</h2>
+      <table>
+        <tbody>
+          <tr>
+            <td>Free disk space for the profile directory.</td>
+            <td id="diskspace-entry">N/A</td>
+          </tr>
+        </tbody>
+      </table>
+      <h2>Misc Statistics</h2>
+      <table>
+        <tbody id="stat-entries" class="entries"></tbody>
+      </table>
+    </tabpanel>
+
+    <tabpanel>
+      <!-- Usage and Quota -->
+      <h2>Usage and Quota Database Browser</h2>
+      <div id="tree-view-container">
+        <button id="refresh-button">Refresh</button>
+        <tree id="tree-view"></tree>
+      </div>
+      <table>
+        <thead></thead>
+        <tbody id="tree-item-description"></tbody>
+      </table>
+    </tabpanel>
+
+    <tabpanel>
+      <!-- Data -->
+      <button id="dump-button">Dump</button>
+      <pre id="dump-field"></pre>
+    </tabpanel>
+  </tabpanels>
+</tabbox>
+
+</body>
+</html>
diff --git a/chrome/browser/resources/quota_internals/message_dispatcher.js b/chrome/browser/resources/quota_internals/message_dispatcher.js
new file mode 100644
index 0000000..37e5e94
--- /dev/null
+++ b/chrome/browser/resources/quota_internals/message_dispatcher.js
@@ -0,0 +1,82 @@
+// 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/util.js
+
+/**
+ * Bridge between the browser and the page.
+ * In this file:
+ *   * define EventTargets to recieve message from the browser,
+ *   * dispatch browser messages to EventTarget,
+ *   * define interface to request data to the browser.
+ */
+
+cr.define('cr.quota', function() {
+  'use strict';
+
+  /**
+   * Post requestData message to Browser.
+   */
+  function requestData() {
+    chrome.send('requestData');
+  }
+
+  /**
+   * Callback entry point from Browser.
+   * Messages are Dispatched as Event to:
+   *   * onAvailableSpaceUpdated,
+   *   * onGlobalDataUpdated,
+   *   * onHostDataUpdated,
+   *   * onOriginDataUpdated,
+   *   * onStatisticsUpdated.
+   * @param {string} message Message label. Possible Values are:
+   *   * 'AvailableSpaceUpdated',
+   *   * 'GlobalDataUpdated',
+   *   * 'HostDataUpdated',
+   *   * 'OriginDataUpdated',
+   *   * 'StatisticsUpdated'.
+   * @param {Object} detail Message specific additional data.
+   */
+  function messageHandler(message, detail) {
+    var target = null;
+    switch (message) {
+      case 'AvailableSpaceUpdated':
+        target = cr.quota.onAvailableSpaceUpdated;
+        break;
+      case 'GlobalDataUpdated':
+        target = cr.quota.onGlobalDataUpdated;
+        break;
+      case 'HostDataUpdated':
+        target = cr.quota.onHostDataUpdated;
+        break;
+      case 'OriginDataUpdated':
+        target = cr.quota.onOriginDataUpdated;
+        break;
+      case 'StatisticsUpdated':
+        target = cr.quota.onStatisticsUpdated;
+        break;
+      default:
+        console.error('Unknown Message');
+        break;
+    }
+    if (target) {
+      var event = cr.doc.createEvent('CustomEvent');
+      event.initCustomEvent('update', false, false, detail);
+      target.dispatchEvent(event);
+    }
+  }
+
+  return {
+    onAvailableSpaceUpdated: new cr.EventTarget(),
+    onGlobalDataUpdated: new cr.EventTarget(),
+    onHostDataUpdated: new cr.EventTarget(),
+    onOriginDataUpdated: new cr.EventTarget(),
+    onStatisticsUpdated: new cr.EventTarget(),
+
+    requestData: requestData,
+    messageHandler: messageHandler
+  };
+});
diff --git a/chrome/browser/resources/quota_internals_resources.grd b/chrome/browser/resources/quota_internals_resources.grd
new file mode 100644
index 0000000..81f44f1
--- /dev/null
+++ b/chrome/browser/resources/quota_internals_resources.grd
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<grit latest_public_release="0" current_release="1">
+  <outputs>
+    <output filename="grit/quota_internals_resources.h" type="rc_header">
+      <emit emit_type='prepend'></emit>
+    </output>
+    <output filename="grit/quota_internals_resources_map.cc" type="resource_file_map_source" />
+    <output filename="grit/quota_internals_resources_map.h" type="resource_map_header" />
+    <output filename="quota_internals_resources.pak" type="data_package" />
+  </outputs>
+  <release seq="1">
+    <includes>
+      <include name="IDR_QUOTA_INTERNALS_MAIN_HTML" file="quota_internals/main.html" flattenhtml="true" type="BINDATA" />
+    </includes>
+  </release>
+</grit>
diff --git a/chrome/browser/ui/webui/chrome_web_ui_factory.cc b/chrome/browser/ui/webui/chrome_web_ui_factory.cc
index 0848820..2e2ecd1 100644
--- a/chrome/browser/ui/webui/chrome_web_ui_factory.cc
+++ b/chrome/browser/ui/webui/chrome_web_ui_factory.cc
@@ -30,6 +30,7 @@
 #include "chrome/browser/ui/webui/options/options_ui.h"
 #include "chrome/browser/ui/webui/plugins_ui.h"
 #include "chrome/browser/ui/webui/print_preview_ui.h"
+#include "chrome/browser/ui/webui/quota_internals_ui.h"
 #include "chrome/browser/ui/webui/sessions_ui.h"
 #include "chrome/browser/ui/webui/sync_internals_ui.h"
 #include "chrome/browser/ui/webui/test_chrome_web_ui_factory.h"
@@ -179,6 +180,8 @@ static WebUIFactoryFunction GetWebUIFactoryFunction(Profile* profile,
     return &NewWebUI<SyncInternalsUI>;
   if (url.host() == chrome::kChromeUISettingsHost)
     return &NewWebUI<OptionsUI>;
+  if (url.host() == chrome::kChromeUIQuotaInternalsHost)
+    return &NewWebUI<QuotaInternalsUI>;
 
 #if defined(OS_CHROMEOS)
   if (url.host() == chrome::kChromeUIChooseMobileNetworkHost)
diff --git a/chrome/browser/ui/webui/quota_internals_ui.cc b/chrome/browser/ui/webui/quota_internals_ui.cc
new file mode 100644
index 0000000..4d4fcab
--- /dev/null
+++ b/chrome/browser/ui/webui/quota_internals_ui.cc
@@ -0,0 +1,50 @@
+// 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.
+
+#include "chrome/browser/ui/webui/quota_internals_ui.h"
+
+#include <algorithm>
+#include <string>
+
+#include "chrome/browser/profiles/profile.h"
+#include "chrome/common/url_constants.h"
+#include "content/browser/tab_contents/tab_contents.h"
+#include "content/common/json_value_serializer.h"
+#include "grit/quota_internals_resources.h"
+#include "ui/base/l10n/l10n_util.h"
+#include "ui/base/resource/resource_bundle.h"
+
+QuotaInternalsUI::QuotaInternalsUI(TabContents* contents)
+    : ChromeWebUI(contents) {
+  // TODO(tzik): implement and attach message handler
+  contents->profile()->GetChromeURLDataManager()->
+      AddDataSource(new quota_internals::QuotaInternalsHTMLSource);
+}
+
+namespace quota_internals {
+
+const char QuotaInternalsHTMLSource::kStringsJSPath[] = "strings.js";
+
+QuotaInternalsHTMLSource::QuotaInternalsHTMLSource()
+    : ChromeWebUIDataSource(chrome::kChromeUIQuotaInternalsHost) {
+}
+
+void QuotaInternalsHTMLSource::StartDataRequest(const std::string& path,
+                                                bool is_incognito,
+                                                int request_id) {
+  if (path == kStringsJSPath)
+    SendLocalizedStringsAsJSON(request_id);
+  else
+    SendFromResourceBundle(request_id, IDR_QUOTA_INTERNALS_MAIN_HTML);
+}
+
+std::string QuotaInternalsHTMLSource::GetMimeType(
+    const std::string& path) const {
+  if (path == kStringsJSPath)
+    return "application/javascript";
+  else
+    return "text/html";
+}
+
+}  // namespace quota_internals
diff --git a/chrome/browser/ui/webui/quota_internals_ui.h b/chrome/browser/ui/webui/quota_internals_ui.h
new file mode 100644
index 0000000..d954fdb
--- /dev/null
+++ b/chrome/browser/ui/webui/quota_internals_ui.h
@@ -0,0 +1,42 @@
+// 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.
+
+#ifndef CHROME_BROWSER_UI_WEBUI_QUOTA_INTERNALS_UI_H_
+#define CHROME_BROWSER_UI_WEBUI_QUOTA_INTERNALS_UI_H_
+#pragma once
+
+#include <string>
+
+#include "chrome/browser/ui/webui/chrome_web_ui.h"
+#include "chrome/browser/ui/webui/chrome_web_ui_data_source.h"
+
+class QuotaInternalsUI : public ChromeWebUI {
+ public:
+  explicit QuotaInternalsUI(TabContents* contents);
+  virtual ~QuotaInternalsUI() {}
+ private:
+  DISALLOW_COPY_AND_ASSIGN(QuotaInternalsUI);
+};
+
+namespace quota_internals {
+
+class QuotaInternalsHTMLSource : public ChromeWebUIDataSource {
+ public:
+  static const char kStringsJSPath[];
+
+  QuotaInternalsHTMLSource();
+  virtual void StartDataRequest(const std::string& path,
+                                bool is_incognito,
+                                int request_id) OVERRIDE;
+  virtual std::string GetMimeType(const std::string& path) const;
+
+ private:
+  virtual ~QuotaInternalsHTMLSource() {}
+
+  DISALLOW_COPY_AND_ASSIGN(QuotaInternalsHTMLSource);
+};
+
+}  // namespace quota_internals
+
+#endif  // CHROME_BROWSER_UI_WEBUI_QUOTA_INTERNALS_UI_H_
diff --git a/chrome/chrome.gyp b/chrome/chrome.gyp
index b7fb389..9c1c272 100644
--- a/chrome/chrome.gyp
+++ b/chrome/chrome.gyp
@@ -315,6 +315,13 @@
           'includes': [ '../build/grit_action.gypi' ],
         },
         {
+          'action_name': 'quota_internals_resources',
+          'variables': {
+            'grit_grd_file': 'browser/resources/quota_internals_resources.grd',
+          },
+          'includes': [ '../build/grit_action.gypi' ],
+        },
+        {
           'action_name': 'shared_resources',
           'variables': {
             'grit_grd_file': 'browser/resources/shared_resources.grd',
@@ -1242,6 +1249,7 @@
                   '<(grit_out_dir)/devtools_resources.pak',
                   '<(grit_out_dir)/options_resources.pak',
                   '<(grit_out_dir)/net_internals_resources.pak',
+                  '<(grit_out_dir)/quota_internals_resources.pak',
                   '<(grit_out_dir)/shared_resources.pak',
                   '<(grit_out_dir)/sync_internals_resources.pak',
                 ],
diff --git a/chrome/chrome_browser.gypi b/chrome/chrome_browser.gypi
index 5e62e81..c14e628 100644
--- a/chrome/chrome_browser.gypi
+++ b/chrome/chrome_browser.gypi
@@ -3515,6 +3515,8 @@
         'browser/ui/webui/print_preview_handler.h',
         'browser/ui/webui/print_preview_ui.cc',
         'browser/ui/webui/print_preview_ui.h',
+        'browser/ui/webui/quota_internals_ui.cc',
+        'browser/ui/webui/quota_internals_ui.h',
         'browser/ui/webui/screenshot_source.cc',
         'browser/ui/webui/screenshot_source.h',
         'browser/ui/webui/sessions_ui.cc',
diff --git a/chrome/common/url_constants.cc b/chrome/common/url_constants.cc
index 39bc22f..44aef6d 100644
--- a/chrome/common/url_constants.cc
+++ b/chrome/common/url_constants.cc
@@ -158,6 +158,7 @@ const char kChromeUINetworkViewCacheHost[] = "view-http-cache";
 const char kChromeUINewTabHost[] = "newtab";
 const char kChromeUIPluginsHost[] = "plugins";
 const char kChromeUIPrintHost[] = "print";
+const char kChromeUIQuotaInternalsHost[] = "quota-internals";
 const char kChromeUIResourcesHost[] = "resources";
 const char kChromeUISessionsHost[] = "sessions";
 const char kChromeUISettingsHost[] = "settings";
diff --git a/chrome/common/url_constants.h b/chrome/common/url_constants.h
index 81b4838..9a954a9 100644
--- a/chrome/common/url_constants.h
+++ b/chrome/common/url_constants.h
@@ -149,6 +149,7 @@ extern const char kChromeUINetworkViewCacheHost[];
 extern const char kChromeUINewTabHost[];
 extern const char kChromeUIPluginsHost[];
 extern const char kChromeUIPrintHost[];
+extern const char kChromeUIQuotaInternalsHost[];
 extern const char kChromeUIResourcesHost[];
 extern const char kChromeUISessionsHost[];
 extern const char kChromeUISettingsHost[];
diff --git a/tools/grit/resource_ids b/tools/grit/resource_ids
index ec35cb4..879bb13 100644
--- a/tools/grit/resource_ids
+++ b/tools/grit/resource_ids
@@ -148,4 +148,7 @@
   "cloud_print/virtual_driver/win/install/virtual_driver_setup_resources.grd": {
     "messages": [22500],
   },
+  "chrome/browser/resources/quota_internals_resources.grd": {
+    "includes": [23000],
+  },
 }