UI nits from Ken Moore:

* Only hyperlink 'share this computer'; * Remove colon after 'Access code'; * Move Connect button to same line as edit field; * Use right single-arrow quote instead of greater-than; * Use Droid Sans where available; * Clean up access code display; * Improved footer when sharing, including spinner graphic. BUG=None TEST=Visual Review URL: http://codereview.chromium.org/7205045 git-svn-id: svn://svn.chromium.org/chrome/trunk/src@89839 0039d316-1c4b-4281-b951-d872f2087c98
author: jamiewalch@google.com <jamiewalch@google.com@0039d316-1c4b-4281-b951-d872f2087c98> 2011-06-21 16:31:40 +0000
committer: jamiewalch@google.com <jamiewalch@google.com@0039d316-1c4b-4281-b951-d872f2087c98> 2011-06-21 16:31:40 +0000
commit: 786e4184139f32655e3dabe8fd44cd736e209209 (patch)
tree: 3f5a2d2e5909936d2763db06ccd725abc09c89b1 /remoting/webapp
parent: 81c78c7709af40571bd7e9f128359439fdb52362 (diff)
download: chromium_src-786e4184139f32655e3dabe8fd44cd736e209209.zip
chromium_src-786e4184139f32655e3dabe8fd44cd736e209209.tar.gz
chromium_src-786e4184139f32655e3dabe8fd44cd736e209209.tar.bz2
3 files changed, 77 insertions, 53 deletions
diff --git a/remoting/webapp/me2mom/choice.css b/remoting/webapp/me2mom/choice.css
index 72b07e0..c427e3d 100644
--- a/remoting/webapp/me2mom/choice.css
+++ b/remoting/webapp/me2mom/choice.css
@@ -14,7 +14,7 @@ body {
   background: -webkit-gradient(radial, center center, 0, center center, 400,
                                from(rgb(254, 254, 254)),
                                to(rgb(239, 239, 239)));
-  font-family: Arial, sans-serif;
+  font-family: 'Droid sans', Arial, sans-serif;
   margin:0;
   padding:0;
 }
@@ -24,7 +24,7 @@ button {
   border: 1px solid #aaa;
   height: 2em;
   font-size: 16px;
-  padding: .5em 1em;
+  padding: 6px;
   -webkit-border-radius: 2px;
   -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
   -webkit-user-select: none;
@@ -52,7 +52,6 @@ button[disabled], .button[disabled]:hover {
 
 footer {
   font-size: 14px;
-  text-align: center;
 }
 
 header h1 {
@@ -99,8 +98,8 @@ section {
 
 .display-inline {
   /*
-    Class used to denote elements that should be displayed inline as opposed
-    to block.
+    Class used to denote elements that should be displayed inline-block as
+    opposed to block.
   */
 }
 
@@ -128,6 +127,10 @@ section {
   display: none;
 }
 
+.waiting {
+  color: rgb(180, 180, 180);
+}
+
 /* Ids */
 #auth-panel {
   border-bottom: 2px solid gray;
@@ -135,13 +138,12 @@ section {
 }
 
 #access-code-display {
-  background-color: lightgray;
-  border-style: solid;
-  font-size: 200%;
-  margin: 0 auto 25px auto;
-  padding: 0 4px 0 4px;
+  margin-top: 50px;
+  margin-bottom: 50px;
+  color: rgb(0, 0, 0);
+  font-weight: bold;
+  font-size: 26px;
   text-align: center;
-  width: 350px;
 }
 
 #access-code-entry {
@@ -165,6 +167,10 @@ section {
   width: 640px;
 }
 
+#cancel-button {
+  float: right;
+}
+
 #current-email {
   color: rgba(0, 0, 0, 0.5);
 }
@@ -188,3 +194,7 @@ section {
 #server-response {
   font-weight: bolder;
 }
+
+#client-footer, #host-footer {
+  text-align: center;
+}
diff --git a/remoting/webapp/me2mom/choice.html b/remoting/webapp/me2mom/choice.html
index ea77c13..90a94fd 100644
--- a/remoting/webapp/me2mom/choice.html
+++ b/remoting/webapp/me2mom/choice.html
@@ -8,6 +8,8 @@ found in the LICENSE file.
 <html>
   <head>
     <meta charset="utf-8" />
+    <link href="http://fonts.googleapis.com/css?family=Droid+Sans&amp;v1"
+          rel="stylesheet" type="text/css">
     <link rel="shortcut icon" href="chromoting128.png" />
     <link rel="stylesheet" href="debug_log.css" />
     <link rel="stylesheet" href="main.css" />
@@ -63,10 +65,10 @@ found in the LICENSE file.
       <header>
         <img id="icon" src="chromoting128.png">
         <h1 class="icon-label host-element display-inline">
