Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(671)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: remoting/webapp/me2mom/choice.html

Issue 7078022: Fix up remoting UI to make it closer to spec (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: added comment about v8 bug Created 9 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
« no previous file with comments | « remoting/webapp/me2mom/choice.css ('k') | remoting/webapp/me2mom/chromoting128.png » ('j') | remoting/webapp/me2mom/remoting_session.js » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!doctype html> 1 <!doctype html>
2 <!-- 2 <!--
3 Copyright (c) 2011 The Chromium Authors. All rights reserved. 3 Copyright (c) 2011 The Chromium Authors. All rights reserved.
4 Use of this source code is governed by a BSD-style license that can be 4 Use of this source code is governed by a BSD-style license that can be
5 found in the LICENSE file. 5 found in the LICENSE file.
6 --> 6 -->
7 7
8 <html> 8 <html>
9
10 <head> 9 <head>
11 <link rel="stylesheet" type="text/css" href="main.css" /> 10 <meta charset="utf-8" />
12 <script type="text/javascript" src="remoting.js"></script> 11 <link rel="shortcut icon" href="chromoting128.png" />
13 <script type="text/javascript" src="oauth2.js"></script> 12 <link rel="stylesheet" href="main.css" />
14 <title>Select Role</title> 13 <link rel="stylesheet" href="choice.css" />
14 <script src="remoting.js"></script>
15 <script src="oauth2.js"></script>
16 <title>Chromoting</title>
15 </head> 17 </head>
16 18
17 <body onload="init();"> 19 <body>
20 <div id="auth-panel">
21 <span id="oauth2-entry">
22 <form action="" onsubmit="authorizeOAuth2(); return false;">
23 <label for="oauth2-code">OAuth2 Token:</label>
24 <input id="oauth2-code" class="display-inline" type="text"
25 onkeyup="handleOAuth2CodeChange();"
26 onchange="handleOAuth2CodeChange();" />
27 <input id="oauth2-submit-button" class="display-inline"
28 type="submit" />
29 <input id="oauth2-code-button" class="display-inline" type="button"
30 onclick="remoting.oauth2.openOAuth2Window(); return false;"
31 value="Get OAuth2 Token&hellip;" />
32 <input id="oauth2-clear-button" class="display-inline" type="button"
33 onclick="clearOAuth2(); return false;" value="Revoke" />
34 </form>
35 </span> <!-- oauth2-entry -->
18 36
19 <!-- Auth panel --> 37 <span id="email-entry">
20 <div id="auth_panel"> 38 <form action=""
21 OAuth2 Token: <span id="oauth2_status"></span> 39 onsubmit="setEmail(this['new-email'].value); return false;">
22 <button onclick="remoting.oauth2.openOAuth2Window();" 40 <label for="new-email">Email:</label>
23 id="oauth2_code_button"> 41 <span id="current-email" class="display-inline"></span>
24 Open OAuth2 Window 42 <input id="new-email" class="display-inline" name="new-email"
25 </button> 43 type="text" />
26 <button onclick="clearOAuth2();" id="oauth2_clear_button"> 44 <input id="email-submit-button" class="display-inline"
27 Clear 45 type="submit" />
28 </button> 46 <input id="change-email-button" class="display-inline" type="button"
29 <form id='oauth2_form' action="" 47 onclick="setEmail(''); return false;" value="Change Email" />
30 onsubmit="authorizeOAuth2(this['oauth2_code'].value); return false;"
31 style="display:none">
32 <label for="auth2_code">OAuth2 Code (from window):</label>
33 <input type="text" name="oauth2_code" id="oauth2_code" />
34 <input type="submit"/>
35 </form>
36 <div id="email_div">
37 Current Email: <span id="current_email"></span>
38 <form id='new_email_form' action=""
39 onsubmit="setEmail(this); return false;">
40 <label for="new_email">New Email:</label>
41 <input type="text" name="new_email" id="new_email" />
42 <input type="submit" name="Set E-mail"/>
43 </form> 48 </form>
44 </div> 49 </span> <!-- email-entry -->
45 <div id="xmpp_div" style="display:none;">
46 XMPP Token: <span id="xmpp_status"></span>
47 <button onclick="clearXmpp();" id="xmpp_clear" style="display:none;">
48 Clear
49 </button>
50 50
51 <form id='xmpp_form' action="" 51 </div> <!-- auth-panel -->
52 onsubmit="authorizeXmpp(this); return false;"> 52
53 <label for="xmpp_username">Email:</label> 53 <div id="main-panel">
54 <input type="text" name="xmpp_username" id="xmpp_username" /> 54 <header>
55 <label for="xmpp_password">App-specific Password:</label> 55 <img id="icon" src="chromoting128.png">
56 <input type="password" name="xmpp_password" id="xmpp_password" /> 56 <h1 class="icon-label host-element display-inline">
57 <div id="xmpp_captcha" style="display:none;"> 57 Chromoting&nbsp;˃&nbsp;Share
Jamie 2011/06/02 00:55:32 The greater-than symbol here (and below) is small
58 <img style="display:block;" id="xmpp_captcha_img" /> 58 </h1>
59 <input type="hidden" name="xmpp_captcha_token" /> 59 <h1 class="icon-label client-element display-inline">
60 <input type="text" name="xmpp_captcha_result" /> 60 Chromoting&nbsp;˃&nbsp;Connect
Jamie 2011/06/02 00:12:29 Didn't we decide not to use Chromoting in any user
61 </h1>
62 <img id="divider-top" src="dividertop.png">
63 </header>
64
65 <section id="host-section" class="host-element">
66 <div id="unshared" class="mode">
67 <div class="description">
68 With Chromoting you can easily let another Chrome user see and
69 control your computer.
61 </div> 70 </div>
62 <input type="submit"/> 71 <form class="centered-form">
63 </form> 72 <button id="share-button" class="auth-status-control"
64 <span id="xmpp_last_error" style="display:none"></span> 73 type="button" onclick="tryShare(); return false;">
65 <iframe id="xmpp_error" style="display:none"> 74 Share this computer
66 <p> No iframe support 75 </button>
67 </iframe> 76 </form>
68 </div> 77 </div> <!-- unshared -->
78
79 <div id="preparing-to-share" class="mode">
80 <div class="message">
81 Connecting...
82 </div>
83 </div> <!-- preparing-to-share -->
84
85 <div id="ready-to-share" class="mode">
86 <div class="description">
87 To begin sharing your desktop, read out the access code below to the
88 person who will be assisting you.
89 </div>
90 <div id="access-code-display">
91 FAILED!
92 </div>
93 <div class="message">
94 Waiting for connection...
95 </div>
96 <form class="centered-form">
97 <button type="button" onclick="cancelShare(); return false;">
98 Cancel
99 </button>
100 </form>
101 </div> <!-- ready-to-share -->
102
103 <div id="shared" class="mode">
104 <div class="message">
105 Your desktop is currently being shared.
106 </div>
107 <form class="centered-form">
108 <button type="button" onclick="cancelShare(); return false;">
109 Stop sharing
110 </button>
111 </form>
112 </div> <!-- shared -->
113 </section> <!-- host-section -->
114
115 <section id="client-section" class="client-element">
116 <div id="unconnected" class="mode">
117 <div class="description">
118 Have the user whose computer you wish to access click
119 ‘Share this computer with another user’ and then have them read
120 their access code to you.
121 </div>
122 <div id="access-code-entry-row">
123 <form action="">
124 <label class="auth-status-control" for="access-code-entry">
125 Access code:
126 </label>
127 <input id="access-code-entry" class="auth-status-control"
128 type="text"/>
129 </form>
130 <form class="centered-form">
131 <button id="connect-button" class="auth-status-control"
132 type="button" onclick="tryConnect(); return false;">
133 Connect
134 </button>
135 </form>
136 </div> <!-- code-entry-row -->
137 </div> <!-- unconnected -->
138
139 <div id="connecting" class="mode">
140 <div class="message">
141 Verifying access code...
142 <!-- TODO(jamiewalch): Implement Cancel, being careful when ignoring
143 the eventual server response not to ignore responses for any
144 subsequent requests.
145 <form class="centered-form">
146 <button onclick="cancelConnect(); return false;">
147 Cancel
148 </button>
149 </form>
150 -->
151 </div>
152 </div> <!-- connecting -->
153
154 <div id="connect-failed" class="mode">
155 <div id="invalid-access-code" class="message">
156 Invalid access code.
157 </div>
158 <div id="other-connect-error" class="message">
159 An error occurred. The server response was
160 <div id="server-response"></div>.
161 </div>
162 <form class="centered-form">
163 <button type="button"
164 onclick="setClientMode('unconnected'); return false;">
165 OK
166 </button>
167 </form>
168 </div> <!-- connect-failed -->
169 </section> <!-- client-section -->
170
171 <footer>
172 <img id="divider-bottom" src="dividerbottom.png">
173 <div class="client-element">
174 Click here to
175 <a class="switch-mode"
176 href="#"
Jamie 2011/06/02 00:12:29 I had originally used different anchor names for t
177 onclick="setGlobalModePersistent(remoting.HOST_MODE);
178 return false;">
179 share this computer with another user</a>.
180 </div> <!-- client-footer -->
181
182 <div class="host-element">
183 Click here to <a class="switch-mode"
184 href="#"
185 onclick="setGlobalModePersistent(remoting.CLIENT_MODE);
186 return false;">
187 access a shared computer</a>.
188 </div> <!-- host-footer -->
189 </footer>
190 </div> <!-- main-panel -->
191 <div id="plugin-wrapper">
69 </div> 192 </div>
70
71 <!-- Host UI -->
72 <div id="host">
73 <div id="plugin_wrapper">
74 </div>
75
76 <div id="unshared">
77 <p class="message">
78 Your desktop is currently unshared.
79 </p>
80 <button type="button"
81 class="ok"
82 onclick="tryShare();">
83 Start sharing
84 </button>
85 <p>
86 <a class="switch_mode"
87 href="#c"
88 onclick="setGlobalModePersistent('client');">
89 I want to connect to another computer instead...
90 </a>
91 </p>
92 </div>
93
94 <div id="preparing_to_share">
95 <p class="message">
96 Connecting...
97 </p>
98 </div>
99
100 <div id="ready_to_share">
101 <p class="message">
102 To begin sharing your desktop, read out the access code below to the
103 person who will be assisting you.
104 </p>
105 <p id="access_code_display">
106 FAILED!
107 </p>
108 <p class="message">
109 Waiting for connection...
110 <button type="button"
111 class="cancel"
112 onclick="cancelShare();">
113 Cancel
114 </button>
115 </p>
116 <p class="message mock">
117 (For this mock-up, this message will disappear automatically.)
118 </p>
119 </div>
120
121 <div id="shared">
122 <p class="message">
123 Your desktop is currently being shared.
124 </p>
125 <button type="button"
126 class="cancel"
127 onclick="cancelShare();">
128 Stop sharing
129 </button>
130 </div>
131
132 </div>
133
134 <!-- Client UI -->
135 <div id="client">
136
137 <div id="unconnected">
138 <p class="message">
139 To connect to another computer, enter the access code provided to you
140 by that computer's user.
141 </p>
142 <form action="" onsubmit="tryConnect(this['access_code_entry'].value);
143 return false;">
144 <input type="text"
145 id="access_code_entry"/>
146 <button type="submit">
147 Connect
148 </button>
149 </form>
150 <a class="switch_mode"
151 href="#h"
152 onclick="setGlobalModePersistent('host');">
153 I want to share this computer instead...
154 </a>
155 </div>
156
157 <div id="connecting">
158 <p class="message">
159 Verifying access code...
160 <!-- TODO(jamiewalch): Implement Cancel, being careful when ignoring
161 the eventual server response not to ignore responses for any
162 subsequent requests.
163 <button type="button"
164 class="cancel"
165 onclick="cancelConnect();">
166 Cancel
167 </button>
168 -->
169 </p>
170 </div>
171
172 <div id="connect_failed">
173 <p class="message"
174 id="invalid_access_code">
175 Invalid access code.
176 </p>
177 <p class="message"
178 id="other_connect_error">
179 An error occurred. The server response was
180 <strong id="server_response"></strong>.
181 </p>
182 <button type="button"
183 class="ok"
184 onclick="setClientMode('unconnected');">
185 OK
186 </button>
187 </div>
188
189 </div>
190
191 </body> 193 </body>
192
193 </html> 194 </html>
OLDNEW
« no previous file with comments | « remoting/webapp/me2mom/choice.css ('k') | remoting/webapp/me2mom/chromoting128.png » ('j') | remoting/webapp/me2mom/remoting_session.js » ('J')

Powered by Google App Engine
This is Rietveld 408576698