diff options
Diffstat (limited to 'remoting')
| -rw-r--r-- | remoting/webapp/me2mom/_locales/en/messages.json | 60 | ||||
| -rw-r--r-- | remoting/webapp/me2mom/choice.css | 25 | ||||
| -rw-r--r-- | remoting/webapp/me2mom/choice.html | 100 | ||||
| -rw-r--r-- | remoting/webapp/me2mom/remoting.js | 33 |
4 files changed, 121 insertions, 97 deletions
diff --git a/remoting/webapp/me2mom/_locales/en/messages.json b/remoting/webapp/me2mom/_locales/en/messages.json index a2ee0b7..b4946ed 100644 --- a/remoting/webapp/me2mom/_locales/en/messages.json +++ b/remoting/webapp/me2mom/_locales/en/messages.json @@ -41,9 +41,15 @@ "message": "Ask the user whose computer you wish to access to click \u2018Share This Computer\u2019 and give you the access code.", "description": "Description for the client app. This is shown to the client user above the access code entry box before the connection is started. Note that the 'Share This Computer' quote should be copied verbatim from the corresponding translation." }, - "DESCRIPTION_SHARE": { - "message": "With Chromoting you can easily and securely let another Chromium user see and control your computer.", - "description": "Description for the host app. This is shown to the host above the 'Share This Computer' button user before the client connects." + "DESCRIPTION_HOME": { + "message": "Chromoting allows you to securely share your computer over the Web. Both users must be running the Chromoting app, which can be found at $url$.", + "description": "Description for the home screen. This is shown when the app starts up, above buttons to share or connect.", + "placeholders": { + "url": { + "content": "$1", + "example": "<a href=http://g.co/remote>g.co/remote</a>" + } + } }, "DISCONNECT_BUTTON_PLUS_SHORTCUT_LINUX": { "message": "Disconnect (Ctrl+Alt+Esc)", @@ -97,38 +103,10 @@ "message": "There was a problem accessing the server. Please try again.", "description": "Error message displayed if an access token could not be generated." }, - "FOOTER_CLIENT": { - "message": "Click here to $linkBegin$share this computer$linkEnd$ with another user.", - "description": "Instructions and hyperlink to switch from client mode to host mode.", - "placeholders": { - "linkBegin": { - "content": "$1", - "example": "<a href=...>" - }, - "linkEnd": { - "content": "$2", - "example": "</a>" - } - } - }, "FOOTER_CHROME_OS": { "message": "Sharing your Chromebook will be supported in a future update\u2026 stay tuned.", "description": "Footer text displayed on ChromeOS in lieu of the mode switch hyperlink." }, - "FOOTER_HOST": { - "message": "Click here to $linkBegin$access a shared computer$linkEnd$.", - "description": "Instructions and hyperlink to switch from host mode to client mode.", - "placeholders": { - "linkBegin": { - "content": "$1", - "example": "<a href=...>" - }, - "linkEnd": { - "content": "$2", - "example": "</a>" - } - } - }, "FOOTER_WAITING": { "message": "waiting for connection\u2026", "description": "Footer text displayed at the host after an access code has been generated, but before a client connects." @@ -137,6 +115,22 @@ "message": "Help", "description": "Help link, displayed in the top-left (assuming ltr layout) corner of the main screen. Clicking this takes the user to our FAQ." }, + "HOME_ACCESS_BUTTON": { + "message": "Access Now", + "description": "Clicking this button starts the desktop access process." + }, + "HOME_ACCESS_DESCRIPTION": { + "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_SHARE_BUTTON": { + "message": "Share Now", + "description": "Clicking this button starts the desktop sharing process." + }, + "HOME_SHARE_DESCRIPTION": { + "message": "Share this computer for another user to see and control.", + "description": "Description of the 'share' or 'host' functionality, displayed next to a button that instigates a share operation." + }, "INSTRUCTIONS_SHARE_ABOVE": { "message": "To begin sharing your desktop, give the access code below to the person who will be assisting you.", "description": "Instructions shown above the access code when it is ready to be conveyed to the client." @@ -195,10 +189,6 @@ "message": "Chromoting", "description": "The product name. Displayed in various Chromium pages, including the New Tab page, and displayed prominently on the app's main page." }, - "SHARE_BUTTON": { - "message": "Share This Computer", - "description": "Label for the share button on the host-side. Clicking this button generates an access code to be conveyed to the client." - }, "STOP_SHARING_BUTTON": { "message": "Stop Sharing", "description": "Label for the 'stop sharing' button on the host-side. Clicking this button disconnects the client." diff --git a/remoting/webapp/me2mom/choice.css b/remoting/webapp/me2mom/choice.css index 2dd1b01..779949c 100644 --- a/remoting/webapp/me2mom/choice.css +++ b/remoting/webapp/me2mom/choice.css @@ -151,6 +151,31 @@ label { margin-bottom: 10px; } +.mode-select-button { + width: 100%; + height: 32px; + white-space: nowrap; +} + +.mode-select-label { + padding-__MSG_@@bidi_end_edge__: 20px; +} + +.mode-select-table { + margin-__MSG_@@bidi_start_edge__: 40px; + width: 600px; /* width + margin = body width */ + border-collapse: collapse; + margin-top: 40px; +} + +.mode-select-table-spacer { + height: 20px; +} + +.mode-select-table-underline td { + border-bottom: 1px solid #c6c6c6; +} + .hide-scrollbars { overflow-y: hidden; } diff --git a/remoting/webapp/me2mom/choice.html b/remoting/webapp/me2mom/choice.html index 781a644..a873d78 100644 --- a/remoting/webapp/me2mom/choice.html +++ b/remoting/webapp/me2mom/choice.html @@ -35,25 +35,23 @@ found in the LICENSE file. <!-- loading-mode is initially visible, but becomes hidden as soon as an AppMode is selected by remoting.init. All other divs are initially hidden, but are shown appropriately when the mode changes. --> - <!-- TODO(jamiewalch): This string is not localized because by the time we - get around to running localize(), it's hidden anyway. --> <section id="loading-mode" data-ui-mode=""> <em>Loading…</em> </section> <!-- loading-mode --> <div class="top-primary" - data-ui-mode="client host" + data-ui-mode="home client host" hidden> <span id="email-status"> <span id="current-email"></span> - <span data-ui-mode="client.unconnected host.unshared"> + <span data-ui-mode="home client.unconnected"> (<a href="#" onclick="remoting.clearOAuth2();" - i18n-content="SIGN_OUT_BUTTON"></a>) + i18n-content="SIGN_OUT_BUTTON"></a>) </span> </span> </div> - <div class="top-secondary" data-ui-mode="auth client host"> + <div class="top-secondary" data-ui-mode="auth home client host"> <a href="https://www.google.com/support/chrome/bin/answer.py?answer=1649523" target="_blank" i18n-content="HELP"></a> </div> @@ -79,17 +77,16 @@ found in the LICENSE file. </div> </div> <!-- session-toolbar --> - <div id="main" data-ui-mode="auth host client" hidden> + <div id="main" data-ui-mode="auth home host client" hidden> <header class="choice-header"> <img id="icon" src="chromoting128.png"> <h1 class="icon-label"> - <span i18n-content="PRODUCT_NAME"> - </span> › <span i18n-content="MODE_AUTHORIZE" - data-ui-mode="auth"> - </span><span i18n-content="MODE_CONNECT" data-ui-mode="client"> - </span><span i18n-content="MODE_SHARE" data-ui-mode="host"> - </span> + <span i18n-content="PRODUCT_NAME"></span> + <span data-ui-mode="auth client host"> › </span> + <span i18n-content="MODE_AUTHORIZE" data-ui-mode="auth"></span> + <span i18n-content="MODE_CONNECT" data-ui-mode="client"></span> + <span i18n-content="MODE_SHARE" data-ui-mode="host"></span> </h1> </header> @@ -104,32 +101,58 @@ found in the LICENSE file. </div> </div> <!-- auth-panel --> - <div id="host-panel" data-ui-mode="host"> + <div data-ui-mode="home"> + <div class="description" + i18n-content="DESCRIPTION_HOME" + i18n-value-1="<a href='http://g.co/remote'>g.co/remote</a>"></div> + <table class="mode-select-table"> + <tr> + <td i18n-content="HOME_SHARE_DESCRIPTION" + class="mode-select-label"></td> + <td> + <button i18n-content="HOME_SHARE_BUTTON" + onclick="remoting.tryShare();" + class="mode-select-button" + 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" + class="mode-select-label"></td> + <td> + <button i18n-content="HOME_ACCESS_BUTTON" + onclick="remoting.setMode( + remoting.AppMode.CLIENT_UNCONNECTED);" + class="mode-select-button" + type="button"></button> + </td> + </tr> + </table> + </div> <!-- home --> - <div data-ui-mode="host.unshared"> - <div class="description" i18n-content="DESCRIPTION_SHARE"></div> - <div class="centered-button"> - <button class="big-button" - type="button" - onclick="remoting.tryShare();" - autofocus="autofocus" - i18n-content="SHARE_BUTTON"></button> - </div> - </div> <!-- host.unshared --> + <div id="host-panel" data-ui-mode="host"> <div data-ui-mode="host.waiting-for-code" class="message" i18n-content="MESSAGE_GENERATING"> </div> <!-- host.waiting-for-code --> <div data-ui-mode="host.waiting-for-connection"> - <div class="description" i18n-content="INSTRUCTIONS_SHARE_ABOVE"></div> + <div class="description" + i18n-content="INSTRUCTIONS_SHARE_ABOVE"></div> <div id="access-code-display" dir="ltr"></div> <div id="access-code-countdown-container"> <div id="access-code-countdown" class="expiring" hidden> - <span id="seconds-remaining" i18n-content="ACCESS_CODE_TIMER"></span> + <span id="seconds-remaining" + i18n-content="ACCESS_CODE_TIMER"></span> </div> </div> - <div class="description" i18n-content="INSTRUCTIONS_SHARE_BELOW"></div> + <div class="description" + i18n-content="INSTRUCTIONS_SHARE_BELOW"></div> </div> <!-- host.waiting-for-connection --> <div data-ui-mode="host.shared"> @@ -156,7 +179,7 @@ found in the LICENSE file. <button type="button" class="big-button" autofocus="autofocus" - onclick="remoting.setMode('host.unshared');" + onclick="remoting.setMode(remoting.AppMode.HOME);" i18n-content="OK"> </button> </div> @@ -174,6 +197,10 @@ found in the LICENSE file. <input id="access-code-entry" type="text" autofocus="autofocus"/> <button id="connect-button" class="big-button" type="submit" i18n-content="CONNECT_BUTTON"></button> + <button class="big-button" type="button" + i18n-content="CANCEL" + onclick="remoting.setMode(remoting.AppMode.HOME);"> + </button> </form> </div> <!-- code-entry-row --> </div> <!-- client.unconnected --> @@ -205,29 +232,20 @@ found in the LICENSE file. onclick="remoting.setMode( remoting.AppMode.CLIENT_UNCONNECTED);"> </button> - </div> + </div> <!-- client.connect-failed client.session-finished --> </div> <!-- client-panel --> - <img id="divider-bottom" src="dividerbottom.png"> + <img id="divider-bottom" + src="dividerbottom.png" + data-ui-mode="auth host client"> <footer class="choice-footer"> - <div id="client-footer-text" data-ui-mode="client.unconnected"> - <span i18n-content="FOOTER_CLIENT" - i18n-value-1="<a href='#' onclick='remoting.setAppMode(remoting.AppMode.HOST);'>" - i18n-value-2="</a>"></span> - </div> <!-- client-footer-text --> <div id="client-footer-text-cros" data-ui-mode="client.unconnected" i18n-content="FOOTER_CHROME_OS"> </div> <!-- client-footer-text-cros --> - <div id="host-footer-text" data-ui-mode="host.unshared"> - <span i18n-content="FOOTER_HOST" - i18n-value-1="<a href='#' onclick='remoting.setAppMode(remoting.AppMode.CLIENT);'>" - i18n-value-2="</a>"></span> - </div> <!-- host-footer-text --> - <div id="waiting-footer" data-ui-mode="host.waiting-for-connection host.waiting-for-code"> <img src="spinner.gif"> diff --git a/remoting/webapp/me2mom/remoting.js b/remoting/webapp/me2mom/remoting.js index 2c0d24c..e3ca33b 100644 --- a/remoting/webapp/me2mom/remoting.js +++ b/remoting/webapp/me2mom/remoting.js @@ -20,6 +20,7 @@ function pluginLostFocus_() { /** @enum {string} */ remoting.AppMode = { + HOME: 'home', UNAUTHENTICATED: 'auth', CLIENT: 'client', CLIENT_UNCONNECTED: 'client.unconnected', @@ -27,7 +28,6 @@ remoting.AppMode = { CLIENT_CONNECT_FAILED: 'client.connect-failed', CLIENT_SESSION_FINISHED: 'client.session-finished', HOST: 'host', - HOST_UNSHARED: 'host.unshared', HOST_WAITING_FOR_CODE: 'host.waiting-for-code', HOST_WAITING_FOR_CONNECTION: 'host.waiting-for-connection', HOST_SHARED: 'host.shared', @@ -220,6 +220,7 @@ remoting.getMajorMode = function() { remoting.tryShare = function() { remoting.debug.log('Attempting to share...'); + remoting.lastShareWasCancelled = false; if (remoting.oauth2.needsNewAccessToken()) { remoting.debug.log('Refreshing token...'); remoting.oauth2.refreshAccessToken(function() { @@ -360,8 +361,12 @@ function onStateChanged_() { if (remoting.currentMode != remoting.AppMode.HOST_SHARE_FAILED) { // If an error is being displayed, then the plugin should not be able to // hide it by setting the state. Errors must be dismissed by the user - // clicking OK, which puts the app into mode HOST_UNSHARED. - remoting.setMode(remoting.AppMode.HOST_SHARE_FINISHED); + // clicking OK, which puts the app into mode HOME. + if (remoting.lastShareWasCancelled) { + remoting.setMode(remoting.AppMode.HOME); + } else { + remoting.setMode(remoting.AppMode.HOST_SHARE_FINISHED); + } } plugin.parentNode.removeChild(plugin); } else if (state == plugin.ERROR) { @@ -396,6 +401,7 @@ function showShareError_(errorTag) { remoting.cancelShare = function() { remoting.debug.log('Canceling share...'); + remoting.lastShareWasCancelled = true; var plugin = /** @type {remoting.HostPlugin} */ document.getElementById(remoting.HOST_PLUGIN_ID); try { @@ -635,31 +641,16 @@ remoting.cancelPendingOperation = function() { } /** - * Changes the major-mode of the application (Eg., client or host). - * - * @param {remoting.AppMode} mode The mode to shift the application into. - * @return {void} Nothing. - */ -remoting.setAppMode = function(mode) { - window.localStorage.setItem(KEY_APP_MODE_, mode); - remoting.setMode(getAppStartupMode()); -} - -/** * Gets the major-mode that this application should start up in. * - * @return {remoting.AppMode} The mode (client or host) to start in. + * @return {remoting.AppMode} The mode to start in. */ function getAppStartupMode() { if (!remoting.oauth2.isAuthenticated()) { return remoting.AppMode.UNAUTHENTICATED; } if (isHostModeSupported()) { - var mode = window.localStorage.getItem(KEY_APP_MODE_); - if (mode == remoting.AppMode.CLIENT) { - return remoting.AppMode.CLIENT_UNCONNECTED; - } - return remoting.AppMode.HOST_UNSHARED; + return remoting.AppMode.HOME; } else { return remoting.AppMode.CLIENT_UNCONNECTED; } @@ -671,7 +662,7 @@ function getAppStartupMode() { * @return {boolean} True if Host mode is supported. */ function isHostModeSupported() { - // Currently, ChromeOS is not supported. + // Currently, hosting on Chromebooks is not supported. return !navigator.userAgent.match(/\bCrOS\b/); } |