Implement deletion of storage per site.

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 18b706d5fd160b555fe9c407ee507264406205f1..8ce9d73d1ccc18bbaa2e9852a01845a06d847979 100644
--- a/chrome/browser/resources/settings/site_settings/site_details.js
+++ b/chrome/browser/resources/settings/site_settings/site_details.js
@@ -43,6 +43,24 @@ Polymer({
       type: String,
       value: '',
     },
+
+    /**
+     * The type of storage for the origin.
+     */
+    storageType_: Number,
+
+    /**
+     * The category the user selected to get to this page.
+     */
+    categorySelected: String,
+
+    /**
+     * The current active route.
+     */
+    currentRoute: {
+      type: Object,
+      notify: true,
+    },
   },
 
   ready: function() {
@@ -68,7 +86,9 @@ Polymer({
    * Clears all data stored for the current origin.
    */
   onClearStorage_: function() {
-    // TODO(finnur): Implement.
+    this.$.usageApi.clearUsage(this.origin, this.storageType_);
+    this.storedData_ = '';

[michaelpg, 2016/02/03 18:39:13]

Typically we would wait for a callback from C++ to update this, to ensure the UI
reflects what actually happens on the backend (e.g. if the clear fails, the data
should continue being shown).

[Finnur, 2016/02/04 14:56:58]

Done.

+    this.navigateBackIfNoData_();
   },
 
   /**
@@ -79,6 +99,34 @@ Polymer({
         this.root.querySelectorAll('site-details-permission'),
         function(element) { element.resetPermission(); });
 
-    this.onClearStorage_();
+    if (this.storedData_ != '')
+      this.onClearStorage_();
+    else
+      this.navigateBackIfNoData_();
+  },
+
+  /**
+   * Navigate back if the UI is empty (everything been cleared).
+   */
+  navigateBackIfNoData_: function() {
+    if (this.storedData_ == '' && !this.permissionShowing_()) {
+      this.currentRoute = {

[michaelpg, 2016/02/03 18:39:13]

Is this the same as this.fire('subpage-back')? That may save you from having to
create this.categorySelected.

[Finnur, 2016/02/04 14:56:58]

That was actually the first thing I tried, but realized it doesn't work due to
the way routes are constructed. However, I realized how to overcome that (by
adding the routes) and managed a nice cleanup in the process (privacy_page.js no
longer handling navigation for one of its subpage and some plumbing to go with
it removed also).

[michaelpg, 2016/02/04 19:18:01]

Awesome!!

+        page: this.currentRoute.page,
+        section: 'privacy',
+        subpage: ['site-settings', 'site-settings-category-' +
+            this.categorySelected],
+      };
+    }
+  },
+
+  /**
+   * Returns true if one or more permission is showing.
+   */
+  permissionShowing_: function() {
+    var height = 0;
+    Array.prototype.forEach.call(

[michaelpg, 2016/02/03 18:39:13]

see Array.prototype.some

[Finnur, 2016/02/04 14:56:58]

Hey, neat!

+        this.root.querySelectorAll('site-details-permission'),
+        function(element) { height += element.offsetHeight; });

[michaelpg, 2016/02/03 18:39:13]

with some:
    function(element) { return element.offsetHeight > 0; }
or
    element => (element.offsetHeight > 0)

[Finnur, 2016/02/04 14:56:58]

Hmmm... is there a benefit to the latter syntax? I find it much less readable
than the first...

BTW - what is this operator called? Searching for 'javascript =>' is not very
fruitful. :)

[michaelpg, 2016/02/04 19:18:01]

It's called an arrow function. Relatively new, no obligation to use it.
Sometimes it makes things easier to read because it's shorter and can be used
without a return statement kind of like a "lambda".

[michaelpg, 2016/02/05 01:32:22]

btw, arrow functions will break the presubmit linter and it would be difficult
to fix this. so for now, probably best to avoid them.

+    return height > 0;
   },
 });