Implement deletion of storage per site.

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 25 matching lines @@
       observer: 'onOriginChanged_',
     },
 
     /**
      * The amount of data stored for the origin.
      */
     storedData_: {
       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() {
     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;
   },
 
   /**
    * 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.
+    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_();
   },
 
   /**
    * 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_();
+    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;
   },
 });