[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..3d5f52b50af6de98a37cf58582947d6031d5380f 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.
  *
@@ -6,34 +6,109 @@
  */
 
 .bubble {
-  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0 2px 4px 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;
-  padding: 10px;
+  /* border: 1px solid rgba(0, 0, 0, 0.25); */

[xiyuan, 2012/02/07 17:51:40]

nit: Remove no-longer-needed code. 

[Ivan Korotkov, 2012/02/07 17:57:28]

Done.

+  font: normal 12px 'Open Sans';
+  margin: 2px;
+  outline: 1px solid rgba(0, 0, 0, 0.2);
+  padding: 16px;
   position: absolute;
   max-width: 250px;
 }
 
 .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;
+}
+
+html[dir=ltf] .bubble-top:before {
+  left: 17px;
+}
+
+html[dir=rtl] .bubble-top:before {
+  right: 17px;
+}
+
+html[dir=ltr] .bubble-right:before,
+html[dir=rtl] .bubble-left:before {
+  border-color: transparent rgba(0, 0, 0, 0.25) transparent transparent;
+  left: -16px;
+  top: 17px;
+}
+
+.bubble-bottom:before {
+  border-color: transparent transparent rgba(0, 0, 0, 0.25) transparent;
   top: -16px;
 }
 
+html[dir=ltr] .bubble-bottom:before {
+  left: 17px;
+}
+
+html[dir=rtl] .bubble-bottom:before {
+  right: 17px;
+}
+
+html[dir=ltr] .bubble-left:before,
+html[dir=rtl] .bubble-right:before {
+  border-color: transparent transparent transparent rgba(0, 0, 0, 0.25);
+  right: -16px;
+  top: 17px;
+}
+
 .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;
+}
+
+html[dir=ltr] .bubble-top:after {
+  left: 17px;
+}
+
+html[dir=rtl] .bubble-top:after {
+  right: 17px;
+}
+
+html[dir=ltr] .bubble-right:after,
+html[dir=rtl] .bubble-left:after {
+  border-color: transparent white transparent transparent;
+  left: -15px;
+  top: 17px;
+}
+
+.bubble-bottom:after {
+  border-color: transparent transparent white transparent;
   top: -15px;
 }
+
+html[dir=ltr] .bubble-bottom:after {
+  left: 17px;
+}
+
+html[dir=rtl] .bubble-bottom:after {
+  right: 17px;
+}
+
+html[dir=ltr] .bubble-left:after,
+html[dir=rtl] .bubble-right:after {
+  border-color: transparent transparent transparent white;
+  right: -15px;
+  top: 17px;
+}