Chromium Code Reviews 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| Index: remoting/webapp/me2mom/choice.html |
| diff --git a/remoting/webapp/me2mom/choice.html b/remoting/webapp/me2mom/choice.html |
| index 768e314deb0366b41334feb1d51895eea04545eb..7352bb50ac80cb904f386f1a3e9ce3f61b70aacd 100644 |
| --- a/remoting/webapp/me2mom/choice.html |
| +++ b/remoting/webapp/me2mom/choice.html |
| @@ -16,38 +16,39 @@ found in the LICENSE file. |
| <body onload="init();"> |
| - <!-- Auth panel --> |
| <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.
|
| - OAuth2 Token: <span id="oauth2_status"></span> |
| - <button onclick="remoting.oauth2.openOAuth2Window();" |
| - id="oauth2_code_button"> |
| - Open OAuth2 Window |
| - </button> |
| - <button onclick="clearOAuth2();" id="oauth2_clear_button"> |
| - Clear |
| - </button> |
| - <form id='oauth2_form' action="" |
| - onsubmit="authorizeOAuth2(this['oauth2_code'].value); return false;" |
| - style="display:none"> |
| - <label for="auth2_code">OAuth2 Code (from window):</label> |
| - <input type="text" name="oauth2_code" id="oauth2_code" /> |
| - <input type="submit"/> |
| - </form> |
| + <div id="oauth2_div"> |
| + OAuth2 Token: |
| + <form id='oauth2_form' action="" |
| + onsubmit="authorizeOAuth2(this['oauth2_code'].value); |
| + return false;"> |
| + <input type="text" name="oauth2_code" |
| + onkeyup="handleOAuth2CodeChange();" |
| + 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
|
| + <input type="submit" id="oauth2_submit_button" /> |
| + <input type="button" onclick="remoting.oauth2.openOAuth2Window();" |
| + id="oauth2_code_button" value="Get OAuth2 Token…" /> |
| + <input type="button" onclick="clearOAuth2();" |
| + id="oauth2_clear_button" value="Revoke" /> |
| + </form> |
| + </div> <!-- oauth2_div --> |
| + |
| <div id="email_div"> |
| - Current Email: <span id="current_email"></span> |
| + 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.
|
| <form id='new_email_form' action="" |
| - onsubmit="setEmail(this); return false;"> |
| - <label for="new_email">New Email:</label> |
| + onsubmit="setEmail(this['new_email'].value); return false;"> |
| <input type="text" name="new_email" id="new_email" /> |
| - <input type="submit" name="Set E-mail"/> |
| + <input type="submit" id="email_submit_button" name="Set E-mail"/> |
| + <input type="button" onclick="setEmail('')" |
| + id="change_email_button" value="Change Email" /> |
| </form> |
| - </div> |
| + </div> <!-- email_div --> |
| + |
| <div id="xmpp_div" style="display:none;"> |
| XMPP Token: <span id="xmpp_status"></span> |
| <button onclick="clearXmpp();" id="xmpp_clear" style="display:none;"> |
| Clear |
| </button> |
| - |
| <form id='xmpp_form' action="" |
| onsubmit="authorizeXmpp(this); return false;"> |
| <label for="xmpp_username">Email:</label> |
| @@ -65,129 +66,149 @@ found in the LICENSE file. |
| <iframe id="xmpp_error" style="display:none"> |
| <p> No iframe support |
| </iframe> |
| - </div> |
| - </div> |
| - |
| - <!-- Host UI --> |
| - <div id="host"> |
| - <div id="plugin_wrapper"> |
| - </div> |
| - |
| - <div id="unshared"> |
| - <p class="message"> |
| - Your desktop is currently unshared. |
| - </p> |
| - <button type="button" |
| - class="ok" |
| - onclick="tryShare();"> |
| - Start sharing |
| - </button> |
| - <p> |
| - <a class="switch_mode" |
| - href="#c" |
| - onclick="setGlobalModePersistent('client');"> |
| - I want to connect to another computer instead... |
| - </a> |
| - </p> |
| - </div> |
| - |
| - <div id="preparing_to_share"> |
| - <p class="message"> |
| - Connecting... |
| - </p> |
| - </div> |
| - |
| - <div id="ready_to_share"> |
| - <p class="message"> |
| - To begin sharing your desktop, read out the access code below to the |
| - person who will be assisting you. |
| - </p> |
| - <p id="access_code_display"> |
| - FAILED! |
| - </p> |
| - <p class="message"> |
| - Waiting for connection... |
| + </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.
|
| + |
| + </div> <!-- auth_panel --> |
| + |
| + <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.
|
| + <header> |
| + <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
|
| + <h1 id="host_header" class="iconlabel"> |
| + Chromoting > Share |
| + </h1> |
| + <h1 id="client_header" class="iconlabel"> |
| + Chromoting > Connect |
| + </h1> |
| + <img id="dividertop" src="dividertop.png"> |
| + </header> |
| + |
| + <section id="host_section"> |
| + <div id="plugin_wrapper"> |
| + </div> |
| + |
| + <div id="unshared"> |
| + <p> |
| + With Chromoting you can easily let another Chrome user see and |
| + control your computer. |
| + </p> |
| + |
| + <button id="share" |
| + type="button" |
| + class="ok" |
| + onclick="tryShare();" |
| + 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
|
| + Share this computer |
| + </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.
|
| + </div> <!-- unshared --> |
| + |
| + <div id="preparing_to_share"> |
| + <p class="message"> |
| + Connecting... |
| + </p> |
| + </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
|
| + |
| + <div id="ready_to_share"> |
| + <p> |
| + To begin sharing your desktop, read out the access code below to the |
| + person who will be assisting you. |
| + </p> |
| + <div id="access_code_display"> |
| + FAILED! |
| + </div> |
| + <p class="message"> |
| + Waiting for connection... |
| + </p> |
| <button type="button" |
| class="cancel" |
| - onclick="cancelShare();"> |
| + onclick="cancelShare();" |
| + style="width:100px"> |
| Cancel |
| </button> |
| - </p> |
| - <p class="message mock"> |
| - (For this mock-up, this message will disappear automatically.) |
| - </p> |
| - </div> |
| - |
| - <div id="shared"> |
| - <p class="message"> |
| - Your desktop is currently being shared. |
| - </p> |
| - <button type="button" |
| - class="cancel" |
| - onclick="cancelShare();"> |
| - Stop sharing |
| - </button> |
| - </div> |
| - |
| - </div> |
| - |
| - <!-- Client UI --> |
| - <div id="client"> |
| - |
| - <div id="unconnected"> |
| - <p class="message"> |
| - To connect to another computer, enter the access code provided to you |
| - by that computer's user. |
| - </p> |
| - <form action="" onsubmit="tryConnect(this['access_code_entry'].value); |
| - return false;"> |
| - <input type="text" |
| - id="access_code_entry"/> |
| - <button type="submit"> |
| - Connect |
| - </button> |
| - </form> |
| - <a class="switch_mode" |
| - href="#h" |
| - onclick="setGlobalModePersistent('host');"> |
| - I want to share this computer instead... |
| - </a> |
| - </div> |
| - |
| - <div id="connecting"> |
| - <p class="message"> |
| - Verifying access code... |
| - <!-- TODO(jamiewalch): Implement Cancel, being careful when ignoring |
| - the eventual server response not to ignore responses for any |
| - subsequent requests. |
| + </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.
|
| + |
| + <div id="shared"> |
| + <p class="message"> |
| + Your desktop is currently being shared. |
| + </p> |
| <button type="button" |
| class="cancel" |
| - onclick="cancelConnect();"> |
| - Cancel |
| + onclick="cancelShare();"> |
| + Stop sharing |
| </button> |
| - --> |
| - </p> |
| - </div> |
| - |
| - <div id="connect_failed"> |
| - <p class="message" |
| - id="invalid_access_code"> |
| - Invalid access code. |
| - </p> |
| - <p class="message" |
| - id="other_connect_error"> |
| - An error occurred. The server response was |
| - <strong id="server_response"></strong>. |
| - </p> |
| - <button type="button" |
| - class="ok" |
| - onclick="setClientMode('unconnected');"> |
| - OK |
| - </button> |
| - </div> |
| - |
| - </div> |
| + </div> <!-- shared --> |
| + </section> <!-- host --> |
| + |
| + <section id="client_section"> |
| + <div id="unconnected"> |
| + <p> |
| + Have the user whose computer you wish to access click |
| + ‘Share this computer’ then read to you their security |
|
Jamie
2011/05/31 18:11:49
s/security/access/
dmac
2011/06/01 23:01:58
Done.
|
| + code. |
| + </p> |
| + <div id="codeentryrow" |
| + <form action=""> |
| + <label for="access_code_entry">Security code</label> |
| + <input type="text" |
| + id="access_code_entry"/> |
| + <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
|
| + Connect |
| + </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.
|
| + </form> |
| + </div> <!-- codeentryrow --> |
| + </div> <!-- unconnected --> |
| + |
| + <div id="connecting"> |
| + <p class="message"> |
| + Verifying access code... |
| + <!-- TODO(jamiewalch): Implement Cancel, being careful when ignoring |
| + the eventual server response not to ignore responses for any |
| + subsequent requests. |
| + <button type="button" |
| + class="cancel" |
| + onclick="cancelConnect();"> |
| + Cancel |
| + </button> |
| + --> |
| + </p> |
| + </div> <!-- connecting --> |
| + |
| + <div id="connect_failed"> |
| + <p class="message" id="invalid_access_code"> |
| + Invalid access code. |
| + </p> |
| + <p class="message" id="other_connect_error"> |
| + An error occurred. The server response was |
| + <strong id="server_response"></strong>. |
| + </p> |
| + <button type="button" |
| + class="ok" |
| + onclick="setClientMode('unconnected');" |
| + style="width: 80px"> |
|
Jamie
2011/05/31 18:11:49
Get rid of width?
dmac
2011/06/01 23:01:58
see above
|
| + OK |
| + </button> |
| + </div> <!-- connect_failed --> |
| + </section> <!-- client --> |
| + <footer class="secondary"> |
| + <img id="dividerbottom" src="dividerbottom.png"> |
| + <div id="client_footer"> |
| + Click here to |
| + <a class="switch_mode" |
| + href="#h" |
| + onclick="setGlobalModePersistent(remoting.HOST_MODE);"> |
| + share this computer with another user |
| + </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.
|
| + </div> <!-- client_footer --> |
| + |
| + <div id="host_footer"> |
| + Click here to <a class="switch_mode" |
| + href="#c" |
| + onclick="setGlobalModePersistent(remoting.CLIENT_MODE);"> |
| + access a shared computer |
| + </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.
|
| + </div> <!-- host_footer --> |
| + </footer> |
| + </div> <!-- container --> |
| </body> |
| </html> |
