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 296 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(/** 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
  */
 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();
+    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);
     }
   }
   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');
 };