Show destination offline status in the print preview.

chrome/browser/resources/print_preview/settings/destination_settings.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.
 
 cr.define('print_preview', function() {
   'use strict';
 
   // TODO(rltoscano): This class needs a throbber while loading the destination
   // or another solution is persist the settings of the printer so that next
   // load is fast.
@@ skipping 41 matching lines @@
     CHANGE_BUTTON: 'destination-settings-change-button',
     ICON: 'destination-settings-icon',
     ICON_CLOUD: 'destination-settings-icon-cloud',
     ICON_CLOUD_SHARED: 'destination-settings-icon-cloud-shared',
     ICON_GOOGLE_PROMOTED: 'destination-settings-icon-google-promoted',
     ICON_LOCAL: 'destination-settings-icon-local',
     ICON_MOBILE: 'destination-settings-icon-mobile',
     ICON_MOBILE_SHARED: 'destination-settings-icon-mobile-shared',
     LOCATION: 'destination-settings-location',
     NAME: 'destination-settings-name',
+    STALE: 'stale',
     THOBBER_NAME: 'destination-throbber-name'
   };
 
   DestinationSettings.prototype = {
     __proto__: print_preview.Component.prototype,
 
     /** @param {boolean} Whether the component is enabled. */
     set isEnabled(isEnabled) {
       var changeButton = this.getElement().getElementsByClassName(
           DestinationSettings.Classes_.CHANGE_BUTTON)[0];
@@ skipping 36 matching lines @@
       var destination = this.destinationStore_.selectedDestination;
       var nameEl = this.getElement().getElementsByClassName(
           DestinationSettings.Classes_.NAME)[0];
       nameEl.textContent = destination.displayName;
       nameEl.title = destination.displayName;
 
       var iconEl = this.getElement().getElementsByClassName(
           DestinationSettings.Classes_.ICON)[0];
       iconEl.src = destination.iconUrl;
 
+      var location = destination.location;
       var locationEl = this.getElement().getElementsByClassName(
           DestinationSettings.Classes_.LOCATION)[0];
-      locationEl.textContent = destination.location;
-      locationEl.title = destination.location;
+      locationEl.textContent = location;
+      locationEl.title = location;
 
-      setIsVisible(this.getElement().querySelector('.throbber-container'),
-                   false);
-      setIsVisible(
-          this.getElement().querySelector('.destination-settings-box'), true);
+      var offlineStatusText = destination.offlineStatusText;
+      var offlineStatusEl =
+          this.getChildElement('.destination-settings-offline-status');
+      offlineStatusEl.textContent = offlineStatusText;
+      offlineStatusEl.title = offlineStatusText;
+
+      var isOffline = destination.isOffline;
+      var destinationSettingsBoxEl =
+          this.getChildElement('.destination-settings-box');
+      destinationSettingsBoxEl.classList.toggle(
+          DestinationSettings.Classes_.STALE, isOffline);
+      setIsVisible(locationEl, !isOffline);
+      setIsVisible(offlineStatusEl, isOffline);
+
+      setIsVisible(this.getChildElement('.throbber-container'), false);
+      setIsVisible(destinationSettingsBoxEl, true);
     },
 
     onSelectedDestinationNameSet_: function() {
       var destinationName =
           this.destinationStore_.selectedDestination.displayName;
       var nameEl = this.getElement().getElementsByClassName(
           DestinationSettings.Classes_.THOBBER_NAME)[0];
       nameEl.textContent = destinationName;
       nameEl.title = destinationName;
     }
   };
 
   // Export
   return {
     DestinationSettings: DestinationSettings
   };
 });