Remove 'Enable' button on unsupported platforms. Added 'No hosts' message.

BUG=131403
TEST=Manual

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

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

8 files changed, 92 insertions, 38 deletions

diff --git a/remoting/webapp/_locales/en/messages.json b/remoting/webapp/_locales/en/messages.json
index eb2c2b4..df9386b 100644
--- a/remoting/webapp/_locales/en/messages.json
+++ b/remoting/webapp/_locales/en/messages.json
@@ -94,7 +94,7 @@
     "placeholders": {
       "url": {
         "content": "$1",
-        "example": "<a href=http://g.co/remote>g.co/remote</a>"
+        "example": "<a href=http://chrome.google.com/remotedesktop>chrome.google.com/remotedesktop</a>"
       }
     }
   },
@@ -210,10 +210,6 @@
     "message": "Change PIN",
     "description": "Hyperlink displayed immediately after the message indicating that the current computer is accepting remote connectins. Clicking this link allows the user to change the PIN (personal identification number) for accessing this host."
   },
-  "HOME_DAEMON_DISABLED_MESSAGE": {
-    "message": "Sharing this computer for any-time access is not yet supported on this platform\u2026 stay tuned.",
-    "description": "Message displayed when the current computer is not accepting remote connections, instructing the user how to enable them."
-  },
   "HOME_DAEMON_STOP_BUTTON": {
     "message": "Disable remote connections",
     "description": "Button displayed when the current computer is accepting remote connections. Clicking this button causes it to stop accepting remote connections."
@@ -226,6 +222,26 @@
     "message": "You must enable remote connections if you want to use Chromoting to access this computer.",
     "description": "Message displayed when the current computer is not accepting remote connections, instructing the user how to enable them."
   },
