Show data usage (storage) on Site Details (MDSettings).

Also create a basic abstraction layer for
SiteSettings to use when communicating with
the C++ layer.

BUG=543635

Review URL: https://codereview.chromium.org/1607483005

Cr-Commit-Position: refs/heads/master@{#372102}

chrome/browser/resources/settings/settings_resources.grd

@@ -438,10 +438,10 @@
       <structure name="IDR_SETTINGS_SITE_SETTINGS_CATEGORY_JS"
                  file="site_settings/site_settings_category.js"
                  type="chrome_html" />
-      <structure name="IDR_SETTINGS_SITE_SETTINGS_CONSTANTS_JS"
+      <structure name="IDR_SETTINGS_CONSTANTS_JS"
                  file="site_settings/constants.js"
                  type="chrome_html" />
-      <structure name="IDR_SETTINGS_SITE_SETTINGS_CONSTANTS_HTML"
+      <structure name="IDR_SETTINGS_CONSTANTS_HTML"
                  file="site_settings/constants.html"
                  type="chrome_html" />
       <structure name="IDR_SETTINGS_SITE_SETTINGS_PAGE_CSS"
@@ -453,22 +453,22 @@
       <structure name="IDR_SETTINGS_SITE_SETTINGS_PAGE_JS"
                  file="site_settings_page/site_settings_page.js"
                  type="chrome_html" />
-      <structure name="IDR_SETTINGS_SITE_SETTINGS_SITE_DETAILS_CSS"
+      <structure name="IDR_SETTINGS_SITE_DETAILS_CSS"
                  file="site_settings/site_details.css"
                  type="chrome_html" />
-      <structure name="IDR_SETTINGS_SITE_SETTINGS_SITE_DETAILS_HTML"
+      <structure name="IDR_SETTINGS_SITE_DETAILS_HTML"
                  file="site_settings/site_details.html"
                  type="chrome_html" />
-      <structure name="IDR_SETTINGS_SITE_SETTINGS_SITE_DETAILS_JS"
+      <structure name="IDR_SETTINGS_SITE_DETAILS_JS"
                  file="site_settings/site_details.js"
                  type="chrome_html" />
-      <structure name="IDR_SETTINGS_SITE_SETTINGS_SITE_DETAILS_PERMISSION_CSS"
+      <structure name="IDR_SETTINGS_SITE_DETAILS_PERMISSION_CSS"
                  file="site_settings/site_details_permission.css"
                  type="chrome_html" />
-      <structure name="IDR_SETTINGS_SITE_SETTINGS_SITE_DETAILS_PERMISSION_HTML"
+      <structure name="IDR_SETTINGS_SITE_DETAILS_PERMISSION_HTML"
                  file="site_settings/site_details_permission.html"
                  type="chrome_html" />
-      <structure name="IDR_SETTINGS_SITE_SETTINGS_SITE_DETAILS_PERMISSION_JS"
+      <structure name="IDR_SETTINGS_SITE_DETAILS_PERMISSION_JS"
                  file="site_settings/site_details_permission.js"
                  type="chrome_html" />
       <structure name="IDR_SETTINGS_SEARCH_ENGINES_PAGE_SEARCH_ENGINE_ADDER_JS"
@@ -550,6 +550,12 @@
       <structure name="IDR_SETTINGS_SETTINGS_JS"
                  file="settings.js"
                  type="chrome_html" />
+      <structure name="IDR_SETTINGS_WEBSITE_USAGE_PRIVATE_API_HTML"
+                 file="site_settings/website_usage_private_api.html"
+                 type="chrome_html" />
+      <structure name="IDR_SETTINGS_WEBSITE_USAGE_PRIVATE_API_JS"
+                 file="site_settings/website_usage_private_api.js"
+                 type="chrome_html" />
       <if expr="chromeos">
         <structure name="IDR_SETTINGS_BLUETOOTH_DEVICE_LIST_ITEM_CSS"
                    file="bluetooth_page/bluetooth_device_list_item.css"

chrome/browser/resources/settings/site_settings/compiled_resources.gyp

@@ -14,6 +14,7 @@
           'constants.js',
           'site_settings_behavior.js',
           'site_details_permission.js',
+          'website_usage_private_api.js',
         ],
         'externs': [
           '../../../../../third_party/closure_compiler/externs/settings_private.js',

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

@@ -3,6 +3,7 @@
 <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"
@@ -11,8 +12,9 @@
   <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_"
@@ -48,6 +50,9 @@
           raised i18n-content="siteSettingsClearAndReset"
           class="reset-button"></paper-button>
     </div>
+    <website-usage-private-api id="usageApi"
+        website-data-usage="{{storedData_}}">
+    </website-usage-private-api>
   </template>
   <script src="site_details.js"></script>
 </dom-module>

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,26 @@ 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 url = /** @type {{hostname: string}} */(new URL(this.origin));
+    this.$.usageApi.fetchUsageTotal(url.hostname);
   },
 
