Migrate more icons off of the data setter

Bypass-Check-License: Only updating files, no new files are added.
Bug: 414330824
Change-Id: I8fc79f3f4a4efa578852f668dc64e2f9ae997a87
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6874768
Auto-Submit: Kateryna Prokopenko <[email protected]>
Commit-Queue: Kateryna Prokopenko <[email protected]>
Reviewed-by: Ergün Erdoğmuş <[email protected]>
Commit-Queue: Ergün Erdoğmuş <[email protected]>

Author: Kateryna Prokopenko

front_end/panels/application/StorageView.ts

@@ -519,7 +519,8 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
 
     if (!response.overrideActive && response.quota < 125829120) {  // 120 MB
       const icon = new IconButton.Icon.Icon();
-      icon.data = {iconName: 'info', color: 'var(--icon-info)'};
+      icon.name = 'info';
+      icon.style.color = 'var(--icon-info)';
       icon.classList.add('small');
       UI.Tooltip.Tooltip.install(this.quotaRow, i18nString(UIStrings.storageQuotaIsLimitedIn));
       this.quotaRow.appendChild(icon);

front_end/panels/console/ConsolePrompt.ts

@@ -125,7 +125,8 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
     this.element.appendChild(this.eagerPreviewElement);
 
     this.promptIcon = new IconButton.Icon.Icon();
-    this.promptIcon.data = {iconName: 'chevron-right', color: 'var(--icon-action)'};
+    this.promptIcon.name = 'chevron-right';
+    this.promptIcon.style.color = 'var(--icon-action)';
     this.promptIcon.classList.add('console-prompt-icon', 'medium');
     this.element.appendChild(this.promptIcon);
     this.iconThrottler = new Common.Throttler.Throttler(0);

front_end/panels/console/ConsoleViewMessage.ts

@@ -1462,10 +1462,8 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
 
   #createHoverButton(): HTMLButtonElement {
     const icon = new IconButton.Icon.Icon();
-    icon.data = {
-      iconName: 'lightbulb-spark',
-      color: 'var(--devtools-icon-color)',
-    };
+    icon.name = 'lightbulb-spark';
+    icon.style.color = 'var(--devtools-icon-color)';
     icon.classList.add('medium');
     const button = document.createElement('button');
     button.append(icon);
@@ -1527,10 +1525,8 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     }
 
     this.messageIcon = new IconButton.Icon.Icon();
