Use IconButton.Icon.create for icons of default color and size

Bug: 390340514
Change-Id: I1d73a6ee2bd6f432576300747238e77a45b9f390
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6179478
Commit-Queue: Kim-Anh Tran <[email protected]>
Reviewed-by: Kim-Anh Tran <[email protected]>
Auto-Submit: Kateryna Prokopenko <[email protected]>

Author: Kateryna Prokopenko

front_end/panels/elements/ElementsTreeElement.ts

@@ -2159,8 +2159,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   adornSlot({name}: {name: string}, context: OpeningTagContext): Adorners.Adorner.Adorner {
-    const linkIcon = new IconButton.Icon.Icon();
-    linkIcon.name = 'select-element';
+    const linkIcon = IconButton.Icon.create('select-element');
     const slotText = document.createElement('span');
     slotText.textContent = name;
     const adornerContent = document.createElement('span');
@@ -2185,8 +2184,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     adornerContent.textContent = name;
     adornerContent.classList.add('adorner-with-icon');
 
-    const linkIcon = new IconButton.Icon.Icon();
-    linkIcon.name = 'select-element';
+    const linkIcon = IconButton.Icon.create('select-element');
     adornerContent.append(linkIcon);
 
     const adorner = new Adorners.Adorner.Adorner();

front_end/panels/elements/ElementsTreeOutline.ts

@@ -1789,8 +1789,7 @@ export class ShortcutTreeElement extends UI.TreeOutline.TreeElement {
         ElementsComponents.AdornerManager.RegisteredAdorners.REVEAL);
     const name = config.name;
     const adornerContent = document.createElement('span');
-    const linkIcon = new IconButton.Icon.Icon();
-    linkIcon.name = 'select-element';
+    const linkIcon = IconButton.Icon.create('select-element');
     const slotText = document.createElement('span');
     slotText.textContent = name;
     adornerContent.append(linkIcon);

front_end/panels/elements/TopLayerContainer.ts

@@ -95,8 +95,7 @@ export class TopLayerContainer extends UI.TreeOutline.TreeElement {
         ElementsComponents.AdornerManager.RegisteredAdorners.TOP_LAYER);
     const adornerContent = document.createElement('span');
     adornerContent.classList.add('adorner-with-icon');
-    const linkIcon = new IconButton.Icon.Icon();
-    linkIcon.name = 'select-element';
+    const linkIcon = IconButton.Icon.create('select-element');
     const adornerText = document.createElement('span');
     adornerText.textContent = `top-layer (${topLayerElementIndex})`;
     adornerContent.append(linkIcon);

front_end/panels/screencast/ScreencastView.ts

@@ -675,26 +675,17 @@ export class ScreencastView extends UI.Widget.VBox implements SDK.OverlayModel.H
     this.navigationBar = this.element.createChild('div', 'screencast-navigation');
 
     this.navigationBack = this.navigationBar.createChild('button', 'navigation');
-    {
-      const icon = this.navigationBack.appendChild(new IconButton.Icon.Icon());
-      icon.data = {color: 'var(--icon-default)', iconName: 'arrow-back'};
-    }
+    this.navigationBack.appendChild(IconButton.Icon.create('arrow-back'));
     this.navigationBack.disabled = true;
     UI.ARIAUtils.setLabel(this.navigationBack, i18nString(UIStrings.back));
 
     this.navigationForward = this.navigationBar.createChild('button', 'navigation');
-    {
-      const icon = this.navigationForward.appendChild(new IconButton.Icon.Icon());
-      icon.data = {color: 'var(--icon-default)', iconName: 'arrow-forward'};
-    }
+    this.navigationForward.appendChild(IconButton.Icon.create('arrow-forward'));
     this.navigationForward.disabled = true;
     UI.ARIAUtils.setLabel(this.navigationForward, i18nString(UIStrings.forward));
 
     this.navigationReload = this.navigationBar.createChild('button', 'navigation');
-    {
-      const icon = this.navigationReload.appendChild(new IconButton.Icon.Icon());
-      icon.data = {color: 'var(--icon-default)', iconName: 'refresh'};
-    }
+    this.navigationReload.appendChild(IconButton.Icon.create('refresh'));
     UI.ARIAUtils.setLabel(this.navigationReload, i18nString(UIStrings.reload));
 
     this.navigationUrl = this.navigationBar.appendChild(UI.UIUtils.createInput());
@@ -710,10 +701,7 @@ export class ScreencastView extends UI.Widget.VBox implements SDK.OverlayModel.H
     UI.ARIAUtils.setLabel(this.mouseInputToggle, i18nString(UIStrings.mouseInput));
 
     this.touchInputToggle = this.navigationBar.createChild('button');
-    {
-      this.touchInputToggleIcon = this.touchInputToggle.appendChild(new IconButton.Icon.Icon());
-      this.touchInputToggleIcon.data = {color: 'var(--icon-default)', iconName: 'touch-app'};
-    }
+    this.touchInputToggleIcon = this.touchInputToggle.appendChild(IconButton.Icon.create('touch-app'));
     UI.ARIAUtils.setLabel(this.touchInputToggle, i18nString(UIStrings.touchInput));
 
     this.navigationProgressBar = new ProgressTracker(

front_end/panels/sources/BreakpointEditDialog.ts

@@ -177,8 +177,7 @@ export class BreakpointEditDialog extends UI.Widget.Widget {
     }));
     editorWrapper.appendChild(this.editor);
 
