Add Rendering Shortcuts section in setting for Toggle force Css

preference color shortcut feature

This CL
1. Add "Rendering" Shortcuts section in setting.

2. Add 'Toggle forces CSS prefers-color-scheme color' shortcut feature.
User able to set shortcut, to use it to toggle CSS prefer color scheme



How to test: (video record covered all steps)
1. Go to https://twitter.com/
2. Open devtools -> Settings -> Experiments -> filter "key" word ->
   enable "Enable keyboard shortcut editor"

3. Reload devtools
4. Go to devtools Settings -> Shortcuts -> find "Rendings" secion ->
   set "Toggle force CSS ..." shortcut

5. Execute shortcut and check twitter's UI



screenshots:
- https://imgur.com/a/GCeyVB2

video record
- https://youtu.be/Mx9gqvIzIzU


Bug: 1280398
Change-Id: I9f69a46705d167bc1e1a17f8bfbe3582af8468aa
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3614398
Commit-Queue: Changhao Han <changhaohan@chromium.org>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
Reviewed-by: Changhao Han <changhaohan@chromium.org>

Author: flameddd

front_end/core/host/UserMetrics.ts

@@ -549,7 +549,8 @@ export enum KeyboardShortcutAction {
   'layers.left' = 104,
   'layers.right' = 105,
   'help.report-translation-issue' = 106,
-  MaxValue = 107,
+  'rendering.toggle-prefers-color-scheme' = 107,
+  MaxValue = 108,
 }
 /* eslint-enable @typescript-eslint/naming-convention */
 

front_end/core/i18n/locales/en-US.json

@@ -899,6 +899,9 @@
   "entrypoints/inspector_main/inspector_main-meta.ts | showRendering": {
     "message": "Show Rendering"
   },
+  "entrypoints/inspector_main/inspector_main-meta.ts | toggleCssPrefersColorSchemeMedia": {
+    "message": "Toggle forces CSS prefers-color-scheme color"
+  },
   "entrypoints/inspector_main/inspector_main-meta.ts | visionDeficiency": {
     "message": "vision deficiency"
   },

front_end/core/i18n/locales/en-XL.json

@@ -899,6 +899,9 @@
   "entrypoints/inspector_main/inspector_main-meta.ts | showRendering": {
     "message": "Ŝh́ôẃ R̂én̂d́êŕîńĝ"
   },
+  "entrypoints/inspector_main/inspector_main-meta.ts | toggleCssPrefersColorSchemeMedia": {
+    "message": "T̂óĝǵl̂é f̂ór̂ćêś ĈŚŜ ṕr̂éf̂ér̂ś-ĉól̂ór̂-śĉh́êḿê ćôĺôŕ"
+  },
   "entrypoints/inspector_main/inspector_main-meta.ts | visionDeficiency": {
     "message": "v̂íŝíôń d̂éf̂íĉíêńĉý"
   },

front_end/entrypoints/inspector_main/RenderingOptions.ts

@@ -346,3 +346,34 @@ export class RenderingOptionsView extends UI.Widget.VBox {
     this.registerCSSFiles([renderingOptionsStyles]);
   }
 }
+
+let reloadActionDelegateInstance: ReloadActionDelegate;
+
+export class ReloadActionDelegate implements UI.ActionRegistration.ActionDelegate {
+  static instance(opts: {
+    forceNew: boolean|null,
+  } = {forceNew: null}): ReloadActionDelegate {
+    const {forceNew} = opts;
+    if (!reloadActionDelegateInstance || forceNew) {
+      reloadActionDelegateInstance = new ReloadActionDelegate();
+    }
+
+    return reloadActionDelegateInstance;
+  }
+
+  handleAction(context: UI.Context.Context, actionId: string): boolean {
+    const emulatedCSSMediaFeaturePrefersColorSchemeSetting =
+        Common.Settings.Settings.instance().moduleSetting('emulatedCSSMediaFeaturePrefersColorScheme');
+
+    switch (actionId) {
+      case 'rendering.toggle-prefers-color-scheme':
+        if (emulatedCSSMediaFeaturePrefersColorSchemeSetting.get() === 'light') {
+          emulatedCSSMediaFeaturePrefersColorSchemeSetting.set('dark');
+        } else {
+          emulatedCSSMediaFeaturePrefersColorSchemeSetting.set('light');
+        }
+        return true;
+    }
+    return false;
+  }
+}

front_end/entrypoints/inspector_main/inspector_main-meta.ts

@@ -99,6 +99,11 @@ const UIStrings = {
   * setting turns off this overlay.
   */
   disablePaused: 'Disable paused state overlay',
+  /**
+  * @description Title of an action that toggle
+  * "forces CSS prefers-color-scheme" color
+  */
+  toggleCssPrefersColorSchemeMedia: 'Toggle forces CSS prefers-color-scheme color',
 };
 const str_ = i18n.i18n.registerUIStrings('entrypoints/inspector_main/inspector_main-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
@@ -191,6 +196,16 @@ UI.ActionRegistration.registerActionExtension({
   ],
 });
 
+UI.ActionRegistration.registerActionExtension({
+  actionId: 'rendering.toggle-prefers-color-scheme',
+  category: UI.ActionRegistration.ActionCategory.RENDERING,
+  title: i18nLazyString(UIStrings.toggleCssPrefersColorSchemeMedia),
+  async loadActionDelegate() {
+    const InspectorMain = await loadInspectorMainModule();
+    return InspectorMain.RenderingOptions.ReloadActionDelegate.instance();
+  },
+});
+
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.NETWORK,
   title: i18nLazyString(UIStrings.forceAdBlocking),

front_end/ui/legacy/ActionRegistration.ts

@@ -212,6 +212,7 @@ export const ActionCategory = {
   SETTINGS: 'Settings',
   DEBUGGER: 'Debugger',
   SOURCES: 'Sources',
+  RENDERING: 'Rendering',
 };
 
 type ActionCategory = typeof ActionCategory[keyof typeof ActionCategory];