Basic webapp UI for host-offline-reason.

remoting/webapp/crd/js/host_table_entry.js

Index: remoting/webapp/crd/js/host_table_entry.js
diff --git a/remoting/webapp/crd/js/host_table_entry.js b/remoting/webapp/crd/js/host_table_entry.js
index edea77078da5d6684af2bbf6c1e2482bdde90ab4..0e159a87df5636f1d7ede2bd969c286ae5d17331 100644
--- a/remoting/webapp/crd/js/host_table_entry.js
+++ b/remoting/webapp/crd/js/host_table_entry.js
@@ -314,6 +314,25 @@ remoting.HostTableEntry.prototype.removeEditBox_ = function() {
 };
 
 /**
+ * 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(/** number */ 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();
+  }
+}
+
+/**
  * Create the DOM nodes and event handlers for the hostname cell.
  * @return {void} Nothing.
  * @private
@@ -340,19 +359,28 @@ remoting.HostTableEntry.prototype.setHostName_ = function() {
     };
     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();
+    if (this.host.hostOfflineReason) {
+      var formattedTime = formatUpdateTime(this.host.updatedTime);
+      hostNameNode.innerText = chrome.i18n.getMessage(
+          /*i18n-content*/'LAST_OFFLINE_REASON',
+          [this.host.hostName, formattedTime]);
+      var detailsText = chrome.i18n.getMessage(
+            'OFFLINE_REASON_' +
+                this.host.hostOfflineReason + '_GENERATED_AT_RUNTIME',

[Jamie, 2015/02/07 00:46:46]

Rather than constructing this tag programmatically, I think it would be safer
(and easier to find where a string is used) if you implemented something like:

function offlineReasonStringToTag(reason) {
  var knownReasons = [
      /**i18n-content*/ 'INVALID_POLICY',
      /**i18n-content*/ 'DOG_CHEWED_POWER_CABLE',
      ...
  ];
  if (reason in knownReasons) {
    return reason;
  } else {
    console.error('Unknown off-line reason: ' + reason);
    return /**i18n-content*/ 'UNKNOWN_OFFLINE_REASON';
  }
}

[Łukasz Anforowicz, 2015/02/09 19:21:58]

Good idea.  Done.

+            [this.host.hostName, formattedTime]);
+      if (!detailsText) {
+        detailsText = chrome.i18n.getMessage(
+            /*i18n-content*/'OFFLINE_REASON_UNKNOWN',
+            [this.host.hostOfflineReason, formattedTime]);

[Jamie, 2015/02/07 00:46:46]

The time is already included in the status string. I don't think you need to
duplicate it in the tool-tip.

[Łukasz Anforowicz, 2015/02/09 19:21:58]

Ok - removed.

       }
+      // TODO(lukasza): Put detailsText into a hideable div (title/tooltip
+      // is not as discoverable + doesn't work well for touchscreens).
+      hostNameNode.title = detailsText;
+    }
+    else if (this.host.updatedTime) {
+      var formattedTime = formatUpdateTime(this.host.updatedTime);
       hostNameNode.innerText = chrome.i18n.getMessage(
-          /*i18n-content*/'LAST_ONLINE', [this.host.hostName, displayString]);
+          /*i18n-content*/'LAST_ONLINE', [this.host.hostName, formattedTime]);
     } else {
       hostNameNode.innerText = chrome.i18n.getMessage(
           /*i18n-content*/'OFFLINE', this.host.hostName);