Updated home screen to match new UI mocks.

remoting/webapp/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 50 matching lines @@
   this.onRename_ = onRename;
 
   /** @type {remoting.HostTableEntry} */
   var that = this;
 
   this.tableRow = document.createElement('tr');
   addClass(this.tableRow, 'host-list-row');
 
   // Create the host icon cell.
   var hostIcon = document.createElement('td');
-  addClass(hostIcon, 'host-list-row-start');
   var hostIconImage = document.createElement('img');
   hostIconImage.src = 'icon_host.png';
-  addClass(hostIconImage, 'host-list-main-icon');
+  addClass(hostIcon, 'host-list-main-icon');
   hostIcon.appendChild(hostIconImage);
   this.tableRow.appendChild(hostIcon);
 
   // Create the host name cell.
   this.hostNameCell_ = document.createElement('td');
-  addClass(this.hostNameCell_, 'mode-select-label');
-  this.hostNameCell_.appendChild(
-      document.createTextNode(host.hostName));
-  this.hostNameCell_.ondblclick = function() { that.beginRename_(); };
+  this.setHostName_();
   this.tableRow.appendChild(this.hostNameCell_);
 
   // Create the host status cell.
   var hostStatus = document.createElement('td');
   if (host.status == 'ONLINE') {
     var hostUrl = chrome.extension.getURL('main.html') +
         '?mode=me2me&hostId=' + encodeURIComponent(host.hostId);
-    var connectButton = document.createElement('button');
-    connectButton.setAttribute('class', 'mode-select-button');
-    connectButton.setAttribute('type', 'button');
     var startMe2Me = function() { window.location.replace(hostUrl); };
-    connectButton.addEventListener('click', startMe2Me, false);
-    connectButton.innerHTML =
-        chrome.i18n.getMessage(/*i18n-content*/'CONNECT_BUTTON');
-    hostStatus.appendChild(connectButton);
+    this.hostNameCell_.addEventListener('click', startMe2Me, false);
+    hostIcon.addEventListener('click', startMe2Me, false);
+    hostStatus.addEventListener('click', startMe2Me, false);
+    addClass(this.tableRow, 'clickable');
   } else {
     addClass(this.tableRow, 'host-offline');
     hostStatus.innerHTML = chrome.i18n.getMessage(/*i18n-content*/'OFFLINE');
   }
-  hostStatus.className = 'host-list-row-end';
+  hostStatus.className = 'host-list-label';
   this.tableRow.appendChild(hostStatus);
 
   // Create the host rename cell.
   var editButton = document.createElement('td');
-  editButton.onclick = function() { that.beginRename_(); };
+  var beginRename = function() { that.beginRename_(); };
+  editButton.addEventListener('click', beginRename, true);
   addClass(editButton, 'clickable');
   addClass(editButton, 'host-list-edit');
   var penImage = document.createElement('img');
   penImage.src = 'icon_pencil.png';
   addClass(penImage, 'host-list-rename-icon');
   editButton.appendChild(penImage);
   this.tableRow.appendChild(editButton);
 
   // Create the host delete cell.
   var deleteButton = document.createElement('td');
-  deleteButton.onclick = function() { onDelete(that); }
+  deleteButton.addEventListener('click', function() { onDelete(that); }, false);
   addClass(deleteButton, 'clickable');
   addClass(deleteButton, 'host-list-edit');
   var crossImage = document.createElement('img');
   crossImage.src = 'icon_cross.png';
   addClass(crossImage, 'host-list-remove-icon');
   deleteButton.appendChild(crossImage);
   this.tableRow.appendChild(deleteButton);
 };
 
 /**
@@ skipping 41 matching lines @@
  * @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);
   }
   this.hostNameCell_.innerHTML = '';  // Remove the edit box.
-  this.hostNameCell_.appendChild(document.createTextNode(this.host.hostName));
+  this.setHostName_();
+};
+
+remoting.HostTableEntry.prototype.setHostName_ = function() {
+  var hostNameNode = document.createElement('span');
+  hostNameNode.innerText = this.host.hostName;
+  addClass(hostNameNode, 'host-list-label');
+  this.hostNameCell_.appendChild(hostNameNode);
 };
 
 /**
  * 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_();
   }
 };