OOBE: Fix css styling for Polymer v2

By polymer specification all styling should be done inside <template>
element. Preprocessor embeds <link rel="stylesheet"> into resulting
HTML.

Bug: 955194
Change-Id: I91cbadf0b73cc771619a9041e2f7c662199f3740
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2010773
Commit-Queue: Denis Kuznetsov [CET] <antrim@chromium.org>
Reviewed-by: Roman Sorokin [CET] <rsorokin@chromium.org>
Cr-Commit-Position: refs/heads/master@{#733441}

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

@@ -5,14 +5,14 @@
 <link rel="import" href="chrome://oobe/custom_elements.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
-<link rel="stylesheet" href="gaia_card_parameters.css">
 
 <dom-module id="enterprise-enrollment">
   <template>
+    <link rel="stylesheet" href="gaia_card_parameters.css">
+    <link rel="stylesheet" href="oobe_flex_layout.css">
+    <link rel="stylesheet" href="oobe_dialog_host.css">
+    <link rel="stylesheet" href="enterprise_enrollment.css">
     <div id="oauth-enroll-step-contents">
-      <link rel="stylesheet" href="oobe_flex_layout.css">
-      <link rel="stylesheet" href="oobe_dialog_host.css">
-      <link rel="stylesheet" href="enterprise_enrollment.css">
       <div id="step-signin" hidden$="[[!eq_(currentStep_, 'signin')]]">
         <oobe-dialog class="gaia-dialog" role="dialog"
             id="enrollment-gaia-dialog" has-buttons no-header

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

@@ -20,9 +20,8 @@
     'disabled' - button is disabled when the attribute is set.
 -->
 <dom-module id="gaia-button">
-  <link rel="stylesheet" href="gaia_button.css">
-
   <template>
+    <link rel="stylesheet" href="gaia_button.css">
     <cr-button id="button" disabled="[[disabled]]" on-click="onClick_"
         noink$="[[link]]">
       <slot></slot>
@@ -45,9 +44,8 @@
     'aria-label' - accessibility label.
 -->
 <dom-module id="gaia-icon-button">
-  <link rel="stylesheet" href="gaia_icon_button.css">
-
   <template>
+    <link rel="stylesheet" href="gaia_icon_button.css">
     <div>
       <cr-icon-button id="iconButton" iron-icon="[[icon]]" on-click="onClick_"
           disabled="[[disabled]]" aria-label$="[[ariaLabel]]"></cr-icon-button>

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

@@ -24,10 +24,9 @@
   with class |footer|.
 -->
 <dom-module id="gaia-card">
-  <link rel="stylesheet" href="gaia_card.css">
-  <link rel="stylesheet" href="oobe_flex_layout.css">
-
   <template>
+    <link rel="stylesheet" href="gaia_card.css">
+    <link rel="stylesheet" href="oobe_flex_layout.css">
     <div class="gaia-header vertical layout relative">
       <div class="header-container flex vertical layout relative">
         <slot name="header"></slot>

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

@@ -15,10 +15,9 @@
    'email' - displayed email.
 -->
 <dom-module id="gaia-header">
-  <link rel="stylesheet" href="gaia_header.css">
-  <link rel="stylesheet" href="oobe_flex_layout.css">
-
   <template>
+    <link rel="stylesheet" href="gaia_header.css">
+    <link rel="stylesheet" href="oobe_flex_layout.css">
     <img src="chrome://theme/IDR_LOGO_AVATAR_CIRCLE_BLUE_COLOR" alt
         class="self-start">
     <div id="email"><span>[[email]]<span></div>

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

@@ -39,10 +39,9 @@
                       'isInvalid' at the end.
 -->
 <dom-module id="gaia-input">
-  <link rel="stylesheet" href="gaia_input.css">
-  <link rel="stylesheet" href="oobe_flex_layout.css">
-
   <template>
+    <link rel="stylesheet" href="gaia_input.css">
+    <link rel="stylesheet" href="oobe_flex_layout.css">
     <paper-input-container id="decorator" on-tap="onTap"
         invalid="{{isInvalid}}" disabled$="[[disabled]]">
       <label slot="label">

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

@@ -24,10 +24,9 @@
 
 -->
 <dom-module id="gaia-input-form">
-  <link rel="stylesheet" href="gaia_input_form.css">
-  <link rel="stylesheet" href="oobe_flex_layout.css">
-
   <template>
+    <link rel="stylesheet" href="gaia_input_form.css">
+    <link rel="stylesheet" href="oobe_flex_layout.css">
     <div on-keydown="onKeyDown_">
       <slot id="inputs" name="inputs"></slot>
       <div class="horizontal-reverse justified layout center">

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

@@ -42,11 +42,10 @@
 
 -->
 <dom-module id="gaia-password-changed">
-  <link rel="stylesheet" href="gaia_password_changed.css">
-  <link rel="stylesheet" href="oobe_flex_layout.css">
-  <link rel="stylesheet" href="gaia_card_parameters.css">
-
   <template>
+    <link rel="stylesheet" href="gaia_password_changed.css">
+    <link rel="stylesheet" href="oobe_flex_layout.css">
+    <link rel="stylesheet" href="gaia_card_parameters.css">
     <neon-animated-pages id="animatedPages" class="fit"
         entry-animation="fade-in-animation" exit-animation="fade-out-animation"
         on-neon-animation-finish="onAnimationFinish_" selected="0">

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

@@ -37,10 +37,9 @@
 
 -->
 <dom-module id="navigation-bar">
-  <link rel="stylesheet" href="navigation_bar.css">
-  <link rel="stylesheet" href="oobe_flex_layout.css">
-
   <template>
+    <link rel="stylesheet" href="navigation_bar.css">
+    <link rel="stylesheet" href="oobe_flex_layout.css">
     <div class="fit layout horizontal center">
       <gaia-icon-button id="backButton" icon="navigation-bar:arrow-back"
           hidden="[[!backVisible]]" disabled="[[disabled]]" on-tap="onBack_"

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

@@ -3,17 +3,16 @@
 <link rel="import" href="chrome://resources/cr_components/chromeos/network/onc_mojo.html">
 
 <dom-module id="network-select-login">
-  <style>
-    :host {
-      display: inline-flex;
-      min-height: 0;
-    }
-
-    #networkSelect {
-      flex: 1;
-    }
-  </style>
   <template>
