Fixed css to make host list prettier.

remoting/webapp/me2mom/client_screen.js

Index: remoting/webapp/me2mom/client_screen.js
diff --git a/remoting/webapp/me2mom/client_screen.js b/remoting/webapp/me2mom/client_screen.js
index b9fc8397cbfe40a43a80cff072f9c345a64069ad..333b866be62a56972ffe6a853b4bd66fa94551f1 100644
--- a/remoting/webapp/me2mom/client_screen.js
+++ b/remoting/webapp/me2mom/client_screen.js
@@ -464,11 +464,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);

[Wez, 2011/11/12 01:12:42]

You don't want this showing in the debug log?

[Jamie, 2011/11/14 18:28:16]

TBH, I'm doubting the value of the debug log. console.error does a much better
job of presenting structured data and has proper throwback support. As it
stands, we're inconsistent, but I think console.error is a clear winner in this
case.

   }
 }
 
@@ -498,15 +495,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');
@@ -524,12 +526,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');
+  }
+
 }
 
 /**
@@ -590,5 +604,4 @@ remoting.connectHostWithWcs = function() {
   remoting.oauth2.callWithToken(createPluginAndConnect);
 }
 
-// Don't delete this!
 }());