Chrome OS OOBE: Fix button styling.

This Cl makes buttons correctly spaced on Welcome screen and Powerwash screen.
Assistant opt-in screen now uses cros-shared button style.

Bug: 857443,852034
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: Ia90416579b6fefa409ccb4eba7eafeb019136409
Reviewed-on: https://chromium-review.googlesource.com/1142894
Commit-Queue: Alexander Alekseev <alemate@chromium.org>
Reviewed-by: Wenzhao (Colin) Zang <wzang@chromium.org>
Cr-Commit-Position: refs/heads/master@{#576733}

chrome/browser/resources/chromeos/assistant_optin/assistant_optin.html

@@ -15,6 +15,9 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-progress/paper-progress.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
+<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 
 <include src="../login/oobe_buttons.html">
 <include src="../login/oobe_change_picture.html">
@@ -29,10 +32,10 @@
 
 <link rel="stylesheet" href="chrome://resources/css/chrome_shared.css">
 <link rel="stylesheet" href="../login/oobe_flex_layout.css">
-<link rel="stylesheet" href="../login/oobe_text_button.css">
 <link rel="stylesheet" href="../login/oobe_screen.css">
 <link rel="stylesheet" href="assistant_optin.css">
 <link rel="stylesheet" href="setting_zippy.css">
+<style include="paper-button-style cr-icons cr-shared-style"></style>
 
 <script src="chrome://resources/js/cr.js"></script>
 <script src="chrome://resources/js/load_time_data.js"></script>

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

@@ -51,10 +51,11 @@ h1 {
   font-size: var(--subtitle-font-size);
   line-height: var(--subtitle-line-height);
   /* margin 12px = 32 - line-height
-                   - 5 (lihe height - font size)
+                   - 5 (line height - font size)
                    + 3 (distance to baseline 13px)
                  =  32 + font size + distance to baseline 13px */
-  margin: calc(32 + var(--subtitle-font-size)
+  margin: calc(32px - var(--subtitle-line-height)
+               - (var(--subtitle-line-height) - var(--subtitle-font-size))
                + var(--subtitle-font-distance-to-baseline)) 0 0 0;
 }
 

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

@@ -63,7 +63,7 @@
         <div id="animation-inner-container" class="flex layout horizontal">
           <div id="email-section" class="section"
               on-animationend="onSlideAnimationEnd_">
-            <div id="title-container">
+            <div id="title-container" class="layout vertical end-justified">
               <h1>[[i18nDynamic(locale, 'loginWelcomeMessage')]]</h1>
             </div>
             <div id="subtitle-container">
@@ -83,7 +83,7 @@
             </gaia-input-form>
           </div>
           <div id="password-section" class="section">
-            <div id="title-container">
+            <div id="title-container" class="layout vertical end-justified">
               <gaia-header id="passwordHeader"></gaia-header>
             </div>
             <div id="subtitle-container">

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

@@ -89,16 +89,16 @@
 -->
 <dom-module id="oobe-back-button">
   <template>
-    <style
-        include="iron-flex iron-flex-alignment iron-positioning paper-button-style cr-icons cr-shared-style">
-    </style>
-    <link rel="stylesheet" href="oobe_back_button.css">
+    <style include="iron-flex iron-flex-alignment iron-positioning"></style>
+    <style include="paper-button-style cr-icons cr-shared-style"></style>
     <link rel="stylesheet" href="oobe_text_buttons.css">
+    <link rel="stylesheet" href="oobe_back_button.css">
     <paper-button id="button" on-tap="onClick_" disabled="[[disabled]]"
         aria-label$="[[labelForAria]]" class="action-button">
       <div class="flex horizontal layout start center">
         <hd-iron-icon
-            icon1x="oobe-buttons-20:arrow-forward" icon2x="oobe-buttons-40:arrow-forward">
+            icon1x="oobe-buttons-20:arrow-forward"
+            icon2x="oobe-buttons-40:arrow-forward">
         </hd-iron-icon>
         <slot>
           <div id="text" i18n-content="back"></div>
@@ -110,9 +110,8 @@
 
 <dom-module id="oobe-next-button">
   <template>
-    <style
-        include="iron-flex iron-flex-alignment iron-positioning paper-button-style cr-icons cr-shared-style">
-    </style>
+    <style include="iron-flex iron-flex-alignment iron-positioning"></style>
+    <style include="paper-button-style cr-icons cr-shared-style"></style>
     <link rel="stylesheet" href="oobe_text_buttons.css">
     <link rel="stylesheet" href="oobe_next_button.css">
     <paper-button id="button" on-tap="onClick_" disabled="[[disabled]]"
@@ -122,7 +121,8 @@
           <div id="text" i18n-content="next"></div>
         </slot>
         <hd-iron-icon
-            icon1x="oobe-buttons-20:arrow-forward" icon2x="oobe-buttons-40:arrow-forward">
+            icon1x="oobe-buttons-20:arrow-forward"
+            icon2x="oobe-buttons-40:arrow-forward">
         </hd-iron-icon>
       </div>
     </paper-button>
@@ -145,11 +145,10 @@
 -->
 <dom-module id="oobe-welcome-secondary-button">
   <template>
-    <link rel="stylesheet" href="oobe_welcome_secondary_button.css">
-    <style
-        include="iron-flex iron-flex-alignment iron-positioning paper-button-style cr-icons cr-shared-style">
-    </style>
+    <style include="iron-flex iron-flex-alignment iron-positioning"></style>
+    <style include="paper-button-style cr-icons cr-shared-style"></style>
     <link rel="stylesheet" href="oobe_text_buttons.css">
+    <link rel="stylesheet" href="oobe_welcome_secondary_button.css">
     <paper-button id="button" aria-label$="[[labelForAria]]">
       <div id="container" class="flex vertical layout center self-stretch">
         <div class="flex layout horizontal center self-stretch center-justified">

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

@@ -2,6 +2,15 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
+:host {
+  --title-font-size: 28px;
+  --title-font-distance-to-baseline: 7px;
+  --subtitle-font-size: 13px;
+  --subtitle-font-distance-to-baseline: 3px;
+  --subtitle-line-height: 18px;
+  --offline-gaia-dialog-width: 768px;
+}
+
 #header-container {
   padding: 60px 64px 0 64px;
 }
@@ -11,28 +20,30 @@
 }
 
 #oobe-title {
