Basic webapp UI for host-offline-reason.

remoting/webapp/crd/js/host_table_entry.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.
 
 /**
  * @fileoverview
  * Class representing an entry in the host-list portion of the home screen.
  */
 
 'use strict';
@@ skipping 185 matching lines @@
     this.tableRow.title = '';
   }
   var showOffline = this.host.status != 'ONLINE';
   if (showOffline) {
     this.tableRow.classList.remove('host-online');
     this.tableRow.classList.add('host-offline');
   } else {
     this.tableRow.classList.add('host-online');
     this.tableRow.classList.remove('host-offline');
   }
-  this.warningOverlay_.hidden = !remoting.Host.needsUpdate(
+  var hostReportedError = this.host.hostOfflineReason != '';
+  var hostNeedsUpdate = remoting.Host.needsUpdate(
       this.host, this.webappMajorVersion_);
+  this.warningOverlay_.hidden = !hostNeedsUpdate && !hostReportedError;
 };
 
 /**
  * Prepare the host for renaming by replacing its name with an edit box.
  * @return {void} Nothing.
  * @private
  */
 remoting.HostTableEntry.prototype.beginRename_ = function() {
   var editBox =
       /** @type {HTMLInputElement} */ (document.createElement('input'));
@@ skipping 89 matching lines @@
   if (editBox) {
     // onblur will fire when the edit box is removed, so remove the hook.
     editBox.removeEventListener('blur', this.onBlurReference_, false);
   }
   // Update the tool-top and event handler.
   this.updateStatus();
   this.setHostName_();
 };
 
 /**
+ * Formats host's updateTime value relative to current time (i.e. only
+ * displaying hours and minutes if updateTime is less than a day in the past).
+ * @param {string} updateTime RFC 3339 formatted date-time value.
+ * @return {string} Formatted value (i.e. 11/11/2014)
+ */
+function formatUpdateTime(updateTime) {
+  var lastOnline = new Date(updateTime);
+  var now = new Date();
+  var displayString = '';
+  if (now.getFullYear() == lastOnline.getFullYear() &&
+      now.getMonth() == lastOnline.getMonth() &&
+      now.getDate() == lastOnline.getDate()) {
+    return lastOnline.toLocaleTimeString();
+  } else {
+    return lastOnline.toLocaleDateString();
+  }
+}
+
+/**
+ * Formats host's host-offline-reason value (i.e. 'INVALID_HOST_CONFIGURATION')
+ * to a human-readable description of the error.
+ * @param {string} hostOfflineReason
+ * @return {string}
+ */
+function formatHostOfflineReason(hostOfflineReason) {
+  var knownReasonTags = [
+    /*i18n-content*/ 'OFFLINE_REASON_INITIALIZATION_FAILED',
+    /*i18n-content*/ 'OFFLINE_REASON_INVALID_HOST_CONFIGURATION',
+    /*i18n-content*/ 'OFFLINE_REASON_INVALID_HOST_ID',
+    /*i18n-content*/ 'OFFLINE_REASON_INVALID_OAUTH_CREDENTIALS',
+    /*i18n-content*/ 'OFFLINE_REASON_INVALID_HOST_DOMAIN',
+    /*i18n-content*/ 'OFFLINE_REASON_LOGIN_SCREEN_NOT_SUPPORTED',
+    /*i18n-content*/ 'OFFLINE_REASON_USERNAME_MISMATCH'
+  ];
+  var offlineReasonTag = 'OFFLINE_REASON_' + hostOfflineReason;
+  if (knownReasonTags.indexOf(offlineReasonTag) != (-1)) {
+    return chrome.i18n.getMessage(offlineReasonTag);
+  } else {
+    return chrome.i18n.getMessage(
+        /*i18n-content*/ 'OFFLINE_REASON_UNKNOWN',
+        hostOfflineReason);
+  }
+}
+
+/**
  * Create the DOM nodes and event handlers for the hostname cell.
  * @return {void} Nothing.
  * @private
  */
 remoting.HostTableEntry.prototype.setHostName_ = function() {
   var hostNameNode = /** @type {HTMLElement} */ (document.createElement('a'));
   if (this.host.status == 'ONLINE') {
     if (remoting.Host.needsUpdate(this.host, this.webappMajorVersion_)) {
       hostNameNode.innerText = chrome.i18n.getMessage(
           /*i18n-content*/'UPDATE_REQUIRED', this.host.hostName);
     } else {
       hostNameNode.innerText = this.host.hostName;
     }
     hostNameNode.href = '#';
     this.registerFocusHandlers_(hostNameNode);
     /** @type {remoting.HostTableEntry} */
     var that = this;
     /** @param {Event} event */
     var onKeyDown = function(event) {
       if (that.onConnectReference_ &&
           (event.which == 13 || event.which == 32)) {
         that.onConnectReference_();
       }
     };
     hostNameNode.addEventListener('keydown', onKeyDown, false);
   } else {
     if (this.host.updatedTime) {
-      var lastOnline = new Date(this.host.updatedTime);
-      var now = new Date();
-      var displayString = '';
-      if (now.getFullYear() == lastOnline.getFullYear() &&
-          now.getMonth() == lastOnline.getMonth() &&
-          now.getDate() == lastOnline.getDate()) {
-        displayString = lastOnline.toLocaleTimeString();
-      } else {
-        displayString = lastOnline.toLocaleDateString();
+      var formattedTime = formatUpdateTime(this.host.updatedTime);
+      hostNameNode.innerText = chrome.i18n.getMessage(
+          /*i18n-content*/'LAST_ONLINE', [this.host.hostName, formattedTime]);
+      if (this.host.hostOfflineReason) {
+        var detailsText = formatHostOfflineReason(this.host.hostOfflineReason);
+        // TODO(lukasza): Put detailsText into a hideable div (title/tooltip
+        // is not as discoverable + doesn't work well for touchscreens).
+        hostNameNode.title = detailsText;
       }
-      hostNameNode.innerText = chrome.i18n.getMessage(
-          /*i18n-content*/'LAST_ONLINE', [this.host.hostName, displayString]);
     } else {
       hostNameNode.innerText = chrome.i18n.getMessage(
           /*i18n-content*/'OFFLINE', this.host.hostName);
     }
   }
   hostNameNode.classList.add('host-list-label');
   this.hostNameCell_.innerText = '';  // Remove previous contents (if any).
   this.hostNameCell_.appendChild(hostNameNode);
 };
 
@@ skipping 36 matching lines @@
   var element = document.activeElement;
   while (element) {
     if (element == this.tableRow) {
       this.tableRow.classList.add('child-focused');
       return;
     }
     element = element.parentNode;
   }
   this.tableRow.classList.remove('child-focused');
 };