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

chrome/browser/resources/extensions/extensions.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="../../../../ui/webui/resources/js/cr/ui/focus_row.js">
 <include src="../../../../ui/webui/resources/js/cr/ui/focus_grid.js">
 <include src="../uber/uber_utils.js">
 <include src="extension_code.js">
 <include src="extension_commands_overlay.js">
 <include src="extension_error_overlay.js">
@@ skipping 115 matching lines @@
      * Perform initial setup.
      */
     initialize: function() {
       uber.onContentFrameLoaded();
       cr.ui.FocusOutlineManager.forDocument(document);
       measureCheckboxStrings();
 
       // Set the title.
       uber.setTitle(loadTimeData.getString('extensionSettings'));
 
+      var extensionList = new ExtensionList();
+      extensionList.id = 'extension-settings-list';
+      var wrapper = $('extension-list-wrapper');
+      wrapper.insertBefore(extensionList, wrapper.firstChild);
+
       // This will request the data to show on the page and will get a response
       // back in returnExtensionsData.
       chrome.send('extensionSettingsRequestExtensionsData');
 
       var extensionLoader = extensions.ExtensionLoader.getInstance();
 
       $('toggle-dev-on').addEventListener('change', function(e) {
         this.updateDevControlsVisibility_(true);
-        $('extension-settings-list').updateFocusableElements();
+        extensionList.updateFocusableElements();
         chrome.send('extensionSettingsToggleDeveloperMode',
                     [$('toggle-dev-on').checked]);
       }.bind(this));
 
       window.addEventListener('resize', function() {
         this.updateDevControlsVisibility_(false);
       }.bind(this));
 
       // Set up the three dev mode buttons (load unpacked, pack and update).
       $('load-unpacked').addEventListener('click', function(e) {
@@ skipping 136 matching lines @@
       }.bind(this));
     },
   };
 
   /**
    * Called by the dom_ui_ to re-populate the page with data representing
    * the current state of installed extensions.
    * @param {ExtensionDataResponse} extensionsData
    */
   ExtensionSettings.returnExtensionsData = function(extensionsData) {
-    // We can get called many times in short order, thus we need to
-    // be careful to remove the 'finished loading' timeout.
-    if (this.loadingTimeout_)
-      window.clearTimeout(this.loadingTimeout_);
-    document.documentElement.classList.add('loading');
-    this.loadingTimeout_ = window.setTimeout(function() {
-      document.documentElement.classList.remove('loading');
-    }, 0);
-
     webuiResponded = true;
 
     var supervised = extensionsData.profileIsSupervised;
 
     var pageDiv = $('extension-settings');
     pageDiv.classList.toggle('profile-is-supervised', supervised);
     pageDiv.classList.toggle('showing-banner', supervised);
 
     var devControlsCheckbox = $('toggle-dev-on');
     devControlsCheckbox.checked = extensionsData.developerMode;
     devControlsCheckbox.disabled = supervised;
 
     var instance = ExtensionSettings.getInstance();
     instance.displayPromo_ = extensionsData.promoteAppsDevTools;
     instance.updateDevControlsVisibility_(false);
 
     $('load-unpacked').disabled = extensionsData.loadUnpackedDisabled;
+    var extensionList = $('extension-settings-list');
+    extensionList.updateExtensionsData(
+        extensionsData.incognitoAvailable,
+        extensionsData.enableAppInfoDialog).then(function() {
+      // We can get called many times in short order, thus we need to
+      // be careful to remove the 'finished loading' timeout.
+      if (this.loadingTimeout_)
+        window.clearTimeout(this.loadingTimeout_);
+      document.documentElement.classList.add('loading');
+      this.loadingTimeout_ = window.setTimeout(function() {
+        document.documentElement.classList.remove('loading');
+      }, 0);
 
-    ExtensionList.prototype.data_ = extensionsData;
-    ExtensionList.decorate($('extension-settings-list'));
+      var hasExtensions = extensionList.getNumExtensions() != 0;
+      $('no-extensions').hidden = hasExtensions;
+      $('extension-list-wrapper').hidden = !hasExtensions;
+    }.bind(this));
   };
 
   /**
    * Returns the current overlay or null if one does not exist.
    * @return {Element} The overlay element.
    */
   ExtensionSettings.getCurrentOverlay = function() {
     return document.querySelector('#overlay .page.showing');
   };
 
@@ skipping 87 matching lines @@
 
   // Export
   return {
     ExtensionSettings: ExtensionSettings
   };
 });
 
 window.addEventListener('load', function(e) {
   extensions.ExtensionSettings.getInstance().initialize();
 });