oobe: Support meets device customization

Bug: 1178626 Change-Id: Idb95d8d9e7033ad418d4f6031ceab9b6999b77b6 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2696376 Commit-Queue: Roman Aleksandrov <raleksandrov@google.com> Reviewed-by: Roman Sorokin [CET] <rsorokin@chromium.org> Reviewed-by: Denis Kuznetsov [CET] <antrim@chromium.org> Cr-Commit-Position: refs/heads/master@{#861974}
FairyWorld · Mar 11, 2021 · c4de72c · c4de72c
1 parent f5bfc93
commit c4de72c
Show file tree

Hide file tree

Showing 9 changed files with 123 additions and 16 deletions.
diff --git a/chrome/browser/resources/chromeos/login/components/common_styles/common_styles.html b/chrome/browser/resources/chromeos/login/components/common_styles/common_styles.html
@@ -12,6 +12,7 @@
       <include src="../oobe_links.css">
       :host {
         --oobe-default-font: {
+            color: var(--oobe-text-color);
             font-family: var(--oobe-default-font-family);
             font-size: var(--oobe-default-font-size);
             font-weight: var(--oobe-default-font-weight);
@@ -25,6 +26,13 @@
             line-height: var(--oobe-header-line-height);
         };
 
+        --oobe-subheader-font: {
+            font-family: var(--oobe-subheader-font-family);
+            font-size: var(--oobe-subheader-font-size);
+            font-weight: var(--oobe-subheader-font-weight);
+            line-height: var(--oobe-subheader-line-height);
+        };
+
         /* OOBE Modal Dialog */
         --oobe-modal-dialog-header-font: {
           font-family: var(--oobe-default-font-family);

diff --git a/...rowser/resources/chromeos/login/components/oobe_adaptive_dialog/oobe_adaptive_dialog.html b/...rowser/resources/chromeos/login/components/oobe_adaptive_dialog/oobe_adaptive_dialog.html
@@ -9,6 +9,7 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_lazy_render/cr_lazy_render.html">
 
 <link rel="import" href="/components/common_styles.html">
+<link rel="import" href="/components/oobe_custom_vars_css.html">
 <link rel="import" href="/components/oobe_shared_vars_css.html">
 <link rel="import" href="/components/oobe_focus_behavior.html">
 
@@ -106,7 +107,7 @@ <h1 slot="title">Title</h1>
 
       #oobe-subtitle ::slotted(*) {
         color: var(--oobe-subheader-text-color);
-        line-height: var(--oobe-adaptive-dialog-text-line-height);
+        @apply --oobe-subheader-font;
         margin: 0;
         overflow-wrap: break-word;
         text-align: var(--oobe-text-alignment);

diff --git a/chrome/browser/resources/chromeos/login/components/oobe_vars/README.md b/chrome/browser/resources/chromeos/login/components/oobe_vars/README.md
@@ -0,0 +1,16 @@
+# oobe-custom-vars
+
+## Overview
+
+Only one of the `oobe-custom-vars` files is used within OOBE. All of the files
+define same set of CCS vars and each file is dedicated to different OOBE sceanrio.
+
+## oobe-custom-vars
+Set of vars which corresponds to the new OOBE design (OOBE Redesign 2021).
+
+## oobe-custom-vars-old
+Set of vars which corresponds to the old OOBE design.
+
+## oobe-custom-vars-remora
+Set of vars which corresponds to Chromebox for Meetings (CfM) devices (requisiton remora).
+
diff --git a/chrome/browser/resources/chromeos/login/components/oobe_vars/oobe_custom_vars_css.html b/chrome/browser/resources/chromeos/login/components/oobe_vars/oobe_custom_vars_css.html
@@ -2,9 +2,12 @@
      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/cr_elements/shared_vars_css.html">
+
 <custom-style>
   <style is="custom-style">
     html {
+      /* Buttons */
       --oobe-button-border-color: white;
       --oobe-button-radius: 16px;
 
@@ -15,6 +18,24 @@
       --oobe-next-button-padding-inline-start: 16px;
 
       --oobe-icon-button-image-margin: 8px;
+
+      /* Fonts */
+      --oobe-header-font-size: 28px;
+      --oobe-header-line-height: 36px;
+      --oobe-header-font-weight: 500; /* medium */
+
+      --oobe-subheader-font-size: 14px;
+      --oobe-subheader-line-height: 20px;
+
+      --oobe-default-font-size: 14px;
+      --oobe-default-line-height: 20px;
+      --oobe-text-color: var(--google-grey-900);
+
+      --oobe-button-font-family: Roboto, sans-serif;
+      --oobe-button-font-size: 12px;
+
+      /* Dialog */
+      --oobe-adaptive-dialog-icon-size: 32px;
     }
   </style>
 </custom-style>

diff --git a/chrome/browser/resources/chromeos/login/components/oobe_vars/oobe_custom_vars_old_css.html b/chrome/browser/resources/chromeos/login/components/oobe_vars/oobe_custom_vars_old_css.html
@@ -7,6 +7,7 @@
 <custom-style>
   <style is="custom-style">
     html {
+      /* Buttons */
       --oobe-button-border-color: var(--google-grey-refresh-300);
       --oobe-button-radius: 4px;
 
@@ -17,6 +18,24 @@
       --oobe-next-button-padding-inline-start: 16px;
 
       --oobe-icon-button-image-margin: 4px;
+
+      /* Fonts */
+      --oobe-header-font-size: 28px;
+      --oobe-header-line-height: 36px;
+      --oobe-header-font-weight: 400; /* regular */
+
+      --oobe-subheader-font-size: 14px;
+      --oobe-subheader-line-height: 20px;
+
+      --oobe-default-font-size: 13px;
+      --oobe-default-line-height: 20px;
+      --oobe-text-color: var(--google-grey-700);
+
+      --oobe-button-font-family: "Google Sans", Roboto, sans-serif;
+      --oobe-button-font-size: 12px;
+
+      /* Dialog */
+      --oobe-adaptive-dialog-icon-size: 32px;
     }
   </style>
 </custom-style>

diff --git a/...me/browser/resources/chromeos/login/components/oobe_vars/oobe_custom_vars_remora_css.html b/...me/browser/resources/chromeos/login/components/oobe_vars/oobe_custom_vars_remora_css.html
@@ -0,0 +1,41 @@
+<!-- Copyright 2021 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/cr_elements/shared_vars_css.html">
+
+<custom-style>
+  <style is="custom-style">
+    html {
+      /* Buttons */
+      --oobe-button-border-color: white;
+      --oobe-button-radius: 4px;
+
+      --oobe-back-button-padding-inline-end: 16px;
+      --oobe-back-button-padding-inline-start: 8px;
+
+      --oobe-next-button-padding-inline-end: 8px;
+      --oobe-next-button-padding-inline-start: 16px;
+
+      --oobe-icon-button-image-margin: 4px;
+
+      /* Fonts */
+      --oobe-header-font-size: 32px;
+      --oobe-header-line-height: 40px;
+      --oobe-header-font-weight: 500; /* medium */
+
+      --oobe-subheader-font-size: 22px;
+      --oobe-subheader-line-height: 28px;
+
+      --oobe-default-font-size: 18px;
+      --oobe-default-line-height: 24px;
+      --oobe-text-color: var(--google-grey-900);
+
+      --oobe-button-font-family: Roboto, sans-serif;
+      --oobe-button-font-size: 16px;
+
+      /* Dialog */
+      --oobe-adaptive-dialog-icon-size: 48px;
+    }
+  </style>
+</custom-style>
diff --git a/chrome/browser/resources/chromeos/login/components/oobe_vars/oobe_shared_vars_css.html b/chrome/browser/resources/chromeos/login/components/oobe_vars/oobe_shared_vars_css.html
@@ -9,7 +9,6 @@
      * updated when below css vars are changed.
      */
     html {
-      --oobe-adaptive-dialog-text-line-height: 18px;
       --oobe-adaptive-dialog-buttons-horizontal-padding: clamp(20px,
         calc(var(--oobe-adaptive-dialog-width) * 0.035), 40px);
       --oobe-adaptive-dialog-buttons-vertical-padding: clamp(20px,
@@ -20,33 +19,25 @@
       --oobe-adaptive-dialog-header-top-padding:
             var(--oobe-adaptive-dialog-content-padding);
       --oobe-adaptive-dialog-title-top-padding: 40px;
-      --oobe-adaptive-dialog-icon-size: 32px;
       --oobe-adaptive-dialog-content-top-padding:
         var(--oobe-adaptive-dialog-content-padding);
 
       /* Fonts vars */
-      --oobe-button-font-family: "Google Sans", Roboto, sans-serif;
       --oobe-default-font-family: Roboto, sans-serif;
+      --oobe-subheader-font-family: Roboto, sans-serif;
       --oobe-header-font-family: "Google Sans", Roboto, sans-serif;
 
-      --oobe-header-font-size: 28px;
       --oobe-radio-card-label-font-size: 18px;
       --oobe-modal-dialog-header-font-size: 15px;
-      --oobe-default-font-size: 13px;
 
       --oobe-default-font-weight: 400; /* regular */
-      --oobe-header-font-weight: 400; /* regular */
+      --oobe-subheader-font-weight: 400; /* regular */
       --oobe-modal-dialog-header-font-weight: 500; /* medium */
 
-      --oobe-button-font-size: 12px;
-
       --oobe-header-text-color: var(--google-grey-900);
       --oobe-subheader-text-color: var(--google-grey-700);
-      --oobe-text-color: var(--google-grey-700);
 
-      --oobe-header-line-height: 36px;
       --oobe-radio-card-label-line-height: 24px;
-      --oobe-default-line-height: 20px;
       /* Fonts vars end */
     }
   </style>

diff --git a/chrome/browser/resources/chromeos/login/oobe_resources.grd b/chrome/browser/resources/chromeos/login/oobe_resources.grd
@@ -46,6 +46,7 @@
       <!-- OOBE CSS Vars -->
       <include name="IDR_OOBE_COMPONENTS_OOBE_CUSTOM_VARS_OLD_CSS_HTML" file="components/oobe_vars/oobe_custom_vars_old_css.html" type="chrome_html" />
       <include name="IDR_OOBE_COMPONENTS_OOBE_CUSTOM_VARS_CSS_HTML" file="components/oobe_vars/oobe_custom_vars_css.html" type="chrome_html" />
+      <include name="IDR_OOBE_COMPONENTS_OOBE_CUSTOM_VARS_REMORA_CSS_HTML" file="components/oobe_vars/oobe_custom_vars_remora_css.html" type="chrome_html" />
       <include name="IDR_OOBE_COMPONENTS_OOBE_SHARED_VARS_CSS_HTML" file="components/oobe_vars/oobe_shared_vars_css.html" type="chrome_html" />
 
       <!-- OOBE Test API -->

diff --git a/chrome/browser/ui/webui/chromeos/login/oobe_ui.cc b/chrome/browser/ui/webui/chromeos/login/oobe_ui.cc
@@ -729,8 +729,20 @@ void OobeUI::AddOobeComponents(content::WebUIDataSource* source,
                           IDR_OOBE_COMPONENTS_OOBE_LOADING_DIALOG_JS);
 
   if (features::IsNewOobeLayoutEnabled()) {
+    if (policy::EnrollmentRequisitionManager::IsRemoraRequisition()) {
+      source->AddResourcePath(
+          kOobeCustomVarsCssHTML,
+          IDR_OOBE_COMPONENTS_OOBE_CUSTOM_VARS_REMORA_CSS_HTML);
+    } else {
+      source->AddResourcePath(kOobeCustomVarsCssHTML,
+                              IDR_OOBE_COMPONENTS_OOBE_CUSTOM_VARS_CSS_HTML);
+    }
+  } else {
     source->AddResourcePath(kOobeCustomVarsCssHTML,
-                            IDR_OOBE_COMPONENTS_OOBE_CUSTOM_VARS_CSS_HTML);
+                            IDR_OOBE_COMPONENTS_OOBE_CUSTOM_VARS_OLD_CSS_HTML);
+  }
+
+  if (features::IsNewOobeLayoutEnabled()) {
     source->AddResourcePath(kOobeAdaptiveDialogHTML,
                             IDR_OOBE_COMPONENTS_OOBE_ADAPTIVE_DIALOG_HTML);
     source->AddResourcePath(kOobeAdaptvieDialogJS,
@@ -747,9 +759,6 @@ void OobeUI::AddOobeComponents(content::WebUIDataSource* source,
         "worker-src blob: 'self';");
 
   } else {
-    source->AddResourcePath(
-        kOobeCustomVarsCssHTML,
-        IDR_OOBE_COMPONENTS_OOBE_CUSTOM_VARS_OLD_CSS_HTML);
     source->AddResourcePath(kOobeAdaptiveDialogHTML,
                             IDR_OOBE_COMPONENTS_OOBE_ADAPTIVE_DIALOG_OLD_HTML);
     source->AddResourcePath(kOobeAdaptvieDialogJS,