[Extensions Page] Fix the flicker of "No extensions" before extension data loads

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 126 matching lines @@
 
 cr.define('extensions', function() {
   'use strict';
 
   /**
    * Creates a new list of extensions.
    * @param {Object=} opt_propertyBag Optional properties.
    * @constructor
    * @extends {HTMLDivElement}
    */
   var ExtensionList = cr.ui.define('div');

[Dan Beam, 2015/03/21 01:44:20]

if cr.ui.define() is limiting, do this instead

function ExtensionList(<maybe args>) {
  var el = cr.doc.createElement('div');
  el.__proto__ = ExtensionList.prototype;
  // use <maybe args> here
  return el;
}

[Devlin, 2015/03/21 04:54:00]

Done.

 
   /**
    * @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 = {};
 
   ExtensionList.prototype = {
@@ skipping 23 matching lines @@
      * @private {boolean}
      */
     permissionsPromptIsShowing_: false,
 
     /**
      * Necessary to only show the butterbar once.
      * @private {boolean}
      */
     butterbarShown_: false,
 
+    /**
+     * Whether or not incognito mode is available.
+     * @private {boolean}
+     */
+    incognitoAvailable_: false,
+
+    /**
+     * Whether or not the app info dialog is enabled.
+     * @private {boolean}
+     */
+    enableAppInfoDialog_: false,
+
+    /** Needed because we use cr.ui.define. */

[Dan Beam, 2015/03/21 01:44:20]

see above

[Devlin, 2015/03/21 04:54:00]

Done.

     decorate: function() {
-      chrome.developerPrivate.getExtensionsInfo(
-          {includeDisabled: true, includeTerminated: true},
-          function(extensions) {
-        // Sort in order of unpacked vs. packed, followed by name, followed by
-        // id.
-        extensions.sort(function(a, b) {
-          function compare(x, y) {
-            return x < y ? -1 : (x > y ? 1 : 0);
-          }
-          function compareLocation(x, y) {
-            return x.location == chrome.developerPrivate.Location.UNPACKED ?
-                -1 : (x.location == y.location ? 0 : 1);
-          }
-          return compareLocation(a, b) ||
-                 compare(a.name.toLowerCase(), b.name.toLowerCase()) ||
-                 compare(a.id, b.id);
-        });
-        this.extensions_ = extensions;
-        this.showExtensionNodes_();
+      /** @private {!Array<ExtensionInfo>} */
+      this.extensions_ = [];
+    },
+
+    /**
+     * 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.
+      this.incognitoAvailable_ = incognitoAvailable;
+      this.enableAppInfoDialog_ = enableAppInfoDialog;
+      return new Promise(function(resolve, reject) {
+        chrome.developerPrivate.getExtensionsInfo(
+            {includeDisabled: true, includeTerminated: true},
+            function(extensions) {
+          // Sort in order of unpacked vs. packed, followed by name, followed by
+          // id.
+          extensions.sort(function(a, b) {
+            function compare(x, y) {
+              return x < y ? -1 : (x > y ? 1 : 0);
+            }
+            function compareLocation(x, y) {
+              return x.location == chrome.developerPrivate.Location.UNPACKED ?
+                  -1 : (x.location == y.location ? 0 : 1);
+            }
+            return compareLocation(a, b) ||
+                   compare(a.name.toLowerCase(), b.name.toLowerCase()) ||
+                   compare(a.id, b.id);
+          });
+          this.extensions_ = extensions;
+          this.showExtensionNodes_();
+          resolve();
+        }.bind(this));
       }.bind(this));
     },
 
+    /** @return {number} The number of extensions being displayed. */
+    getNumExtensions: function() {
+      return this.extensions_.length;
+    },
+
     getIdQueryParam_: function() {
       return parseQueryParams(document.location)['id'];
     },
 
     getOptionsQueryParam_: function() {
       return parseQueryParams(document.location)['options'];
     },
 
     /**
      * Creates or updates all extension items from scratch.
      * @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);
+        var node = /** @type {ExtensionFocusRow} */ ($(extension.id));
         seenIds.push(extension.id);
 
         if (node)
           this.updateNode_(extension, node);
         else
           this.createNode_(extension, nextExt ? $(nextExt.id) : null);
       }, this);
 
       // Remove extensions that are no longer installed.
       var nodes = document.querySelectorAll('.extension-list-item-wrapper[id]');
@@ skipping 14 matching lines @@
         }
       }
 
       var idToHighlight = this.getIdQueryParam_();
       if (idToHighlight && $(idToHighlight))
         this.scrollToNode_(idToHighlight);
 
       var idToOpenOptions = this.getOptionsQueryParam_();
       if (idToOpenOptions && $(idToOpenOptions))
         this.showEmbeddedExtensionOptions_(idToOpenOptions, true);
