ntp: speed up startup by deferring app icon loads

chrome/browser/resources/ntp4/apps_page.js

 // Copyright (c) 2011 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('ntp4', function() {
   'use strict';
 
   var localStrings = new LocalStrings;
 
   var APP_LAUNCH = {
@@ skipping 171 matching lines @@
       appContents.className = 'app-contents';
 
       var appImgContainer = this.ownerDocument.createElement('div');
       appImgContainer.className = 'app-img-container';
       this.appImgContainer_ = appImgContainer;
 
       if (!this.appData_.icon_big_exists && this.appData_.icon_small_exists)
         this.useSmallIcon_ = true;
 
       var appImg = this.ownerDocument.createElement('img');
+      // This is temporary (setIcon_/loadIcon will overwrite it) but is visible
+      // before the page is shown (e.g. if switching from most visited to
+      // bookmarks).
+      appImg.src = 'chrome://theme/IDR_APP_DEFAULT_ICON';
       this.appImg_ = appImg;
-      this.setIcon();
+      this.setIcon_();
       appImgContainer.appendChild(appImg);
 
       if (this.useSmallIcon_) {
         var imgDiv = this.ownerDocument.createElement('div');
         imgDiv.className = 'app-icon-div';
         imgDiv.appendChild(appImgContainer);
         imgDiv.addEventListener('click', this.onClick_.bind(this));
         this.imgDiv_ = imgDiv;
         appContents.appendChild(imgDiv);
         this.appImgContainer_.style.position = 'absolute';
@@ skipping 55 matching lines @@
      * been uninstalled.
      */
     remove: function() {
       // Unset the ID immediately, because the app is already gone. But leave
       // the tile on the page as it animates out.
       this.id = '';
       this.tile.doRemove();
     },
 
     /**
-     * Set the app's icon image from the appData.
+     * Set the URL of the icon from |appData_|. This won't actually show the
+     * icon until loadIcon() is called (for performance reasons; we don't want
+     * to load icons until we have to).
      * @private
      */
-    setIcon: function() {
-      this.appImg_.src = this.useSmallIcon_ ? this.appData_.icon_small :
-                                              this.appData_.icon_big;
+    setIcon_: function() {
+      var src = this.useSmallIcon_ ? this.appData_.icon_small :
+                                     this.appData_.icon_big;
       if (!this.appData_.enabled ||
           (!this.appData_.offline_enabled && !navigator.onLine)) {
-        this.appImg_.src += '?grayscale=true';
+        src += '?grayscale=true';
       }
+
+      this.appImgSrc_ = src;
+    },
+
+    /**
+     * Shows the icon for the app. That is, it causes chrome to load the app
+     * icon resource.
+     */
+    loadIcon: function() {
+      if (this.appImgSrc_)
+        this.appImg_.src = this.appImgSrc_;
+      this.appImgSrc_ = null;
     },
 
     // Shows a notification text below the app icon and stuffs the attributes
     // necessary to show the bubble when the user clicks on the notification
     // text.
     setupNotification_: function(notification) {
       // Remove the old notification from this node (if any).
-      for (var i = 0; i < this.childNodes.length; i++) {
-        if (this.childNodes[i].classList.contains('app-notification')) {
-          this.removeChild(this.childNodes[i]);
-          break;
-        }
-      }
+      if (this.appNotification_)
+        this.appNotification_.parentNode.removeChild(this.appNotification_);
 
       if (notification) {
         // Add a new notification to this node.
         var appNotification = this.ownerDocument.createElement('span');
         appNotification.className = 'app-notification';
         appNotification.textContent = notification['title'];
         appNotification.addEventListener('click',
                                          this.onNotificationClick_.bind(this));
         appNotification.notificationTitle = notification['title'];
         appNotification.notificationMessage = notification['body'];
@@ skipping 144 matching lines @@
       else
         this.classList.remove('suppress-active');
     },
 
     /**
      * Change the appData and update the appearance of the app.
      * @param {Object} appData The new data object that describes the app.
      */
     replaceAppData: function(appData) {
       this.appData_ = appData;
-      this.setIcon();
+      this.setIcon_();
+      this.loadIcon();
     },
 
     /**
      * The data and preferences for this app.
      * @type {Object}
      */
     set appData(data) {
       this.appData_ = data;
     },
     get appData() {
@@ skipping 74 matching lines @@
     el.initialize();
 
     return el;
   }
 
   AppsPage.prototype = {
     __proto__: TilePage.prototype,
 
     initialize: function() {
       this.classList.add('apps-page');
+
+      this.addEventListener('cardselected', this.onCardSelected_);
     },
 
     /**
      * Creates an app DOM element and places it at the last position on the
      * page.
      * @param {Object} appData The data object that describes the app.
      * @param {?boolean} animate If true, the app tile plays an animation.
      */
     appendApp: function(appData, animate) {
       if (animate) {
         // Select the page and scroll all the way down so the animation is
         // visible.
         ntp4.getCardSlider().selectCardByValue(this);
         this.content_.scrollTop = this.content_.scrollHeight;
       }
       this.appendTile(new App(appData), animate);
     },
 
+    /**
+     * Handler for 'cardselected' event, fired when |this| is selected. The
+     * first time this is called, we load all the app icons.
+     * @private
+     */
+    onCardSelected_: function(e) {
+      if (this.hasBeenSelected_)
+        return;
+      this.hasBeenSelected_ = true;
+
+      var apps = this.querySelectorAll('.app');
+      for (var i = 0; i < apps.length; i++) {
+        apps[i].loadIcon();
+      }
+    },
+
     /** @inheritdoc */
     doDragOver: function(e) {
       var tile = ntp4.getCurrentlyDraggingTile();
       if (tile && !tile.querySelector('.app')) {
         e.preventDefault();
         this.setDropEffect(e.dataTransfer);
       } else {
         TilePage.prototype.doDragOver.call(this, e);
       }
     },
@@ skipping 96 matching lines @@
         dataTransfer.dropEffect = 'copy';
     },
   };
 
   AppsPage.setPromo = function(data) {
     var store = document.querySelector('.webstore');
     if (store)
       store.setAppsPromoData(data);
   };
 
-
   /**
    * Callback invoked by chrome whenever an app preference changes.
    * @param {Object} data An object with all the data on available
    *     applications.
    */
   function appsPrefChangeCallback(data) {
     for (var i = 0; i < data.apps.length; ++i) {
       $(data.apps[i].id).appData = data.apps[i];
     }
   }
@@ skipping 18 matching lines @@
     appsPrefChangeCallback: appsPrefChangeCallback,
     launchAppAfterEnable: launchAppAfterEnable,
   };
 });
 
 // TODO(estade): update the content handlers to use ntp namespace instead of
 // making these global.
 var appNotificationChanged = ntp4.appNotificationChanged;
 var appsPrefChangeCallback = ntp4.appsPrefChangeCallback;
 var launchAppAfterEnable = ntp4.launchAppAfterEnable;