[personalization] added dynamic color toggle

Added a toggle to enable or disable dynamic color. This is a UI change
only -- I'll hook up the toggle in a separate CL. Changes are behind the
Jelly experiment.

BUG=b:250955899
TESTED=https://screenshot.googleplex.com/6SDYRWs8LVisunu

Change-Id: I49028b4d240c1a3f97269757f89d12d6d5247dd2
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3946351
Reviewed-by: Jeffrey Young <cowmoo@chromium.org>
Commit-Queue: Erica Lee <ericamlee@google.com>
Cr-Commit-Position: refs/heads/main@{#1058933}

ash/webui/personalization_app/resources/BUILD.gn

@@ -88,6 +88,7 @@ web_component_files = [
   "js/personalization_theme_element.ts",
   "js/personalization_toast_element.ts",
   "js/personalization_breadcrumb_element.ts",
+  "js/theme/theme_header_element.ts",
   "js/user/avatar_camera_element.ts",
   "js/user/avatar_list_element.ts",
   "js/user/user_preview_element.ts",

ash/webui/personalization_app/resources/js/personalization_app.ts

@@ -28,6 +28,7 @@ import './personalization_toast_element.js';
 import './personalization_breadcrumb_element.js';
 import './personalization_main_element.js';
 import './personalization_theme_element.js';
+import './theme/theme_header_element.js';
 import './user/avatar_camera_element.js';
 import './user/avatar_list_element.js';
 import './user/user_preview_element.js';
@@ -78,6 +79,7 @@ export {PersonalizationThemeElement} from './personalization_theme_element.js';
 export {PersonalizationToastElement} from './personalization_toast_element.js';
 export {setDarkModeEnabledAction, SetDarkModeEnabledAction, ThemeActionName, ThemeActions} from './theme/theme_actions.js';
 export {setThemeProviderForTesting} from './theme/theme_interface_provider.js';
+export {ThemeHeader} from './theme/theme_header_element.js';
 export {ThemeObserver} from './theme/theme_observer.js';
 export {AvatarCamera, AvatarCameraMode} from './user/avatar_camera_element.js';
 export {AvatarList} from './user/avatar_list_element.js';

ash/webui/personalization_app/resources/js/personalization_theme_element.html

@@ -42,9 +42,14 @@
   }
 </style>
 <div id="container">
-  <div id="themeLabel">
-    <h2>$i18n{themeLabel}</h2>
-  </div>
+  <template is="dom-if" if="[[!isJellyEnabled_]]">
+    <div id="themeLabel">
+      <h2>$i18n{themeLabel}</h2>
+    </div>
+  </template>
+  <template is="dom-if" if="[[isJellyEnabled_]]">
+    <theme-header></theme-header>
+  </template>
   <iron-a11y-keys id="keys" keys="left right" on-keys-pressed="onKeysPress_">
   </iron-a11y-keys>
   <iron-selector id="selector" selected="0"

ash/webui/personalization_app/resources/js/personalization_theme_element.ts

@@ -15,6 +15,7 @@ import '../css/common.css.js';
 import '../css/cros_button_style.css.js';
 
 import {CrButtonElement} from 'chrome://resources/cr_elements/cr_button/cr_button.js';
+import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {IronA11yKeysElement} from 'chrome://resources/polymer/v3_0/iron-a11y-keys/iron-a11y-keys.js';
 import {IronSelectorElement} from 'chrome://resources/polymer/v3_0/iron-selector/iron-selector.js';
 
@@ -52,6 +53,10 @@ export class PersonalizationThemeElement extends WithPersonalizationStore {
         type: Boolean,
         value: null,
       },
+      isJellyEnabled_: {
+        type: Boolean,
+        value: loadTimeData.getBoolean('isJellyEnabled'),
+      },
 
       /** The button currently highlighted by keyboard navigation. */
       selectedButton_: {

ash/webui/personalization_app/resources/js/theme/theme_header_element.html

@@ -0,0 +1,30 @@
+<style include="common">
+  :host {
+    color: var(--cros-text-color-primary);
+    font: var(--personalization-app-label-font);
+  }
+
+  #theme-header {
+    align-items: center;
+    display: flex;
+    margin-bottom: 16px;
+  }
+
+  #theme-title {
+    flex-grow: 1;
+  }
+
+  #dynamic-color-toggle-description {
+    font-weight: var(--cros-body-1-font-weight);
+    margin-inline-end: 12px;
+  }
+</style>
+<div id="theme-header">
+  <!-- TODO(b/253089237): Add the final translated text. -->
+  <div id="theme-title">[temp]Theme color</div>
+  <!-- TODO(b/253089237): Add the final translated text. -->
+  <div id="dynamic-color-toggle-description">[temp]Auto</div>
+  <!-- TODO(b/253089237): Add the translated aria label. -->
+  <cr-toggle id="dynamic-color-toggle" checked="{{checked}}">
+  </cr-toggle>
+</div>

ash/webui/personalization_app/resources/js/theme/theme_header_element.ts

@@ -0,0 +1,39 @@
+// Copyright 2022 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @fileoverview This component displays the theme header and a toggle button.
+ */
+
+import '../../css/common.css.js';
+import 'chrome://resources/cr_elements/cr_toggle/cr_toggle.js';
+
+import {WithPersonalizationStore} from '../personalization_store.js';
+
+import {getTemplate} from './theme_header_element.html.js';
+
+export class ThemeHeader extends WithPersonalizationStore {
+  static get is() {
+    return 'theme-header';
+  }
+
+  static get template() {
+    return getTemplate();
+  }
+
+  static get properties() {
+    return {
+      checked: {
+        type: Boolean,
+        value: true,
+        notify: true,
+        reflectToAttribute: true,
+      },
+    };
+  }
+
+  checked: boolean;
+}
+
+customElements.define(ThemeHeader.is, ThemeHeader);