+  "HOST_LIST_EMPTY_HOSTING_SUPPORTED": {
+    "message": "To enable remote connections to a different computer, install Chromoting there and click \u201c$buttonName$\u201d.",
+    "description": "Message displayed to the user if there are no hosts registered to their account, informing them how to set up a host on another computer.",
+    "placeholders": {
+      "buttonName": {
+        "content": "$1",
+        "example": "Enable remote connections"
+      }
+    }
+  },
+  "HOST_LIST_EMPTY_HOSTING_UNSUPPORTED": {
+    "message": "You have no computers registered. To enable remote connections to a computer, install Chromoting there and click \u201c$buttonName$\u201d.",
+    "description": "Message displayed to the user if there are no hosts registered to their account, informing them how to set up a host on another computer.",
+    "placeholders": {
+      "buttonName": {
+        "content": "$1",
+        "example": "Enable remote connections"
+      }
+    }
+  },
   "HOST_SETUP_CRASH_REPORTING_MESSAGE": {
     "message": "Help us improve Chromoting by allowing us to collect usage statistics and crash reports.",
     "description": "Message displayed next to the checkbox that the user can select to allow crash dump collection and reporting."
diff --git a/remoting/webapp/host_controller.js b/remoting/webapp/host_controller.js
index 08f3f2e..8fd69a6 100644
--- a/remoting/webapp/host_controller.js
+++ b/remoting/webapp/host_controller.js
@@ -80,21 +80,14 @@ remoting.HostController.prototype.getConsent = function(callback) {
 remoting.HostController.prototype.updateDom = function() {
   var match = '';
   var state = this.state();
-  switch (state) {
-    case remoting.HostController.State.STARTED:
-      remoting.updateModalUi('enabled', 'data-daemon-state');
-      break;
-    case remoting.HostController.State.NOT_IMPLEMENTED:
-      document.getElementById('start-daemon').disabled = true;
-      document.getElementById('start-daemon-message').innerText =
-          chrome.i18n.getMessage(
-              /*i18n-content*/'HOME_DAEMON_DISABLED_MESSAGE');
-      // No break;
-    case remoting.HostController.State.STOPPED:
-    case remoting.HostController.State.NOT_INSTALLED:
-      remoting.updateModalUi('disabled', 'data-daemon-state');
-      break;
-  }
+  var enabled = (state == remoting.HostController.State.STARTED);
+  var supported = (state != remoting.HostController.State.NOT_IMPLEMENTED);
+  remoting.updateModalUi(enabled ? 'enabled' : 'disabled', 'data-daemon-state');
+  document.getElementById('daemon-control').hidden = !supported;
+  var element = document.getElementById('host-list-empty-hosting-supported');
+  element.hidden = !supported;
+  element = document.getElementById('host-list-empty-hosting-unsupported');
+  element.hidden = supported;
 };
 
 /**
diff --git a/remoting/webapp/host_list.js b/remoting/webapp/host_list.js
index 399c3f1..c3d2d23 100644
--- a/remoting/webapp/host_list.js
+++ b/remoting/webapp/host_list.js
@@ -18,12 +18,13 @@ var remoting = remoting || {};
  * if the host-list is empty.
  *
  * @constructor
- * @param {Element} table The HTML <table> to contain host-list.
+ * @param {Element} table The HTML <div> to contain host-list.
+ * @param {Element} noHosts The HTML <div> containing the "no hosts" message.
  * @param {Element} errorMsg The HTML <div> to display error messages.
  * @param {Element} errorButton The HTML <button> to display the error
  *     resolution action.
  */
-remoting.HostList = function(table, errorMsg, errorButton) {
+remoting.HostList = function(table, noHosts, errorMsg, errorButton) {
   /**
    * @type {Element}
    * @private
@@ -32,6 +33,13 @@ remoting.HostList = function(table, errorMsg, errorButton) {
   /**
    * @type {Element}
    * @private
+   * TODO(jamiewalch): This should be doable using CSS's sibling selector,
+   * but it doesn't work right now (crbug.com/135050).
+   */
+  this.noHosts_ = noHosts;
+  /**
+   * @type {Element}
+   * @private
    */
   this.errorMsg_ = errorMsg;
   /**
@@ -185,7 +193,9 @@ remoting.HostList.prototype.display = function(thisHostId) {
   this.errorMsg_.innerText = '';
   this.hostTableEntries_ = [];
 
-  this.table_.hidden = (this.hosts_.length == 0);
+  var noHostsRegistered = (this.hosts_.length == 0);
+  this.table_.hidden = noHostsRegistered;
+  this.noHosts_.hidden = !noHostsRegistered;
 
   for (var i = 0; i < this.hosts_.length; ++i) {
     /** @type {remoting.Host} */
diff --git a/remoting/webapp/l10n.js b/remoting/webapp/l10n.js
index 467a570..6bc92de 100644
--- a/remoting/webapp/l10n.js
+++ b/remoting/webapp/l10n.js
@@ -59,19 +59,26 @@ l10n.localize = function() {
   var elements = document.querySelectorAll('[i18n-content]');
   for (var i = 0; i < elements.length; ++i) {
     /** @type {Element} */ var element = elements[i];
-    var substitutions = null;
+    var substitutions = [];
     for (var j = 1; j < 9; ++j) {
-      var attr = 'i18n-value-' + j;
-      if (element.hasAttribute(attr)) {
-        if (!substitutions) {
-          substitutions = [];
+      var value = 'i18n-value-' + j;
+      var valueName = 'i18n-value-name-' + j;
+      if (element.hasAttribute(value)) {
+        substitutions.push(element.getAttribute(value));
+      } else if (element.hasAttribute(valueName)) {
+        var name = element.getAttribute(valueName);
+        var translation = chrome.i18n.getMessage(name);
+        if (translation) {
+          substitutions.push(translation);
+        } else {
+          console.error('Missing translation for substitution: ' + name);
+          substitutions.push(name);
         }
-        substitutions.push(element.getAttribute(attr));
       } else {
         break;
       }
     }
-    l10n.localizeElement(element, substitutions, !!substitutions);
+    l10n.localizeElement(element, substitutions, substitutions.length != 0);
     // Localize tool-tips
     // TODO(jamiewalch): Move this logic to the html document.
     var editButton = document.getElementById('this-host-rename');
diff --git a/remoting/webapp/main.css b/remoting/webapp/main.css
index f6cc0cc..fb4d1dd 100644
--- a/remoting/webapp/main.css
+++ b/remoting/webapp/main.css
@@ -243,6 +243,7 @@ h2 {
   line-height:24px;
   font-weight: normal;
   color: #222;
+  margin-bottom: 10px;
 }
 
 section > h2 {
@@ -297,6 +298,21 @@ section {
   display: -webkit-box;
 }
 
+.host-list-empty-instructions {
+  padding-__MSG_@@bidi_start_edge__: 36px;
+  color: #666;
+  background-image: url('host_setup_instructions.png');
+  background-repeat: no-repeat;
+  background-position: -3px -2px;
+}
+
+#host-list-empty-hosting-supported {
+  margin-top: 14px;
+  padding-top: 20px;
+  border-top: 1px solid #E5E5E5;
+  background-position-y: 18px;
+}
+
 .selectable {
   -webkit-user-select: text;
   cursor: text;
@@ -371,11 +387,6 @@ section {
   min-width: 72px;
 }
 
-.host-list-table {
-  width: 100%;
-  border-spacing: 0;
-}
-
 td {
   vertical-align: middle;
 }
@@ -561,7 +572,7 @@ button {
 }
 
 #webapp-description {
-  margin: 10px 0;
+  margin-bottom: 10px;
 }
 
 #why-is-this-safe {
diff --git a/remoting/webapp/main.html b/remoting/webapp/main.html
index 00558245..a607812 100644
--- a/remoting/webapp/main.html
+++ b/remoting/webapp/main.html
@@ -182,6 +182,18 @@ found in the LICENSE file.
                  i18n-content="HOME_DAEMON_CHANGE_PIN_LINK"></a>
             </div>
           </div> <!-- daemon-control -->
+          <div id="host-list-empty" hidden>
+            <div id="host-list-empty-hosting-supported"
+                 class="host-list-empty-instructions"
+                 i18n-content="HOST_LIST_EMPTY_HOSTING_SUPPORTED"
+                 i18n-value-name-1="HOME_DAEMON_START_BUTTON">
+            </div>
+            <div id="host-list-empty-hosting-unsupported"
+                 class="host-list-empty-instructions"
+                 i18n-content="HOST_LIST_EMPTY_HOSTING_UNSUPPORTED"
+                 i18n-value-name-1="HOME_DAEMON_START_BUTTON">
+            </div>
+          </div>
         </div> <!-- me2me-content -->
       </section> <!-- host-list-div -->
     </div> <!-- home -->
diff --git a/remoting/webapp/remoting.js b/remoting/webapp/remoting.js
index a32d4a8..462ee7e 100644
--- a/remoting/webapp/remoting.js
+++ b/remoting/webapp/remoting.js
@@ -40,6 +40,7 @@ remoting.init = function() {
   remoting.formatIq = new remoting.FormatIq();
   remoting.hostList = new remoting.HostList(
       document.getElementById('host-list'),
+      document.getElementById('host-list-empty'),
       document.getElementById('host-list-error-message'),
       document.getElementById('host-list-refresh-failed-button'));
   remoting.toolbar = new remoting.Toolbar(
diff --git a/remoting/webapp/verify-webapp.py b/remoting/webapp/verify-webapp.py
index 038de01..cd56bc1 100755
--- a/remoting/webapp/verify-webapp.py
+++ b/remoting/webapp/verify-webapp.py
@@ -1,5 +1,5 @@
 #!/usr/bin/env python
-# Copyright (c) 2011 The Chromium Authors. All rights reserved.
+# 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.
 
@@ -13,6 +13,7 @@ annotated with the string "i18n-content", for example:
 This script also recognises localized strings in HTML and manifest.json files:
 
   HTML:          <span i18n-content="PRODUCT_NAME"></span>
+              or ...i18n-value-name-1="BUTTON_NAME"...
   manifest.json: __MSG_PRODUCT_NAME__
 
 Note that these forms must be exact; extra spaces are not permitted, though
@@ -39,9 +40,12 @@ prefix /*i18n-content*/
 
 def ExtractTagFromLine(line):
   """Extract a tag from a line of HTML, C++, JS or JSON."""
-  # HTML-style
+  # HTML-style (tags)
   m = re.search('i18n-content=[\'"]([^\'"]*)[\'"]', line)
   if m: return m.group(1)
+  # HTML-style (substitutions)
+  m = re.search('i18n-value-name-[1-9]=[\'"]([^\'"]*)[\'"]', line)
+  if m: return m.group(1)
   # C++/Javascript style
   m = re.search('/\*i18n-content\*/[\'"]([^\`"]*)[\'"]', line)
   if m: return m.group(1)