+  /**
+   * 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'),

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

+<link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
+<link rel="import" href="chrome://resources/html/cr.html">
+<script src="chrome://md-settings/site_settings/website_usage_private_api.js"></script>
\ No newline at end of file

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

+// Copyright 2016 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.
+
+(function() {
+'use strict';
+
+Polymer({
+  is: 'website-usage-private-api',
+
+  properties: {
+    /**
+     * The amount of data used by the given website.
+     */
+    websiteDataUsage: {
+      type: String,
+      notify: true,
+    },
+  },
+
+  attached: function() {
+    settings.WebsiteUsagePrivateApi.websiteUsagePolymerInstance = this;
+  },
+
+  /** @param {string} host */
+  fetchUsageTotal: function(host) {
+    settings.WebsiteUsagePrivateApi.fetchUsageTotal(host);
+  },
+});
+})();
+
+cr.define('settings.WebsiteUsagePrivateApi', function() {
+  /**
+   * @type {Object} An instance of the polymer object defined above.
+   * All data will be set here.
+   */
+  var websiteUsagePolymerInstance = null;
+
+  /**
+   * @type {string} The host for which the usage total is being fetched.
+   */
+  var hostName_;
+
+  /**
+   * Encapsulates the calls between JS and C++ to fetch how much storage the
+   * host is using.
+   * Will update the data in |websiteUsagePolymerInstance|.
+   */
+  var fetchUsageTotal = function(host) {
+    var instance = settings.WebsiteUsagePrivateApi.websiteUsagePolymerInstance;
+    if (instance != null)
+      instance.websiteDataUsage = '';
+
+    hostName_ = host;
+    chrome.send('fetchUsageTotal', [host]);
+  };
+
+  /**
+   * Callback for when the usage total is known.
+   * @param {string} host The host that the usage was fetched for.
+   * @param {string} usage The string showing how much data the given host
+   *     is using.
+   */
+  var returnUsageTotal = function(host, usage) {
+    var instance = settings.WebsiteUsagePrivateApi.websiteUsagePolymerInstance;
+    if (instance == null)
+      return;
+
+    if (hostName_ == host)
+      instance.websiteDataUsage = usage;
+  };
+
+  return { websiteUsagePolymerInstance: websiteUsagePolymerInstance,
+           fetchUsageTotal: fetchUsageTotal,
+           returnUsageTotal: returnUsageTotal };
+});

chrome/browser/storage/OWNERS

@@ -2,3 +2,5 @@ dgrogan@chromium.org
 jsbell@chromium.org
 kinuko@chromium.org
 michaeln@chromium.org
+
+per-file storage_info_fetcher.*=finnur@chromium.org
\ No newline at end of file

chrome/browser/storage/storage_info_fetcher.cc