-    this.messageIcon.data = {
-      iconName,
-      color,
-    };
+    this.messageIcon.name = iconName;
+    this.messageIcon.style.color = color;
     this.messageIcon.classList.add('message-level-icon', 'small');
     if (this.contentElementInternal) {
       this.contentElementInternal.insertBefore(this.messageIcon, this.contentElementInternal.firstChild);

front_end/panels/elements/ElementsTreeElement.ts

@@ -418,8 +418,8 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
 
     if (this.nodeInternal.retained && !this.isClosingTag()) {
       const icon = new IconButton.Icon.Icon();
-      // FIXME: this needs to be updated, data field is deprecated
-      icon.data = {iconName: 'small-status-dot', color: 'var(--icon-error)'};
+      icon.name = 'small-status-dot';
+      icon.style.color = 'var(--icon-error)';
       icon.classList.add('extra-small');
       icon.style.setProperty('vertical-align', 'middle');
       this.setLeadingIcons([icon]);

front_end/panels/screencast/ScreencastView.ts

@@ -694,7 +694,8 @@ export class ScreencastView extends UI.Widget.VBox implements SDK.OverlayModel.H
     this.mouseInputToggle.disabled = true;
     {
       this.mouseInputToggleIcon = this.mouseInputToggle.appendChild(new IconButton.Icon.Icon());
-      this.mouseInputToggleIcon.data = {color: 'var(--icon-toggled)', iconName: 'mouse'};
+      this.mouseInputToggleIcon.name = 'mouse';
+      this.mouseInputToggleIcon.classList.toggle('toggled', true);
     }
     UI.ARIAUtils.setLabel(this.mouseInputToggle, i18nString(UIStrings.mouseInput));
 

front_end/panels/sources/DebuggerPausedMessage.ts

@@ -159,10 +159,8 @@ export class DebuggerPausedMessage {
 
     const mainElement = messageWrapper.createChild('div', 'status-main');
     const mainIcon = new IconButton.Icon.Icon();
-    mainIcon.data = {
-      iconName: 'info',
-      color: 'var(--sys-color-on-yellow-container)',
-    };
+    mainIcon.name = 'info';
+    mainIcon.style.color = 'var(--sys-color-on-yellow-container)';
     mainIcon.classList.add('medium');
     mainElement.appendChild(mainIcon);
     const breakpointType = BreakpointTypeNouns.get(data.type);
@@ -293,10 +291,8 @@ export class DebuggerPausedMessage {
       const messageWrapper = document.createElement('span');
       const mainElement = messageWrapper.createChild('div', 'status-main');
       const mainIcon = new IconButton.Icon.Icon();
-      mainIcon.data = {
-        iconName: errorLike ? 'cross-circle-filled' : 'info',
-        color: errorLike ? 'var(--icon-error)' : 'var(--sys-color-on-yellow-container)',
-      };
+      mainIcon.name = errorLike ? 'cross-circle-filled' : 'info';
+      mainIcon.style.color = errorLike ? 'var(--icon-error)' : 'var(--sys-color-on-yellow-container)';
       mainIcon.classList.add('medium');
       mainElement.appendChild(mainIcon);
       mainElement.appendChild(document.createTextNode(mainText));

front_end/panels/sources/OpenFileQuickOpen.ts

@@ -44,8 +44,11 @@ export class OpenFileQuickOpen extends FilteredUISourceCodeListProvider {
     super.renderItem(itemIndex, query, titleElement, subtitleElement);
 
     const iconElement = new IconButton.Icon.Icon();
-    const iconData = PanelUtils.iconDataForResourceType(this.itemContentTypeAt(itemIndex));
-    iconElement.data = iconData;
+    const {iconName, color} = PanelUtils.iconDataForResourceType(this.itemContentTypeAt(itemIndex));
+    iconElement.name = iconName;
+    if (color) {
+      iconElement.style.color = color;
+    }
     iconElement.classList.add('large');
     titleElement.parentElement?.parentElement?.insertBefore(iconElement, titleElement.parentElement);
   }

front_end/panels/sources/UISourceCodeFrame.ts

@@ -538,7 +538,7 @@ export class UISourceCodeFrame extends Common.ObjectWrapper
   }
 }
 
-function getIconDataForLevel(level: Workspace.UISourceCode.Message.Level): IconButton.Icon.IconData {
+function getIconDataForLevel(level: Workspace.UISourceCode.Message.Level): IconButton.Icon.IconWithName {
   if (level === Workspace.UISourceCode.Message.Level.ERROR) {
     return {color: 'var(--icon-error)', width: '16px', height: '14px', iconName: 'cross-circle-filled'};
   }
@@ -571,7 +571,7 @@ function messageLevelComparator(a: RowMessage, b: RowMessage): number {
   return messageLevelPriority[a.level()] - messageLevelPriority[b.level()];
 }
 
-function getIconDataForMessage(message: RowMessage): IconButton.Icon.IconData {
+function getIconDataForMessage(message: RowMessage): IconButton.Icon.IconWithName {
   if (message.origin instanceof IssuesManager.SourceFrameIssuesManager.IssueMessage) {
     return {iconName: IssueCounter.IssueCounter.getIssueKindIconName(message.origin.getIssueKind())};
   }
@@ -704,14 +704,16 @@ class MessageWidget extends CodeMirror.WidgetType {
     const nonIssues = this.messages.filter(msg => msg.level() !== Workspace.UISourceCode.Message.Level.ISSUE);
     if (nonIssues.length) {
       const maxIssue = nonIssues.sort(messageLevelComparator)[nonIssues.length - 1];
-      const errorIcon = wrap.appendChild(new IconButton.Icon.Icon());
-      errorIcon.data = getIconDataForLevel(maxIssue.level());
+      const iconData = getIconDataForLevel(maxIssue.level());
+      const errorIcon = createIconFromIconData(iconData);
+      wrap.appendChild(errorIcon);
       errorIcon.classList.add('cm-messageIcon-error');
     }
     const issue = this.messages.find(m => m.level() === Workspace.UISourceCode.Message.Level.ISSUE);
     if (issue) {
-      const issueIcon = wrap.appendChild(new IconButton.Icon.Icon());
-      issueIcon.data = getIconDataForMessage(issue);
+      const iconData = getIconDataForMessage(issue);
+      const issueIcon = createIconFromIconData(iconData);
+      wrap.appendChild(issueIcon);
       issueIcon.classList.add('cm-messageIcon-issue', 'extra-small');
       issueIcon.addEventListener('click', () => (issue.clickHandler() || Math.min)());
     }
@@ -750,6 +752,18 @@ class RowMessageDecorations {
   }
 }
 
+function createIconFromIconData(data: IconButton.Icon.IconWithName): IconButton.Icon.Icon {
+  const icon = new IconButton.Icon.Icon();
+  icon.name = data.iconName;
+  if (data.width) {
+    icon.style.width = data.width;
+  }
+  if (data.height) {
+    icon.style.height = data.height;
+  }
+  return icon;
+}
+
 const showRowMessages = CodeMirror.StateField.define<RowMessageDecorations>({
   create(state): RowMessageDecorations {
     return RowMessageDecorations.create(new RowMessages([]), state.doc);
@@ -782,8 +796,9 @@ function renderMessage(message: RowMessage, count: number): HTMLElement {
   element.style.gap = '4px';
 
   if (count === 1) {
-    const icon = element.appendChild(new IconButton.Icon.Icon());
-    icon.data = getIconDataForMessage(message);
+    const data = getIconDataForMessage(message);
+    const icon = createIconFromIconData(data);
+    element.appendChild(icon);
     icon.classList.add('text-editor-row-message-icon', 'extra-small');
     icon.addEventListener('click', () => (message.clickHandler() || Math.min)());
   } else {

front_end/ui/components/icon_button/Icon.ts

@@ -22,7 +22,7 @@ export interface IconWithName {
  */
 export type IconData = IconWithName|{
   iconPath: string,
-  color: string,
+  color?: string,
   width?: string,
   height?: string,
 };

front_end/ui/legacy/components/color_picker/ContrastDetails.ts

@@ -274,14 +274,10 @@ export class ContrastDetails extends Common.ObjectWrapper.ObjectWrapper<EventTyp
         this.contrastPassFailAPCA.createChild('span').textContent = `: ${apcaThreshold.toFixed(2)}%`;
       }
       if (passesAPCA) {
-        const iconCheckmark = new IconButton.Icon.Icon();
-        iconCheckmark
-            .data = {iconName: 'checkmark', color: 'var(--icon-checkmark-green)', width: '20px', height: '14px'};
+        const iconCheckmark = createIconCheckmark();
         this.contrastPassFailAPCA.appendChild(iconCheckmark);
       } else {
-        const iconNo = new IconButton.Icon.Icon();
-        iconNo.data = {iconName: 'clear', color: 'var(--icon-error)'};
-        iconNo.classList.add('small');
+        const iconNo = createIconNo();
         this.contrastPassFailAPCA.appendChild(iconNo);
         const suggestedColor = this.computeSuggestedColor('APCA');
         if (suggestedColor) {
@@ -325,13 +321,10 @@ export class ContrastDetails extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.contrastPassFailAA.createChild('span').textContent =
         i18nString(UIStrings.placeholderWithColon, {PH1: aa.toFixed(1)});
     if (this.passesAA) {
-      const iconCheckmark = new IconButton.Icon.Icon();
-      iconCheckmark.data = {iconName: 'checkmark', color: 'var(--icon-checkmark-green)', width: '20px', height: '14px'};
+      const iconCheckmark = createIconCheckmark();
       this.contrastPassFailAA.appendChild(iconCheckmark);
     } else {
-      const iconNo = new IconButton.Icon.Icon();
-      iconNo.data = {iconName: 'clear', color: 'var(--icon-error)'};
-      iconNo.classList.add('small');
+      const iconNo = createIconNo();
       this.contrastPassFailAA.appendChild(iconNo);
       const suggestedColor = this.computeSuggestedColor('aa');
       if (suggestedColor) {
@@ -349,13 +342,10 @@ export class ContrastDetails extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.contrastPassFailAAA.createChild('span').textContent =
         i18nString(UIStrings.placeholderWithColon, {PH1: aaa.toFixed(1)});
     if (passesAAA) {
-      const iconCheckmark = new IconButton.Icon.Icon();
-      iconCheckmark.data = {iconName: 'checkmark', color: 'var(--icon-checkmark-green)', width: '20px', height: '14px'};
+      const iconCheckmark = createIconCheckmark();
       this.contrastPassFailAAA.appendChild(iconCheckmark);
     } else {
-      const iconNo = new IconButton.Icon.Icon();
-      iconNo.data = {iconName: 'clear', color: 'var(--icon-error)'};
-      iconNo.classList.add('small');
+      const iconNo = createIconNo();
       this.contrastPassFailAAA.appendChild(iconNo);
       const suggestedColor = this.computeSuggestedColor('aaa');
       if (suggestedColor) {
@@ -500,3 +490,20 @@ export class Swatch {
     this.swatchElement.classList.toggle('swatch-inner-white', bgColor.as(Common.Color.Format.HSL).l > 0.9);
   }
 }
+
+function createIconCheckmark(): IconButton.Icon.Icon {
+  const icon = new IconButton.Icon.Icon();
+  icon.name = 'checkmark';
+  icon.style.color = 'var(--icon-checkmark-green)';
+  icon.style.width = 'var(--sys-size-9)';
+  icon.style.height = 'var(--sys-size-7)';
+  return icon;
+}
+
+function createIconNo(): IconButton.Icon.Icon {
+  const icon = new IconButton.Icon.Icon();
+  icon.name = 'clear';
+  icon.style.color = 'var(--icon-error)';
+  icon.classList.add('small');
+  return icon;
+}