Skip to content

Commit

Permalink
Implemented home screen.
Browse files Browse the repository at this point in the history 
BUG=None
TEST=Manual

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

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@105345 0039d316-1c4b-4281-b951-d872f2087c98
  • Loading branch information
jamiewalch@google.com committed Oct 13, 2011
1 parent bf5052f commit a3025c6
Show file tree
Hide file tree
Showing 4 changed files with 121 additions and 97 deletions.
60 changes: 25 additions & 35 deletions remoting/webapp/me2mom/_locales/en/messages.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)",
Expand Down Expand Up @@ -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."
Expand All @@ -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."
Expand Down Expand Up @@ -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."
Expand Down
25 changes: 25 additions & 0 deletions remoting/webapp/me2mom/choice.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
100 changes: 59 additions & 41 deletions remoting/webapp/me2mom/choice.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,25 +35,23 @@
<!-- 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&hellip;</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>
Expand All @@ -79,17 +77,16 @@
</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>&nbsp;&rsaquo;&nbsp;<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">&nbsp;&rsaquo;&nbsp;</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>

Expand All @@ -104,32 +101,58 @@ <h1 class="icon-label">
</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">
Expand All @@ -156,7 +179,7 @@ <h1 class="icon-label">
<button type="button"
class="big-button"
autofocus="autofocus"
onclick="remoting.setMode('host.unshared');"
onclick="remoting.setMode(remoting.AppMode.HOME);"
i18n-content="OK">
</button>
</div>
Expand All @@ -174,6 +197,10 @@ <h1 class="icon-label">
<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 -->
Expand Down Expand Up @@ -205,29 +232,20 @@ <h1 class="icon-label">
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">
Expand Down
33 changes: 12 additions & 21 deletions remoting/webapp/me2mom/remoting.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,14 @@ function pluginLostFocus_() {

/** @enum {string} */
remoting.AppMode = {
HOME: 'home',
UNAUTHENTICATED: 'auth',
CLIENT: 'client',
CLIENT_UNCONNECTED: 'client.unconnected',
CLIENT_CONNECTING: 'client.connecting',
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',
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -634,32 +640,17 @@ 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;
}
Expand All @@ -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/);
}

Expand Down

0 comments on commit a3025c6

Please sign in to comment.