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

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: turned on strict 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 | « no previous file | remoting/webapp/me2mom/chromoting128.png » ('j') | remoting/webapp/me2mom/remoting.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 9
10 <head> 10 <head>
11 <link rel="stylesheet" type="text/css" href="main.css" /> 11 <link rel="stylesheet" type="text/css" href="main.css" />
12 <script type="text/javascript" src="remoting.js"></script> 12 <script type="text/javascript" src="remoting.js"></script>
13 <script type="text/javascript" src="oauth2.js"></script> 13 <script type="text/javascript" src="oauth2.js"></script>
14 <title>Select Role</title> 14 <title>Select Role</title>
15 </head> 15 </head>
16 16
17 <body onload="init();"> 17 <body onload="init();">
18 18
19 <!-- Auth panel -->
20 <div id="auth_panel"> 19 <div id="auth_panel">
Jamie 2011/05/31 18:11:49 I think it would be good if this panel had a diffe
dmac 2011/06/01 23:01:58 Done.
21 OAuth2 Token: <span id="oauth2_status"></span> 20 <div id="oauth2_div">
22 <button onclick="remoting.oauth2.openOAuth2Window();" 21 OAuth2 Token:
23 id="oauth2_code_button"> 22 <form id='oauth2_form' action=""
24 Open OAuth2 Window 23 onsubmit="authorizeOAuth2(this['oauth2_code'].value);
25 </button> 24 return false;">
26 <button onclick="clearOAuth2();" id="oauth2_clear_button"> 25 <input type="text" name="oauth2_code"
27 Clear 26 onkeyup="handleOAuth2CodeChange();"
28 </button> 27 onchange="handleOAuth2CodeChange(this);" id="oauth2_code" />
Jamie 2011/05/31 18:11:49 Why trap both onkeyup and onchange, and why pass '
Jamie 2011/05/31 18:11:49 Having the id after the onchange makes it easy to
dmac 2011/06/01 23:01:58 I need onkeyup to handle typing, and onchange to h
Jamie 2011/06/02 00:12:29 I think that passing 'this' is the way to go. It m
29 <form id='oauth2_form' action="" 28 <input type="submit" id="oauth2_submit_button" />
30 onsubmit="authorizeOAuth2(this['oauth2_code'].value); return false;" 29 <input type="button" onclick="remoting.oauth2.openOAuth2Window();"
31 style="display:none"> 30 id="oauth2_code_button" value="Get OAuth2 Token&hellip;" />
32 <label for="auth2_code">OAuth2 Code (from window):</label> 31 <input type="button" onclick="clearOAuth2();"
33 <input type="text" name="oauth2_code" id="oauth2_code" /> 32 id="oauth2_clear_button" value="Revoke" />
34 <input type="submit"/> 33 </form>
35 </form> 34 </div> <!-- oauth2_div -->
35
36 <div id="email_div"> 36 <div id="email_div">
37 Current Email: <span id="current_email"></span> 37 Email:<span id="current_email"></span>
Jamie 2011/05/31 18:11:49 Add a space after "Email:". It looks a bit cramped
dmac 2011/06/01 23:01:58 Done.
38 <form id='new_email_form' action="" 38 <form id='new_email_form' action=""
39 onsubmit="setEmail(this); return false;"> 39 onsubmit="setEmail(this['new_email'].value); return false;">
40 <label for="new_email">New Email:</label>
41 <input type="text" name="new_email" id="new_email" /> 40 <input type="text" name="new_email" id="new_email" />
42 <input type="submit" name="Set E-mail"/> 41 <input type="submit" id="email_submit_button" name="Set E-mail"/>
42 <input type="button" onclick="setEmail('')"
43 id="change_email_button" value="Change Email" />
43 </form> 44 </form>
44 </div> 45 </div> <!-- email_div -->
46
45 <div id="xmpp_div" style="display:none;"> 47 <div id="xmpp_div" style="display:none;">
46 XMPP Token: <span id="xmpp_status"></span> 48 XMPP Token: <span id="xmpp_status"></span>
47 <button onclick="clearXmpp();" id="xmpp_clear" style="display:none;"> 49 <button onclick="clearXmpp();" id="xmpp_clear" style="display:none;">
48 Clear 50 Clear
49 </button> 51 </button>
50
51 <form id='xmpp_form' action="" 52 <form id='xmpp_form' action=""
52 onsubmit="authorizeXmpp(this); return false;"> 53 onsubmit="authorizeXmpp(this); return false;">
53 <label for="xmpp_username">Email:</label> 54 <label for="xmpp_username">Email:</label>
54 <input type="text" name="xmpp_username" id="xmpp_username" /> 55 <input type="text" name="xmpp_username" id="xmpp_username" />
55 <label for="xmpp_password">App-specific Password:</label> 56 <label for="xmpp_password">App-specific Password:</label>
56 <input type="password" name="xmpp_password" id="xmpp_password" /> 57 <input type="password" name="xmpp_password" id="xmpp_password" />
57 <div id="xmpp_captcha" style="display:none;"> 58 <div id="xmpp_captcha" style="display:none;">
58 <img style="display:block;" id="xmpp_captcha_img" /> 59 <img style="display:block;" id="xmpp_captcha_img" />
59 <input type="hidden" name="xmpp_captcha_token" /> 60 <input type="hidden" name="xmpp_captcha_token" />
60 <input type="text" name="xmpp_captcha_result" /> 61 <input type="text" name="xmpp_captcha_result" />
61 </div> 62 </div>
62 <input type="submit"/> 63 <input type="submit"/>
63 </form> 64 </form>
64 <span id="xmpp_last_error" style="display:none"></span> 65 <span id="xmpp_last_error" style="display:none"></span>
65 <iframe id="xmpp_error" style="display:none"> 66 <iframe id="xmpp_error" style="display:none">
66 <p> No iframe support 67 <p> No iframe support
67 </iframe> 68 </iframe>
68 </div> 69 </div> <!-- xmpp_div -->
Jamie 2011/05/31 18:11:49 I think I'd lose this div entirely now. I know Alb
dmac 2011/06/01 23:01:58 Done.
69 </div>
70 70
71 <!-- Host UI --> 71 </div> <!-- auth_panel -->
72 <div id="host">
73 <div id="plugin_wrapper">
74 </div>
75 72
76 <div id="unshared"> 73 <div id="container">
Jamie 2011/05/31 18:11:49 Can we give this a more descriptive name, if it ne
dmac 2011/06/01 23:01:58 Done.
77 <p class="message"> 74 <header>
78 Your desktop is currently unshared. 75 <img height="64" width="64" src="chromoting128.png">
Jamie 2011/05/31 18:11:49 Do we have a 64x64 version of this icon? If not, w
dmac 2011/06/01 23:01:58 Why? the 128x128 looks fine since it's en even div
Jamie 2011/06/02 00:12:29 I thought it looked a bit more blurry than it migh
79 </p> 76 <h1 id="host_header" class="iconlabel">
80 <button type="button" 77 Chromoting&nbsp;>&nbsp;Share
81 class="ok" 78 </h1>
82 onclick="tryShare();"> 79 <h1 id="client_header" class="iconlabel">
83 Start sharing 80 Chromoting&nbsp;>&nbsp;Connect
84 </button> 81 </h1>
85 <p> 82 <img id="dividertop" src="dividertop.png">
86 <a class="switch_mode" 83 </header>
87 href="#c"
88 onclick="setGlobalModePersistent('client');">
89 I want to connect to another computer instead...
90 </a>
91 </p>
92 </div>
93 84
94 <div id="preparing_to_share"> 85 <section id="host_section">
95 <p class="message"> 86 <div id="plugin_wrapper">
96 Connecting... 87 </div>
97 </p>
98 </div>
99 88
100 <div id="ready_to_share"> 89 <div id="unshared">
101 <p class="message"> 90 <p>
102 To begin sharing your desktop, read out the access code below to the 91 With Chromoting you can easily let another Chrome user see and
103 person who will be assisting you. 92 control your computer.
104 </p> 93 </p>
105 <p id="access_code_display"> 94
106 FAILED! 95 <button id="share"
107 </p> 96 type="button"
108 <p class="message"> 97 class="ok"
109 Waiting for connection... 98 onclick="tryShare();"
99 style="width:173px">
Jamie 2011/05/31 18:11:49 Why specify the width explicitly?
dmac 2011/06/01 23:01:58 Thought I needed to. Turns out I don't, but there
100 Share this computer
101 </button>
Jamie 2011/05/31 18:11:49 Can we disable this button if the OAuth2 token isn
dmac 2011/06/01 23:01:58 Done.
102 </div> <!-- unshared -->
103
104 <div id="preparing_to_share">
105 <p class="message">
106 Connecting...
107 </p>
108 </div> <!-- preparing_to_share -->
Jamie 2011/05/31 18:11:49 This is never shown at present, correct? As long a
dmac 2011/06/01 23:01:58 It is shown... but we should fix it up so it shows
109
110 <div id="ready_to_share">
111 <p>
112 To begin sharing your desktop, read out the access code below to the
113 person who will be assisting you.
114 </p>
115 <div id="access_code_display">
116 FAILED!
117 </div>
118 <p class="message">
119 Waiting for connection...
120 </p>
121 <button type="button"
122 class="cancel"
123 onclick="cancelShare();"
124 style="width:100px">
125 Cancel
126 </button>
127 </div> <!-- ready_to_share -->
Jamie 2011/05/31 18:11:49 This div was never shown in my tests, although the
dmac 2011/06/01 23:01:58 Yes.. needs to be fixed.
128
129 <div id="shared">
130 <p class="message">
131 Your desktop is currently being shared.
132 </p>
110 <button type="button" 133 <button type="button"
111 class="cancel" 134 class="cancel"
112 onclick="cancelShare();"> 135 onclick="cancelShare();">
113 Cancel 136 Stop sharing
114 </button> 137 </button>
115 </p> 138 </div> <!-- shared -->
116 <p class="message mock"> 139 </section> <!-- host -->
117 (For this mock-up, this message will disappear automatically.)
118 </p>
119 </div>
120 140
121 <div id="shared"> 141 <section id="client_section">
122 <p class="message"> 142 <div id="unconnected">
123 Your desktop is currently being shared. 143 <p>
124 </p> 144 Have the user whose computer you wish to access click
125 <button type="button" 145 &lsquo;Share this computer&rsquo; then read to you their security
Jamie 2011/05/31 18:11:49 s/security/access/
dmac 2011/06/01 23:01:58 Done.
126 class="cancel" 146 code.
127 onclick="cancelShare();"> 147 </p>
128 Stop sharing 148 <div id="codeentryrow"
129 </button> 149 <form action="">
130 </div> 150 <label for="access_code_entry">Security code</label>
151 <input type="text"
152 id="access_code_entry"/>
153 <button onclick="tryConnect();" style="width: 80px">
Jamie 2011/05/31 18:11:49 Get rid of width?
dmac 2011/06/01 23:01:58 see above
154 Connect
155 </button>
Jamie 2011/05/31 18:11:49 Can we disable this if either the Oauth2 token or
dmac 2011/06/01 23:01:58 Done.
156 </form>
157 </div> <!-- codeentryrow -->
158 </div> <!-- unconnected -->
131 159
132 </div> 160 <div id="connecting">
161 <p class="message">
162 Verifying access code...
163 <!-- TODO(jamiewalch): Implement Cancel, being careful when ignoring
164 the eventual server response not to ignore responses for any
165 subsequent requests.
166 <button type="button"
167 class="cancel"
168 onclick="cancelConnect();">
169 Cancel
170 </button>
171 -->
172 </p>
173 </div> <!-- connecting -->
133 174
134 <!-- Client UI --> 175 <div id="connect_failed">
135 <div id="client"> 176 <p class="message" id="invalid_access_code">
177 Invalid access code.
178 </p>
179 <p class="message" id="other_connect_error">
180 An error occurred. The server response was
181 <strong id="server_response"></strong>.
182 </p>
183 <button type="button"
184 class="ok"
185 onclick="setClientMode('unconnected');"
186 style="width: 80px">
Jamie 2011/05/31 18:11:49 Get rid of width?
dmac 2011/06/01 23:01:58 see above
187 OK
188 </button>
189 </div> <!-- connect_failed -->
190 </section> <!-- client -->
136 191
137 <div id="unconnected"> 192 <footer class="secondary">
138 <p class="message"> 193 <img id="dividerbottom" src="dividerbottom.png">
139 To connect to another computer, enter the access code provided to you 194 <div id="client_footer">
140 by that computer's user. 195 Click here to
141 </p> 196 <a class="switch_mode"
142 <form action="" onsubmit="tryConnect(this['access_code_entry'].value); 197 href="#h"
143 return false;"> 198 onclick="setGlobalModePersistent(remoting.HOST_MODE);">
144 <input type="text" 199 share this computer with another user
145 id="access_code_entry"/> 200 </a>.
Jamie 2011/05/31 18:11:49 Move the closing tag to the preceding line, otherw
dmac 2011/06/01 23:01:58 Done.
146 <button type="submit"> 201 </div> <!-- client_footer -->
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 202
157 <div id="connecting"> 203 <div id="host_footer">
158 <p class="message"> 204 Click here to <a class="switch_mode"
159 Verifying access code... 205 href="#c"
160 <!-- TODO(jamiewalch): Implement Cancel, being careful when ignoring 206 onclick="setGlobalModePersistent(remoting.CLIENT_MODE);">
161 the eventual server response not to ignore responses for any 207 access a shared computer
162 subsequent requests. 208 </a>.
Jamie 2011/05/31 18:11:49 Move the closing tag to the preceding line, otherw
dmac 2011/06/01 23:01:58 Done.
163 <button type="button" 209 </div> <!-- host_footer -->
164 class="cancel" 210 </footer>
165 onclick="cancelConnect();"> 211 </div> <!-- container -->
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> 212 </body>
192 213
193 </html> 214 </html>
OLDNEW
« no previous file with comments | « no previous file | remoting/webapp/me2mom/chromoting128.png » ('j') | remoting/webapp/me2mom/remoting.js » ('J')

Powered by Google App Engine
This is Rietveld 408576698