ChromeOS shelf: implement MD-like shelf.

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

Index: chrome/browser/resources/chromeos/login/header_bar.html
diff --git a/chrome/browser/resources/chromeos/login/header_bar.html b/chrome/browser/resources/chromeos/login/header_bar.html
index 40ec8aca5b3c37cc8ad9817c7c7f54eb97dd1ddc..2defbfec9b626e3a65d177c6c06b79bcc65ac3dd 100644
--- a/chrome/browser/resources/chromeos/login/header_bar.html
+++ b/chrome/browser/resources/chromeos/login/header_bar.html
@@ -1,27 +1,46 @@
-<div id="login-header-bar" hidden class="login-header-bar-hidden">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html">
+
+<div id="login-header-bar" hidden
+    class="login-header-bar-hidden layout horizontal">
   <div id="shutdown-header-bar-item" class="header-bar-item">
-    <button id="shutdown-button" class="custom-appearance"
-        i18n-content="shutDown"></button>
+    <button id="shutdown-button" class="custom-appearance layout vertical">
+      <div id="shutdown-button-text" class="flex layout horizontal center"

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

nit: think "layout" and  "horizontal" is not needed since this div would have no
child block element. If this is true, please remove here and other similar divs.

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

"layout horizontal" is used to make "center" work on correct axis.

[xiyuan, 2016/11/16 22:25:55]

How about get rid of "layout horizontal" and change "center" to
"center-justified" ?

[Alexander Alekseev, 2016/11/16 23:54:43]

It doesn't work (I tried).

Because "layout" class is required for "center"/"center-justified" to work. And
they also do not work without flex-direction property, which is added by
"horizontal" or "vertical".

[xiyuan, 2016/11/17 00:09:02]

Okay. Thank you for trying it out.

+          i18n-content="shutDown">
+      </div>
+    </button>
   </div>
   <div id="restart-header-bar-item" class="header-bar-item">
-    <button id="restart-button" class="custom-appearance"
-        i18n-content="restart"></button>
+    <button id="restart-button" class="custom-appearance layout vertical">
+      <div id="restart-button-text" class="flex layout horizontal center"
+          i18n-content="restart">
+      </div>
+    </button>
   </div>
   <div id="apps-header-bar-item" class="header-bar-item" hidden>
     <button id="show-apps-button" class="custom-appearance"
-        i18n-content="showApps"></button>
+        i18n-content="showApps">
+    </button>
   </div>
   <div id="guest-user-header-bar-item" class="header-bar-item" hidden>
-    <button id="guest-user-button" class="custom-appearance"
-        i18n-content="browseAsGuest"></button>
+    <button id="guest-user-button" class="custom-appearance layout vertical">
+      <div id="guest-user-button-text" class="flex layout horizontal center"
+          i18n-content="browseAsGuest">
+      </div>
+    </button>
   </div>
   <div id="add-user-header-bar-item" class="header-bar-item" hidden>
-    <button id="add-user-button" class="custom-appearance"
-        i18n-content="addUser"></button>
+    <button id="add-user-button" class="custom-appearance layout vertical">
+      <div id="add-user-button-text" class="flex layout horizontal center"
+          i18n-content="addUser">
+      </div>
+    </button>
   </div>
   <div id="more-settings-header-bar-item" class="header-bar-item">
-    <button id="more-settings-button" class="custom-appearance"
-        i18n-values="aria-label:moreOptions"></button>
+    <button id="more-settings-button" class="custom-appearance layout vertical">
+      <div id="more-settings-button-text" class="flex layout horizontal center"
+          i18n-values="aria-label:moreOptions">
+      </div>
+    </button>
     <button class="add-supervised-user-menu custom-appearance"
         id="add-supervised-user-menu" tabindex="0"
         i18n-content="addSupervisedUser">
@@ -32,7 +51,11 @@
         i18n-content="signOutUser"></button>
   </div>
   <div id="cancel-multiple-sign-in-item" class="header-bar-item" hidden>
-    <button id="cancel-multiple-sign-in-button" class="custom-appearance"
-        i18n-content="cancel"></button>
+    <button id="cancel-multiple-sign-in-button"
+        class="custom-appearance layout vertical">
+      <div id="cancel-multiple-sign-in-button-text"
+          class="flex layout horizontal center" i18n-content="cancel">
+      </div>
+    </button>
   </div>
 </div>