customization: Adapt shortcut_input element to be generic

Bug: b/241965717
Change-Id: I414161881f8d3fb6365351555d7256616757af46
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4953072
Commit-Queue: David Padlipsky <dpad@google.com>
Reviewed-by: Jimmy Gong <jimmyxgong@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1215950}

ash/webui/common/resources/BUILD.gn

@@ -150,6 +150,7 @@ web_component_files_ts = [
   "quick_unlock/pin_keyboard.ts",
   "quick_unlock/setup_pin_keyboard.ts",
   "quick_unlock/fingerprint_progress.ts",
+  "shortcut_input_ui/shortcut_input.ts",
   "shortcut_input_ui/shortcut_input_key.ts",
 ]
 
@@ -160,11 +161,21 @@ non_web_component_files_ts = [
   "quick_unlock/utils.ts",
   "typescript_utils/strict_query.ts",
   "quick_unlock/lock_screen_constants.ts",
+  "shortcut_input_ui/fake_shortcut_input_provider.ts",
+  "shortcut_input_ui/shortcut_utils.ts",
 ]
 
 mojo_files_ts = [
   "connectivity/passpoint.mojom-webui.ts",
   "hotspot/cros_hotspot_config.mojom-webui.ts",
+  "shortcut_input_ui/accelerator_actions.mojom-webui.ts",
+  "shortcut_input_ui/accelerator_keys.mojom-webui.ts",
+  "shortcut_input_ui/input_device_settings.mojom-webui.ts",
+  "shortcut_input_ui/shortcut_input_provider.mojom-webui.ts",
+  "shortcut_input_ui/extended_fkeys_modifier.mojom-webui.ts",
+  "shortcut_input_ui/modifier_key.mojom-webui.ts",
+  "shortcut_input_ui/simulate_right_click_modifier.mojom-webui.ts",
+  "shortcut_input_ui/six_pack_shortcut_modifier.mojom-webui.ts",
 ]
 
 icons_html_files = [
@@ -262,6 +273,7 @@ ts_library("build_ts") {
     ":preprocess_ts",
     "connectivity:copy_mojo_files",
     "hotspot:copy_mojo_files",
+    "shortcut_input_ui:copy_mojo_files",
   ]
 }
 
@@ -432,6 +444,7 @@ generate_definitions_js_files = [
   "quick_unlock/setup_pin_keyboard.html.js",
   "shortcut_input_ui/shortcut_input_key.html.js",
   "shortcut_input_ui/icons.html.js",
+  "shortcut_input_ui/shortcut_input.html.js",
   "traffic_counters/traffic_counters_adapter.js",
   "util.js",
 ]

ash/webui/common/resources/shortcut_input_ui/BUILD.gn

@@ -0,0 +1,28 @@
+# Copyright 2023 The Chromium Authors
+# Use of this source code is governed by a BSD - style license that can be
+# found in the LICENSE file.
+
+import("//build/config/chromeos/ui_mode.gni")
+
+assert(is_chromeos_ash, "Shortcut Input is for Chrome OS only.")
+
+copy("copy_mojo_files") {
+  deps = [
+    "//ash/public/mojom:accelerator_actions_ts__generator",
+    "//ash/public/mojom:accelerator_keys_ts__generator",
+    "//ash/public/mojom:input_device_settings_ts__generator",
+    "//ash/webui/common/mojom:shortcut_input_provider_ts__generator",
+    "//ui/events/ash/mojom:mojom_ts__generator",
+  ]
+  sources = [
+    "$root_gen_dir/ash/public/mojom/accelerator_actions.mojom-webui.ts",
+    "$root_gen_dir/ash/public/mojom/accelerator_keys.mojom-webui.ts",
+    "$root_gen_dir/ash/public/mojom/input_device_settings.mojom-webui.ts",
+    "$root_gen_dir/ash/webui/common/mojom/shortcut_input_provider.mojom-webui.ts",
+    "$root_gen_dir/ui/events/ash/mojom/extended_fkeys_modifier.mojom-webui.ts",
+    "$root_gen_dir/ui/events/ash/mojom/modifier_key.mojom-webui.ts",
+    "$root_gen_dir/ui/events/ash/mojom/simulate_right_click_modifier.mojom-webui.ts",
+    "$root_gen_dir/ui/events/ash/mojom/six_pack_shortcut_modifier.mojom-webui.ts",
+  ]
+  outputs = [ "$root_gen_dir/ash/webui/common/resources/preprocessed/shortcut_input_ui/{{source_file_part}}" ]
+}

ash/webui/common/resources/shortcut_input_ui/fake_shortcut_input_provider.ts