-  min-height: 71px; /* 64 title + 7 (distance to baseline for 28px font) */
+  min-height: calc(64px + var(--title-font-distance-to-baseline));
 }
 
 #oobe-title ::slotted(h1) {
-  color: color: var(--google-grey-900);
-  font-size: 28px;
+  color: var(--google-grey-900);
+  font-size: var(--title-font-size);
   font-weight: normal;
   margin: 0;
 }
 
 #oobe-subtitle {
-  min-height: 57px; /* 64 - 7 (distance to baseline for title font) */
+  min-height: calc(64px - var(--title-font-distance-to-baseline));
 }
 
 #oobe-subtitle ::slotted(*) {
-  color: color: var(--google-grey-900);
-  font-size: 13px;
-  line-height: 18px;
-  /*margin = 32 - line-height
-             - 5 (lihe height - font size)
-             + 3 (distance to baseline 13px) */
-  margin: 12px 0 0 0;
+  color: var(--google-grey-900);
+  font-size: var(--subtitle-font-size);
+  line-height: var(--subtitle-line-height);
+  /* margin 12px = 32 - line-height
+                   - 5 (line height - font size)
+                   + 3 (distance to baseline 13px) */
+  margin: calc(32px - var(--subtitle-line-height)
+               - (var(--subtitle-line-height) - var(--subtitle-font-size))
+               + var(--subtitle-font-distance-to-baseline)) 0 0 0;
 }
 
 #footer-container {
