Fixed css to make host list prettier.

BUG=None
TEST=Manual

Review URL: http://codereview.chromium.org/8511077

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

6 files changed, 86 insertions, 17 deletions

diff --git a/remoting/remoting.gyp b/remoting/remoting.gyp
index 9f3afa1..75a91a7 100644
--- a/remoting/remoting.gyp
+++ b/remoting/remoting.gyp
@@ -98,6 +98,7 @@
       }],
     ],
     'remoting_it2me_files': [
+      'resources/icon_host.png',
       'resources/icon_warning.png',
       'webapp/me2mom/choice.css',
       'webapp/me2mom/choice.html',
diff --git a/remoting/resources/icon_host.png b/remoting/resources/icon_host.png
new file mode 100644
index 0000000..5d774f3
--- /dev/null
+++ b/remoting/resources/icon_host.png
diff --git a/remoting/webapp/me2mom/_locales/en/messages.json b/remoting/webapp/me2mom/_locales/en/messages.json
index a3cfd90..ceb0118 100644
--- a/remoting/webapp/me2mom/_locales/en/messages.json
+++ b/remoting/webapp/me2mom/_locales/en/messages.json
@@ -119,8 +119,8 @@
     "message": "See and control a shared computer.",
     "description": "Description of the 'access' or 'client' functionality, displayed next to a button that instigates an access operation."
   },
