Show local storage usage on the Website Settings options page.

chrome/browser/resources/options/website_settings.js

 // Copyright 2014 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.
 
 cr.define('options', function() {
   /** @const */ var OptionsPage = options.OptionsPage;
   /** @const */ var ArrayDataModel = cr.ui.ArrayDataModel;
 
   /////////////////////////////////////////////////////////////////////////////
   // WebsiteSettingsManager class:
@@ skipping 23 matching lines @@
     /** @override */
     initializePage: function() {
       OptionsPage.prototype.initializePage.call(this);
 
       $('website-settings-overlay-confirm').onclick =
           OptionsPage.closeOverlay.bind(OptionsPage);
 
       $('resourceType').onchange = function() {
         var target = event.target;
         assert(target.tagName == 'SELECT');
-        chrome.send('updateOrigins', [target.value]);
+        if (target.value == 'storage')
+          chrome.send('updateLocalStorage');
+        else
+          chrome.send('updateOrigins', [target.value]);
       };
 
       var searchBox = $('website-settings-search-box');
       searchBox.addEventListener('search',
                                  this.handleSearchQueryChange_.bind(this));
 
       searchBox.onkeydown = function(e) {
         if (e.keyIdentifier == 'Enter')
           e.preventDefault();
       };
@@ skipping 28 matching lines @@
      * box.
      * @private
      */
     searchOrigins: function() {
       var filter =
          $('website-settings-search-box').value;
       chrome.send('updateOriginsSearchResults', [filter]);
     },
 
     /**
+     * Populates the origin list with all origins that are using local storage.
+     * @private
+     */
+    populateLocalStorage_: function(originDict) {
+      var origins = Object.keys(originDict).map(function(origin) {
+        return {
+          origin: origin,
+          usage: originDict[origin].usage,
+          usageString: originDict[origin].usageString
+        };
+      });
+      origins.sort(function(first, second) {
+        return second.usage - first.usage;
+      });
+      this.originList_.dataModel = new ArrayDataModel(origins);
+    },
+
+    /**
      * Handle and delay search query changes.
      * @param {!Event} e The event object.
      * @private
      */
     handleSearchQueryChange_: function() {
       if (this.queryDelayTimerId_)
         window.clearTimeout(this.queryDelayTimerId_);
 
       this.queryDelayTimerId_ = window.setTimeout(this.searchOrigins.bind(this),
                                                   160);
     },
   };
 
   WebsiteSettingsManager.populateOrigins = function(originDict) {
     WebsiteSettingsManager.getInstance().populateOrigins_(originDict);
   };
 
+  WebsiteSettingsManager.populateLocalStorage = function(originDict) {
+    WebsiteSettingsManager.getInstance().populateLocalStorage_(originDict);
+  };
+
   // Export
   return {
     WebsiteSettingsManager: WebsiteSettingsManager
   };
 });