Cleaned up <input> CSS and simplified user consent mark-up.

BUG=134063
TEST=Manual

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

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

2 files changed, 32 insertions, 30 deletions

diff --git a/remoting/webapp/main.css b/remoting/webapp/main.css
index d76c035..f6cc0cc 100644
--- a/remoting/webapp/main.css
+++ b/remoting/webapp/main.css
@@ -181,7 +181,8 @@ button[disabled], button[disabled]:hover, button[disabled]:active {
 /*------------------------------------------------------------------
 Component: Text Field
 ------------------------------------------------------------------*/
-input {
+input[type=text],
+input[type=password] {
     height: 29px;
     padding-__MSG_@@bidi_start_edge__: 8px;
     color: #333;
@@ -190,22 +191,19 @@ input {
     vertical-align: top;
     -webkit-border-radius: 1px;
 }
-input:hover {
+input[type=text]:hover,
+input[type=password]:hover {
     border: 1px solid #b9b9b9;
     border-top: 1px solid #a0a0a0;
     -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1);
 }
-input:focus {
+input[type=text]:focus,
+input[type=password]:focus {
     -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3);
     outline: none;
     border: 1px solid #4d90fe;
 }
 
-label {
-  line-height: 29px;
-  font-weight: bold;
-}
-
 /*------------------------------------------------------------------
 Component: Modal Dialog
 ------------------------------------------------------------------*/
@@ -320,6 +318,11 @@ section {
   border-top: none;
 }
 
+.editbox-label {
+  line-height: 29px;
+  font-weight: bold;
+}
+
 .error-state {
   background-image: url('icon_warning.png');
   background-repeat: no-repeat;
@@ -475,19 +478,17 @@ button {
   margin-bottom: 8px;
 }
 
-#ask-pin-form #usagestats-consent-checkbox {
-  /*
-   * TODO(alexeypa): 'float' is overkill for such a simple layout. Find
-   * a simpler way to express it. See: http://crbug.com/134063
-   */
-  float: left;
-  height: auto;
-  vertical-align: top;
+.checkbox-label {
+  display: block;
+  padding-__MSG_@@bidi_start_edge__: 20px;
 }
 
-#ask-pin-form #usagestats-consent-label {
-  font-weight: normal;
-  line-height: normal;
+.checkbox-label input[type=checkbox] {
+  float: __MSG_@@bidi_start_edge__;
+  margin-__MSG_@@bidi_start_edge__: -20px;
+  margin-__MSG_@@bidi_end_edge__: 0;
+  width: 20px;
+  margin-top: 2px;
 }
 
 #current-email {
diff --git a/remoting/webapp/main.html b/remoting/webapp/main.html
index a47b80e..a906565 100644
--- a/remoting/webapp/main.html
+++ b/remoting/webapp/main.html
@@ -227,7 +227,7 @@ found in the LICENSE file.
               <td class="table-label">
                 <label for="daemon-pin-entry"
                        i18n-content="ASK_PIN_DIALOG_LABEL"
-                       class="box-spacer"></label>
+                       class="editbox-label"></label>
               </td>
               <td>
                 <input id="daemon-pin-entry"
@@ -238,20 +238,18 @@ found in the LICENSE file.
             <tr>
               <td class="table-label">
                 <label for="daemon-pin-confirm"
-                       i18n-content="ASK_PIN_DIALOG_CONFIRM_LABEL"></label>
+                       i18n-content="ASK_PIN_DIALOG_CONFIRM_LABEL"
+                       class="editbox-label"></label>
               </td>
               <td>
                 <input id="daemon-pin-confirm" type="password">
               </td>
             <tr>
           </table>
-          <div id="usagestats-consent"
-               hidden>
-            <input id="usagestats-consent-checkbox" type="checkbox">
-            <label id="usagestats-consent-label"
-                   for="usagestats-consent-checkbox">
-              <span i18n-content="HOST_SETUP_CRASH_REPORTING_MESSAGE">
-              </span>
+          <div id="usagestats-consent" hidden>
+            <label class="checkbox-label">
+              <input id="usagestats-consent-checkbox" type="checkbox">
+              <span i18n-content="HOST_SETUP_CRASH_REPORTING_MESSAGE"></span>
             </label>
           </div>
           <div id="daemon-pin-error-div" class="message centered" hidden>
@@ -411,7 +409,8 @@ found in the LICENSE file.
               <div class="box">
                 <div class="box-spacer"></div>
                 <label for="access-code-entry"
-                       i18n-content="ACCESS_CODE">
+                       i18n-content="ACCESS_CODE"
+                       class="editbox-label">
                 </label>
                 <input id="access-code-entry"
                        type="text"
@@ -447,7 +446,9 @@ found in the LICENSE file.
                class="message"></div>
           <div>
             <form id="pin-form" action="">
-              <label for="pin-entry" i18n-content="PIN"></label>
+              <label for="pin-entry"
+                     i18n-content="PIN"
+                     class="editbox-label"></label>
               <input id="pin-entry"
                      type="password"
                      autofocus="autofocus"