Added separate tabs for apps / extensions in dev_tools app.

chrome/browser/resources/apps_debugger/js/items_list.js

 // Copyright (c) 2012 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('apps_dev_tool', function() {
   'use strict';
 
-  /**
-   * Creates a new list of items.
-   * @param {Object=} opt_propertyBag Optional properties.
-   * @constructor
-   */
-  var ItemsList = cr.ui.define('div');
-
   // The list of all apps & extensions.
   var completeList = [];
 
   // The list of all apps.
   var appList = [];
 
+  // The list of all extensions.
+  var extensionList = [];
+
   /** const*/ var AppsDevTool = apps_dev_tool.AppsDevTool;
 
   /**
    * @param {string} a first string.
    * @param {string} b second string.
    * @return {number} 1, 0, -1 if |a| is lexicographically greater, equal or
    *     lesser than |b| respectively.
    */
   function compare(a, b) {
     return a > b ? 1 : (a == b ? 0 : -1);
@@ skipping 18 matching lines @@
    * @param {string} app2 second app_name.
    */
   function compareByName(app1, app2) {
     return compare(app1.name.toLowerCase(), app2.name.toLowerCase());
   }
 
   /**
    * Refreshes the app.
    */
   function reloadAppDisplay() {
-    var itemsDiv = $('items');
-
-    // Empty the current content.
-    itemsDiv.textContent = '';
-
-    ItemsList.prototype.data_ = appList;
-    var itemsList = $('extension-settings-list');
-    ItemsList.decorate(itemsList);
+    var extensions = new ItemsList($('extension-settings-list'), extensionList);
+    var apps = new ItemsList($('app-settings-list'), appList);
+    extensions.showItemNodes();
+    apps.showItemNodes();
   }
 
   /**
    * Applies the given |filter| to the items list.
    * @param {string} filter Curent string in the search box.
    */
   function rebuildAppList(filter) {
-    if (!filter) {
-      appList = completeList;
-      return;
-    }
+    appList = [];
+    extensionList = [];
 
-    appList = [];
     for (var i = 0; i < completeList.length; i++) {
       var item = completeList[i];
-      if (item.name.toLowerCase().search(filter) < 0)
+      if (filter && item.name.toLowerCase().search(filter) < 0)
         continue;
-
-      appList.push(item);
+      if (item.isApp)
+        appList.push(item);
+      else
+        extensionList.push(item);
     }
   }
 
+  /**
+   * ItemsList constructor.

[Dan Beam, 2013/04/03 22:56:24]

^ this comment isn't useful (it's easily derivable from @constructor and class
name). please explain the point of needing an items list class.

[Gaurav, 2013/04/04 17:50:59]

Used a class to group the functionality of creating the items (apps and
extensions). Is it better to do it without a class ?

+   * @constructor
+   */
+  function ItemsList(itemsTabNode, items) {
+    this.items_ = items;
+    this.itemsTabNode_ = itemsTabNode;

[Dan Beam, 2013/04/03 22:56:24]

assert(this.itemsTabNode_);

[Gaurav, 2013/04/04 17:50:59]

Done.

+  }
+
   ItemsList.prototype = {
-    __proto__: HTMLDivElement.prototype,
 
     /**
-     * |data_| holds the metadata of all the apps and extensions.
+     * |items_| holds the metadata of all apps / extensions.
      * @type {!Array.<!Object>}
      * @private
      */
-    data_: [],
+    items_: [],
 
     /**
-     * @override
+     * |itemsTabNode_| html element holding the items tab.
+     * @type {!Object}

[Dan Beam, 2013/04/03 22:56:24]

@type {!HTMLElement}

[Gaurav, 2013/04/04 17:50:59]

Done.

+     *@private

[Dan Beam, 2013/04/03 22:56:24]

* @private

[Gaurav, 2013/04/04 17:50:59]

Done.

      */
-    decorate: function() {
-      this.textContent = '';
-      this.showItemNodes_();
+    itemsTabNode_: Object,
+
+    /**
+     * Creates all items from scratch.
+     */
+    showItemNodes: function() {
+      this.itemsTabNode_.textContent = '';
+      // Iterate over the items and add each item to the list.
+      this.itemsTabNode_.classList.toggle('empty-item-list',
+                                          this.items_.length == 0);
+      for (var i = 0; i < this.items_.length; ++i) {
+        this.createNode_(this.items_[i]);
+      }
     },
 
     /**
-     * Creates all items from scratch.
-     * @private
-     */
-    showItemNodes_: function() {
-      // Iterate over the item data and add each item to the list.
-      this.classList.toggle('empty-extension-list', this.data_.length == 0);
-      this.data_.forEach(this.createNode_, this);
-    },
-
-    /**
      * Synthesizes and initializes an HTML element for the item metadata
      * given in |item|.
      * @param {!Object} item A dictionary of item metadata.
      * @private
      */
     createNode_: function(item) {
       var template = $('template-collection').querySelector(
           '.extension-list-item-wrapper');
       var node = template.cloneNode(true);
       node.id = item.id;
@@ skipping 84 matching lines @@
         loadPath.querySelector('span:nth-of-type(2)').textContent =
             ' ' + item.path;
       }
 
       // Then the 'managed, cannot uninstall/disable' message.
       if (!item.may_disable)
         node.querySelector('.managed-message').hidden = false;
 
       this.setActiveViews_(item, node);
 
-      this.appendChild(node);
+      this.itemsTabNode_.appendChild(node);
     },
 
     /**
      * Sets the webstore link.
      * @param {!Object} item A dictionary of item metadata.
      * @param {HTMLElement} el HTML element containing all items.
      * @private
      */
     setWebstoreLink_: function(item, el) {
       var siteLink = el.querySelector('.site-link');
@@ skipping 187 matching lines @@
   ItemsList.launchApp = function(id) {
     chrome.management.launchApp(id, function() {
       ItemsList.loadItemsInfo();
     });
   };
 
   return {
     ItemsList: ItemsList,
   };
 });