Show data usage on Site Details (MDSettings)

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

Index: chrome/browser/resources/settings/site_settings/site_details.js
diff --git a/chrome/browser/resources/settings/site_settings/site_details.js b/chrome/browser/resources/settings/site_settings/site_details.js
index a6a8db7bccd77c5cc7efe83b5ed76db48c90c85d..2591ab619e65117dba5f38d4c5245d4a7737f1d5 100644
--- a/chrome/browser/resources/settings/site_settings/site_details.js
+++ b/chrome/browser/resources/settings/site_settings/site_details.js
@@ -31,14 +31,17 @@ Polymer({
     /**
      * 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: '',
     },
   },
 
@@ -51,19 +54,27 @@ Polymer({
     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'),