Show app disable and enable on NTP, and desaturate non-offline-enabled apps when offline.

chrome/browser/resources/ntp4/apps_page.js

Index: chrome/browser/resources/ntp4/apps_page.js
diff --git a/chrome/browser/resources/ntp4/apps_page.js b/chrome/browser/resources/ntp4/apps_page.js
index 8b07c0af6d055152502042ffe4dbc8f8db410397..0d9dd2866483e3c6bf91c892d1c2b7ca2d4ae5a1 100644
--- a/chrome/browser/resources/ntp4/apps_page.js
+++ b/chrome/browser/resources/ntp4/apps_page.js
@@ -119,7 +119,7 @@ cr.define('ntp4', function() {
         launchTypeButton.checked = app.appData.launch_type == id;
       });
 
-      this.options_.disabled = !app.appData.options_url;
+      this.options_.disabled = !app.appData.options_url || !app.appData.enabled;
       this.uninstall_.disabled = !app.appData.can_uninstall;
     },
 
@@ -189,8 +189,8 @@ cr.define('ntp4', function() {
         this.useSmallIcon_ = true;
 
       var appImg = this.ownerDocument.createElement('img');
-      appImg.src = this.useSmallIcon_ ? this.appData_.icon_small :
-                                        this.appData_.icon_big;
+      this.appImg_ = appImg;
+      this.setIcon();
       appImgContainer.appendChild(appImg);
 
       if (this.useSmallIcon_) {
@@ -204,7 +204,6 @@ cr.define('ntp4', function() {
         appImgContainer.addEventListener('click', this.onClick_.bind(this));
         appContents.appendChild(appImgContainer);
       }
-      this.appImg_ = appImg;
 
       var appSpan = this.ownerDocument.createElement('span');
       appSpan.textContent = this.appData_.name;
@@ -244,6 +243,19 @@ cr.define('ntp4', function() {
     },
 
     /**
+     * Set the app's icon image from the appData.
+     * @private
+     */
+    setIcon: function() {
+      this.appImg_.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';
+      }
+    },
+
+    /**
      * Creates the apps-promo section of the app (should only be called for the
      * webstore app).
      * @private
@@ -347,6 +359,15 @@ cr.define('ntp4', function() {
     },
 
     /**
+     * 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();
+    },
+
+    /**
      * The data and preferences for this app.
      * @type {Object}
      */