From ba60dec273cbb92552bb2f34ae07755327f3da4f Mon Sep 17 00:00:00 2001 From: "jamiewalch@google.com" Date: Thu, 19 Jul 2012 21:27:42 +0000 Subject: Merge 145045 - Remove 'Enable' button on unsupported platforms. Added 'No hosts' message. BUG=131403 TEST=Manual Review URL: https://chromiumcodereview.appspot.com/10703034 TBR=simonmorris@chromium.org Review URL: https://chromiumcodereview.appspot.com/10815015 git-svn-id: svn://svn.chromium.org/chrome/branches/1180/src@147532 0039d316-1c4b-4281-b951-d872f2087c98 --- remoting/remoting.gyp | 17 ++++++++-------- remoting/resources/host_setup_instructions.png | Bin 0 -> 889 bytes remoting/webapp/_locales/en/messages.json | 26 ++++++++++++++++++++----- remoting/webapp/host_controller.js | 23 ++++++++-------------- remoting/webapp/host_list.js | 16 ++++++++++++--- remoting/webapp/l10n.js | 21 +++++++++++++------- remoting/webapp/main.css | 23 ++++++++++++++++------ remoting/webapp/main.html | 12 ++++++++++++ remoting/webapp/remoting.js | 1 + remoting/webapp/verify-webapp.py | 8 ++++++-- 10 files changed, 101 insertions(+), 46 deletions(-) create mode 100644 remoting/resources/host_setup_instructions.png diff --git a/remoting/remoting.gyp b/remoting/remoting.gyp index c1f6d69..30c664f 100644 --- a/remoting/remoting.gyp +++ b/remoting/remoting.gyp @@ -116,10 +116,19 @@ }], ], 'remoting_webapp_files': [ + 'resources/chromoting16.png', + 'resources/chromoting48.png', + 'resources/chromoting128.png', + 'resources/disclosure_arrow_down.png', + 'resources/disclosure_arrow_right.png', + 'resources/host_setup_instructions.png', 'resources/icon_cross.png', 'resources/icon_host.png', 'resources/icon_pencil.png', 'resources/icon_warning.png', + 'resources/infographic_my_computers.png', + 'resources/infographic_remote_assistance.png', + 'resources/tick.png', 'webapp/client_plugin.js', 'webapp/client_plugin_async.js', 'webapp/client_screen.js', @@ -159,14 +168,6 @@ 'webapp/wcs.js', 'webapp/wcs_loader.js', 'webapp/xhr.js', - 'resources/chromoting16.png', - 'resources/chromoting48.png', - 'resources/chromoting128.png', - 'resources/disclosure_arrow_down.png', - 'resources/disclosure_arrow_right.png', - 'resources/infographic_my_computers.png', - 'resources/infographic_remote_assistance.png', - 'resources/tick.png', ], 'remoting_host_installer_mac_roots': [ 'host/installer/mac/', diff --git a/remoting/resources/host_setup_instructions.png b/remoting/resources/host_setup_instructions.png new file mode 100644 index 0000000..7d09318 Binary files /dev/null and b/remoting/resources/host_setup_instructions.png differ diff --git a/remoting/webapp/_locales/en/messages.json b/remoting/webapp/_locales/en/messages.json index cf5e90b..09002cf 100644 --- a/remoting/webapp/_locales/en/messages.json +++ b/remoting/webapp/_locales/en/messages.json @@ -94,7 +94,7 @@ "placeholders": { "url": { "content": "$1", - "example": "g.co/remote" + "example": "chrome.google.com/remotedesktop" } } }, @@ -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_DIALOG_DESCRIPTION": { "message": "To protect access to this computer, please choose a PIN. This PIN will be required when connecting from another location.", "description": "Explanatory text displayed when the user enables remote access or changes the PIN." diff --git a/remoting/webapp/host_controller.js b/remoting/webapp/host_controller.js index 5f45dae..27c6169 100644 --- a/remoting/webapp/host_controller.js +++ b/remoting/webapp/host_controller.js @@ -72,21 +72,14 @@ remoting.HostController.prototype.state = function() { 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 dd5a546..4a0014d 100644 --- a/remoting/webapp/host_list.js +++ b/remoting/webapp/host_list.js @@ -18,10 +18,11 @@ var remoting = remoting || {}; * if the host-list is empty. * * @constructor - * @param {Element} table The HTML to contain host-list. + * @param {Element} table The HTML
to contain host-list. + * @param {Element} noHosts The HTML
containing the "no hosts" message. * @param {Element} errorDiv The HTML
to display error messages. */ -remoting.HostList = function(table, errorDiv) { +remoting.HostList = function(table, noHosts, errorDiv) { /** * @type {Element} * @private @@ -30,6 +31,13 @@ remoting.HostList = function(table, errorDiv) { /** * @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.errorDiv_ = errorDiv; /** @@ -173,7 +181,9 @@ remoting.HostList.prototype.display = function(thisHostId) { this.errorDiv_.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 2eb073a..df2b2ea 100644 --- a/remoting/webapp/main.css +++ b/remoting/webapp/main.css @@ -245,6 +245,7 @@ h2 { line-height:24px; font-weight: normal; color: #222; + margin-bottom: 10px; } section > h2 { @@ -299,6 +300,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; @@ -368,11 +384,6 @@ section { min-width: 72px; } -.host-list-table { - width: 100%; - border-spacing: 0; -} - td { vertical-align: middle; } @@ -545,7 +556,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 1c1d822..32d7be7 100644 --- a/remoting/webapp/main.html +++ b/remoting/webapp/main.html @@ -177,6 +177,18 @@ found in the LICENSE file. i18n-content="HOME_DAEMON_CHANGE_PIN_LINK">
+
diff --git a/remoting/webapp/remoting.js b/remoting/webapp/remoting.js index 1737436..18db277 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')); remoting.toolbar = new remoting.Toolbar( document.getElementById('session-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: + 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) -- cgit v1.1