Auto-set colors for issue icons inside the component

Bypass-Check-License: Only updating files, no new files are added.
Bug: 414330824
Change-Id: I6f32efb9b24cf1f7f2bae3e661d156ca248eaa8b
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6845660
Auto-Submit: Kateryna Prokopenko <[email protected]>
Reviewed-by: Kim-Anh Tran <[email protected]>
Commit-Queue: Kateryna Prokopenko <[email protected]>

Author: Kateryna Prokopenko

front_end/panels/elements/ElementsTreeOutline.ts

@@ -487,11 +487,11 @@ export class ElementsTreeOutline extends
                     // This shouldn't happen, but add this if check to pass ts check.
                     return nothing;
                   }
-                  const issueKindIconData = IssueCounter.IssueCounter.getIssueKindIconData(issue.getKind());
+                  const issueKindIconName = IssueCounter.IssueCounter.getIssueKindIconName(issue.getKind());
                   const openIssueEvent = (): Promise<void> => Common.Revealer.reveal(issue);
                   return html`
                     <div class="squiggles-content-item">
-                    <devtools-icon .data=${issueKindIconData} @click=${openIssueEvent}></devtools-icon>
+                    <devtools-icon .name=${issueKindIconName} @click=${openIssueEvent}></devtools-icon>
                     <x-link class="link" @click=${openIssueEvent}>${i18nString(UIStrings.viewIssue)}</x-link>
                     <span>${elementIssueDetails.tooltip}</span>
                     </div>`;})}

front_end/panels/issues/IssueKindView.ts

