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

chrome/browser/resources/md_extensions/manager.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.
 
 cr.define('extensions', function() {
   'use strict';
 
   /**
    * Compares two extensions to determine which should come first in the list.
    * @param {chrome.developerPrivate.ExtensionInfo} a
@@ skipping 42 matching lines @@
       extensions: {
         type: Array,
         value: function() { return []; },
       },
 
       /** @type {!Array<!chrome.developerPrivate.ExtensionInfo>} */
       apps: {
         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();
     },
 
     ready: 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();
     },
 
     /**
      * @param {chrome.developerPrivate.ExtensionType} type The type of item.
      * @return {string} The ID of the list that the item belongs in.
      * @private
      */
     getListId_: function(type) {
       var listId;
       var ExtensionType = chrome.developerPrivate.ExtensionType;
       switch (type) {
         case ExtensionType.HOSTED_APP:
         case ExtensionType.LEGACY_PACKAGED_APP:
-          listId = 'websites';
-          break;
         case ExtensionType.PLATFORM_APP:
           listId = 'apps';
           break;
         case ExtensionType.EXTENSION:
         case ExtensionType.SHARED_MODULE:
           listId = 'extensions';
           break;
         case ExtensionType.THEME:
           assertNotReached(
               'Don\'t send themes to the chrome://extensions page');
           break;
       }
       assert(listId);
       return listId;
     },
 
     /**
      * @param {string} listId The list to look for the item in.
      * @param {string} itemId The id of the item to look for.
      * @return {number} The index of the item in the list, or -1 if not found.
      * @private
      */
     getIndexInList_: function(listId, itemId) {
       return this[listId].findIndex(function(item) {
         return item.id == itemId;
       });
     },
 
     /**
-     * @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;
     },
 
     /**
      * Creates and adds a new extensions-item element to the list, inserting it
      * into its sorted position in the relevant section.
      * @param {!chrome.developerPrivate.ExtensionInfo} item The extension
      *     the new element is representing.
      */
     addItem: function(item) {
       var listId = this.getListId_(item.type);
@@ skipping 23 matching lines @@
      * @param {!chrome.developerPrivate.ExtensionInfo} item The data for the
      *     item to remove.
      */
     removeItem: function(item) {
       var listId = this.getListId_(item.type);
       var index = this.getIndexInList_(listId, item.id);
       // We should never try and remove a non-existent item.
       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 = {
+  ListHelper.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;
-    },
-
-    /** @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));
+    }
   };
 
   /**
    * @param {extensions.Manager} manager
    * @constructor
    * @implements {SearchFieldDelegate}
    */
   function SearchHelper(manager) {
     this.manager_ = manager;
   }
 
   SearchHelper.prototype = {
     /** @override */
     onSearchTermSearch: function(searchTerm) {
       this.manager_.filter = searchTerm;
     },
   };
 
   return {Manager: Manager};
 });