[cros] Error bubble on login is displayed to the left of Gaia frame.

chrome/browser/resources/chromeos/login/bubble.css

-/* Copyright (c) 2011 The Chromium Authors. All rights reserved.
+/* Copyright (c) 2012 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.
  *
  * Css based bubble.
  */
 
 .bubble {
   -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
   background: white;
   border: 1px solid rgba(0, 0, 0, 0.25);
   border-radius: 10px;
-  margin: 10px 2px 2px 2px;
+  margin: 2px;
   padding: 10px;
   position: absolute;
   max-width: 250px;
 }
 
+.bubble-top {
+  margin-bottom: 10px;
+}
+.bubble-right

[xiyuan, 2012/02/02 22:43:52]

nit: insert a blank line between css groups and all other similar places.

[Ivan Korotkov, 2012/02/03 10:33:04]

Done.

+html[dir=rtl] .bubble-left {
+  margin-left: 10px;
+}
+.bubble-bottom {
+  margin-top: 10px;
+}
+.bubble-left,
+html[dir=rtl] .bubble-right {
+  margin-right: 10px;
+}
+
 .bubble:before {
   content: "";
-  border-color: transparent transparent rgba(0, 0, 0, 0.25) transparent;
   border-style: solid;
   border-width: 8px;
   display: block;
+  position: absolute;
+}
+
+.bubble-top:before {
+  border-color: rgba(0, 0, 0, 0.25) transparent transparent transparent;
+  bottom: -16px;
   left: 10px;
-  position: absolute;
+}
+.bubble-right:before,
+html[dir=rtl] .bubble-left:before {
+  border-color: transparent rgba(0, 0, 0, 0.25) transparent transparent;
+  left: -16px;
+  top: 10px;
+}
+.bubble-bottom:before {
+  border-color: transparent transparent rgba(0, 0, 0, 0.25) transparent;
+  left: 10px;
   top: -16px;
 }
+.bubble-left:before,
+html[dir=rtl] .bubble-right:before {
+  border-color: transparent transparent transparent rgba(0, 0, 0, 0.25);
+  right: -16px;
+  top: 10px;
+}
 
 .bubble:after {
   content: "";
-  border-color: transparent transparent white transparent;
   border-style: solid;
   border-width: 8px;
   display: block;
+  position: absolute;
+}
+
+.bubble-top:after {
+  border-color: white transparent transparent transparent;
+  bottom: -15px;
   left: 10px;
-  position: absolute;
+}
+.bubble-right:after,
+html[dir=rtl] .bubble-left:after {
+  border-color: transparent white transparent transparent;
+  left: -15px;
+  top: 10px;
+}
+.bubble-bottom:after {
+  border-color: transparent transparent white transparent;
+  left: 10px;
   top: -15px;
 }
+.bubble-left:after,
+html[dir=rtl] .bubble-right:after {
+  border-color: transparent transparent transparent white;
+  right: -15px;
+  top: 10px;
+}