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

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

Index: chrome/browser/resources/chromeos/login/bubble.css
diff --git a/chrome/browser/resources/chromeos/login/bubble.css b/chrome/browser/resources/chromeos/login/bubble.css
index b3868616a1c419f0f6cbd94cb2161d1b139acebb..6297a42ba541e0571f2d3d5a7a2545b347f10977 100644
--- a/chrome/browser/resources/chromeos/login/bubble.css
+++ b/chrome/browser/resources/chromeos/login/bubble.css
@@ -1,4 +1,4 @@
-/* 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.
  *
@@ -10,30 +10,94 @@
   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

[altimofeev, 2012/02/03 11:49:30]

',' (comma) was missed

[Ivan Korotkov, 2012/02/07 17:18:00]

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;
-  left: 10px;
   position: absolute;
+}
+
+.bubble-top:before {
+  border-color: rgba(0, 0, 0, 0.25) transparent transparent transparent;
+  bottom: -16px;
+  left: 10px;
+}
+
+.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;
-  left: 10px;
   position: absolute;
+}
+
+.bubble-top:after {
+  border-color: white transparent transparent transparent;
+  bottom: -15px;
+  left: 10px;
+}
+
+.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;
+}