-          Chromoting&nbsp;>&nbsp;Share
+          Chromoting&nbsp;&rsaquo;&nbsp;Share
         </h1>
         <h1 class="icon-label client-element display-inline">
-          Chromoting&nbsp;>&nbsp;Connect
+          Chromoting&nbsp;&rsaquo;&nbsp;Connect
         </h1>
         <img id="divider-top" src="dividertop.png">
       </header>
@@ -87,7 +89,7 @@ found in the LICENSE file.
 
         <div id="preparing-to-share" class="mode">
           <div class="message">
-            Connecting...
+            Generating access code&hellip;
           </div>
         </div> <!-- preparing-to-share -->
 
@@ -99,13 +101,8 @@ found in the LICENSE file.
           <div id="access-code-display">
             FAILED!
           </div>
-          <div class="message">
-            Waiting for connection...
-          </div>
-          <div class="centered-button">
-            <button type="button" onclick="cancelShare(); return false;">
-              Cancel
-            </button>
+          <div class="description">
+            Once they enter the code your sharing session will begin.
           </div>
         </div> <!-- ready-to-share -->
 
@@ -137,22 +134,20 @@ found in the LICENSE file.
         <div id="unconnected"  class="mode">
           <div class="description">
             Have the user whose computer you wish to access click
-            ‘Share this computer with another user’ and then have them read
+            ‘Share this computer’ and then have them read
             their access code to you.
           </div>
           <div id="access-code-entry-row">
             <form action="" onsubmit="tryConnect();  return false;">
               <label class="auth-status-control" for="access-code-entry">
-                Access code:
+                Access code
               </label>
               <input id="access-code-entry" class="auth-status-control"
                      type="text"/>
-              <div class="centered-button">
-                <button id="connect-button" class="auth-status-control"
-                        type="submit">
-                  Connect
-                </button>
-              </div>
+              <button id="connect-button" class="auth-status-control"
+                      type="submit">
+                Connect
+              </button>
             </form>
           </div> <!-- code-entry-row -->
         </div> <!-- unconnected -->
@@ -162,12 +157,8 @@ found in the LICENSE file.
             Verifying access code...
             <!-- TODO(jamiewalch): Implement Cancel, being careful when ignoring
                  the eventual server response not to ignore responses for any
-                 subsequent requests.
-            <div class="centered-button">
-              <button onclick="cancelConnect(); return false;">
-                Cancel
-              </button>
-            </div>
+                 subsequent requests. This should be unified with the host-side
+                 Cancel button in the footer.
             -->
           </div>
         </div> <!-- connecting -->
@@ -191,22 +182,31 @@ found in the LICENSE file.
 
       <footer>
         <img id="divider-bottom" src="dividerbottom.png">
-        <div class="client-element">
+        <div id="client-footer" class="client-element">
           Click here to
           <a class="switch-mode"
              href="#"
              onclick="setGlobalModePersistent(remoting.HOST_MODE);
-                      return false;">
-            share this computer with another user</a>.
+                      return false;">share this computer</a>
+          with another user.
         </div> <!-- client-footer -->
 
-        <div class="host-element">
+        <div id="host-footer" class="host-element">
           Click here to <a class="switch-mode"
              href="#"
              onclick="setGlobalModePersistent(remoting.CLIENT_MODE);
                       return false;">
             access a shared computer</a>.
         </div> <!-- host-footer -->
+
+        <div id="waiting-footer">
+          <img src="throbber.svg">
+          <span class="waiting icon-label">waiting for connection&hellip;</span>
+          <button id="cancel-button"
+                  onclick="cancelPendingOperation();">
+            Cancel
+          </button>
+        </div> <!-- waiting-footer -->
       </footer>
     </div> <!-- main-panel -->
 
diff --git a/remoting/webapp/me2mom/remoting.js b/remoting/webapp/me2mom/remoting.js
index a90778c..d10139d 100644
--- a/remoting/webapp/me2mom/remoting.js
+++ b/remoting/webapp/me2mom/remoting.js
@@ -10,12 +10,12 @@
 // TODO(ajwong): This seems like a bad idea to share the exact same object
 // with the background page.  Why are we doing it like this?
 var remoting = chrome.extension.getBackgroundPage().remoting;
-remoting.CLIENT_MODE='client';
-remoting.HOST_MODE='host';
+remoting.CLIENT_MODE = 'client';
+remoting.HOST_MODE = 'host';
 remoting.XMPP_LOGIN_NAME = 'xmpp_login';
 remoting.HOST_PLUGIN_ID = 'host-plugin-id';
 
