HostTableEntry refactor

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';
-
 /** @suppress {duplicate} */
 var remoting = remoting || {};
 
+(function() {
+
+'use strict';
+
 /**
  * An entry in the host table.
- * @param {remoting.Host} host The host, as obtained from Apiary.
+ *
  * @param {number} webappMajorVersion The major version nmber of the web-app,
  *     used to identify out-of-date hosts.
+ * @param {function(string):void} onConnect Callback for
+ *     connect operations.
  * @param {function(remoting.HostTableEntry):void} onRename Callback for
  *     rename operations.
  * @param {function(remoting.HostTableEntry):void=} opt_onDelete Callback for
  *     delete operations.
+ *
  * @constructor
+ * @implements {base.Disposable}
  */
 remoting.HostTableEntry = function(
-    host, webappMajorVersion, onRename, opt_onDelete) {
+    webappMajorVersion, onConnect, onRename, opt_onDelete) {
   /** @type {remoting.Host} */
+  this.host = null;
+  /** @private {number} */
+  this.webappMajorVersion_ = webappMajorVersion;
+  /** @private {function(remoting.HostTableEntry):void} */
+  this.onRename_ = onRename;
+  /** @private {undefined|function(remoting.HostTableEntry):void} */
+  this.onDelete_ = opt_onDelete;
+  /** @private {function(string):void} */
+  this.onConnect_ = onConnect;
+
+  /** @private {HTMLElement} */
+  this.rootElement_ = null;
+  /** @private {HTMLElement} */
+  this.hostNameLabel_ = null;
+  /** @private {HTMLInputElement} */
+  this.renameInputField_ = null;
+  /** @private {HTMLElement} */
+  this.warningOverlay_ = null;
+
+  /** @private {base.Disposables} */
+  this.renameInputEventHooks_ = null;
+  /** @private {base.Disposables} */
+  this.disposables_ = new base.Disposables();
+
+  // References to event handlers so that they can be removed.
+  /** @private {function():void} */
+  this.onConfirmDeleteReference_ = function() {};
+  /** @private {function():void} */
+  this.onCancelDeleteReference_ = function() {};
+
+  this.createDom_();
+};
+
+/** @param {remoting.Host} host */
+remoting.HostTableEntry.prototype.setHost = function(host) {
   this.host = host;
-  /** @type {number} */
-  this.webappMajorVersion_ = webappMajorVersion;
-  /** @type {function(remoting.HostTableEntry):void} @private */
-  this.onRename_ = onRename;
-  /** @type {undefined|function(remoting.HostTableEntry):void} @private */
-  this.onDelete_ = opt_onDelete;
-
-  /** @type {HTMLElement} */
-  this.tableRow = null;
-  /** @type {HTMLElement} @private */
-  this.hostNameCell_ = null;
-  /** @type {HTMLElement} @private */
-  this.warningOverlay_ = null;
-  // References to event handlers so that they can be removed.
-  /** @type {function():void} @private */
-  this.onBlurReference_ = function() {};
-  /** @type {function():void} @private */
-  this.onConfirmDeleteReference_ = function() {};
-  /** @type {function():void} @private */
-  this.onCancelDeleteReference_ = function() {};
-  /** @type {function():void?} @private */
-  this.onConnectReference_ = null;
+  this.updateUI_();
+};
+
+/** @return {HTMLElement} */
+remoting.HostTableEntry.prototype.element = function() {
+  return this.rootElement_;
+};
+
+remoting.HostTableEntry.prototype.dispose = function() {
+  base.dispose(this.disposables_);
+  this.disposables_ = null;
+  base.dispose(this.renameInputEventHooks_);
+  this.renameInputEventHooks_ = null;
+};
+
+/** @return {string} */
+remoting.HostTableEntry.prototype.getHTML_ = function() {
+  var html =
+    '<div class="host-list-main-icon">' +
+      '<span class="warning-overlay"></span>' +
+      '<img src="icon_host.webp">' +
+    '</div>' +
+    '<div class="box-spacer"">' +
+      '<a class="host-list-label" href="#""></a>' +
+      '<input type="text" hidden/>' +
+    '</div>' +
+    '<span tabindex="0" class="clickable host-list-edit rename-button">' +
+      '<img src="icon_pencil.webp" class="host-list-rename-icon">' +
+    '</span>';
+  if (this.onDelete_) {
+    html +=
+    '<span tabindex="0" class="clickable host-list-edit delete-button">' +
+       '<img src="icon_cross.webp" class="host-list-remove-icon">' +
+    '</span>';
+  }
+  return '<div class="section-row host-offline">' + html + '</div>';
 };
 
 /**
  * Create the HTML elements for this entry and set up event handlers.
  * @return {void} Nothing.
  */
-remoting.HostTableEntry.prototype.createDom = function() {
-  // Create the top-level <div>
-  var tableRow = /** @type {HTMLElement} */ (document.createElement('div'));
-  tableRow.classList.add('section-row');
-  // Create the host icon cell.
-  var hostIconDiv = /** @type {HTMLElement} */ (document.createElement('div'));
-  hostIconDiv.classList.add('host-list-main-icon');
-  var warningOverlay =
-      /** @type {HTMLElement} */ (document.createElement('span'));
-  hostIconDiv.appendChild(warningOverlay);
-  var hostIcon = /** @type {HTMLElement} */ (document.createElement('img'));
-  hostIcon.src = 'icon_host.webp';
-  hostIconDiv.appendChild(hostIcon);
-  tableRow.appendChild(hostIconDiv);
-  // Create the host name cell.
-  var hostNameCell = /** @type {HTMLElement} */ (document.createElement('div'));
-  hostNameCell.classList.add('box-spacer');
-  hostNameCell.id = 'host_' + this.host.hostId;
-  tableRow.appendChild(hostNameCell);
-  // Create the host rename cell.
-  var editButton = /** @type {HTMLElement} */ (document.createElement('span'));
-  var editButtonImg =
-      /** @type {HTMLElement} */ (document.createElement('img'));
-  editButtonImg.title = chrome.i18n.getMessage(
-      /*i18n-content*/'TOOLTIP_RENAME');
-  editButtonImg.src = 'icon_pencil.webp';
-  editButton.tabIndex = 0;
-  editButton.classList.add('clickable');
-  editButton.classList.add('host-list-edit');
-  editButtonImg.classList.add('host-list-rename-icon');
-  editButton.appendChild(editButtonImg);
-  tableRow.appendChild(editButton);
-  // Create the host delete cell.
-  var deleteButton =
-      /** @type {HTMLElement} */ (document.createElement('span'));
-  var deleteButtonImg =
-      /** @type {HTMLElement} */ (document.createElement('img'));
-  deleteButtonImg.title =
-      chrome.i18n.getMessage(/*i18n-content*/'TOOLTIP_DELETE');
-  deleteButtonImg.src = 'icon_cross.webp';
-  deleteButton.tabIndex = 0;
-  deleteButton.classList.add('clickable');
-  deleteButton.classList.add('host-list-edit');
-  deleteButtonImg.classList.add('host-list-remove-icon');
-  deleteButton.appendChild(deleteButtonImg);
-  tableRow.appendChild(deleteButton);
-
-  this.init(tableRow, warningOverlay, hostNameCell, editButton, deleteButton);
-};
-
-/**
- * Associate the table row with the specified elements and callbacks, and set
- * up event handlers.
- *
- * @param {HTMLElement} tableRow The top-level <div> for the table entry.
- * @param {HTMLElement} warningOverlay The <span> element to render a warning
- *     icon on top of the host icon.
- * @param {HTMLElement} hostNameCell The element containing the host name.
- * @param {HTMLElement} editButton The <img> containing the pencil icon for
- *     editing the host name.
- * @param {HTMLElement=} opt_deleteButton The <img> containing the cross icon
- *     for deleting the host, if present.
- * @return {void} Nothing.
- */
-remoting.HostTableEntry.prototype.init = function(
-    tableRow, warningOverlay, hostNameCell, editButton, opt_deleteButton) {
-  this.tableRow = tableRow;
-  this.warningOverlay_ = warningOverlay;
-  this.hostNameCell_ = hostNameCell;
-  this.setHostName_();
-
-  /** @type {remoting.HostTableEntry} */
-  var that = this;
-
-  /** @param {Event} event The click event. */
-  var beginRename = function(event) {
-    that.beginRename_();
-    event.stopPropagation();
-  };
-  /** @param {Event} event The keyup event. */
-  var beginRenameKeyboard = function(event) {
-    if (event.which == 13 || event.which == 32) {
-      that.beginRename_();
-      event.stopPropagation();
+remoting.HostTableEntry.prototype.createDom_ = function() {
+  var container = /** @type {HTMLElement} */ (document.createElement('div'));
+  container.innerHTML = this.getHTML_();
+
+  // Setup DOM references.
+  this.rootElement_ = /** @type {HTMLElement} */ (container.firstElementChild);
+  this.warningOverlay_ = container.querySelector('.warning-overlay');
+  this.hostNameLabel_ = container.querySelector('.box-spacer a');
+  this.renameInputField_ = /** @type {HTMLInputElement} */ (
+      container.querySelector('.box-spacer input'));

[Jamie, 2015/02/27 18:19:40]

This should be accessed explicitly by class name, not by its current position in
the DOM; the latter could conceivably change with no obvious indication that
this call site would need to change with it.

[kelvinp, 2015/03/03 21:57:53]

Done.

+
+  // Register event handlers and set tooltips.
+  var editButton = container.querySelector('.rename-button');
+  var deleteButton = container.querySelector('.delete-button');
+  editButton.title = chrome.i18n.getMessage(/*i18n-content*/'TOOLTIP_RENAME');
+  this.registerButton_(editButton, this.beginRename_.bind(this));
+  this.registerButton_(this.rootElement_, this.onConnectButton_.bind(this));
+  if (deleteButton) {
+    this.registerButton_(deleteButton, this.showDeleteConfirmation_.bind(this));
+    deleteButton.title =
+        chrome.i18n.getMessage(/*i18n-content*/'TOOLTIP_DELETE');
+  }
+};
+
+/** @return {base.Disposable} @private */
+remoting.HostTableEntry.prototype.registerButton_ = function(
+    /** HTMLElement */ button, /** Function */ callback) {

[Jamie, 2015/02/27 18:19:41]

Don't you need @type to annotate parameters in this syntax?

[kelvinp, 2015/03/03 21:57:53]

No, this is magic of the new syntax that John shows me :)

+  var onKeyDown = function(/** Event */ e) {
+    if (e.which === KeyCodes.ENTER || e.which === KeyCodes.SPACEBAR) {
+      callback();
+      e.stopPropagation();
     }
   };
-  editButton.addEventListener('click', beginRename, true);
-  editButton.addEventListener('keyup', beginRenameKeyboard, true);
-  this.registerFocusHandlers_(editButton);
-
-  if (opt_deleteButton) {
-    /** @param {Event} event The click event. */
-    var confirmDelete = function(event) {
-      that.showDeleteConfirmation_();
-      event.stopPropagation();
-    };
-    /** @param {Event} event The keyup event. */
-    var confirmDeleteKeyboard = function(event) {
-      if (event.which == 13 || event.which == 32) {
-        that.showDeleteConfirmation_();
-      }
-    };
-    opt_deleteButton.addEventListener('click', confirmDelete, false);
-    opt_deleteButton.addEventListener('keyup', confirmDeleteKeyboard, false);
-    this.registerFocusHandlers_(opt_deleteButton);
-  }
-  this.updateStatus();
-};
-
-/**
- * Update the row to reflect the current status of the host (online/offline and
- * clickable/unclickable).
+  var onClick = function(/** Event */ e) {
+    callback();
+    e.stopPropagation();
+  };
+  var onFocusChanged = this.onFocusChange_.bind(this);
+  this.disposables_.add(
+      new base.DomEventHook(button, 'click', onClick, false),
+      new base.DomEventHook(button, 'keydown', onKeyDown, false),
+      // Register focus and blur handlers to cause the parent node to be
+      // highlighted whenever a child link has keyboard focus. Note that this is
+      // only necessary because Chrome does not yet support the draft CSS
+      // Selectors 4 specification (http://www.w3.org/TR/selectors4/#subject),
+      // which provides a more elegant solution to this problem.
+      new base.DomEventHook(button, 'focus', onFocusChanged, false),
+      new base.DomEventHook(button, 'blur', onFocusChanged, false));
+};
+
+
+/** @return {void} @private */
+remoting.HostTableEntry.prototype.onConnectButton_ = function() {
+  if (!this.isRenaming_() && this.isOnline_()) {

[Jamie, 2015/02/27 18:19:40]

Add a comment explaining why we don't connect if we're renaming (presumably its
because this event fires if the user hits Enter after typing a new name)?

[kelvinp, 2015/03/03 21:57:53]

That's exactly it :) Done.

+    var encodedHostId = encodeURIComponent(this.host.hostId);
+    this.onConnect_(encodedHostId);
+  }
+};
+
+/** @return {boolean} @private */
+remoting.HostTableEntry.prototype.isOnline_ = function() {
+  return Boolean(this.host) && this.host.status === 'ONLINE';
+};
+
+/** @return {string} @private */
+remoting.HostTableEntry.prototype.getHostDisplayName_ = function() {
+  if (this.isOnline_()) {
+    if (remoting.Host.needsUpdate(this.host, this.webappMajorVersion_)) {
+      return  chrome.i18n.getMessage(
+          /*i18n-content*/'UPDATE_REQUIRED', this.host.hostName);
+    }
+    return this.host.hostName;
+  } else {
+    if (this.host.updatedTime) {
+      var formattedTime = formatUpdateTime(this.host.updatedTime);
+      return chrome.i18n.getMessage(/*i18n-content*/ 'LAST_ONLINE',
+                                    [this.host.hostName, formattedTime]);
+    }
+    return chrome.i18n.getMessage(/*i18n-content*/ 'OFFLINE',
+                                  this.host.hostName);
+  }
+};
+
+/**
+ * Update the UI to reflect the current status of the host
  *
- * @param {boolean=} opt_forEdit True if the status is being updated in order
- *     to allow the host name to be edited.
- * @return {void} Nothing.
- */
-remoting.HostTableEntry.prototype.updateStatus = function(opt_forEdit) {
-  var clickToConnect = this.host.status == 'ONLINE' && !opt_forEdit;
-  if (clickToConnect) {
-    if (!this.onConnectReference_) {
-      /** @type {string} */
-      var encodedHostId = encodeURIComponent(this.host.hostId);
-      this.onConnectReference_ = function() {
-        remoting.connectMe2Me(encodedHostId);
-      };
-      this.tableRow.addEventListener('click', this.onConnectReference_, false);
-    }
-    this.tableRow.classList.add('clickable');
-    this.tableRow.title = chrome.i18n.getMessage(
-        /*i18n-content*/'TOOLTIP_CONNECT', this.host.hostName);
-  } else {
-    if (this.onConnectReference_) {
-      this.tableRow.removeEventListener('click', this.onConnectReference_,
-                                        false);
-      this.onConnectReference_ = null;
-    }
-    this.tableRow.classList.remove('clickable');
-    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');
-  }
-  var hostReportedError = this.host.hostOfflineReason != '';
+ * @return {void} Nothing.
+ * @private
+ */
+remoting.HostTableEntry.prototype.updateUI_ = function() {
+  if (!this.host) {
+    return;
+  }
+  var clickToConnect = this.isOnline_() && !this.isRenaming_();
+  var showOffline = !this.isOnline_();
+  var connectLabel = chrome.i18n.getMessage(/*i18n-content*/'TOOLTIP_CONNECT',
+                                            this.host.hostName);
+  this.rootElement_.classList.toggle('clickable', clickToConnect);
+  this.rootElement_.title = (clickToConnect) ? connectLabel : '';
+  this.rootElement_.classList.toggle('host-online', !showOffline);
+  this.rootElement_.classList.toggle('host-offline', showOffline);
+
+  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.
+  this.hostNameLabel_.innerText = this.getHostDisplayName_();
+  this.hostNameLabel_.title =
+      formatHostOfflineReason(this.host.hostOfflineReason);
+  this.renameInputField_.hidden = !this.isRenaming_();
+  this.hostNameLabel_.hidden = this.isRenaming_();
+};
+
+/**
+ * Prepares the host for renaming by showing an edit box.
  * @return {void} Nothing.
  * @private
  */
 remoting.HostTableEntry.prototype.beginRename_ = function() {
-  var editBox =
-      /** @type {HTMLInputElement} */ (document.createElement('input'));
-  editBox.type = 'text';
-  editBox.value = this.host.hostName;
-  this.hostNameCell_.innerText = '';
-  this.hostNameCell_.appendChild(editBox);
-  editBox.select();
-
-  this.onBlurReference_ = this.commitRename_.bind(this);
-  editBox.addEventListener('blur', this.onBlurReference_, false);
-
-  editBox.addEventListener('keydown', this.onKeydown_.bind(this), false);
-  this.updateStatus(true);
-};
-
-/**
- * Accept the hostname entered by the user.
+  this.renameInputField_.value = this.host.hostName;
+  base.dispose(this.renameInputEventHooks_);

[Jamie, 2015/02/27 18:19:41]

You're using the existence of renameInputHooks_ elsewhere as an indication the
renaming is not taking place, so it seems like it should always be null on entry
to beginRename. Maybe an assert would be better here?

[kelvinp, 2015/03/03 21:57:53]

An assert may not work as it will fire if the user clicks on the rename icon
while an existing rename is in progress.  I added an extra check instead.

[Jamie, 2015/03/04 00:09:25]

I don't think that's true. Clicking a second rename button should cause a blur
event on the edit box, dismissing it and disposing of the hooks; then they will
be null when the click event fires.

The reason I don't like calling dispose "just in case" is that it's either
always a no-op (in which case an assert more clearly documents the assumptions
under which the code was written), or you're acknowledging that the object might
still be live, which raises the question of what happens when the code that
creates it tries to clean it up (answer: it cleans up your replacement instead).

[kelvinp, 2015/03/04 02:02:28]

Done.

+  this.renameInputEventHooks_ = new base.Disposables(
+      new base.DomEventHook(this.renameInputField_, 'blur',
+                            this.commitRename_.bind(this), false),
+      new base.DomEventHook(this.renameInputField_, 'keydown',
+                            this.onKeydown_.bind(this), false));
+  this.updateUI_();
+  this.renameInputField_.focus();
+};
+
+/** @return {boolean} @private */
+remoting.HostTableEntry.prototype.isRenaming_ = function() {
+  return Boolean(this.renameInputEventHooks_);
+};
+
+/** @return {void} @private */
+remoting.HostTableEntry.prototype.commitRename_ = function() {
+  if (this.host.hostName != this.renameInputField_.value) {
+    this.host.hostName = this.renameInputField_.value;
+    this.onRename_(this);
+  }
+  this.hideEditBox_();
+};
+
+/** @return {void} @private */
+remoting.HostTableEntry.prototype.hideEditBox_ = function() {
+  // onblur will fire when the edit box is removed, so remove the hook.
+  base.dispose(this.renameInputEventHooks_);
+  this.renameInputEventHooks_ = null;
+  // Update the tool-top and event handler.

[Jamie, 2015/02/27 18:19:40]

s/top/top/

[kelvinp, 2015/03/03 21:57:53]

Done.

+  this.updateUI_();
+};
+
+/**
+ * Handle a key event while the user is typing a host name
+ * @param {Event} event The keyboard event.
  * @return {void} Nothing.
  * @private
  */
-remoting.HostTableEntry.prototype.commitRename_ = function() {
-  var editBox = this.hostNameCell_.querySelector('input');
-  if (editBox) {
-    if (this.host.hostName != editBox.value) {
-      this.host.hostName = editBox.value;
-      this.onRename_(this);
-    }
-    this.removeEditBox_();
-  }
-};
-
+remoting.HostTableEntry.prototype.onKeydown_ = function(event) {
+  if (event.which == KeyCodes.ESCAPE) {
+    this.hideEditBox_();
+  } else if (event.which == KeyCodes.ENTER) {
+    this.commitRename_();
+    event.stopPropagation();
+  }
+};
+
 /**
  * Prompt the user to confirm or cancel deletion of a host.
  * @return {void} Nothing.
  * @private
  */
 remoting.HostTableEntry.prototype.showDeleteConfirmation_ = function() {
   var message = document.getElementById('confirm-host-delete-message');
   l10n.localizeElement(message, this.host.hostName);
   var confirm = document.getElementById('confirm-host-delete');
   var cancel = document.getElementById('cancel-host-delete');
@@ skipping 34 matching lines @@
     function() {
   var confirm = document.getElementById('confirm-host-delete');
   var cancel = document.getElementById('cancel-host-delete');
   confirm.removeEventListener('click', this.onConfirmDeleteReference_, false);
   cancel.removeEventListener('click', this.onCancelDeleteReference_, false);
   this.onCancelDeleteReference_ = function() {};
   this.onConfirmDeleteReference_ = function() {};
 };
 
 /**
- * Remove the edit box corresponding to the specified host, and reset its name.
+ * Handle a focus change event within this table row.
  * @return {void} Nothing.
  * @private
  */
-remoting.HostTableEntry.prototype.removeEditBox_ = function() {
-  var editBox = this.hostNameCell_.querySelector('input');
-  if (editBox) {
-    // onblur will fire when the edit box is removed, so remove the hook.
-    editBox.removeEventListener('blur', this.onBlurReference_, false);
+remoting.HostTableEntry.prototype.onFocusChange_ = function() {
+  var element = document.activeElement;
+  while (element) {
+    if (element == this.rootElement_) {
+      this.rootElement_.classList.add('child-focused');
+      return;
+    }
+    element = element.parentNode;
   }
-  // Update the tool-top and event handler.
-  this.updateStatus();
-  this.setHostName_();
+  this.rootElement_.classList.remove('child-focused');
 };
 
 /**
  * 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) {
+  if (!hostOfflineReason) {
+    return '';
+  }
   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'
+    /*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);
+        /*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 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;
-      }
-    } 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);
+/** @enum {number} */
+var KeyCodes = {
+  ENTER: 13,
+  ESCAPE: 27,
+  SPACEBAR: 32
 };
 
-/**
- * Handle a key event while the user is typing a host name
- * @param {Event} event The keyboard event.
- * @return {void} Nothing.
- * @private
- */
-remoting.HostTableEntry.prototype.onKeydown_ = function(event) {
-  if (event.which == 27) {  // Escape
-    this.removeEditBox_();
-  } else if (event.which == 13) {  // Enter
-    this.commitRename_();
-  }
-};
-
-/**
- * Register focus and blur handlers to cause the parent node to be highlighted
- * whenever a child link has keyboard focus. Note that this is only necessary
- * because Chrome does not yet support the draft CSS Selectors 4 specification
- * (http://www.w3.org/TR/selectors4/#subject), which provides a more elegant
- * solution to this problem.
- *
- * @param {HTMLElement} e The element on which to register the event handlers.
- * @return {void} Nothing.
- * @private
- */
-remoting.HostTableEntry.prototype.registerFocusHandlers_ = function(e) {
-  e.addEventListener('focus', this.onFocusChange_.bind(this), false);
-  e.addEventListener('blur', this.onFocusChange_.bind(this), false);
-};
-
-/**
- * Handle a focus change event within this table row.
- * @return {void} Nothing.
- * @private
- */
-remoting.HostTableEntry.prototype.onFocusChange_ = function() {
-  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');
-};
+})();