-
-      var noExtensions = this.extensions_.length == 0;
-      this.classList.toggle('empty-extension-list', noExtensions);
     },
 
     /** Updates each row's focusable elements without rebuilding the grid. */
     updateFocusableElements: function() {
       var rows = document.querySelectorAll('.extension-list-item-wrapper[id]');
       for (var i = 0; i < rows.length; ++i) {
         assertInstanceof(rows[i], ExtensionFocusRow).updateFocusableElements();
       }
     },
 
@@ skipping 254 matching lines @@
       this.setText_(row, '.location-text', extension.locationText || '');
       this.setText_(row, '.blacklist-text', extension.blacklistText || '');
       this.setText_(row, '.extension-description', extension.description);
 
       // The 'Show Browser Action' button.
       this.updateVisibility_(row, '.show-button',
                              isActive && extension.actionButtonHidden);
 
       // The 'allow in incognito' checkbox.
       this.updateVisibility_(row, '.incognito-control',
-                             isActive && this.data_.incognitoAvailable,
+                             isActive && this.incognitoAvailable_,
                              function(item) {
         var incognito = item.querySelector('input');
         incognito.disabled = !extension.incognitoAccess.isEnabled;
         incognito.checked = extension.incognitoAccess.isActive;
       });
 
       // Hide butterBar if incognito is not enabled for the extension.
       var butterBar = row.querySelector('.butter-bar');
       butterBar.hidden =
           butterBar.hidden || !extension.incognitoAccess.isEnabled;
@@ skipping 28 matching lines @@
 
       // The 'Options' button or link, depending on its behaviour.
       var optionsEnabled = isActive && !!extension.optionsPage;
       this.updateVisibility_(row, '.options-link', optionsEnabled &&
                              extension.optionsPage.openInTab);
       this.updateVisibility_(row, '.options-button', optionsEnabled &&
                              !extension.optionsPage.openInTab);
 
       // The 'View in Web Store/View Web Site' link.
       var siteLinkEnabled = !!extension.homepageUrl &&
-                            !this.data_.enableAppInfoDialog;
+                            !this.enableAppInfoDialog_;
       this.updateVisibility_(row, '.site-link', siteLinkEnabled,
                              function(item) {
         item.href = extension.homepageUrl;
         item.textContent = loadTimeData.getString(
             extension.homepageProvided ? 'extensionSettingsVisitWebsite' :
                                          'extensionSettingsVisitWebStore');
       });
 
       var isUnpacked =
           extension.location == chrome.developerPrivate.Location.UNPACKED;
@@ skipping 106 matching lines @@
           }
           if (!dependentExtension)
             return;
 
           var depNode = dependentTemplate.cloneNode(true);
           depNode.querySelector('.dep-extension-title').textContent =
               dependentExtension.name;
           depNode.querySelector('.dep-extension-id').textContent =
               dependentExtension.id;
           dependentList.appendChild(depNode);
-        });
+        }, this);
       });
 
       // The active views.
       this.updateVisibility_(row, '.active-views', extension.views.length > 0,
                              function(item) {
         var link = item.querySelector('a');
 
         // Link needs to be an only child before the list is updated.
         while (link.nextElementSibling)
           item.removeChild(link.nextElementSibling);
@@ skipping 205 matching lines @@
       // TODO(dbeam): why do we need to focus <extensionoptions> before and
       // after its showing animation? Makes very little sense to me.
       overlay.setInitialFocus();
     },
   };
 
   return {
     ExtensionList: ExtensionList
   };
 });