shortcuts: Use real LayoutStyle and LayoutInfo types

This CL replaces the "fake" types of LayoutStyle and LayoutInfo with
their "real" Mojo counterparts. See the file shortcut_types.ts for this
change.

Everything else in this CL updates the rest of the app to support this
type change. Specifically, `sub_category` is now `subCategory`,
`layout_style` is now `style`, and the LayoutStyle enums have changed.

Finally, I also updated the comments for LayoutInfo in shortcut_types.ts
to use backticks so that the VSCode previews are easier to parse.

Bug: b:216049298
Test: browser_tests --gtest_filter=ShortcutCustomizationApp*
Change-Id: I7b46a1f36688adc32cfbdf5b85d10429194e9ce4
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3990637
Reviewed-by: Jimmy Gong <jimmyxgong@chromium.org>
Commit-Queue: Camden Bickel <cambickel@google.com>
Cr-Commit-Position: refs/heads/main@{#1067714}

ash/webui/shortcut_customization_ui/resources/js/accelerator_lookup_manager.ts

@@ -4,7 +4,6 @@
 
 import {assert, assertNotReached} from 'chrome://resources/js/assert_ts.js';
 
-import {fakeActionNames} from './fake_data.js';
 import {Accelerator, AcceleratorConfig, AcceleratorInfo, AcceleratorSource, AcceleratorState, AcceleratorType, LayoutInfo, LayoutInfoList} from './shortcut_types.js';
 import {areAcceleratorsEqual} from './shortcut_utils.js';
 
@@ -129,18 +128,17 @@ export class AcceleratorLookupManager {
       }
 
       const subcatMap = this.acceleratorLayoutLookup_.get(entry.category);
-      if (!subcatMap!.has(entry.sub_category)) {
-        subcatMap!.set(entry.sub_category, []);
+      if (!subcatMap!.has(entry.subCategory)) {
+        subcatMap!.set(entry.subCategory, []);
       }
 
-      this.getAcceleratorLayout(entry.category, entry.sub_category)
+      this.getAcceleratorLayout(entry.category, entry.subCategory)
           .push(Object.assign({}, entry));
 
       // Add the entry to the AcceleratorNameLookup.
       const uuid = `${entry.source}-${entry.action}`;
       // TODO(jimmyxgong): Use real name lookup instead of using fake_data.js.
-      this.acceleratorNameLookup_.set(
-          uuid, fakeActionNames.get(entry.description) as string);
+      this.acceleratorNameLookup_.set(uuid, entry.description);
     }
   }
 

ash/webui/shortcut_customization_ui/resources/js/fake_data.ts

@@ -4,19 +4,6 @@
 
 import {AcceleratorConfig, AcceleratorSource, AcceleratorState, AcceleratorType, LayoutInfoList, LayoutStyle, Modifier} from './shortcut_types.js';
 