+// Copyright 2016 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.
+
+#include "chrome/browser/storage/storage_info_fetcher.h"
+
+#include "content/public/browser/browser_thread.h"
+
+using content::BrowserThread;
+
+StorageInfoFetcher::StorageInfoFetcher(storage::QuotaManager* quota_manager)
+    : quota_manager_(quota_manager) {
+}
+
+StorageInfoFetcher::~StorageInfoFetcher() {
+}
+
+void StorageInfoFetcher::Run() {
+  // QuotaManager must be called on IO thread, but the callback must then be
+  // called on the UI thread.
+  BrowserThread::PostTask(
+      BrowserThread::IO, FROM_HERE,
+      base::Bind(&StorageInfoFetcher::GetUsageInfo, this,
+          base::Bind(&StorageInfoFetcher::OnGetUsageInfoInternal, this)));
+}
+
+void StorageInfoFetcher::AddObserver(Observer* observer) {
+  observers_.AddObserver(observer);
+}
+
+void StorageInfoFetcher::RemoveObserver(Observer* observer) {
+  observers_.RemoveObserver(observer);
+}
+
+void StorageInfoFetcher::GetUsageInfo(
+    const storage::GetUsageInfoCallback& callback) {
+  DCHECK_CURRENTLY_ON(content::BrowserThread::IO);
+  quota_manager_->GetUsageInfo(callback);
+}
+
+void StorageInfoFetcher::OnGetUsageInfoInternal(
+    const storage::UsageInfoEntries& entries) {
+  DCHECK_CURRENTLY_ON(content::BrowserThread::IO);
+
+  entries_.insert(entries_.begin(), entries.begin(), entries.end());
+  BrowserThread::PostTask(
+      BrowserThread::UI, FROM_HERE,
+      base::Bind(&StorageInfoFetcher::InvokeCallback, this));
+}
+
+void StorageInfoFetcher::InvokeCallback() {
+  DCHECK_CURRENTLY_ON(content::BrowserThread::UI);
+
+  FOR_EACH_OBSERVER(Observer, observers_, OnGetUsageInfo(entries_));
+}

chrome/browser/storage/storage_info_fetcher.h

+// Copyright 2016 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.
+
+#ifndef CHROME_BROWSER_STORAGE_STORAGE_INFO_FETCHER_H_
+#define CHROME_BROWSER_STORAGE_STORAGE_INFO_FETCHER_H_
+
+#include "base/memory/ref_counted.h"
+#include "storage/browser/quota/quota_manager.h"
+
+// Asynchronously fetches the amount of storage used by websites.
+class StorageInfoFetcher :
+    public base::RefCountedThreadSafe<StorageInfoFetcher> {
+ public:
+  // Observer interface for monitoring StorageInfoFetcher.
+  class Observer {
+   public:
+    // Called when the storage has been calculated.
+    virtual void OnGetUsageInfo(const storage::UsageInfoEntries& entries) = 0;
+
+   protected:
+    virtual ~Observer() {}
+  };
+
+  explicit StorageInfoFetcher(storage::QuotaManager* quota_manager);
+
+  // Asynchronously fetches the StorageInfo.
+  void Run();
+
+  void AddObserver(Observer* observer);
+  void RemoveObserver(Observer* observer);
+
+ private:
+  virtual ~StorageInfoFetcher();
+
+  friend class base::RefCountedThreadSafe<StorageInfoFetcher>;
+
+  // Fetches the usage information.
+  void GetUsageInfo(const storage::GetUsageInfoCallback& callback);
+
+  // Called when usage information is available.
+  void OnGetUsageInfoInternal(const storage::UsageInfoEntries& entries);
+
+  // Reports back to all observers that information is available.
+  void InvokeCallback();
+
+  // All clients observing this class.
+  base::ObserverList<Observer> observers_;
+
+  // The quota manager to use to calculate the storage usage.
+  storage::QuotaManager* quota_manager_;
+
+  // Hosts and their usage.
+  storage::UsageInfoEntries entries_;
+
+  DISALLOW_COPY_AND_ASSIGN(StorageInfoFetcher);
+};
+
+#endif  // CHROME_BROWSER_STORAGE_STORAGE_INFO_FETCHER_H_

chrome/browser/ui/webui/settings/md_settings_ui.cc

@@ -19,6 +19,7 @@
 #include "chrome/browser/ui/webui/settings/settings_clear_browsing_data_handler.h"
 #include "chrome/browser/ui/webui/settings/settings_default_browser_handler.h"
 #include "chrome/browser/ui/webui/settings/settings_startup_pages_handler.h"
