[GM3Restyling] Update general info bar styles to look like Chrome's

This CL changes the general style of the infobar:
* info infobars adopt Chrome's infobar's background color (white)
* icon and close button sizes
* paddings, alignments, fonts

Before: https://i.imgur.com/f5M7Woz.png
After: https://i.imgur.com/gPCuRHL.png
Drive-by: Use icon component instead of mask images for icons
Bug: 325443174
Change-Id: I88910f7ad17ffb568e9728bbea66e26a11f897f7
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6321790
Commit-Queue: Kim-Anh Tran <[email protected]>
Reviewed-by: Kateryna Prokopenko <[email protected]>

Author: ktran

front_end/panels/sources/SourcesNavigator.ts

@@ -199,6 +199,7 @@ export class FilesNavigatorView extends NavigatorView {
 
   constructor() {
     super('navigator-files');
+    this.registerRequiredCSS(sourcesNavigatorStyles);
     const placeholder =
         new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.noWorkspace), i18nString(UIStrings.explainWorkspace));
     this.setPlaceholder(placeholder);
@@ -268,6 +269,7 @@ export class FilesNavigatorView extends NavigatorView {
           'automatic-workspace-folders',
       );
       if (this.#infobar) {
+        this.#infobar.element.classList.add('automatic-workspace-infobar');
         this.contentElement.append(this.#infobar.element);
       }
     }

front_end/panels/sources/sourcesNavigator.css

@@ -8,3 +8,7 @@
   border-bottom: 1px solid var(--sys-color-divider);
   flex-shrink: 0;
 }
+
+.automatic-workspace-infobar {
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
+}

front_end/ui/legacy/Infobar.ts

@@ -6,6 +6,7 @@ import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+import * as IconButton from '../components/icon_button/icon_button.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
 import infobarStyles from './infobar.css.js';
@@ -72,8 +73,8 @@ export class Infobar {
 
     this.infoMessage = this.infoContainer.createChild('div', 'infobar-info-message');
 
-    // Icon is in separate file and included via CSS.
-    this.infoMessage.createChild('div', type + '-icon icon');
+    const icon = IconButton.Icon.create(TYPE_TO_ICON[type], type + '-icon');
+    this.infoMessage.appendChild(icon);
 
     this.infoText = this.infoMessage.createChild('div', 'infobar-info-text');
     this.infoText.textContent = text;
@@ -120,6 +121,7 @@ export class Infobar {
     this.closeContainer.appendChild(this.toggleElement);
     this.closeButton = this.closeContainer.createChild('dt-close-button', 'close-button');
     this.closeButton.setTabbable(true);
+    this.closeButton.setSize(Buttons.Button.Size.SMALL);
     ARIAUtils.setDescription(this.closeButton, i18nString(UIStrings.close));
     self.onInvokeElement(this.closeButton, this.dispose.bind(this));
 
@@ -251,3 +253,10 @@ export const enum Type {
   ISSUE = 'issue',
   ERROR = 'error',
 }
+
+const TYPE_TO_ICON = {
+  [Type.WARNING]: 'warning',
+  [Type.INFO]: 'info',
+  [Type.ISSUE]: 'issue-text-filled',
+  [Type.ERROR]: 'cross-circle',
+};

front_end/ui/legacy/infobar.css

@@ -17,12 +17,12 @@
 
 .infobar {
   color: var(--sys-color-on-surface);
-  background-color: var(--sys-color-surface1);
+  background-color: var(--sys-color-cdt-base-container);
   display: flex;
   flex: auto;
   flex-direction: column;
   position: relative;
-  padding: 6px;
+  padding: var(--sys-size-5) var(--sys-size-8);
   min-width: fit-content;
 }
 
@@ -60,13 +60,14 @@
 
 .infobar-info-message {
   display: flex;
-  margin: 5px 0;
+  align-items: center;
 }
 
 .infobar-info-text {
   display: flex;
   align-items: center;
-  margin: 0 4px;
+  font: var(--sys-typescale-body3-regular);
+  margin: 0 var(--sys-size-8);
 }
 
 .infobar-details-rows {
@@ -96,36 +97,38 @@
 
 .infobar-button {
   color: var(--sys-color-token-subtle);
-  padding: 0 4px;
 }
 
 .info-icon {
-  mask-image: var(--image-file-info);
-  background-color: var(--sys-color-primary);
+  color: var(--sys-color-primary);
 }
 
 .warning-icon {
-  mask-image: var(--image-file-warning);
-  background-color: var(--icon-warning);
+  color: var(--icon-warning);
 }
 
 .error-icon {
-  mask-image: var(--image-file-cross-circle);
-  background-color: var(--icon-error);
+  color: var(--icon-error);
 }
 
 .issue-icon {
-  mask-image: var(--image-file-issue-text-filled);
-  background-color: var(--sys-color-primary);
+  color: var(--sys-color-primary);
 }
 
-.icon {
-  mask-size: 20px 20px;
-  width: 20px;
-  height: 20px;
+.info-icon,
+.warning-icon,
+.error-icon,
+.issue-icon {
+  width: var(--sys-size-8);
+  height: var(--sys-size-8);
   flex-shrink: 0;
 }
 
+.infobar-info-actions {
+  display: flex;
+  gap: var(--sys-size-3);
+}
+
 .devtools-link.text-button:hover,
 .devtools-link.text-button:focus,
 .devtools-link.text-button:active {