-export const fakeActionNames: Map<number, string> = new Map([
-  [0, 'Snap Window Left'],
-  [1, 'Snap Window Right'],
-  [2, 'New Desk'],
-  [3, 'Remove Desk'],
-  [1001, 'New Tab'],
-]);
-
-export const fakeCategories: Map<number, string> = new Map([
-  [0, 'Chrome OS'],
-  [1, 'Browser'],
-]);
-
 export const fakeSubCategories: Map<number, string> = new Map([
   [0, 'Window Management'],
   [1, 'Virtual Desks'],
@@ -92,42 +79,42 @@ export const fakeAcceleratorConfig: AcceleratorConfig = {
 
 export const fakeLayoutInfo: LayoutInfoList = [
   {
-    category: 0,      // Chrome OS.
-    sub_category: 0,  // Window Management.
-    description: 0,   // Snap Window Left.
-    layout_style: LayoutStyle.DEFAULT,
+    category: 0,     // Chrome OS.
+    subCategory: 0,  // Window Management.
+    description: 'Snap Window Left',
+    style: LayoutStyle.kDefault,
     source: AcceleratorSource.kAsh,
     action: 0,
   },
   {
-    category: 0,      // Chrome OS.
-    sub_category: 0,  // Window Management.
-    description: 1,   // Snap Window Right.
-    layout_style: LayoutStyle.DEFAULT,
+    category: 0,     // Chrome OS.
+    subCategory: 0,  // Window Management.
+    description: 'Snap Window Right',
+    style: LayoutStyle.kDefault,
     source: AcceleratorSource.kAsh,
     action: 1,
   },
   {
-    category: 0,      // Chrome OS.
-    sub_category: 1,  // Virtual Desks.
-    description: 2,   // Create Desk.
-    layout_style: LayoutStyle.DEFAULT,
+    category: 0,     // Chrome OS.
+    subCategory: 1,  // Virtual Desks.
+    description: 'Create Desk',
+    style: LayoutStyle.kDefault,
     source: AcceleratorSource.kAsh,
     action: 2,
   },
   {
-    category: 0,      // Chrome OS.
-    sub_category: 1,  // Virtual Desks.
-    description: 3,   // Remove Desk.
-    layout_style: LayoutStyle.DEFAULT,
+    category: 0,     // Chrome OS.
+    subCategory: 1,  // Virtual Desks.
+    description: 'Remove Desk',
+    style: LayoutStyle.kDefault,
     source: AcceleratorSource.kAsh,
     action: 3,
   },
   {
-    category: 1,        // Browser.
-    sub_category: 2,    // Tabs.
-    description: 1001,  // New tab.
-    layout_style: LayoutStyle.DEFAULT,
+    category: 1,     // Browser.
+    subCategory: 2,  // Tabs.
+    description: 'New Tab',
+    style: LayoutStyle.kDefault,
     source: AcceleratorSource.kBrowser,
     action: 1001,
   },

ash/webui/shortcut_customization_ui/resources/js/shortcut_types.ts

@@ -84,32 +84,30 @@ export type AcceleratorConfig = {
 };
 
 /** Enumeration of layout styles.*/
-export enum LayoutStyle {
-  DEFAULT
-}
+export type LayoutStyle = AcceleratorInfoTypes.AcceleratorLayoutStyle;
+export const LayoutStyle = AcceleratorInfoTypes.AcceleratorLayoutStyle;
 
 /**
  * Type alias for LayoutInfo. This describes one row (corresponding to an
- * AcceleratorRow) within the layout hierarchy. The category, sub-category,
- * and description are resource ID's that resolve to localized strings.
+ * AcceleratorRow) within the layout hierarchy. The `category`, `subCategory`,
+ * and `description` properties are resource ID's that resolve to localized
+ * strings.
+ *
+ * The `category` property provides grouping for the left navigation panel, and
+ * the `subCategory` provides grouping for a section within a page.
  *
- * The category provides grouping for the left navigation panel, and the
- * sub-category provides grouping for a section within a page.
+ * The `source` and `action` properties provide a lookup key into
+ * AcceleratorConfig to determine the list of accelerators.
  *
- * The source and action provide a lookup key into AcceleratorConfig
- * to determine the list of accelerators.
+ * The `style` property is an enum that allows for customization for special
+ * cases. In most cases this will be `kDefault`.
  *
- * The layout_style is an enum that allows for customization for special
- * cases. In most cases this will be kDefault.
+ * The utility type Omit and the intersection type operator (&) to replace the
+ * types of `description` and `style` with more accurate types.
  */
-export interface LayoutInfo {
-  category: number;
-  sub_category: number;
-  description: number;
-  layout_style: LayoutStyle;
-  source: AcceleratorSource;
-  action: number;
-}
+export type LayoutInfo =
+    Omit<AcceleratorInfoTypes.AcceleratorLayoutInfo, 'description'|'style'>&
+    {description: string, style: LayoutStyle};
 
 /** Type alias for an array of LayoutItem. */
 export type LayoutInfoList = LayoutInfo[];