+#include "chrome/browser/ui/webui/settings/site_settings_handler.h"
 #include "chrome/common/url_constants.h"
 #include "content/public/browser/web_contents.h"
 #include "content/public/browser/web_ui.h"
@@ -56,6 +57,7 @@ MdSettingsUI::MdSettingsUI(content::WebUI* web_ui)
   AddSettingsPageUIHandler(new FontHandler(web_ui));
   AddSettingsPageUIHandler(new LanguagesHandler(web_ui));
   AddSettingsPageUIHandler(new PeopleHandler(profile));
+  AddSettingsPageUIHandler(new SiteSettingsHandler(profile));
   AddSettingsPageUIHandler(new StartupPagesHandler(web_ui));
 
 #if defined(OS_CHROMEOS)

chrome/browser/ui/webui/settings/site_settings_handler.cc

+// Copyright 2016 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.
+
+#include "chrome/browser/ui/webui/settings/site_settings_handler.h"
+
+#include "base/bind.h"
+#include "base/values.h"
+#include "chrome/browser/profiles/profile.h"
+#include "components/content_settings/core/common/content_settings_types.h"
+#include "content/public/browser/browser_thread.h"
+#include "content/public/browser/storage_partition.h"
+#include "content/public/browser/web_ui.h"
+#include "ui/base/text/bytes_formatting.h"
+
+namespace settings {
+
+SiteSettingsHandler::SiteSettingsHandler(Profile* profile)
+    : profile_(profile) {
+}
+
+SiteSettingsHandler::~SiteSettingsHandler() {
+  if (storage_info_fetcher_.get())
+    storage_info_fetcher_->RemoveObserver(this);
+}
+
+void SiteSettingsHandler::RegisterMessages() {
+  web_ui()->RegisterMessageCallback(
+      "fetchUsageTotal",
+      base::Bind(&SiteSettingsHandler::HandleFetchUsageTotal,
+                 base::Unretained(this)));
+}
+
+void SiteSettingsHandler::OnGetUsageInfo(
+    const storage::UsageInfoEntries& entries) {
+  DCHECK_CURRENTLY_ON(content::BrowserThread::UI);
+
+  for (const auto& entry : entries) {
+    if (entry.usage <= 0) continue;
+    if (entry.host == usage_host_) {
+      web_ui()->CallJavascriptFunction(
+         "settings.WebsiteUsagePrivateApi.returnUsageTotal",
+         base::StringValue(entry.host),
+         base::StringValue(ui::FormatBytes(entry.usage)));
+      return;
+    }
+  }
+}
+
+void SiteSettingsHandler::HandleFetchUsageTotal(
+    const base::ListValue* args) {
+  CHECK_EQ(1U, args->GetSize());
+  std::string host;
+  CHECK(args->GetString(0, &host));
+  usage_host_ = host;
+  storage_info_fetcher_ = new StorageInfoFetcher(
+      content::BrowserContext::GetDefaultStoragePartition(
+          profile_)->GetQuotaManager());
+  storage_info_fetcher_->AddObserver(this);
+  storage_info_fetcher_->Run();
+}
+
+}  // namespace settings

chrome/browser/ui/webui/settings/site_settings_handler.h

+// Copyright 2016 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.
+
+#ifndef CHROME_BROWSER_UI_WEBUI_SETTINGS_SITE_SETTINGS_HANDLER_H_
+#define CHROME_BROWSER_UI_WEBUI_SETTINGS_SITE_SETTINGS_HANDLER_H_
+
+#include <vector>
+
+#include "chrome/browser/storage/storage_info_fetcher.h"
+#include "chrome/browser/ui/webui/settings/md_settings_ui.h"
+
+class Profile;
+
+namespace base {
+class ListValue;
+}
+
+namespace settings {
+
+// Chrome "ContentSettings" settings page UI handler.
+class SiteSettingsHandler
+     : public SettingsPageUIHandler, StorageInfoFetcher::Observer {
+ public:
+  explicit SiteSettingsHandler(Profile* profile);
+  ~SiteSettingsHandler() override;
+
+  // SettingsPageUIHandler:
+  void RegisterMessages() override;
+
+  // StorageInfoFetcher::Observer:
+  void OnGetUsageInfo(const storage::UsageInfoEntries& entries) override;
+
+ private:
+  // Asynchronously fetches the usage for a given origin. Replies back with
+  // OnGetUsageInfo above.
+  void HandleFetchUsageTotal(const base::ListValue* args);
+
+  Profile* profile_;
+
+  // The host for which to fetch usage.
+  std::string usage_host_;
+
+  // The helper object asynchronously fetching storage info.
+  scoped_refptr<StorageInfoFetcher> storage_info_fetcher_;
+
+  DISALLOW_COPY_AND_ASSIGN(SiteSettingsHandler);
+};
+
+}  // namespace settings
+
+#endif  // CHROME_BROWSER_UI_WEBUI_SETTINGS_SITE_SETTINGS_HANDLER_H_