-window.addEventListener("load", init_, false);
+window.addEventListener('load', init_, false);
 
 function hasClass(element, cls) {
   return element.className.match(new RegExp('\\b' + cls + '\\b'));
@@ -34,7 +34,7 @@ function removeClass(element, cls) {
 function showElement(element, visible) {
   if (visible) {
     if (hasClass(element, 'display-inline')) {
-      element.style.display = 'inline';
+      element.style.display = 'inline-block';
     } else {
       element.style.display = 'block';
     }
@@ -61,7 +61,7 @@ function updateControls_(disable) {
 function updateAuthStatus_() {
   var oauthValid = remoting.oauth2.isAuthenticated();
   if (!oauthValid) {
-    document.getElementById('oauth2-code').value = "";
+    document.getElementById('oauth2-code').value = '';
   }
   showElementById('oauth2-submit-button', false);
   showElementById('oauth2-code', !oauthValid);
@@ -101,7 +101,7 @@ function setEmail(value) {
 
 function exchangedCodeForToken_() {
   if (!remoting.oauth2.isAuthenticated()) {
-    alert("Your OAuth2 token was invalid. Please try again.");
+    alert('Your OAuth2 token was invalid. Please try again.');
   }
   updateAuthStatus_();
 }
@@ -158,6 +158,8 @@ function setGlobalMode(mode) {
   for (var i = 0; i < elementsToHide.length; ++i) {
     showElement(elementsToHide[i], false);
   }
+  showElement(document.getElementById('waiting-footer', false));
+  remoting.currentMode = mode;
 }
 
 function setGlobalModePersistent(mode) {
@@ -179,21 +181,30 @@ function setClientMode(mode) {
   setMode_(mode, modes);
 }
 
+function showWaiting_() {
+  showElement(document.getElementById('client-footer'), false);
+  showElement(document.getElementById('host-footer'), false);
+  showElement(document.getElementById('waiting-footer'), true);
+  document.getElementById('cancel-button').disabled = false;
+}
+
 function tryShare() {
-  addToDebugLog("Attempting to share...");
+  addToDebugLog('Attempting to share...');
   if (remoting.oauth2.needsNewAccessToken()) {
-    addToDebugLog("Refreshing token...");
+    addToDebugLog('Refreshing token...');
     remoting.oauth2.refreshAccessToken(function() {
       if (remoting.oauth2.needsNewAccessToken()) {
         // If we still need it, we're going to infinite loop.
-        showShareError_("unable-to-get-token");
-        throw "Unable to get access token";
+        showShareError_('unable-to-get-token');
+        throw 'Unable to get access token';
       }
       tryShare();
     });
     return;
   }
 
+  showWaiting_();
+
   var div = document.getElementById('plugin-wrapper');
   var plugin = document.createElement('embed');
   plugin.setAttribute('type', remoting.PLUGIN_MIMETYPE);
@@ -219,6 +230,7 @@ function onStateChanged_() {
   } else if (state == plugin.CONNECTED) {
     setHostMode('shared');
   } else if (state == plugin.DISCONNECTED) {
+    setGlobalMode(remoting.HOST_MODE);
     setHostMode('unshared');
     plugin.parentNode.removeChild(plugin);
   } else {
@@ -311,7 +323,7 @@ function tryConnect() {
     remoting.oauth2.refreshAccessToken(function() {
       if (remoting.oauth2.needsNewAccessToken()) {
         // If we still need it, we're going to infinite loop.
-        throw "Unable to get access token.";
+        throw 'Unable to get access token.';
       }
       tryConnect();
     });
@@ -330,7 +342,9 @@ function tryConnect() {
   }
 }
 
-function cancelConnect() {
-  remoting.accessCode = '';
-  setClientMode('unconnected');
+function cancelPendingOperation() {
+  document.getElementById('cancel-button').disabled = true;
+  if (remoting.currentMode == remoting.HOST_MODE) {
+    cancelShare();
+  }
 }
author	jamiewalch@google.com <jamiewalch@google.com@0039d316-1c4b-4281-b951-d872f2087c98>	2011-06-21 16:31:40 +0000
committer	jamiewalch@google.com <jamiewalch@google.com@0039d316-1c4b-4281-b951-d872f2087c98>	2011-06-21 16:31:40 +0000
commit	786e4184139f32655e3dabe8fd44cd736e209209 (patch)
tree	3f5a2d2e5909936d2763db06ccd725abc09c89b1 /remoting/webapp
parent	81c78c7709af40571bd7e9f128359439fdb52362 (diff)
download	chromium_src-786e4184139f32655e3dabe8fd44cd736e209209.zip chromium_src-786e4184139f32655e3dabe8fd44cd736e209209.tar.gz chromium_src-786e4184139f32655e3dabe8fd44cd736e209209.tar.bz2