[MD Extensions] Add a details subpage, move to one list

chrome/browser/resources/md_extensions/manager.js

Index: chrome/browser/resources/md_extensions/manager.js
diff --git a/chrome/browser/resources/md_extensions/manager.js b/chrome/browser/resources/md_extensions/manager.js
index c4b6fe4732d71ba5e04301ce8d4dbc63d1c77c92..5c54456e1f3052b79ae7031b943b3ee4858089c1 100644
--- a/chrome/browser/resources/md_extensions/manager.js
+++ b/chrome/browser/resources/md_extensions/manager.js
@@ -60,18 +60,16 @@ cr.define('extensions', function() {
         type: Array,
         value: function() { return []; },
       },
-
-      /** @type {!Array<!chrome.developerPrivate.ExtensionInfo>} */
-      websites: {
-        type: Array,
-        value: function() { return []; },
-      },
     },
 
     behaviors: [
       I18nBehavior,
     ],
 
+    listeners: {
+      'items-list.extension-item-show-details': 'showItemDetails_',
+    },
+
     created: function() {
       this.readyPromiseResolver = new PromiseResolver();
     },
@@ -80,8 +78,8 @@ cr.define('extensions', function() {
       /** @type {extensions.Sidebar} */
       this.sidebar =
           /** @type {extensions.Sidebar} */(this.$$('extensions-sidebar'));
-      this.scrollHelper_ = new ScrollHelper(this);
-      this.sidebar.setScrollDelegate(this.scrollHelper_);
+      this.listHelper_ = new ListHelper(this);
+      this.sidebar.setListDelegate(this.listHelper_);
       this.$.toolbar.setSearchDelegate(new SearchHelper(this));
       this.readyPromiseResolver.resolve();
     },
@@ -97,8 +95,6 @@ cr.define('extensions', function() {
       switch (type) {
         case ExtensionType.HOSTED_APP:
         case ExtensionType.LEGACY_PACKAGED_APP:
-          listId = 'websites';
-          break;
         case ExtensionType.PLATFORM_APP:
           listId = 'apps';
           break;
@@ -128,11 +124,10 @@ cr.define('extensions', function() {
     },
 
     /**
-     * @param {!Array<!chrome.developerPrivate.ExtensionInfo>} list
      * @return {boolean} Whether the list should be visible.

[Dan Beam, 2016/05/03 19:16:49]

@private

[Devlin, 2016/05/03 19:56:55]

Done.

      */
-    computeListHidden_: function(list) {
-      return list.length == 0;
+    computeListHidden_: function() {
+      return this.$['items-list'].items.length == 0;
     },
 
     /**
@@ -176,35 +171,45 @@ cr.define('extensions', function() {
       assert(index >= 0);
       this.splice(listId, index, 1);
     },
+
+    /**
+     * Shows the detailed view for a given item.
+     * @param {CustomEvent} e

[Dan Beam, 2016/05/03 19:16:49]

awesome!  i didn't know CustomEvent was a thing -- it's got a type for .detail,
which is super.  we've been doing all types of other crazy stuff

[Dan Beam, 2016/05/03 19:16:49]

@private

[Devlin, 2016/05/03 19:56:55]

Another item for your bag o' tricks. ;)

[Devlin, 2016/05/03 19:56:55]

Done.

+     */
+    showItemDetails_: function(e) {
+      this.$['details-view'].set('data', assert(e.detail.element.data));
+      this.$.pages.selected = 1;
+    },
+
+    /** @private */
+    onDetailsViewClose_: function() {
+      this.$.pages.selected = 0;
+    }
   });
 
   /**
    * @param {extensions.Manager} manager
    * @constructor
-   * @implements {extensions.SidebarScrollDelegate}
+   * @implements {extensions.SidebarListDelegate}
    */
-  function ScrollHelper(manager) {
-    this.items_ = manager.$.items;
+  function ListHelper(manager) {
+    this.manager_ = manager;
   }
 
-  ScrollHelper.prototype = {
-    /** @override */
-    scrollToExtensions: function() {
-      this.items_.scrollTop =
-          this.items_.querySelector('#extensions-list').offsetTop;
-    },
-
-    /** @override */
-    scrollToApps: function() {
-      this.items_.scrollTop =
-          this.items_.querySelector('#apps-list').offsetTop;
-    },
-
+  ListHelper.prototype = {
     /** @override */
-    scrollToWebsites: function() {
-      this.items_.scrollTop =
-          this.items_.querySelector('#websites-list').offsetTop;
-    },
+    showType: function(type) {
+      var items;
+      switch (type) {
+        case extensions.ShowingType.EXTENSIONS:
+          items = this.manager_.extensions;
+          break;
+        case extensions.ShowingType.APPS:
+          items = this.manager_.apps;
+          break;
+      }
+      this.manager_.$['items-list'].set('items', assert(items));
+    }
   };
 
   /**