Add icon and primary options to Infobar for page reload warning

Example of usage in mock:
https://screenshot.googleplex.com/9hiSHMsEzf3aFtT.png

Implementation:
https://screenshot.googleplex.com/6tb4cm3K4sNxTYf.png

Bug: 375352611
Change-Id: I174c4e45543608507d92b9680bb996b5559a2db3
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6017335
Reviewed-by: Kateryna Prokopenko <[email protected]>
Reviewed-by: Danil Somsikov <[email protected]>
Commit-Queue: Joshua Thomas <[email protected]>

Author: masnoble

front_end/ui/legacy/Infobar.ts

@@ -95,9 +95,13 @@ export class Infobar {
           buttonClass += ' primary-button';
         }
 
+        const buttonVariant = action.buttonVariant ?? Buttons.Button.Variant.OUTLINED;
+
         const button = createTextButton(action.text, actionCallback, {
           className: buttonClass,
           jslogContext: action.jslogContext,
+          variant: buttonVariant,
+          icon: action.icon,
         });
         if (action.highlight && !this.#firstFocusableElement) {
           this.#firstFocusableElement = button;
@@ -246,6 +250,8 @@ export interface InfobarAction {
   highlight: boolean;
   delegate: (() => void)|null;
   dismiss: boolean;
+  buttonVariant?: Buttons.Button.Variant;
+  icon?: string;
   jslogContext?: string;
 }
 

front_end/ui/legacy/InspectorView.ts

@@ -32,10 +32,12 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
+import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as IconButton from '../components/icon_button/icon_button.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 
 import type {ActionDelegate as ActionDelegateInterface} from './ActionRegistration.js';
+import {ActionRegistry} from './ActionRegistry.js';
 import * as ARIAUtils from './ARIAUtils.js';
 import type {Context} from './Context.js';
 import type {ContextMenu} from './ContextMenu.js';
@@ -67,6 +69,10 @@ const UIStrings = {
    *@description The aria label for main tabbed pane that contains Panels
    */
   panels: 'Panels',
+  /**
+   *@description Title of an action that reloads the tab currently being debugged by DevTools
+   */
+  reloadDebuggedTab: 'Reload',
   /**
    *@description Title of an action that reloads the DevTools
    */
@@ -476,6 +482,36 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     }
   }
 
+  displayDebuggedTabReloadRequiredWarning(message: string): void {
+    if (!this.reloadRequiredInfobar) {
+      const infobar = new Infobar(
+          InfobarType.INFO, message,
+          [
+            {
+              text: i18nString(UIStrings.reloadDebuggedTab),
+              highlight: true,
+              delegate: () => {
+                reloadDebuggedTab();
+                if (this.reloadRequiredInfobar) {
+                  this.reloadRequiredInfobar.dispose();
+                }
+              },
+              dismiss: false,
+              buttonVariant: Buttons.Button.Variant.PRIMARY,
+              icon: 'refresh',
+              jslogContext: 'main.debug-reload',
+            },
+          ],
+          undefined, undefined, 'reload-required');
+      infobar.setParentView(this);
+      this.attachInfobar(infobar);
+      this.reloadRequiredInfobar = infobar;
+      infobar.setCloseCallback(() => {
+        delete this.reloadRequiredInfobar;
+      });
+    }
+  }
+
   displayReloadRequiredWarning(message: string): void {
     if (!this.reloadRequiredInfobar) {
       const infobar = new Infobar(
@@ -602,6 +638,10 @@ function reloadDevTools(): void {
   Host.InspectorFrontendHost.InspectorFrontendHostInstance.reattach(() => window.location.reload());
 }
 
+function reloadDebuggedTab(): void {
+  void ActionRegistry.instance().getAction('inspector-main.reload').execute();
+}
+
 export class ActionDelegate implements ActionDelegateInterface {
   handleAction(context: Context, actionId: string): boolean {
     switch (actionId) {

front_end/ui/legacy/UIUtils.ts

@@ -1091,12 +1091,15 @@ export function createTextButton(text: string, clickHandler?: ((arg0: Event) =>
   jslogContext?: string,
   variant?: Buttons.Button.Variant,
   title?: string,
+  icon?: string,
 }): Buttons.Button.Button {
   const button = new Buttons.Button.Button();
   if (opts?.className) {
     button.className = opts.className;
   }
+
   button.textContent = text;
+  button.iconName = opts?.icon;
   button.variant = opts?.variant ? opts.variant : Buttons.Button.Variant.OUTLINED;
   if (clickHandler) {
     button.addEventListener('click', clickHandler);