Show data usage on Site Details (MDSettings)

chrome/browser/resources/settings/site_settings/site_details.js

 // Copyright 2015 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.
 
 /**
  * @fileoverview
  * 'site-details' show the details (permissions and usage) for a given origin
  * under Site Settings.
  *
  * Example:
@@ skipping 13 matching lines @@
      * Preferences state.
      */
     prefs: {
       type: Object,
       notify: true,
     },
 
     /**
      * The origin that this widget is showing details for.
      */
-    origin: String,
+    origin: {
+      type: String,
+      observer: 'onOriginChanged_',
+    },
 
     /**
      * The amount of data stored for the origin.
      */
-    storedData_: {
-      type: String,
-      observer: 'onStoredDataChanged_',
-    },
+    storedData_: String,
   },
 
   ready: function() {
     this.$.cookies.category = settings.ContentSettingsTypes.COOKIES;
     this.$.javascript.category = settings.ContentSettingsTypes.JAVASCRIPT;
     this.$.popups.category = settings.ContentSettingsTypes.POPUPS;
     this.$.geolocation.category = settings.ContentSettingsTypes.GEOLOCATION;
     this.$.notification.category = settings.ContentSettingsTypes.NOTIFICATIONS;
     this.$.fullscreen.category = settings.ContentSettingsTypes.FULLSCREEN;
     this.$.camera.category = settings.ContentSettingsTypes.CAMERA;
     this.$.mic.category = settings.ContentSettingsTypes.MIC;
-
-    this.storedData_ = '1337 MB';  // TODO(finnur): Fetch actual data.
   },
 
-  onStoredDataChanged_: function() {
+  /**
+   * Handler for when the origin changes.
+   */
+  onOriginChanged_: function() {
+    var siteSettingsHandler = new SiteSettingsHandler();
+    siteSettingsHandler.fetchUsageTotal(
+        this.origin,                 // The origin to fetch usage total for.
+        this,                        // The context to use for the callback.
+        this.OnUsageDataAvailable);  // The callback.

[michaelpg, 2016/01/19 20:47:54]

just bind this to |this| instead of passing the |this| object separately

or maybe use a listener? +stevenjb 

[Finnur, 2016/01/22 15:07:35]

Obsolete code now.

+  },
+
+  /**
+   * Updates the usage data and shows its header.
+   * @param {string} usage The amount of data stored for the current origin.
+   */
+  OnUsageDataAvailable: function(usage) {

[michaelpg, 2016/01/19 20:47:54]

camelCase

also, would you mind renaming this? i find it confusing that
OnUsageDataAvailable is also defined on SiteSettingsHandler.

[Finnur, 2016/01/22 15:07:35]

Also obsolete.

+    this.storedData_ = usage;
     this.$.usage.hidden = false;
     this.$.storage.hidden = false;
   },
 
+  /**
+   * Clears all data stored for the current origin.
+   */
   onClearStorage_: function() {
     // TODO(finnur): Implement.
   },
 
+  /**
+   * Resets all permissions and clears all data stored for the current origin.
+   */
   onClearAndReset_: function() {
     Array.prototype.forEach.call(
         this.root.querySelectorAll('site-details-permission'),
         function(element) { element.resetPermission(); });
 
     this.onClearStorage_();
   },
 });