[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..8b14164fa0a42a630616ecd598e58eb2be0ca54a 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,108 @@
  */
 
 .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;
+  font: normal 12px 'Open Sans';
+  margin: 2px;
+  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 {

[Dan Beam, 2012/12/05 07:23:48]

Hello Ivan, I noticed this says [dir=ltf] here and is still like this in the
code - what would you like to do about this rule?  I'd assume it hasn't been
working for these 10 months since this was committed.

Thanks,

Dan

[Ivan Korotkov, 2012/12/05 08:06:39]

Ouch. Thanks for noticing! I'll fix that.

+  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;
+}