Web-app visual and string tweaks.

* Implemented waiting class using a background image like error-state.
* Make waiting text line up with Cancel buttons.
* Make tool-bar spacing i18n- and hostname-safe.
* Updated strings after reviewer feedback.
* Fixed vertical position of host setup transitional text.

BUG=None
TEST=Manual

Review URL: https://chromiumcodereview.appspot.com/10103034

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@132601 0039d316-1c4b-4281-b951-d872f2087c98

4 files changed, 26 insertions, 32 deletions

diff --git a/remoting/webapp/_locales/en/messages.json b/remoting/webapp/_locales/en/messages.json
index dd8f968..ea2488d 100644
--- a/remoting/webapp/_locales/en/messages.json
+++ b/remoting/webapp/_locales/en/messages.json
@@ -199,7 +199,7 @@
     "description": "Description of the 'access' or 'client' functionality, displayed next to a button that instigates an access operation."
   },
   "HOME_DAEMON_ACTIVE_MESSAGE": {
-    "message": "You may securely access this computer from anywhere you sign in to Chromoting.",
+    "message": "You may securely access this computer using Chromoting.",
     "description": "Message displayed when the current computer is accepting remote connections."
   },
   "HOME_DAEMON_CHANGE_PIN_LINK": {
@@ -219,7 +219,7 @@
     "description": "Button displayed when the current computer is not accepting remote connections. Clicking this button causes it to start accepting remote connections."
   },
   "HOME_DAEMON_START_MESSAGE": {
-    "message": "To securely access this computer from anywhere you sign in to Chromoting, you must first enable remote connections.",
+    "message": "You must enable remote connections if you want to use Chromoting to access this computer.",
     "description": "Message displayed when the current computer is not accepting remote connections, instructing the user how to enable them."
   },
   "HOST_SETUP_DIALOG_DESCRIPTION": {
diff --git a/remoting/webapp/main.css b/remoting/webapp/main.css
index bce439d..a676d9a 100644
--- a/remoting/webapp/main.css
+++ b/remoting/webapp/main.css
@@ -422,20 +422,19 @@ button {
   color: #AAA;
 }
 
-.waiting:before {
-  content: url('spinner.gif');
-  position: absolute;
-  left: 0px;
-  top: -3px;
-}
-
 .waiting {
+  background-image: url('spinner.gif');
+  background-repeat: no-repeat;
+  background-position: top __MSG_@@bidi_start_edge__;
+  padding-__MSG_@@bidi_start_edge__: 30px;
+  padding-top: 2px;
+  padding-bottom: 4px;
   color: rgb(180, 180, 180);
-  margin-left: 30px;
+  line-height: 27px; /* Same as line-height for buttons */
 }
 
 .waiting-container {
-  position: relative;
+  display: -webkit-box;
 }
 
 .space-before {
@@ -470,11 +469,6 @@ button {
   margin-bottom: 8px;
 }
 
-
-#cancel-connect-button, #cancel-share-button {
-  float: __MSG_@@bidi_end_edge__;
-}
-
 #current-email {
   color: rgba(0, 0, 0, 0.5);
 }
diff --git a/remoting/webapp/main.html b/remoting/webapp/main.html
index 252cfdb..b86bffc 100644
--- a/remoting/webapp/main.html
+++ b/remoting/webapp/main.html
@@ -229,9 +229,10 @@ found in the LICENSE file.
             </button>
           </div>
         </form>
-        <div data-ui-mode="home.host-setup.processing" hidden>
-          <img src="spinner.gif">
-          <span id="host-setup-processing-message"></span>
+        <div data-ui-mode="home.host-setup.processing"
+             class="waiting-container"
+             hidden>
+          <span class="waiting" id="host-setup-processing-message"></span>
         </div>
         <div data-ui-mode="home.host-setup.done" hidden>
           <div id="host-setup-done-message" class="message"></div>
@@ -337,11 +338,9 @@ found in the LICENSE file.
 
         <div data-ui-mode="home.host.waiting-for-connection home.host.waiting-for-code"
              class="waiting-container space-before">
-          <span class="waiting"
-                i18n-content="FOOTER_WAITING"></span>
-          <button id="cancel-share-button"
-                  i18n-content="CANCEL">
-          </button>
+          <span class="waiting" i18n-content="FOOTER_WAITING"></span>
+          <div class="box-spacer"></div>
+          <button id="cancel-share-button" i18n-content="CANCEL"></button>
         </div>
 
         <div id="host-plugin-container"></div>
@@ -375,9 +374,8 @@ found in the LICENSE file.
 
         <div data-ui-mode="home.client.connecting" class="waiting-container">
           <span class="waiting" i18n-content="FOOTER_WAITING"></span>
-          <button id="cancel-connect-button"
-                  i18n-content="CANCEL">
-          </button>
+          <div class="box-spacer"></div>
+          <button id="cancel-connect-button" i18n-content="CANCEL"></button>
         </div> <!-- client.connecting -->
 
         <div data-ui-mode="home.client.pin-prompt" class="centered">
@@ -507,14 +505,13 @@ found in the LICENSE file.
            class="toolbar-container"
            hidden>
         <div class="toolbar-border">
-          <span id="session-status-message"
-                i18n-content="LABEL_CONNECTED"></span>
-          <strong id="connected-to"></strong>
+          <div id="session-status-message"
+                i18n-content="LABEL_CONNECTED"></div>
+          <div id="connected-to" class="box-spacer"></div>
           <button id="toolbar-disconnect"
                   type="button"
                   i18n-content="DISCONNECT_MYSELF_BUTTON">
           </button>
-          <div class="box-spacer"></div>
           <span class="menu-button" id="send-keys-menu">
             <button>
               <span i18n-content="SEND_KEYS"></span>
diff --git a/remoting/webapp/toolbar.css b/remoting/webapp/toolbar.css
index 019b171..69d4dd2 100644
--- a/remoting/webapp/toolbar.css
+++ b/remoting/webapp/toolbar.css
@@ -47,9 +47,12 @@
   display: -webkit-box;
 }
 
+.toolbar-border > div {
+  margin: 4px;
+}
+
 /* Ensure that the 'connected to' string doesn't make the tool-bar overflow */
 #connected-to {
-  display: inline-block;
   max-width: 280px;
   overflow: hidden;
   margin-__MSG_@@bidi_end_edge__: 8px;