Chrome OS: Replace EULA screen checkbox with toggle button.

Bug: 821118
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I6233f1767349def3ff810d49af61ebd800ac9b26
Reviewed-on: https://chromium-review.googlesource.com/981788Reviewed-by: Wenzhao (Colin) Zang <wzang@chromium.org>
Commit-Queue: Alexander Alekseev <alemate@chromium.org>
Cr-Commit-Position: refs/heads/master@{#547071}

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

@@ -3,33 +3,7 @@
 
 <dom-module id="oobe-a11y-option">
   <template>
-    <style>
-      :root {
-          --oobe-toggle-button-size: {
-            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
-            height: 16px;
-            top: -2px;
-            width: 16px;
-          };
-          --oobe-toggle-bar-size: {
-            height: 12px;
-            left: 4px;
-            width: 24px;
-          };
-          --paper-toggle-button-checked-bar-color: var(--google-blue-500);
-          --paper-toggle-button-checked-bar: var(--oobe-toggle-bar-size);
-          --paper-toggle-button-checked-button: {
-            @apply(--oobe-toggle-button-size);
-            transform: translate(14px, 0);
-          };
-          --paper-toggle-button-checked-button-color: var(--google-blue-500);
-          --paper-toggle-button-checked-ink-color: var(--google-blue-500);
-          --paper-toggle-button-label-spacing: 0;
-          --paper-toggle-button-unchecked-bar: var(--oobe-toggle-bar-size);
-          --paper-toggle-button-unchecked-button:
-              var(--oobe-toggle-button-size);
-      }
-    </style>
+    <link rel="stylesheet" href="oobe_toggle_button.css">
     <link rel="stylesheet" href="oobe_flex_layout.css">
     <link rel="stylesheet" href="oobe_a11y_option.css">
     <div id="elementBox" class="layout horizontal">

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

@@ -35,15 +35,11 @@ a {
 #logging {
   -webkit-margin-start: 20px;
   color: rgba(0, 0, 0, 0.54);
-  margin-bottom: 20px;
   margin-top: 23px; /* = 36 - font size */
 }
 
-#usageStats {
-  --paper-checkbox-size: 16px;
-  --paper-checkbox-checked-color: var(--google-blue-500);
-  --paper-checkbox-ink-size: 44px;
-  size: 16px;
+paper-toggle-button {
+  width: 36px;
 }
 
 #usageStatsLabelContainer {

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

@@ -39,6 +39,7 @@
 
 <dom-module id="oobe-eula-md">
   <template>
+    <link rel="stylesheet" href="oobe_toggle_button.css">
     <link rel="stylesheet" href="chrome://resources/css/throbber.css">
     <link rel="stylesheet" href="oobe_eula.css">
     <link rel="stylesheet" href="oobe_dialog_parameters.css">
@@ -71,9 +72,9 @@
             i18n-content="eulaSystemInstallationSettings">
         </a>
         <div id="logging" class="layout horizontal">
-          <paper-checkbox id="usageStats" checked="{{usageStatsChecked}}"
+          <paper-toggle-button id="usageStats" checked="{{usageStatsChecked}}"
               on-change="onUsageChanged_" aria-labelledby="usageStatsLabel">
-          </paper-checkbox>
+          </paper-toggle-button>
           <div id="usageStatsLabelContainer">
             <span id="usageStatsLabel" i18n-content="checkboxLogging"></span>
             <a id="" href="#" i18n-content="learnMore"

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

+/* Copyright 2018 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. */
+
+
+/* This is common style file for all OOBE paper-toggle buttons. */
+
+:root {
+    --oobe-toggle-button-size: {
+      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
+      height: 16px;
+      top: -2px;
+      width: 16px;
+    };
+    --oobe-toggle-bar-size: {
+      height: 12px;
+      left: 4px;
+      width: 24px;
+    };
+    --paper-toggle-button-checked-bar-color: var(--google-blue-500);
+    --paper-toggle-button-checked-bar: var(--oobe-toggle-bar-size);
+    --paper-toggle-button-checked-button: {
+      @apply(--oobe-toggle-button-size);
+      transform: translate(14px, 0);
+    };
+    --paper-toggle-button-checked-button-color: var(--google-blue-500);
+    --paper-toggle-button-checked-ink-color: var(--google-blue-500);
+    --paper-toggle-button-label-spacing: 0;
+    --paper-toggle-button-unchecked-bar: var(--oobe-toggle-bar-size);
+    --paper-toggle-button-unchecked-button:
+        var(--oobe-toggle-button-size);
+}