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

chrome/browser/resources/extensions/extension_list.js

Index: chrome/browser/resources/extensions/extension_list.js
diff --git a/chrome/browser/resources/extensions/extension_list.js b/chrome/browser/resources/extensions/extension_list.js
index 187f63070b3ab56316fe87f740529f4ac7877f52..8d29e6a0fd958ce8a55db5be8b677cb07b6bc2b6 100644
--- a/chrome/browser/resources/extensions/extension_list.js
+++ b/chrome/browser/resources/extensions/extension_list.js
@@ -188,29 +188,64 @@ cr.define('extensions', function() {
      */
     butterbarShown_: false,
 
-    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_();
+    /**
+     * 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. */
+    decorate: function() {},
+
+    /**
+     * 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_ ? this.extensions_.length : 0;

[Dan Beam, 2015/03/21 01:14:10]

this isn't the end of the world, but maybe just add:

  /** @private {!Array<WhateverThisTypeIs>} */
  this.extensions_ = [];

in the ctor so this is always around, because this is one of the few places in
this file it's actually null checked

[Devlin, 2015/03/21 01:32:23]

Done in the decorator (since we use cr.ui.define, we can't easily edit the
constructor).

+    },
+
     getIdQueryParam_: function() {
       return parseQueryParams(document.location)['id'];
     },
@@ -268,9 +303,6 @@ cr.define('extensions', function() {
       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. */
@@ -545,7 +577,7 @@ cr.define('extensions', function() {
 
       // 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;
@@ -594,7 +626,7 @@ cr.define('extensions', function() {
 
       // 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;
@@ -721,7 +753,7 @@ cr.define('extensions', function() {
           depNode.querySelector('.dep-extension-id').textContent =
               dependentExtension.id;
           dependentList.appendChild(depNode);
-        });
+        }, this);
       });
 
       // The active views.