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

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 101 matching lines @@
     setupForApp: function(app) {
       this.app_ = app;
 
       this.launch_.textContent = app.appData.name;
 
       this.forAllLaunchTypes_(function(launchTypeButton, id) {
         launchTypeButton.disabled = false;
         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;
     },
 
     /**
      * Handlers for menu item activation.
      * @param {Event} e The activation event.
      * @private
      */
     onLaunch_: function(e) {
       chrome.send('launchApp', [this.app_.appId, APP_LAUNCH.NTP_APPS_MENU]);
@@ skipping 49 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');
-      appImg.src = this.useSmallIcon_ ? this.appData_.icon_small :
-                                        this.appData_.icon_big;
+      this.appImg_ = appImg;
+      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);
       } else {
         appImgContainer.addEventListener('click', this.onClick_.bind(this));
         appContents.appendChild(appImgContainer);
       }
-      this.appImg_ = appImg;
 
       var appSpan = this.ownerDocument.createElement('span');
       appSpan.textContent = this.appData_.name;
       appSpan.addEventListener('click', this.onClick_.bind(this));
       appContents.appendChild(appSpan);
       this.appendChild(appContents);
       this.appContents_ = appContents;
 
       this.addEventListener('keydown', cr.ui.contextMenuHandler);
       this.addEventListener('keyup', cr.ui.contextMenuHandler);
@@ skipping 19 matching lines @@
      */
     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 = '';
       var tile = findAncestorByClass(this, 'tile');
       tile.doRemove();
     },
 
     /**
+     * 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
      */
     createAppsPromoExtras_: function() {
       this.classList.add('webstore');
 
       this.appsPromoExtras_ = $('apps-promo-extras-template').cloneNode(true);
       this.appsPromoExtras_.id = '';
       this.appsPromoHeading_ =
@@ skipping 83 matching lines @@
      * @param {Event} e The mousedown event.
      */
     onMousedown_: function(e) {
       if (e.button == 2)
         this.classList.add('right-mouse-down');
       else
         this.classList.remove('right-mouse-down');
     },
 
     /**
+     * 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}
      */
     set appData(data) {
       this.appData_ = data;
     },
     get appData() {
       return this.appData_;
     },
 
@@ skipping 214 matching lines @@
   };
 
   return {
     APP_LAUNCH: APP_LAUNCH,
     AppsPage: AppsPage,
     launchAppAfterEnable: launchAppAfterEnable,
   };
 });
 
 var launchAppAfterEnable = ntp4.launchAppAfterEnable;