[Extensions] Update extensions UI to observe events and add test

chrome/browser/resources/extensions/extension_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.
 
 <include src="extension_error.js">
 
 ///////////////////////////////////////////////////////////////////////////////
 // ExtensionFocusRow:
 
 /**
@@ skipping 128 matching lines @@
   'use strict';
 
   /**
    * Creates a new list of extensions.
    * @constructor
    * @extends {HTMLDivElement}
    */
   function ExtensionList() {
     var div = document.createElement('div');
     div.__proto__ = ExtensionList.prototype;
-    /** @private {!Array<ExtensionInfo>} */
-    div.extensions_ = [];
+    div.initialize();
     return div;
   }
 
   /**
    * @type {Object<string, number>} A map from extension id to last reloaded
    *     timestamp. The timestamp is recorded when the user click the 'Reload'
    *     link. It is used to refresh the icon of an unpacked extension.
    *     This persists between calls to decorate.
    */
   var extensionReloadedTimestamp = {};
@@ skipping 38 matching lines @@
      */
     incognitoAvailable_: false,
 
     /**
      * Whether or not the app info dialog is enabled.
      * @private {boolean}
      */
     enableAppInfoDialog_: false,
 
     /**
+     * Initializes the list.
+     */
+    initialize: function() {
+      /** @private {!Array<ExtensionInfo>} */
+      this.extensions_ = [];
+
+      chrome.developerPrivate.onItemStateChanged.addListener(
+          function(eventData) {
+        var EventType = chrome.developerPrivate.EventType;
+        switch (eventData.event_type) {
+          case EventType.VIEW_REGISTERED:
+          case EventType.VIEW_UNREGISTERED:
+            // For now, view notifications are handled through the WebUI.
+            // TODO(devlin): Transition these.
+            break;
+          case EventType.INSTALLED:
+          case EventType.LOADED:
+          case EventType.UNLOADED:
+          case EventType.ERROR_ADDED:
+            if (eventData.extensionInfo)
+              this.updateExtension_(eventData.extensionInfo);
+            break;
+          case EventType.UNINSTALLED:
+            var childNode = $(eventData.item_id);
+            childNode.parentNode.removeChild(childNode);
+            break;
+          default:
+            assertNotReached();
+        }
+      }.bind(this));
+    },
+
+    /**
      * Updates the extensions on the page.
      * @param {boolean} incognitoAvailable Whether or not incognito is allowed.
      * @param {boolean} enableAppInfoDialog Whether or not the app info dialog
      *     is enabled.
      * @return {Promise} A promise that is resolved once the extensions data is
      *     fully updated.
      */
     updateExtensionsData: function(incognitoAvailable, enableAppInfoDialog) {
       // If we start to need more information about the extension configuration,
       // consider passing in the full object from the ExtensionSettings.
@@ skipping 44 matching lines @@
      * @private
      */
     showExtensionNodes_: function() {
       // Remove the rows from |focusGrid_| without destroying them.
       this.focusGrid_.rows.length = 0;
 
       // Any node that is not updated will be removed.
       var seenIds = [];
 
       // Iterate over the extension data and add each item to the list.
-      this.extensions_.forEach(function(extension, i) {
-        var nextExt = this.extensions_[i + 1];
-        var node = $(extension.id);
+      this.extensions_.forEach(function(extension) {
         seenIds.push(extension.id);
-
-        if (node)
-          this.updateNode_(extension, node);
-        else
-          this.createNode_(extension, nextExt ? $(nextExt.id) : null);
+        this.updateExtension_(extension);
       }, this);
 
       // Remove extensions that are no longer installed.
       var nodes = document.querySelectorAll('.extension-list-item-wrapper[id]');
       for (var i = 0; i < nodes.length; ++i) {
         var node = nodes[i];
         if (seenIds.indexOf(node.id) < 0) {
           if (node.contains(document.activeElement)) {
             var focusableNode = nodes[i + 1] || nodes[i - 1];
             if (focusableNode) {
@@ skipping 685 matching lines @@
       var self = this;
       $('overlay').addEventListener('cancelOverlay', function f() {
         self.optionsShown_ = false;
         $('overlay').removeEventListener('cancelOverlay', f);
       });
 
       // TODO(dbeam): why do we need to focus <extensionoptions> before and
       // after its showing animation? Makes very little sense to me.
       overlay.setInitialFocus();
     },
+
+    /**
+     * Updates the node for the extension.
+     * @param {!ExtensionInfo} extension The information about the extension to
+     *     update.
+     * @private
+     */
+    updateExtension_: function(extension) {
+      var node = /** @type {ExtensionFocusRow} */ ($(extension.id));
+      if (node) {
+        this.updateNode_(extension, node);
+      } else {
+        var nextExt = this.extensions_[this.extensions_.indexOf(extension) + 1];
+        this.createNode_(extension, nextExt ? $(nextExt.id) : null);
+      }
+    }
   };
 
   return {
     ExtensionList: ExtensionList
   };
 });