WIP: run clang-format-js on lots of things

chrome/browser/resources/quota_internals/event_handler.js

 // 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';
+  '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;
-}
+  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;
-}
+  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.loadTimeData)
-    i18nTemplate.process(element, loadTimeData);
-}
+  /**
+   * 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.loadTimeData)
+      i18nTemplate.process(element, loadTimeData);
+  }
 
-/**
+  /**
  * 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' : '';
-}
+  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;
-}
+  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);
+  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;
   }
-  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)
+  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;
-
-  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)
+  function dateToText(value) {
+    var result = checkIfAvailable_(value);
+    if (result)
+      return result;
+
+    var time = 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 += '(' + time.toString() + ')';
     return result;
-
-  var time = 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 += '(' + time.toString() + ')';
-  return result;
-}
+  /**
+   * Available disk space.
+   * @type {number|undefined}
+   */
+  var availableSpace = undefined;
 
-/**
- * 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;
 
-/**
- * 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 = {};
 
-/**
- * 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);
+  function getTreeViewObject() {
+    if (!treeViewObject) {
+      treeViewObject = $('tree-view');
+      cr.ui.decorate(treeViewObject, cr.ui.Tree);
+      treeViewObject.detail = {payload: {}, children: {}};
+      treeViewObject.addEventListener('change', updateDescription);
+    }
+    return treeViewObject;
   }
-  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);
+  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;
   }
-  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);
+  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;
   }
-  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.onGlobalInfoUpdated|.
- * |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 GlobalInfoUpdated event.
- */
-function handleGlobalInfo(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();
-  if (getTreeViewObject().selectedItem == storageObject)
-    updateDescription();
-
-};
-
-/**
- * Event Handler for |cr.quota.onPerHostInfoUpdated|.
- * |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 PerHostInfoUpdated event.
- */
-function handlePerHostInfo(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();
-    if (getTreeViewObject().selectedItem == hostObject)
+  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.onGlobalInfoUpdated|.
+   * |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 GlobalInfoUpdated event.
+   */
+  function handleGlobalInfo(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();
+    if (getTreeViewObject().selectedItem == storageObject)
       updateDescription();
-
-  }
-}
-
-/**
- * Event Handler for |cr.quota.onPerOriginInfoUpdated|.
- * |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).
- *   |lastModifiedTime|:
- *     Last modified time of the storage from the origin.
- *     Number of milliseconds since UNIX epoch.
- *
- * |inUse|, |usedCount|, |lastAccessTime| and |lastModifiedTime| can be missing,
- * and some additional fields can be included.
- * @param {CustomEvent} event PerOriginInfoUpdated event.
- */
-function handlePerOriginInfo(event) {
-  /**
-   * @type {Array<{
-   *         origin: {!string},
-   *         type: {!string},
-   *         host: {!string},
-   *         inUse: {?boolean},
-   *         usedCount: {?number},
-   *         lastAccessTime: {?number}
-   *         lastModifiedTime: {?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();
-    if (getTreeViewObject().selectedItem == originObject)
-      updateDescription();
-  }
-}
-
-/**
- * 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],
-                       ['lastModifiedTime', 'Last Modified 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);
-    }
-  }
-}
-
-/**
+  };
+
+  /**
+   * Event Handler for |cr.quota.onPerHostInfoUpdated|.
+   * |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 PerHostInfoUpdated event.
+   */
+  function handlePerHostInfo(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();
+      if (getTreeViewObject().selectedItem == hostObject)
+        updateDescription();
+    }
+  }
+
+  /**
+   * Event Handler for |cr.quota.onPerOriginInfoUpdated|.
+   * |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).
+   *   |lastModifiedTime|:
+   *     Last modified time of the storage from the origin.
+   *     Number of milliseconds since UNIX epoch.
+   *
+   * |inUse|, |usedCount|, |lastAccessTime| and |lastModifiedTime| can be
+   * missing,
+   * and some additional fields can be included.
+   * @param {CustomEvent} event PerOriginInfoUpdated event.
+   */
+  function handlePerOriginInfo(event) {
+    /**
+     * @type {Array<{
+     *         origin: {!string},
+     *         type: {!string},
+     *         host: {!string},
+     *         inUse: {?boolean},
+     *         usedCount: {?number},
+     *         lastAccessTime: {?number}
+     *         lastModifiedTime: {?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();
+      if (getTreeViewObject().selectedItem == originObject)
+        updateDescription();
+    }
+  }
+
+  /**
+   * 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],
+        ['lastModifiedTime', 'Last Modified 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;
-}
-
-/**
+  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);
-
-  cr.quota.onAvailableSpaceUpdated.addEventListener('update',
-                                                    handleAvailableSpace);
-  cr.quota.onGlobalInfoUpdated.addEventListener('update', handleGlobalInfo);
-  cr.quota.onPerHostInfoUpdated.addEventListener('update', handlePerHostInfo);
-  cr.quota.onPerOriginInfoUpdated.addEventListener('update',
-                                                   handlePerOriginInfo);
-  cr.quota.onStatisticsUpdated.addEventListener('update', handleStatistics);
-  cr.quota.requestInfo();
-
-  $('refresh-button').addEventListener('click', cr.quota.requestInfo, false);
-  $('dump-button').addEventListener('click', dump, false);
-}
-
-cr.doc.addEventListener('DOMContentLoaded', onLoad, false);
+  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);
+
+    cr.quota.onAvailableSpaceUpdated.addEventListener(
+        'update', handleAvailableSpace);
+    cr.quota.onGlobalInfoUpdated.addEventListener('update', handleGlobalInfo);
+    cr.quota.onPerHostInfoUpdated.addEventListener('update', handlePerHostInfo);
+    cr.quota.onPerOriginInfoUpdated.addEventListener(
+        'update', handlePerOriginInfo);
+    cr.quota.onStatisticsUpdated.addEventListener('update', handleStatistics);
+    cr.quota.requestInfo();
+
+    $('refresh-button').addEventListener('click', cr.quota.requestInfo, false);
+    $('dump-button').addEventListener('click', dump, false);
+  }
+
+  cr.doc.addEventListener('DOMContentLoaded', onLoad, false);
 })();