Adjust error message and alert icon position

ui/login/bubble.css

 /* Copyright 2014 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 {
   background: rgba(0, 0, 0, 0.8);
   border-radius: 2px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   color: rgba(255, 255, 255, 0.87);
   font-size: 12px;
-  margin: 2px;

[Alexander Alekseev, 2017/05/25 01:25:25]

This code is used on desktop version.
Could you hide your changes behind body.chromeos selector as you did below?

[Alexander Alekseev, 2017/05/25 01:28:28]

It is probably enough to put

margin: unset;

to the block below.

[Wenzhao (Colin) Zang, 2017/05/25 02:27:55]

Done.

   max-width: 250px;
   padding: 8px;
   position: absolute;
   transition: opacity 200ms ease-in-out;
 }
 
 body.chromeos .bubble {
   padding: 16px;
 }
 
@@ skipping 105 matching lines @@
 
 body.chromeos .error-message-bubble::before {
   -webkit-mask-image: url(../../ui/webui/resources/images/warning.svg);
   -webkit-mask-position: left top;
   -webkit-mask-repeat: no-repeat;
   -webkit-mask-size: 20px;
   background-color: rgb(255,255,255);
   content: '';
   display: block;
   height: 20px;
-  left: 8px;
+  left: 16px;
   position: absolute;
   top: 8px;
   width: 20px;
 }
 
 body:not(.chromeos) .error-message-bubble {
   -webkit-padding-start: 30px;
   background: url(chrome://theme/IDR_WARNING) left top no-repeat;
   background-size: 24px;
 }
@@ skipping 12 matching lines @@
   text-decoration: none;
 }
 
 .error-message-bubble-padding {
   margin-bottom: 10px;
 }
 
 html[dir=rtl] .error-message-bubble {
   background-position: right top;
 }