Show data usage on Site Details (MDSettings)

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

 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="chrome://md-settings/site_settings/site_details_permission.html">
+<link rel="import" href="chrome://md-settings/site_settings/website_usage_private_api.html">
 
 <dom-module id="site-details">
   <link rel="import" type="css"
       href="chrome://md-settings/settings_shared.css">
   <link rel="import" type="css" href="site_details.css">
   <template>
     <div class="settings-box">
       <div class="origin">[[origin]]</div>
-      <h2 i18n-content="siteSettingsUsage" id="usage" hidden></h2>
-      <paper-item id="storage" hidden>
+      <h2 i18n-content="siteSettingsUsage" id="usage"
+          hidden$="[[!storedData_]]"></h2>
+      <paper-item id="storage" hidden$="[[!storedData_]]">
         <div class="flex">[[storedData_]]</div>
         <paper-icon-button icon="delete"
             on-tap="onClearStorage_"
             i18n-values="alt:siteSettingsDelete"></paper-icon-button>
       </paper-item>
       <h2 i18n-content="siteSettingsPermissions"></h2>
       <site-details-permission prefs="{{prefs}}" id="cookies"
           origin="[[origin]]">
       </site-details-permission>
       <site-details-permission prefs="{{prefs}}" id="javascript"
@@ skipping 15 matching lines @@
           origin="[[origin]]">
       </site-details-permission>
       <site-details-permission prefs="{{prefs}}" id="mic"
           origin="[[origin]]">
       </site-details-permission>
       <paper-button
           on-tap="onClearAndReset_"
           raised i18n-content="siteSettingsClearAndReset"
           class="reset-button"></paper-button>
     </div>
+    <website-usage-private-api id="usageApi"

[michaelpg, 2016/01/25 18:33:54]

website-usage-private-api element seems to expect to only be created once, is
that correct?

how do you enforce this (prevent people from making another site-details
instance)?

[Finnur, 2016/01/26 15:54:53]

This seems to me like a general problem with the solution proposed by Hector,
no?

I recognized a solution would be needed for the settings-site-list element as
that is created twice in the site-settings-category element, but I wasn't
planning on enforcing it for this element -- because it is designed to be used
only once. But, as you point out, I can't prevent someone in the future taking
the element and trying to create another instance.

I don't have a good answer -- not sure what construct is appropriate in
js/polymer to enforce this. Do you have any suggestions? Should we make all
these objects handle being created multiple times? Or enforce single-use by
default and just handle "duplicity" as needed?

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

I'm not sure either. I think we should raise the question on the thread. I
wouldn't block this CL on that though.

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

OK, I'll bring it up.

+        website-data-usage="{{storedData_}}">
+    </website-usage-private-api>
   </template>
   <script src="site_details.js"></script>
 </dom-module>