[GM3Restyling] Unify and adjust infobar buttons

This CL makes the following changes to buttons:
* differentiate between tonal, outlined and primary buttons
* Change "Don't show again" button to come first, if any
* removing icons and trailing dots from button text

Screenshot: https://imgur.com/a/chAJH6W
Bug: 325443174
Change-Id: Iba672a51f9c93ddb6547a5b48245e58128565091
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6325990
Reviewed-by: Kateryna Prokopenko <[email protected]>
Commit-Queue: Kim-Anh Tran <[email protected]>

Author: ktran

front_end/panels/sources/DebuggerPlugin.ts

@@ -428,13 +428,6 @@ export class DebuggerPlugin extends Plugin {
     const infobar = new UI.Infobar.Infobar(
         UI.Infobar.Type.WARNING, i18nString(UIStrings.thisScriptIsOnTheDebuggersIgnore),
         [
-          {
-            text: i18nString(UIStrings.removeFromIgnoreList),
-            highlight: false,
-            delegate: unIgnoreList,
-            dismiss: true,
-            jslogContext: 'remove-from-ignore-list',
-          },
           {
             text: i18nString(UIStrings.configure),
             highlight: false,
@@ -443,6 +436,14 @@ export class DebuggerPlugin extends Plugin {
             dismiss: false,
             jslogContext: 'configure',
           },
+          {
+            text: i18nString(UIStrings.removeFromIgnoreList),
+            highlight: false,
+            delegate: unIgnoreList,
+            buttonVariant: Buttons.Button.Variant.TONAL,
+            dismiss: true,
+            jslogContext: 'remove-from-ignore-list',
+          }
         ],
         undefined, 'script-on-ignore-list');
     this.ignoreListInfobar = infobar;

front_end/panels/sources/SourcesNavigator.ts

@@ -119,7 +119,7 @@ const UIStrings = {
    * @description Button description in Workspaces tab in the Sources panel
    *              to connect to an automatic workspace folder.
    */
-  automaticWorkspaceFolderConnect: 'Connect...',
+  automaticWorkspaceFolderConnect: 'Connect',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/sources/SourcesNavigator.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);

front_end/ui/legacy/Infobar.ts

@@ -81,23 +81,28 @@ export class Infobar {
     ARIAUtils.markAsAlert(this.infoText);
 
     this.actionContainer = this.infoContainer.createChild('div', 'infobar-info-actions');
+
+    let defaultActionButtonVariant = Buttons.Button.Variant.OUTLINED;
+    this.disableSetting = disableSetting || null;
+    if (disableSetting) {
+      const disableButton = createTextButton(
+          i18nString(UIStrings.dontShowAgain), this.onDisable.bind(this), {className: 'infobar-button'});
+      this.actionContainer.appendChild(disableButton);
+
+      // If we have a disable button, make the other buttons tonal (if not otherwise specified).
+      defaultActionButtonVariant = Buttons.Button.Variant.TONAL;
+    }
     if (actions) {
       this.contentElement.setAttribute('role', 'group');
 
       for (const action of actions) {
         const actionCallback = this.actionCallbackFactory(action);
-        let buttonClass = 'infobar-button';
-        if (action.highlight) {
-          buttonClass += ' primary-button';
-        }
-
-        const buttonVariant = action.buttonVariant ?? Buttons.Button.Variant.OUTLINED;
+        const buttonVariant = action.buttonVariant ?? defaultActionButtonVariant;
 
         const button = createTextButton(action.text, actionCallback, {
-          className: buttonClass,
+          className: 'infobar-button',
           jslogContext: action.jslogContext,
           variant: buttonVariant,
-          icon: action.icon,
         });
         if (action.highlight && !this.#firstFocusableElement) {
           this.#firstFocusableElement = button;
@@ -106,13 +111,6 @@ export class Infobar {
       }
     }
 
-    this.disableSetting = disableSetting || null;
-    if (disableSetting) {
-      const disableButton = createTextButton(
-          i18nString(UIStrings.dontShowAgain), this.onDisable.bind(this), {className: 'infobar-button'});
-      this.actionContainer.appendChild(disableButton);
-    }
-
     this.closeContainer = this.mainRow.createChild('div', 'infobar-close-container');
     this.toggleElement = createTextButton(
         i18nString(UIStrings.showMore), this.onToggleDetails.bind(this),
@@ -243,7 +241,6 @@ export interface InfobarAction {
   delegate: (() => void)|null;
   dismiss: boolean;
   buttonVariant?: Buttons.Button.Variant;
-  icon?: string;
   jslogContext?: string;
 }
 

front_end/ui/legacy/InspectorView.ts

@@ -72,7 +72,7 @@ const UIStrings = {
   /**
    *@description Title of an action that reloads the tab currently being debugged by DevTools
    */
-  reloadDebuggedTab: 'Reload',
+  reloadDebuggedTab: 'Reload page',
   /**
    *@description Title of an action that reloads the DevTools
    */
@@ -492,7 +492,6 @@ export class InspectorView extends VBox implements ViewLocationResolver {
               },
               dismiss: false,
               buttonVariant: Buttons.Button.Variant.PRIMARY,
-              icon: 'refresh',
               jslogContext: 'main.debug-reload',
             },
           ],
@@ -522,6 +521,7 @@ export class InspectorView extends VBox implements ViewLocationResolver {
               highlight: true,
               delegate: () => reloadDevTools(),
               dismiss: false,
+              buttonVariant: Buttons.Button.Variant.PRIMARY,
               jslogContext: 'main.debug-reload',
             },
           ],
@@ -545,6 +545,7 @@ export class InspectorView extends VBox implements ViewLocationResolver {
               highlight: true,
               delegate: () => callback(),
               dismiss: true,
+              buttonVariant: Buttons.Button.Variant.TONAL,
               jslogContext: 'select-folder',
             },
           ],