@@ -94,7 +94,7 @@ export class IssueKindView extends UI.TreeOutline.TreeElement {
     header.classList.add('header');
 
     const issueKindIcon = new IconButton.Icon.Icon();
-    issueKindIcon.data = IssueCounter.IssueCounter.getIssueKindIconData(this.#kind);
+    issueKindIcon.name = IssueCounter.IssueCounter.getIssueKindIconName(this.#kind);
     issueKindIcon.classList.add('leading-issue-icon', 'extra-large');
 
     const countAdorner = new Adorners.Adorner.Adorner();

front_end/panels/issues/IssueView.ts

@@ -385,7 +385,7 @@ export class IssueView extends UI.TreeOutline.TreeElement {
   #updateFromIssue(): void {
     if (this.#issueKindIcon) {
       const kind = this.#issue.getKind();
-      this.#issueKindIcon.data = IssueCounter.IssueCounter.getIssueKindIconData(kind);
+      this.#issueKindIcon.name = IssueCounter.IssueCounter.getIssueKindIconName(kind);
       this.#issueKindIcon.title = IssuesManager.Issue.getIssueKindDescription(kind);
     }
     if (this.#aggregatedIssuesCount) {

front_end/panels/sources/UISourceCodeFrame.ts

@@ -573,7 +573,7 @@ function messageLevelComparator(a: RowMessage, b: RowMessage): number {
 
 function getIconDataForMessage(message: RowMessage): IconButton.Icon.IconData {
   if (message.origin instanceof IssuesManager.SourceFrameIssuesManager.IssueMessage) {
-    return IssueCounter.IssueCounter.getIssueKindIconData(message.origin.getIssueKind());
+    return {iconName: IssueCounter.IssueCounter.getIssueKindIconName(message.origin.getIssueKind())};
   }
   return getIconDataForLevel(message.level());
 }

front_end/ui/components/icon_button/Icon.ts

@@ -12,7 +12,7 @@ import iconStyles from './icon.css.js';
  */
 export interface IconWithName {
   iconName: string;
-  color: string;
+  color?: string;
   width?: string;
   height?: string;
 }
@@ -99,7 +99,9 @@ export class Icon extends HTMLElement {
    */
   set data(data: IconData) {
     const {color, width, height} = data;
-    this.style.color = color;
+    if (color) {
+      this.style.color = color;
+    }
     if (width) {
       this.style.width = width;
     }

front_end/ui/components/icon_button/icon.css

@@ -44,14 +44,20 @@
   display: none;
 }
 
-:host([name="warning-filled"]) {
+:host([name="warning-filled"]),
+:host([name="issue-exclamation-filled"]) {
   color: var(--icon-warning);
 }
 
-:host([name="cross-circle-filled"]) {
+:host([name="cross-circle-filled"]),
+:host([name="issue-cross-filled"]) {
   color: var(--icon-error);
 }
 
+:host([name="issue-text-filled"]) {
+  color: var(--icon-info);
+}
+
 :host([name="triangle-up"]),
 :host([name="triangle-down"]),
 :host([name="triangle-left"]),

front_end/ui/components/issue_counter/IssueCounter.ts

@@ -30,23 +30,22 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('ui/components/issue_counter/IssueCounter.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export function getIssueKindIconData(issueKind: IssuesManager.Issue.IssueKind): IconButton.Icon.IconWithName {
+export function getIssueKindIconName(issueKind: IssuesManager.Issue.IssueKind): string {
   switch (issueKind) {
     case IssuesManager.Issue.IssueKind.PAGE_ERROR:
-      return {iconName: 'issue-cross-filled', color: 'var(--icon-error)'};
+      return 'issue-cross-filled';
     case IssuesManager.Issue.IssueKind.BREAKING_CHANGE:
-      return {iconName: 'issue-exclamation-filled', color: 'var(--icon-warning)'};
+      return 'issue-exclamation-filled';
     case IssuesManager.Issue.IssueKind.IMPROVEMENT:
-      return {iconName: 'issue-text-filled', color: 'var(--icon-info)'};
+      return 'issue-text-filled';
   }
 }
 
-function toIconGroup({iconName, color, width, height}: IconButton.Icon.IconWithName, sizeOverride?: string):
-    IconButton.IconButton.IconWithTextData {
+function toIconGroup(iconName: string, sizeOverride?: string): IconButton.IconButton.IconWithTextData {
   if (sizeOverride) {
-    return {iconName, iconColor: color, iconWidth: sizeOverride, iconHeight: sizeOverride};
+    return {iconName, iconWidth: sizeOverride, iconHeight: sizeOverride};
   }
-  return {iconName, iconColor: color, iconWidth: width, iconHeight: height};
+  return {iconName};
 }
 
 export const enum DisplayMode {
@@ -183,15 +182,15 @@ export class IssueCounter extends HTMLElement {
     const data: IconButton.IconButton.IconButtonData = {
       groups: [
         {
-          ...toIconGroup(getIssueKindIconData(IssuesManager.Issue.IssueKind.PAGE_ERROR), iconSize),
+          ...toIconGroup(getIssueKindIconName(IssuesManager.Issue.IssueKind.PAGE_ERROR), iconSize),
           text: countToString(IssuesManager.Issue.IssueKind.PAGE_ERROR, this.#counts[0]),
         },
         {
-          ...toIconGroup(getIssueKindIconData(IssuesManager.Issue.IssueKind.BREAKING_CHANGE), iconSize),
+          ...toIconGroup(getIssueKindIconName(IssuesManager.Issue.IssueKind.BREAKING_CHANGE), iconSize),
           text: countToString(IssuesManager.Issue.IssueKind.BREAKING_CHANGE, this.#counts[1]),
         },
         {
-          ...toIconGroup(getIssueKindIconData(IssuesManager.Issue.IssueKind.IMPROVEMENT), iconSize),
+          ...toIconGroup(getIssueKindIconName(IssuesManager.Issue.IssueKind.IMPROVEMENT), iconSize),
           text: countToString(IssuesManager.Issue.IssueKind.IMPROVEMENT, this.#counts[2]),
         },
       ],

front_end/ui/components/issue_counter/IssueLinkIcon.ts

@@ -14,7 +14,7 @@ import * as RenderCoordinator from '../../../ui/components/render_coordinator/re
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
-import {getIssueKindIconData} from './IssueCounter.js';
+import {getIssueKindIconName} from './IssueCounter.js';
 import IssueLinkIconStyles from './issueLinkIcon.css.js';
 
 const {html} = Lit;
@@ -134,7 +134,7 @@ export class IssueLinkIcon extends HTMLElement {
     if (!this.#issue) {
       return 'issue-questionmark-filled';
     }
-    const {iconName} = getIssueKindIconData(this.#issue.getKind());
+    const iconName = getIssueKindIconName(this.#issue.getKind());
     return iconName;
   }