| OLD | NEW |
|---|
| 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…" /> |
| 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 > Share |
| 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 > Connect |
| 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="#" |
| 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> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 7078022:
Fix up remoting UI to make it closer to spec (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src