chrome/chrome_browser.gypi

@@ -563,6 +563,8 @@
       'browser/storage/durable_storage_permission_context.h',
       'browser/storage/durable_storage_permission_context_factory.cc',
       'browser/storage/durable_storage_permission_context_factory.h',
+      'browser/storage/storage_info_fetcher.cc',
+      'browser/storage/storage_info_fetcher.h',
       'browser/tab_contents/navigation_metrics_recorder.cc',
       'browser/tab_contents/navigation_metrics_recorder.h',
       'browser/tab_contents/retargeting_details.h',

chrome/chrome_browser_ui.gypi

@@ -2014,6 +2014,8 @@
       'browser/ui/webui/settings/settings_startup_pages_handler.h',
       'browser/ui/webui/signin/get_auth_frame.cc',
       'browser/ui/webui/signin/get_auth_frame.h',
+      'browser/ui/webui/settings/site_settings_handler.cc',
+      'browser/ui/webui/settings/site_settings_handler.h',
       'browser/ui/webui/signin/login_ui_service.cc',
       'browser/ui/webui/signin/login_ui_service.h',
       'browser/ui/webui/signin/login_ui_service_factory.cc',

chrome/test/data/webui/settings/site_details_tests.js

@@ -107,12 +107,10 @@ cr.define('site_details', function() {
 
       test('empty state', function() {
         testElement.prefs = prefsEmpty;
-        testElement.origin = "http://www.google.com";
+        testElement.origin = 'http://www.google.com';
 
-        // Once actual storage numbers are shown (instead of hard-coded), these
-        // two will become hidden by default.
-        assertFalse(testElement.$.usage.hidden);
-        assertFalse(testElement.$.storage.hidden);
+        assertTrue(testElement.$.usage.hidden);
+        assertTrue(testElement.$.storage.hidden);
 
         // TODO(finnur): Check for the Permission heading hiding when no
         // permissions are showing.
@@ -130,7 +128,7 @@ cr.define('site_details', function() {
 
       test('all categories visible', function() {
         testElement.prefs = prefs;
-        testElement.origin = "https://foo-allow.com:443";
+        testElement.origin = 'https://foo-allow.com:443';
 
         var msg = 'All categories should be showing';
         assertNotEquals(0, testElement.$.camera.offsetHeight, msg);
@@ -142,6 +140,30 @@ cr.define('site_details', function() {
         assertNotEquals(0, testElement.$.notification.offsetHeight, msg);
         assertNotEquals(0, testElement.$.popups.offsetHeight, msg);
       });
+
+      test('usage heading shows on storage available', function() {
+        // Remove the current website-usage-private-api element.
+        var parent = testElement.$.usageApi.parentNode;
+        testElement.$.usageApi.remove();
+
+        // Replace it with a mock version.
+        Polymer({
+          is: 'mock-website-usage-private-api',
+
+          fetchUsageTotal: function(origin) {
+            testElement.storedData_ = '1 KB';
+          },
+        });
+        var api = document.createElement('mock-website-usage-private-api');
+        testElement.$.usageApi = api;
+        Polymer.dom(parent).appendChild(api);
+
+        testElement.prefs = prefs;
+        testElement.origin = 'https://foo-allow.com:443';
+
+        assertFalse(testElement.$.usage.hidden);
+        assertFalse(testElement.$.storage.hidden);
+      });
     });
   }
   return {