+    <style>
+      :host {
+        display: inline-flex;
+      }
+
+      #networkSelect {
+        flex: 1;
+      }
+    </style>
     <network-select id="networkSelect" class="focus-on-show"
         show-scan-progress
         custom-items="[[getNetworkCustomItems_(isConnected)]]"

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

@@ -38,10 +38,9 @@
 
 -->
 <dom-module id="notification-card">
-  <link rel="stylesheet" href="notification_card.css">
-  <link rel="stylesheet" href="oobe_flex_layout.css">
-
   <template>
+    <link rel="stylesheet" href="notification_card.css">
+    <link rel="stylesheet" href="oobe_flex_layout.css">
     <div id="container" class="vertical layout center fit">
       <div class="flex vertical layout center center-justified">
         <template is="dom-if" if="[[type]]">

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

@@ -39,10 +39,9 @@
                  entered password is incorrect.
 -->
 <dom-module id="offline-gaia">
-  <link rel="stylesheet" href="offline_gaia.css">
-
   <template>
     <style include="cr-shared-style"></style>
+    <link rel="stylesheet" href="offline_gaia.css">
     <link rel="stylesheet" href="oobe_flex_layout.css">
     <link rel="stylesheet" href="oobe_dialog_host.css">
     <link rel="stylesheet" href="gaia_card_parameters.css">

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

@@ -41,11 +41,10 @@
     'focus'      - If the current card is the first one, focuses password input.
 -->
 <dom-module id="saml-confirm-password">
-  <link rel="stylesheet" href="oobe_flex_layout.css">
-  <link rel="stylesheet" href="saml_confirm_password.css">
-  <link rel="stylesheet" href="gaia_card_parameters.css">
-
   <template>
+    <link rel="stylesheet" href="oobe_flex_layout.css">
+    <link rel="stylesheet" href="saml_confirm_password.css">
+    <link rel="stylesheet" href="gaia_card_parameters.css">
     <style include="cr-shared-style">
       .cancel-button {
         margin-inline-end: 0;

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

@@ -3,11 +3,10 @@
      found in the LICENSE file. -->
 
 <dom-module id="gaia-signin">
-  <link rel="stylesheet" href="oobe_dialog_host.css">
-  <link rel="stylesheet" href="oobe_flex_layout.css">
-  <link rel="stylesheet" href="screen_gaia_signin.css">
-
   <template>
+    <link rel="stylesheet" href="oobe_dialog_host.css">
+    <link rel="stylesheet" href="oobe_flex_layout.css">
+    <link rel="stylesheet" href="screen_gaia_signin.css">
     <oobe-dialog id="signin-frame-dialog" class="gaia-dialog" role="dialog"
         has-buttons no-header no-footer-padding
         show-buttons-overlay="[[!navigationEnabled_]]"