-    const closeIcon = new IconButton.Icon.Icon();
-    closeIcon.name = 'cross';
+    const closeIcon = IconButton.Icon.create('cross');
     closeIcon.title = i18nString(UIStrings.closeDialog);
     closeIcon.setAttribute('jslog', `${VisualLogging.close().track({click: true})}`);
     closeIcon.onclick = () => this.finishEditing(true, this.editor.state.doc.toString());
@@ -193,9 +192,7 @@ export class BreakpointEditDialog extends UI.Widget.Widget {
     const link = UI.Fragment.html`<x-link class="link devtools-link" tabindex="0" href="https://goo.gle/devtools-loc"
                                           jslog="${VisualLogging.link('learn-more')}">${
                      i18nString(UIStrings.learnMoreOnBreakpointTypes)}</x-link>` as UI.XLink.XLink;
-    const linkIcon = new IconButton.Icon.Icon();
-    linkIcon.name = 'open-externally';
-    linkIcon.classList.add('link-icon');
+    const linkIcon = IconButton.Icon.create('open-externally', 'link-icon');
     link.prepend(linkIcon);
     linkWrapper.appendChild(link);
 

front_end/ui/components/docs/icon_component/basic.ts

@@ -14,13 +14,7 @@ const iconName1 = document.createElement('td');
 iconName1.textContent = 'select-element';
 row1.appendChild(iconName1);
 
-const icon = new IconButton.Icon.Icon();
-const name = 'select-element';
-icon.data = {
-  iconName: name,
-  color: 'rgb(110, 110, 110)',
-  width: '20px',
-};
+const icon = IconButton.Icon.create('select-element');
 const icon1 = document.createElement('td');
 icon1.appendChild(icon);
 row1.appendChild(icon1);
@@ -37,14 +31,8 @@ const iconName2 = document.createElement('td');
 iconName2.textContent = 'issue-exclamation-filled';
 row2.appendChild(iconName2);
 
-const otherIcon = new IconButton.Icon.Icon();
-const otherPath = 'issue-exclamation-filled';
-otherIcon.data = {
-  iconPath: otherPath,
-  width: '20px',
-  height: '20px',
-  color: 'var(--icon-link)',
-};
+const otherIcon = IconButton.Icon.create('issue-exclamation-filled');
+otherIcon.style.color = 'var(--icon-link)';
 const icon2 = document.createElement('td');
 icon2.appendChild(otherIcon);
 row2.appendChild(icon2);
@@ -56,9 +44,7 @@ const iconName3 = document.createElement('td');
 iconName3.textContent = 'select-element';
 row3.appendChild(iconName3);
 
-const otherIcon2 = new IconButton.Icon.Icon();
-otherIcon2.classList.add('custom-color');
-otherIcon2.name = 'select-element';
+const otherIcon2 = IconButton.Icon.create('select-element', 'custom-color');
 const icon3 = document.createElement('td');
 icon3.appendChild(otherIcon2);
 row3.appendChild(icon3);
@@ -70,14 +56,7 @@ iconTable?.appendChild(row3);
   const span1 = document.createElement('span');
   span1.textContent = 'Some text';
   div.appendChild(span1);
-  const otherIcon3 = new IconButton.Icon.Icon();
-  otherIcon3.classList.add('custom-color');
-  otherIcon3.data = {
-    iconName: 'select-element',
-    width: '20px',
-    height: '20px',
-    color: 'var(--icon-default)',
-  };
+  const otherIcon3 = IconButton.Icon.create('select-element', 'custom-color');
   div.appendChild(otherIcon3);
   const span2 = document.createElement('span');
   span2.textContent = 'with a large icon';
@@ -90,14 +69,9 @@ iconTable?.appendChild(row3);
   const span1 = document.createElement('span');
   span1.textContent = 'Some text';
   div.appendChild(span1);
-  const otherIcon3 = new IconButton.Icon.Icon();
-  otherIcon3.classList.add('custom-color');
-  otherIcon3.data = {
-    iconName: 'select-element',
-    width: '14px',
-    height: '14px',
-    color: 'var(--icon-default)',
-  };
+  const otherIcon3 = IconButton.Icon.create('select-element', 'custom-color');
+  otherIcon3.style.width = '14px';
+  otherIcon3.style.height = '14px';
   div.appendChild(otherIcon3);
   const span2 = document.createElement('span');
   span2.textContent = 'with a small icon';

front_end/ui/components/icon_button/Icon.ts

@@ -35,11 +35,6 @@ export type IconData = IconWithName|{
  * const icon = IconButton.Icon.create('bin');
  * const iconWithClassName = IconButton.Icon.create('bin', 'delete-icon');
  *
- * // Instantiate programmatically via the constructor:
- * const icon = new IconButton.Icon.Icon();
- * icon.name = 'bin';
- * container.appendChild(icon);
- *
  * // Use within a template:
  * LitHtml.html`
  *   <devtools-icon name="bin">

front_end/ui/legacy/components/perf_ui/OverviewGrid.ts

@@ -237,13 +237,7 @@ export class Window extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
 
   enableCreateBreadcrumbsButton(): HTMLElement {
     this.curtainsRange = this.createBreadcrumbButton.createChild('div');
-    this.breadcrumbZoomIcon = new IconButton.Icon.Icon();
-    this.breadcrumbZoomIcon.data = {
-      iconName: 'zoom-in',
-      color: 'var(--icon-default)',
-      width: '20px',
-      height: '20px',
-    };
+    this.breadcrumbZoomIcon = IconButton.Icon.create('zoom-in');
     this.createBreadcrumbButton.appendChild(this.breadcrumbZoomIcon);
     this.createBreadcrumbButton.addEventListener('click', () => {
       this.#createBreadcrumb();