Replaced IT2Me and host list UI tables with flex-boxes.

Added tool-tips to host list.
Merged 'off-line' indication with host name.

BUG=115350
TEST=Manual

Review URL: https://chromiumcodereview.appspot.com/9518004

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@124039 0039d316-1c4b-4281-b951-d872f2087c98

5 files changed, 93 insertions, 68 deletions

diff --git a/remoting/webapp/_locales/en/messages.json b/remoting/webapp/_locales/en/messages.json
index 10f3f80..e4104c3 100644
--- a/remoting/webapp/_locales/en/messages.json
+++ b/remoting/webapp/_locales/en/messages.json
@@ -222,8 +222,14 @@
     "description": "Label for general-purpose OK buttons."
   },
   "OFFLINE": {
-    "message": "Offline",
-    "description": "Label indicating that a host in the list is not currently available for remote access."
+    "message": "$hostname$ (offline)",
+    "description": "Modified version of the host name shown for hosts that are not currently accessible.",
+    "placeholders": {
+      "hostname": {
+        "content": "$1",
+        "example": "My Linux desktop"
+      }
+    }
   },
   "PIN": {
     "message": "PIN",
@@ -249,10 +255,28 @@
     "message": "Stop Sharing",
     "description": "Label for the 'stop sharing' button on the host-side. Clicking this button disconnects the client."
   },
+  "TOOLTIP_CONNECT": {
+    "message": "Connect to $hostname$",
+    "description": "The tool-tip shown when the user hovers over an on-line host. Clicking the host will initiate a connection to it.",
+    "placeholders": {
+      "hostname": {
+        "content": "$1",
+        "example": "My Linux desktop"
+      }
+    }
+  },
+  "TOOLTIP_DELETE": {
+    "message": "Disable remote connections to this computer",
+    "description": "The tool-tip shown when the user hovers over the 'delete host' button. Clicking this button removes the host from the list and disables connections to it."
+  },
   "TOOLTIP_SCALING": {
     "message": "Scale to fit",
     "description": "The tool-tip shown when the user hovers over the scale to fit button. Clicking this button toggles between scaling down the remote desktop to fit it inside the Chromium browser window and displaying it at 1:1 scale."
   },
