[GM3Restyling] Update command menu help

Screenshot: https://imgur.com/a/M97CpZV

Bug: 325442580
Change-Id: Ibefdc64549f809ec10c5ea99ad87012bef42c32d
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6174732
Reviewed-by: Kim-Anh Tran <[email protected]>
Commit-Queue: Kateryna Prokopenko <[email protected]>
Auto-Submit: Kateryna Prokopenko <[email protected]>

Author: Kateryna Prokopenko

front_end/panels/snippets/SnippetsQuickOpen.ts

@@ -22,6 +22,10 @@ const UIStrings = {
    *@description Text for suggestion of run a code snippet
    */
   snippet: 'Snippet',
+  /**
+   *@description Text for help title of run code snippet menu
+   */
+  runSnippet: 'Run snippet',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/snippets/SnippetsQuickOpen.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -88,8 +92,8 @@ export class SnippetsQuickOpen extends QuickOpen.FilteredListWidget.Provider {
 QuickOpen.FilteredListWidget.registerProvider({
   prefix: '!',
   iconName: 'exclamation',
-  iconWidth: '20px',
   provider: () => Promise.resolve(SnippetsQuickOpen.instance()),
+  helpTitle: i18nLazyString(UIStrings.runSnippet),
   titlePrefix: i18nLazyString(UIStrings.run),
   titleSuggestion: i18nLazyString(UIStrings.snippet),
 });

front_end/panels/sources/sources-meta.ts

@@ -416,6 +416,10 @@ const UIStrings = {
    *@description Text for command suggestion of go to a given symbol
    */
   symbol: 'Symbol',
+  /**
+   *@description Text for help title of go to symbol menu
+   */
+  goToSymbol: 'Go to symbol',
   /**
    *@description Text for command prefix of open a file
    */
@@ -424,9 +428,13 @@ const UIStrings = {
    *@description Text for command suggestion of open a file
    */
   file: 'File',
+  /**
+   *@description Text for help title of open file menu
+   */
+  openFile: 'Open file',
   /**
    * @description  Title of a setting under the Sources category in Settings. If this option is off,
-   * the sources panel will not be automatically be focsed whenever the application hits a breakpoint
+   * the sources panel will not be automatically be focused whenever the application hits a breakpoint
    * and comes to a halt.
    */
   disableAutoFocusOnDebuggerPaused: 'Do not focus Sources panel when triggering a breakpoint',
@@ -2019,35 +2027,35 @@ UI.ContextMenu.registerItem({
 QuickOpen.FilteredListWidget.registerProvider({
   prefix: '@',
   iconName: 'symbol',
-  iconWidth: '20px',
   async provider() {
     const Sources = await loadSourcesModule();
     return new Sources.OutlineQuickOpen.OutlineQuickOpen();
   },
+  helpTitle: i18nLazyString(UIStrings.goToSymbol),
   titlePrefix: i18nLazyString(UIStrings.goTo),
   titleSuggestion: i18nLazyString(UIStrings.symbol),
 });
 
 QuickOpen.FilteredListWidget.registerProvider({
   prefix: ':',
   iconName: 'colon',
-  iconWidth: '20px',
   async provider() {
     const Sources = await loadSourcesModule();
     return new Sources.GoToLineQuickOpen.GoToLineQuickOpen();
   },
+  helpTitle: i18nLazyString(UIStrings.goToLine),
   titlePrefix: i18nLazyString(UIStrings.goTo),
   titleSuggestion: i18nLazyString(UIStrings.line),
 });
 
 QuickOpen.FilteredListWidget.registerProvider({
   prefix: '',
   iconName: 'document',
-  iconWidth: '20px',
   async provider() {
     const Sources = await loadSourcesModule();
     return new Sources.OpenFileQuickOpen.OpenFileQuickOpen();
   },
+  helpTitle: i18nLazyString(UIStrings.openFile),
   titlePrefix: i18nLazyString(UIStrings.open),
   titleSuggestion: i18nLazyString(UIStrings.file),
 });

front_end/ui/legacy/components/quick_open/CommandMenu.ts

@@ -30,6 +30,10 @@ const UIStrings = {
    * @description Text for command suggestion of run a command
    */
   command: 'Command',
+  /**
+   * @description Text for help title of run command menu
+   */
+  runCommand: 'Run command',
   /**
    * @description Hint text to indicate that a selected command is deprecated
    */
@@ -433,8 +437,8 @@ export class ShowActionDelegate implements UI.ActionRegistration.ActionDelegate
 registerProvider({
   prefix: '>',
   iconName: 'chevron-right',
-  iconWidth: '20px',
   provider: () => Promise.resolve(new CommandMenuProvider()),
+  helpTitle: () => i18nString(UIStrings.runCommand),
   titlePrefix: () => i18nString(UIStrings.run),
   titleSuggestion: () => i18nString(UIStrings.command),
 });

front_end/ui/legacy/components/quick_open/FilteredListWidget.ts

@@ -667,8 +667,8 @@ export function getRegisteredProviders(): ProviderRegistration[] {
 export interface ProviderRegistration {
   prefix: string;
   iconName: string;
-  iconWidth: string;
   provider: () => Promise<Provider>;
+  helpTitle: (() => string);
   titlePrefix: (() => string);
   titleSuggestion?: (() => string);
 }

front_end/ui/legacy/components/quick_open/HelpQuickOpen.ts

@@ -12,7 +12,6 @@ export class HelpQuickOpen extends Provider {
   private providers: {
     prefix: string,
     iconName: string,
-    iconWidth: string,
     title: string,
     jslogContext: string,
   }[];
@@ -24,15 +23,12 @@ export class HelpQuickOpen extends Provider {
   }
 
   private async addProvider(extension: ProviderRegistration): Promise<void> {
-    if (extension.titleSuggestion) {
-      this.providers.push({
-        prefix: extension.prefix || '',
-        iconName: extension.iconName,
-        iconWidth: extension.iconWidth,
-        title: extension.titlePrefix() + ' ' + extension.titleSuggestion(),
-        jslogContext: (await extension.provider()).jslogContext,
-      });
-    }
+    this.providers.push({
+      prefix: extension.prefix || '',
+      iconName: extension.iconName,
+      title: extension.helpTitle(),
+      jslogContext: (await extension.provider()).jslogContext,
+    });
   }
 
   override itemCount(): number {
@@ -54,7 +50,7 @@ export class HelpQuickOpen extends Provider {
     iconElement.data = {
       iconName: provider.iconName,
       color: 'var(--icon-default)',
-      width: provider.iconWidth,
+      width: '18px',
     };
     titleElement.parentElement?.parentElement?.insertBefore(iconElement, titleElement.parentElement);
 
@@ -79,8 +75,8 @@ export class HelpQuickOpen extends Provider {
 registerProvider({
   prefix: '?',
   iconName: 'help',
-  iconWidth: '20px',
   provider: () => Promise.resolve(new HelpQuickOpen('help')),
+  helpTitle: () => 'Help',
   titlePrefix: () => 'Help',
   titleSuggestion: undefined,
 });