@@ -45,12 +56,12 @@
 
 #oobe-bottom {
   height: 80px;
-  padding: 0 62px; /* 64 - 2px button border */
+  padding: 0 calc(64px - 4px); /* real width - button margin */
   z-index: 1;
 }
 
 :host(:not([full-screen-dialog])) #oobe-bottom {
-  padding: 0 30px; /* 32 - 2px button border */
+  padding: 0 calc(32px - 4px); /* real width - button margin */
 }
 
 #oobe-bottom[android] {

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

@@ -6,15 +6,6 @@
   -webkit-margin-end: 5px;
 }
 
-oobe-text-button {
-  -webkit-margin-end: 16px;
-  color: #5a5a5a;
-}
-
-#cancelButton {
-  -webkit-margin-end: 4px;
-}
-
 a {
   color: var(--google-blue-500);
   font-family: 'Roboto';

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

@@ -80,7 +80,7 @@
       </div>
       <div slot="bottom-buttons" class="flex layout horizontal">
         <div class="flex"></div>
-        <oobe-text-button id="cancelButton" border on-tap="onCancelTap_"
+        <oobe-text-button border on-tap="onCancelTap_"
             hidden="[[isCancelHidden_(uiState_)]]">
           <div i18n-content="cancelButton"></div>
         </oobe-text-button>

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

-/* Copyright 2016 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. */
-
-paper-button {
-  border-color: var(--oobe-text-button-border-color, transparent);
-  border-radius: 4px;
-  border-style: solid;
-  border-width: 2px;
-  height: 32px; /* = 28px + 2 * 2px border */
-  margin: 0;
-  padding: 0;
-}
-
-paper-button[focused] {
-  border-color: var(--oobe-text-button-focused-border-color);
-}
-
-paper-button[android] {
-  height: 31px;
-}
-
-#container {
-  border-radius: 2px;
-  padding: 0 16px;
-}
-
-#textButton:not([inverse]):not([disabled]) #container {
-  background-color: white
-  color: var(--google-blue-500);
-}
-
-#textButton[inverse]:not([disabled]) #container {
-  background-color: var(--google-blue-500);
-  color: white;
-}
-
-#textButton[border]:not([disabled]) #container {
-  border-color: rgba(0, 0, 0, .1);
-  border-style: solid;
-  border-width: 1px;
-}
-
-#textButton[android][border] #container {
-  height: 27px;
-  padding: 0 18px;
-}
-
-#textButton[android][disabled]:not([inverse]) {
-  background-color: white;
-  color: rgba(66, 133, 244, .38);
-}
-
-#textButton[android][disabled][inverse] {
-  background-color: rgba(66, 133, 244, .38);
-  color: white;
-}
-
-::slotted(*) {
-  font: var(--oobe-roboto-medium), sans-serif;
-  font-size: 12px;
-  text-transform: none;
-}
-
-#textButton[android] #container ::slotted(*) {
-  font-size: 10px;
-  text-transform: uppercase;
-}

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

@@ -2,6 +2,10 @@
    Use of this source code is governed by a BSD-style license that can be
    found in the LICENSE file. */
 
+:host {
+  margin: 0 4px; /* So that two adjacent buttons are 8px separated. */
+}
+
 :host ::slotted(*) {
   font-size: 12px;
 }

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

@@ -3,7 +3,7 @@
  * found in the LICENSE file. */
 
 .vertical-margin {
-  width: 62px; /* = 64 - (button border 2px) */
+  width: calc(64px - 4px); /* = real width - button border */
 }
 
 #bottom-margin {
@@ -27,10 +27,6 @@
   user-select: none;
 }
 
-oobe-welcome-secondary-button {
-  margin-right: 8px;
-}
-
 #buttons {
   width: 100%;
 }

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

@@ -3,7 +3,6 @@
    found in the LICENSE file. */
 
 ::slotted(*) {
-  font-size: 12px;
   text-transform: none;
 }