-  "HOME_ANYTIME_REMOTE_ACCESS_TITLE": {
-    "message": "Anytime Remote Access",
+  "HOME_MY_COMPUTERS_TITLE": {
+    "message": "My Computers",
     "description": "Title for the portion of the home page showing the list of hosts the user has previously registered for remote access at any time."
   },
   "HOME_SHARE_BUTTON": {
diff --git a/remoting/webapp/me2mom/choice.css b/remoting/webapp/me2mom/choice.css
index eedc11f..22da18d 100644
--- a/remoting/webapp/me2mom/choice.css
+++ b/remoting/webapp/me2mom/choice.css
@@ -56,7 +56,6 @@ button[disabled], .button[disabled]:hover {
 h1 {
   font-size: 24px;
   font-weight: normal;
-  margin-__MSG_@@bidi_start_edge__: 10px;
 }
 
 label {
@@ -91,6 +90,11 @@ label {
   text-align: center;
 }
 
+.collapsed {
+  opacity: 0;
+  height: 0 !important;
+}
+
 .choice-header {
   font-size: 24px;
   font-weight: normal;
@@ -133,6 +137,7 @@ label {
 .icon-label {
   display: inline-block;
   vertical-align: top;
+  margin-__MSG_@@bidi_start_edge__: 10px;
 }
 
 .information-box {
@@ -180,6 +185,56 @@ label {
   overflow-y: hidden;
 }
 
+.host-list-container {
+  -webkit-transition: all 0.5s;
+  overflow: hidden;
+}
+
+.host-list-table {
+  margin-__MSG_@@bidi_start_edge__: 30px;
+  width: 610px;  /* width + margin = body width */
+  border-spacing: 0;
+}
+
+.host-list-row {
+  height: 50px;
+  color: black;
+}
+
+.host-list-row, .host-list-row td {
+  -webkit-transition: all 0.5s;
+}
+
+.host-list-row td {
+  border-bottom: 1px solid transparent;
+  border-top: 1px solid transparent;
+}
+
+.host-list-row:hover {
+  background-color: #e7eef2;
+}
+
+.host-list-row:hover td {
+  border-bottom: 1px solid #c6c6c6;
+  border-top: 1px solid #c6c6c6;
+}
+
+.host-list-row-end {
+  padding-__MSG_@@bidi_end_edge__: 10px;
+}
+
+.host-list-row-start {
+  padding-__MSG_@@bidi_start_edge__: 10px;
+}
+
+.host-offline {
+  color: #a9a9a9;
+}
+
+.host-offline img {
+  opacity: 0.5;
+}
+
 .small-print {
   font-size: 13px;
   color: #AAA;
diff --git a/remoting/webapp/me2mom/choice.html b/remoting/webapp/me2mom/choice.html
index a46dbae..bd4cc4e 100644
--- a/remoting/webapp/me2mom/choice.html
+++ b/remoting/webapp/me2mom/choice.html
@@ -147,12 +147,12 @@ found in the LICENSE file.
           </tr>
         </table>
 
-        <div id="host-list-div" hidden>
+        <div id="host-list-div"
+             class="host-list-container collapsed"
+             hidden>
           <img src="dividerbottom.png">
-          <h1 i18n-content="HOME_ANYTIME_REMOTE_ACCESS_TITLE"
-              class="icon-label">
-          </h1>
-          <table id="host-list" class="mode-select-table">
+          <h1 i18n-content="HOME_MY_COMPUTERS_TITLE"></h1>
+          <table id="host-list" class="host-list-table">
           </table> <!-- host-list -->
         </div> <!-- host-list-div -->
 
diff --git a/remoting/webapp/me2mom/client_screen.js b/remoting/webapp/me2mom/client_screen.js
index cc66b09..e722ec5 100644
--- a/remoting/webapp/me2mom/client_screen.js
+++ b/remoting/webapp/me2mom/client_screen.js
@@ -466,11 +466,8 @@ function parseHostListResponse_(xhr) {
         showConnectError_(remoting.Error.GENERIC);
       }
     }
-  } catch(er) {
-    // Error parsing response...
-    remoting.debug.log('Error: Error processing response: "' +
-                xhr.status + ' ' + xhr.statusText);
-    remoting.debug.log(xhr.responseText);
+  } catch (er) {
+    console.error('Error processing response: ', xhr);
   }
 }
 
@@ -500,15 +497,20 @@ function replaceHostList_(hostList) {
   // Clear the table before adding the host info.
   hostListTable.innerHTML = '';
 
-  // Show/hide the div depending on whether there are hosts to list.
-  hostListDiv.hidden = (hostList.length == 0);
-
   for (var i = 0; i < hostList.length; ++i) {
     var host = hostList[i];
     if (!host.hostName || !host.hostId || !host.status || !host.jabberId ||
         !host.publicKey)
       continue;
     var hostEntry = document.createElement('tr');
+    addClass(hostEntry, 'host-list-row');
+
+    var hostIcon = document.createElement('td');
+    var hostIconImage = document.createElement('img');
+    hostIconImage.src = 'icon_host.png';
+    hostIcon.className = 'host-list-row-start';
+    hostIcon.appendChild(hostIconImage);
+    hostEntry.appendChild(hostIcon);
 
     var hostName = document.createElement('td');
     hostName.setAttribute('class', 'mode-select-label');
@@ -526,12 +528,24 @@ function replaceHostList_(hostList) {
           chrome.i18n.getMessage(/*i18n-content*/'CONNECT_BUTTON');
       hostStatus.appendChild(connectButton);
     } else {
+      addClass(hostEntry, 'host-offline');
       hostStatus.innerHTML = chrome.i18n.getMessage(/*i18n-content*/'OFFLINE');
     }
+    hostStatus.className = 'host-list-row-end';
     hostEntry.appendChild(hostStatus);
 
     hostListTable.appendChild(hostEntry);
   }
+
+  // Show/hide the div depending on whether there are hosts to list.
+  hostListDiv.hidden = (hostList.length == 0);
+  if (hostList.length == 0) {
+    addClass(hostListDiv, 'collapsed');
+  } else {
+    hostListDiv.style.height = hostListDiv.scrollHeight + 'px';
+    removeClass(hostListDiv, 'collapsed');
+  }
+
 }
 
 /**
@@ -592,5 +606,4 @@ remoting.connectHostWithWcs = function() {
   remoting.oauth2.callWithToken(createPluginAndConnect);
 }
 
-// Don't delete this!
 }());