ChromeOS shelf: implement MD-like shelf.

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

 /* 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. */
 
 #login-header-bar {
   -webkit-padding-start: 15px;
   bottom: 0;
   left: 0;
   padding-bottom: 6px;
   position: absolute;
   right: 0;
 }
 
 #login-header-bar {
-  /* Using copy of Ash launcher background with 0.8 opacity applied to it.
-     Otherwise if opacity: 0.8 is set here it will affect button text as well.
-     Have to position background differently so that opacity is not applied
-     to child elements. */
-  background-image: url(chrome://theme/IDR_LAUNCHER_BACKGROUND);
+  background-color: rgba(0, 0, 0, 0.6);
   padding-top: 7px;
 }
 
 html[screen=lock] .login-header-bar-hidden,
 html[screen=oobe] .login-header-bar-hidden {
   opacity: 0;
 }
 
 html[screen=lock] .login-header-bar-animate-fast,
 html[screen=oobe] .login-header-bar-animate-fast {
@@ skipping 22 matching lines @@
 
 #login-header-bar button:not(.button-restricted),
 #login-header-bar button:active:not(.button-restricted),
 #login-header-bar button:focus:not(.button-restricted),
 #login-header-bar button:hover:not(.button-restricted) {
   color: white !important;
   opacity: 1 !important;
 }
 
 .header-bar-item {
-  display: inline-block;
   height: 34px;
 }
 
 .add-supervised-user-menu {
   display: none;
 }
 
 #more-settings-header-bar-item.active button.add-supervised-user-menu {
   background-color: white;
   border: 1px solid lightgray;
@@ skipping 13 matching lines @@
 
 html[dir=rtl] #more-settings-header-bar-item.active
                 button.add-supervised-user-menu {
   right: 0;
 }
 
 html[dir=rtl] .header-bar-item {
   background-position: right center;
 }
 
+#login-header-bar #shutdown-button-text,
+#login-header-bar #restart-button-text,
+#login-header-bar #add-user-button-text,
+#login-header-bar #guest-user-button-text,
+#login-header-bar #more-settings-button-text,
+#login-header-bar #cancel-multiple-sign-in-button-text {
+  -webkit-padding-start: 28px;
+  background-position: left center;
+  background-repeat: no-repeat;
+  background-size: 20px;
+}
+
+html[dir=rtl] #login-header-bar #shutdown-button-text,
+html[dir=rtl] #login-header-bar #restart-button-text,
+html[dir=rtl] #login-header-bar #add-user-button-text,
+html[dir=rtl] #login-header-bar #more-settings-button-text,
+html[dir=rtl] #login-header-bar #guest-user-button-text,
+html[dir=rtl] #login-header-bar #cancel-multiple-sign-in-button-text {
+  background-position: right center;
+}
+
 #login-header-bar #shutdown-button,
 #login-header-bar #restart-button,
 #login-header-bar #add-user-button,
 #login-header-bar #guest-user-button,
 #login-header-bar #more-settings-button,
 #login-header-bar #cancel-multiple-sign-in-button {
-  -webkit-padding-start: 24px;
-  background-position: left center;
-  background-repeat: no-repeat;
-  background-size: 24px;
-}
-
-html[dir=rtl] #login-header-bar #shutdown-button,
-html[dir=rtl] #login-header-bar #restart-button,
-html[dir=rtl] #login-header-bar #add-user-button,
-html[dir=rtl] #login-header-bar #more-settings-button,
-html[dir=rtl] #login-header-bar #guest-user-button,
-html[dir=rtl] #login-header-bar #cancel-multiple-sign-in-button {
-  background-position: right center;
+  padding: 0 14px;
 }
 
 #login-header-bar #more-settings-header-bar-item {
   position: relative;
 }
 
-#login-header-bar #shutdown-button {
-  background-image: url(chrome://theme/IDR_ICON_POWER_WHITE);
+#login-header-bar #shutdown-button-text,
+#login-header-bar #restart-button-text {
+  background-image: -webkit-image-set(
+      url(images/1x/shutdown.svg) 1x,
+      url(images/2x/shutdown.svg) 2x );

[xiyuan, 2016/11/16 17:48:34]

Svg files are vector based and should work on different ui scales. The
background-size rule should be able to assign a size for the final rendered
image per
https://developer.mozilla.org/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds

Would

   background-image: url(images/shutdown.svg);

that uses the 1x version works for all UI scales?

[Alexander Alekseev, 2016/11/16 22:12:22]

I had long discussion with our designers and they sad that they are making
different SVG files for different screen PPI because of blurry edges that they
are trying to avoid.

It is not very important in this particular case, but I just wanted to save the
mechanism to select background PPI to simplify later updates of images.

 }
 
-#login-header-bar #restart-button {
-  background-image: url(chrome://theme/IDR_ICON_POWER_WHITE);
+#login-header-bar #add-user-button-text {
+  background-image: -webkit-image-set(
+      url(images/1x/add-person.svg) 1x,
+      url(images/2x/add-person.svg) 2x );
 }
 
-#login-header-bar #add-user-button {
-  background-image: url(chrome://theme/IDR_ICON_ADD_USER_WHITE);
-}
-
-#login-header-bar #more-settings-button {
+#login-header-bar #more-settings-button-text {
   background-image: url(chrome://theme/IDR_ICON_MORE_VERT_WHITE);
 }
 
-#login-header-bar #guest-user-button {
-  background-image: url(chrome://theme/IDR_ICON_GUEST_WHITE);
+#login-header-bar #guest-user-button-text {
+  background-image: -webkit-image-set(
+      url(images/1x/browse-as-guest.svg) 1x,
+      url(images/2x/browse-as-guest.svg) 2x );
 }
 
-#login-header-bar #cancel-multiple-sign-in-button {
+#login-header-bar #cancel-multiple-sign-in-button-text {
   /* TODO(dzhioev): replace with appropriate image when possible. */
   background-image: url(chrome://theme/IDR_PANEL_CLOSE);
 }
 
 .button-restricted {
   border: 1px solid transparent;
   color: white !important;
   opacity: 0.4 !important;
 }