+  "TOOLTIP_RENAME": {
+    "message": "Edit computer name",
+    "description": "The tool-tip shown when the user hovers over the 'rename host' button. Clicking this button allows the host name to be edited in-place."
+  },
   "WARNING_NAT_DISABLED": {
     "message": "NOTE: Policy settings permit connections only between computers within your network.",
     "description": "Message displayed at the bottom of the host screen if local policy dictates that NAT traversal is disabled, meaning that connections outside the local network will not work."
diff --git a/remoting/webapp/host_list.js b/remoting/webapp/host_list.js
index 345ac7f..2b2f695 100644
--- a/remoting/webapp/host_list.js
+++ b/remoting/webapp/host_list.js
@@ -166,6 +166,8 @@ remoting.HostList.prototype.display = function() {
    */
   var onDelete = function(hostTableEntry) { that.deleteHost_(hostTableEntry); }
 
+  this.table_.hidden = (this.hosts_.length == 0);
+
   for (var i = 0; i < this.hosts_.length; ++i) {
     /** @type {remoting.Host} */
     var host = this.hosts_[i];
@@ -182,6 +184,7 @@ remoting.HostList.prototype.display = function() {
   if (this.lastError_ != '') {
     l10n.localizeElementFromTag(this.errorDiv_, this.lastError_);
   }
+  this.errorDiv_.hidden = (this.lastError_ == '');
 
   this.showOrHide_(this.hosts_.length != 0 || this.lastError_ != '');
 };
diff --git a/remoting/webapp/host_table_entry.js b/remoting/webapp/host_table_entry.js
index 8db8a08..8487027 100644
--- a/remoting/webapp/host_table_entry.js
+++ b/remoting/webapp/host_table_entry.js
@@ -63,53 +63,49 @@ remoting.HostTableEntry.prototype.init = function(host, onRename, onDelete) {
   /** @type {remoting.HostTableEntry} */
   var that = this;
 
-  this.tableRow = document.createElement('tr');
-  addClass(this.tableRow, 'host-list-row');
+  this.tableRow = document.createElement('div');
+  addClass(this.tableRow, 'section-row');
 
   // Create the host icon cell.
-  var hostIcon = document.createElement('td');
-  var hostIconImage = document.createElement('img');
-  hostIconImage.src = 'icon_host.png';
+  var hostIcon = document.createElement('img');
+  hostIcon.src = 'icon_host.png';
   addClass(hostIcon, 'host-list-main-icon');
-  hostIcon.appendChild(hostIconImage);
   this.tableRow.appendChild(hostIcon);
 
   // Create the host name cell.
-  this.hostNameCell_ = document.createElement('td');
+  this.hostNameCell_ = document.createElement('div');
+  addClass(this.hostNameCell_, 'box-spacer');
   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 startMe2Me = function() { window.location.replace(hostUrl); };
     this.hostNameCell_.addEventListener('click', startMe2Me, false);
     hostIcon.addEventListener('click', startMe2Me, false);
-    hostStatus.addEventListener('click', startMe2Me, false);
     addClass(this.tableRow, 'clickable');
+    addClass(this.tableRow, 'host-online');
+    this.tableRow.title = chrome.i18n.getMessage(
+        /*i18n-content*/'TOOLTIP_CONNECT', host.hostName);
   } else {
     addClass(this.tableRow, 'host-offline');
-    hostStatus.innerHTML = chrome.i18n.getMessage(/*i18n-content*/'OFFLINE');
   }
-  hostStatus.className = 'host-list-label';
-  this.tableRow.appendChild(hostStatus);
 
   // Create the host rename cell.
-  var editButton = document.createElement('td');
+  var editButton = document.createElement('img');
   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);
+  editButton.src = 'icon_pencil.png';
+  addClass(editButton, 'host-list-rename-icon');
+  editButton.title = chrome.i18n.getMessage(/*i18n-content*/'TOOLTIP_RENAME');
   this.tableRow.appendChild(editButton);
 
   // Create the host delete cell.
-  var deleteButton = document.createElement('td');
+  var deleteButton = document.createElement('div');
   deleteButton.addEventListener('click', function() { onDelete(that); }, false);
   addClass(deleteButton, 'clickable');
   addClass(deleteButton, 'host-list-edit');
@@ -117,6 +113,7 @@ remoting.HostTableEntry.prototype.init = function(host, onRename, onDelete) {
   crossImage.src = 'icon_cross.png';
   addClass(crossImage, 'host-list-remove-icon');
   deleteButton.appendChild(crossImage);
+  deleteButton.title = chrome.i18n.getMessage(/*i18n-content*/'TOOLTIP_DELETE');
   this.tableRow.appendChild(deleteButton);
 };
 
@@ -177,7 +174,12 @@ remoting.HostTableEntry.prototype.removeEditBox_ = function() {
 
 remoting.HostTableEntry.prototype.setHostName_ = function() {
   var hostNameNode = document.createElement('span');
-  hostNameNode.innerText = this.host.hostName;
+  if (this.host.status == 'ONLINE') {
+    hostNameNode.innerText = this.host.hostName;
+  } else {
+    hostNameNode.innerText = chrome.i18n.getMessage(/*i18n-content*/'OFFLINE',
+                                                    this.host.hostName);
+  }
   addClass(hostNameNode, 'host-list-label');
   this.hostNameCell_.appendChild(hostNameNode);
 };
diff --git a/remoting/webapp/main.css b/remoting/webapp/main.css
index ad0e34c..b3faa9c 100644
--- a/remoting/webapp/main.css
+++ b/remoting/webapp/main.css
@@ -4535,6 +4535,17 @@ section {
   cursor: text;
 }
 
+.section-row {
+  display: -webkit-box;
+  -webkit-box-align: center;
+  padding: 10px 0;
+  border-top: 1px solid #EBEBEB;
+}
+
+.section-row:first-child {
+  border-top: none;
+}
+
 .error-state {
   background-image: url('icon_warning.png');
   background-repeat: no-repeat;
@@ -4614,15 +4625,6 @@ section {
   border-spacing: 0;
 }
 
-.host-list-row {
-  height: 50px;
-  color: black;
-}
-
-.host-list-row td {
-  border-bottom: 1px solid #ebebeb;
-}
-
 td {
   vertical-align: middle;
 }
@@ -4635,29 +4637,29 @@ td {
   opacity: 0;
 }
 
-.host-list-row:hover .host-list-rename-icon {
-  opacity: 0.8;
+.section-row:hover .host-list-rename-icon {
+  opacity: 0.6;
 }
 
-.host-list-row:hover .host-list-remove-icon {
+.section-row:hover .host-list-remove-icon {
   opacity: 0.3;
 }
 
-.host-list-edit:hover .host-list-rename-icon {
-  opacity: 1;
+.host-list-rename-icon:hover {
+  opacity: 1 !important;
 }
 
-.host-list-edit:hover .host-list-remove-icon {
-  opacity: 0.5;
+.host-list-remove-icon:hover {
+  opacity: 0.5 !important;
 }
 
-.host-list-main-icon {
-  width: 40px;
+.host-list-edit {
+  padding: 0 5px;
 }
 
-.host-list-edit-icon,
-.host-list-rename-icon {
-  width: 16px;
+.host-list-main-icon {
+  margin-right: 10px;
+  vertical-align: middle;
 }
 
 .host-offline .host-list-label,
diff --git a/remoting/webapp/main.html b/remoting/webapp/main.html
index d6e3560..f6c23f6 100644
--- a/remoting/webapp/main.html
+++ b/remoting/webapp/main.html
@@ -80,46 +80,40 @@ found in the LICENSE file.
 
       <section>
         <h2 i18n-content="MODE_IT2ME"></h2>
-        <!-- TODO(jamiewalch): Rewrite this using flex boxes -->
-        <table class="mode-select-table">
-          <tr>
-            <td>
+        <div>
+          <div class="section-row">
+            <div class="box-spacer">
               <div i18n-content="HOME_SHARE_DESCRIPTION"></div>
               <div id="chrome-os-no-share"
                    i18n-content="HOME_SHARE_DESCRIPTION_CHROME_OS"
                    class="small-print"></div>
-            </td>
-            <td class="mode-select-button-column">
+            </div>
+            <div>
               <button id="share-button"
                       i18n-content="HOME_SHARE_BUTTON"
                       class="kd-button kd-button-share"
                       type="button">
               </button>
-            </td>
-          </tr>
-          <tr class="mode-select-table-underline mode-select-table-spacer">
-            <td></td><td></td>
-          </tr>
-          <tr class="mode-select-table-spacer">
-          </tr>
-          <tr>
-            <td i18n-content="HOME_ACCESS_DESCRIPTION"></td>
-            <td class="mode-select-button-column">
-              <button id="access-mode-button"
-                      i18n-content="HOME_ACCESS_BUTTON"
-                      class="kd-button"
-                      type="button">
-              </button>
-            </td>
-          </tr>
-        </table>
-      </section>
+            </div>
+          </div>
+        </div>
+        <div class="section-row">
+          <div i18n-content="HOME_ACCESS_DESCRIPTION" class="box-spacer"></div>
+          <div>
+            <button id="access-mode-button"
+                    i18n-content="HOME_ACCESS_BUTTON"
+                    class="kd-button"
+                    type="button">
+            </button>
+          </div>
+        </div>
+      </section> <!-- Remote Assistance -->
 
       <section id="host-list-div"
                class="host-list-container collapsed"
                hidden>
         <h2 i18n-content="MODE_ME2ME"></h2>
-        <table id="host-list" class="host-list-table"></table>
+        <div id="host-list"></div>
         <div id="host-list-error" class="error-state"></div>
         <div id="daemon-control" data-daemon-state="enabled disabled">
           <table class="host-list-table">