Made web-app bidi-compatible.

remoting/webapp/me2mom/choice.css

 /* Copyright (c) 2011 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
 
 /* Elements */
 a {
   color: rgb(0, 102, 204);
   text-decoration: none;
 }
 
 body {
   background: -webkit-gradient(radial, center center, 0, center center, 400,
                                from(rgb(254, 254, 254)),
                                to(rgb(239, 239, 239)));
   font-family: 'Droid sans', Arial, sans-serif;
   margin:0;
   padding:0;
+  direction: __MSG_@@bidi_dir__;

[Jamie, 2011/08/10 18:24:31]

I don't think we're supposed to use CSS to set text direction, but I don't think
Chrome extensions can use __MSG__ substitutions in the HTML. If you know of a
better way of doing this, let me know.

[garykac, 2011/08/10 19:34:38]

This seems OK to me.

 }
 
 button, input {
   font-family: inherit;
   font-size: inherit;
 }
 
 button {
   background: -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
   border: 1px solid #aaa;
@@ skipping 18 matching lines @@
 button[disabled], .button[disabled]:hover {
   background: -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
   border-color: #aaa;
   color: #888;
   -webkit-box-shadow: none;
 }
 
 h1 {
   font-size: 24px;
   font-weight: normal;
-  margin-left: 10px;
+  margin-__MSG_@@bidi_start_edge__: 10px;
 }
 
 label {
   color: black;
   font-weight: bold;
 }
 
 /* Classes */
 
 .access-code-digit-group {
@@ skipping 17 matching lines @@
 
     TODO(ajwong): Either fix Chrome layout behavior, or if Chrome is actually
     conforming correctly to the standard, remove this comment.
   */
   text-align: center;
 }
 
 .choice-header {
   font-size: 24px;
   font-weight: normal;
-  margin-left: 10px;
+  margin-__MSG_@@bidi_start_edge__: 10px;
 }
 
 .choice-footer {
   font-size: 14px;
 }
 
 .choice-panel {
   margin-top: 17px;
   padding-bottom: 20px;
 }
 
 .description {
   margin-bottom: 25px;
 }
 
 .error-state {
   background-image: url('icon_warning.png');
   background-repeat: no-repeat;
-  background-position: top left;
-  padding-left: 30px;
+  background-position: top __MSG_@@bidi_start_edge__;
+  padding-__MSG_@@bidi_start_edge__: 30px;
   padding-top: 3px;
   margin-bottom: 10px;
   color: #900;
   display: inline-block;
 }
 
 .expiring {
     color: #900 !important;
 }
 
 [hidden] {
   display: none !important;
 }
 
 
 .icon-label {
   display: inline-block;
   vertical-align: top;
 }
 
 .message {
   text-align:center;
   margin-bottom: 10px;
 }
 
-.top-left {
+.top-primary {
   font-size: 14px;
   position: absolute;
   top: 0.5em;
-  left: 0.5em;
+  __MSG_@@bidi_start_edge__: 0.5em;
 }
 
-.top-right {
+.top-secondary {
   font-size: 14px;
   position: absolute;
   top: 0.5em;
-  right: 0.5em;
+  __MSG_@@bidi_end_edge__: 0.5em;
 }
 
 .waiting {
   color: rgb(180, 180, 180);
 }
 
 /* Ids */
 #access-code-countdown-container {
   height: 50px;
   text-align: center;
 }
 
 #access-code-display {
   margin-top: 50px;
   color: rgb(0, 0, 0);
   font-weight: bold;
   font-size: 26px;
   text-align: center;
 }
 
 #access-code-entry {
   font-weight: bold;
   font-size: 18px;
   height: 25px;
   margin: 0 10px;
-  padding-left: 5px;
+  padding-__MSG_@@bidi_start_edge__: 5px;
   width: 12em;
 }
 
 #access-code-entry-row {
   text-align: center;
 }
 
 #cancel-button {
-  float: right;
+  float: __MSG_@@bidi_end_edge__;
 }
 
 #client-footer-text, #host-footer-text {
   text-align: center;
 }
 
 #current-email {
   color: rgba(0, 0, 0, 0.5);
 }
 
 #divider-top {
   margin: 10px 0 15px 0;
 }
 
 #divider-bottom {
   margin: 25px 0 10px 0;
 }
 
 #email-status {
-  margin-right: 0.5ex;
+  margin-__MSG_@@bidi_end_edge__: 0.5ex;
 }
 
 #icon {
   height: 64px;
   width: 64px;
 }
 
 #main {
   color: rgb(115, 115, 115);
   font-size: 16px;
@@ skipping 15 matching lines @@
   */
   clear: both;
   font-family: monospace;
   font-size: small;
   margin: 5px;
 }
 
 #server-response {
   font-weight: bolder;
 }