@@ -0,0 +1,56 @@
+// Copyright 2023 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {FakeObservables} from '../fake_observables.js';
+
+import {KeyEvent} from './input_device_settings.mojom-webui.js';
+import {ShortcutInputObserverInterface, ShortcutInputProviderInterface} from './shortcut_input_provider.mojom-webui.js';
+
+export class FakeShortcutInputProvider implements
+    ShortcutInputProviderInterface {
+  private observables: FakeObservables = new FakeObservables();
+
+  constructor() {
+    this.registerObservables();
+  }
+
+  sendKeyPressEvent(keyEvent: KeyEvent) {
+    this.observables.setObservableData(
+        'ShortcutInputObserver_OnShortcutInputEventPressed', [keyEvent]);
+    this.observables.trigger(
+        'ShortcutInputObserver_OnShortcutInputEventPressed');
+  }
+
+  sendKeyReleaseEvent(keyEvent: KeyEvent) {
+    this.observables.setObservableData(
+        'ShortcutInputObserver_OnShortcutInputEventReleased', [keyEvent]);
+    this.observables.trigger(
+        'ShortcutInputObserver_OnShortcutInputEventReleased');
+  }
+
+  startObservingShortcutInput(observer: ShortcutInputObserverInterface) {
+    this.observables.observe(
+        'ShortcutInputObserver_OnShortcutInputEventPressed',
+        (keyEvent: KeyEvent) => {
+          observer.onShortcutInputEventPressed(keyEvent);
+        });
+    this.observables.observe(
+        'ShortcutInputObserver_OnShortcutInputEventReleased',
+        (keyEvent: KeyEvent) => {
+          observer.onShortcutInputEventReleased(keyEvent);
+        });
+  }
+
+  stopObservingShortcutInput() {
+    this.observables = new FakeObservables();
+    this.registerObservables();
+  }
+
+  private registerObservables() {
+    this.observables.register(
+        'ShortcutInputObserver_OnShortcutInputEventPressed');
+    this.observables.register(
+        'ShortcutInputObserver_OnShortcutInputEventReleased');
+  }
+}

ash/webui/common/resources/shortcut_input_ui/shortcut_input.html

@@ -0,0 +1,68 @@
+<style>
+  .flex-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+  }
+
+  #confirmContainer {
+    display: flex;
+    flex-direction: row;
+  }
+
+  #container:focus {
+    outline: none;
+  }
+
+  #keySeparator {
+    align-items: center;
+    display: flex;
+    padding-inline-end: 8px;
+  }
+</style>
+
+<div id="container" class="flex-row" tabindex="-1">
+  <template is="dom-if" if="[[shouldShowConfirmView(isCapturing)]]">
+    <div id="confirmContainer">
+      <template is="dom-repeat" items="[[modifiers]]">
+        <shortcut-input-key key="[[item]]" key-state="modifier-selected">
+        </shortcut-input-key>
+      </template>
+      <template is="dom-if"
+          if="[[shouldShowSeparator(showSeparator, modifiers)]]">
+        <div id="keySeparator"> + </div>
+      </template>
+      <template is="dom-if" if="[[shouldShowSelectedKey(pendingKeyEvent.*)]]">
+        <shortcut-input-key id="confirmKey"
+            key="[[getKey(pendingKeyEvent.*)]]"
+            key-state="alpha-numeric-selected">
+        </shortcut-input-key>
+      </template>
+    </div>
+  </template>
+  <template is="dom-if" if="[[shouldShowEditView(isCapturing)]]">
+    <div id="editContainer" class="flex-row">
+      <shortcut-input-key id="ctrlKey"
+          key="ctrl"
+          key-state="[[getCtrlState(pendingKeyEvent.*)]]">
+      </shortcut-input-key>
+      <shortcut-input-key id="altKey"
+          key="alt"
+          key-state="[[getAltState(pendingKeyEvent.*)]]">
+      </shortcut-input-key>
+      <shortcut-input-key id="shiftKey"
+          key="shift"
+          key-state="[[getShiftState(pendingKeyEvent.*)]]">
+      </shortcut-input-key>
+      <shortcut-input-key id="searchKey"
+          key="meta"
+          key-state="[[getSearchState(pendingKeyEvent.*)]]">
+      </shortcut-input-key>
+      <div id="keySeparator"> + </div>
+      <shortcut-input-key id="pendingKey"
+          key="[[getKey(pendingKeyEvent.*)]]"
+          key-state="[[getKeyState(pendingKeyEvent.*)]]">
+      </shortcut-input-key>
+    </div>
+  </template>
+</div>