ChromeOS: Implement minumal material design OOBE.

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

-<!-- Copyright 2015 The Chromium Authors. All rights reserved.
+<!-- 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. -->
 
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-fab/paper-fab.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
 
 <!--
-  Material design buttons that mimic GAIA's buttons.
+  Material design buttons for OOBE screens.

[jdufault, 2016/05/20 18:27:27]

What about something like:

Material design button that shows a forward arrow, typically used for navigating
to the next page/screen.

[Alexander Alekseev, 2016/05/24 00:38:45]

Done.

+
+  Attributes:
+    'disabled' - button is disabled when the attribute is set.
 
   Example:
-    <gaia-button type="dialog"></gaia-button>
-
-  Attributes:
-    'type' - there are three kinds of button: regular blue button (none type
-             provided), dialog button (type="dialog") and a button that looks
-             more like a link (type="link").
-    'disabled' - button is disabled when the attribute is set.
+    <oobe-button type="dialog"></oobe-button>

[jdufault, 2016/05/20 18:27:27]

Rename to oobe-next-button, remove unused type property.

[Alexander Alekseev, 2016/05/24 00:38:45]

Done.

 -->
-<dom-module id="gaia-button">
-  <link rel="stylesheet" href="gaia_button.css">

[jdufault, 2016/05/20 18:27:27]

Make sure to delete this file in the patch.

[Alexander Alekseev, 2016/05/24 00:38:45]

gaia_button.css is still used in gaia_buttons.html .
I am not modifying offline Gaia here. I just copied it.

+<dom-module id="oobe-button-next">

[jdufault, 2016/05/20 18:27:27]

Rename to oobe-next-button to be consistent with oobe-icon-button.

[Alexander Alekseev, 2016/05/24 00:38:45]

Done.

+  <style>
+    :host {
+      display: inline-block;
+    }
+    paper-fab {
+      background-color: var(--google-blue-500);
+      color: white;
+      font-size: 14px;
+    }
+  </style>
 
   <template>
-    <div on-click="onClick_" on-tap="onClick_">
-      <paper-button id="button" disabled="[[disabled]]"
-          on-focused-changed="focusedChanged_">
-        <content></content>
-      </paper-button>
-    </div>
+      <paper-fab icon="arrow-forward" disabled="[[disabled]]"></paper-fab>
   </template>
 </dom-module>
 
 <!--
   Material desing icon button with a special styling.

[jdufault, 2016/05/20 18:27:27]

What about:

  Material design button that shows an icon.

nit: desing->design

[Alexander Alekseev, 2016/05/24 00:38:45]

Done.

 
   Example:
-    <gaia-icon-button icon="close"></gaia-icon>
+    <oobe-icon-button icon="close"></oobe-icon>
 
   Attributes:
     'icon' - a name of icon from material design set to show on button.
     'disabled' - button is disabled when the attribute is set.
     'aria-label' - accessibility label.
 -->
-<dom-module id="gaia-icon-button">
-  <link rel="stylesheet" href="gaia_icon_button.css">

[jdufault, 2016/05/20 18:27:27]

Make sure to delete this file in the patch.

[Alexander Alekseev, 2016/05/24 00:38:45]

gaia_icon_button.css is still used in gaia_buttons.html .

[jdufault, 2016/05/24 17:18:37]

Is gaia_buttons.html going to go away? Otherwise the CSS should be shared by
creating a style module [1].

1: https://www.polymer-project.org/1.0/docs/devguide/styling#style-modules

[Alexander Alekseev, 2016/05/24 18:28:09]

I believe Gaia has its own design, which doesn't depend on our OOBE design. It
seems to me that we should tie only dependent projects.

+<dom-module id="oobe-icon-button">
+  <style>
+    #iconButton {
+      height: 24px;
+      padding: 0;
+      width: 24px;
+    }
+  </style>
 
   <template>
     <div on-click="onClick_" on-tap="onClick_">
       <paper-icon-button id="iconButton" icon="[[icon]]" disabled="[[disabled]]"
           aria-label="[[ariaLabel]]">
       </paper-icon-button>
     </div>
   </template>
 </dom-module>