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_',
+      value: '',
     },
   },
 
   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() {
-    this.$.usage.hidden = false;
-    this.$.storage.hidden = false;
+  /**
+   * Handler for when the origin changes.
+   */
+  onOriginChanged_: function() {
+    var urlParser = document.createElement('a');

[michaelpg, 2016/01/27 06:37:47]

1. Perhaps use `new URL(this.origin)` if it's equivalent but cheaper?

2. The behavior seems really wonky:

var a = document.createElement('a'); 
a.href = 'http://google.com:442'; a.host // 'google.com:442'
a.href = 'http://google.com:443'; a.host // 'google.com:443'
a.href = 'https://google.com:443'; a.host // 'google.com'
a.href = 'http:google.com'; a.host // 'google.com'

on https://example.com:
a.href = 'http:google.com'; a.host // 'google.com'
a.href = 'https:google.com'; a.host // 'example.com'

on https://example.com:
a.href = 'http:google.com'; a.host // 'example.com'
a.href = 'https:google.com'; a.host // 'google.com'

[Finnur, 2016/01/27 10:27:26]

Thanks for investigating!

Switched to the URL object and now strip away the port.

+    urlParser.href = this.origin;
+    this.$.usageApi.fetchUsageTotal(urlParser.host);
   },
 
+  /**
+   * 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_();
   },
 });