Auto-set --icon-error color for cross-circle-filled icons in component

Bypass-Check-License: Only updating files, no new files are added.
Bug: 414330824
Change-Id: I92dfe46197c86d5e89f782bb9e0a3dfb70ed57ae
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6845748
Commit-Queue: Kateryna Prokopenko <[email protected]>
Reviewed-by: Nikolay Vitkov <[email protected]>

Author: Kateryna Prokopenko

front_end/panels/ai_assistance/components/chatView.css

@@ -859,10 +859,6 @@ main {
     align-items: center;
     gap: var(--sys-size-3);
     color: var(--sys-color-error);
-
-    devtools-icon {
-      color: var(--sys-color-error);
-    }
   }
 
   .footer {

front_end/panels/application/preloading/components/PreloadingGrid.ts

@@ -110,7 +110,6 @@ export class PreloadingGrid extends LegacyWrapper.LegacyWrapper.WrappableCompone
                         name=${hasWarning ? 'warning-filled' : 'cross-circle-filled'}
                         class='medium'
                         style=${styleMap({
-                          color: hasWarning ? 'var(--sys-color-warning)' : 'var(--sys-color-error)',
                           'vertical-align': 'sub',
                         })}
                       ></devtools-icon>` : ''}

front_end/panels/console/ConsoleViewMessage.ts

@@ -1506,14 +1506,13 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       this.messageIcon = null;
     }
 
-    let color = '';
+    const color = '';
     let iconName = '';
     let accessibleName = '';
     if (this.message.level === Protocol.Log.LogEntryLevel.Warning) {
       iconName = 'warning-filled';
       accessibleName = i18nString(UIStrings.warning);
     } else if (this.message.level === Protocol.Log.LogEntryLevel.Error) {
-      color = 'var(--icon-error)';
       iconName = 'cross-circle-filled';
       accessibleName = i18nString(UIStrings.error);
     } else if (this.message.originatesFromLogpoint) {

front_end/panels/console_counters/WarningErrorCounter.ts

@@ -70,7 +70,6 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
     groups: [
       {
         iconName: 'cross-circle-filled',
-        iconColor: 'var(--icon-error)',
         text: countToText(errors)
       },
       {

front_end/panels/network/NetworkDataGridNode.test.ts

@@ -98,7 +98,7 @@ describeWithEnvironment('NetworkLogView', () => {
     assert.isNull(marker);
   });
 
-  it('adds an error red icon to the left of the failed requests', async () => {
+  it('adds an error icon to the left of the failed requests', async () => {
     const request = SDK.NetworkRequest.NetworkRequest.create(
         'requestId' as Protocol.Network.RequestId, urlString`https://www.example.com`, urlString``, null, null, null);
     request.statusCode = 404;
@@ -111,9 +111,6 @@ describeWithEnvironment('NetworkLogView', () => {
     const iconElement = el.querySelector('.icon') as HTMLElement;
     const iconImage = iconElement.getAttribute('name');
     assert.strictEqual('cross-circle-filled', iconImage);
-
-    const backgroundColorOfIcon = iconElement.style.color.toString();
-    assert.strictEqual(backgroundColorOfIcon, 'var(--icon-error)');
   });
 
   it('show document icon', async () => {
@@ -475,7 +472,5 @@ describeWithEnvironment('NetworkLogView', () => {
     const iconElement = el.querySelector('.icon') as HTMLElement;
     const iconImage = iconElement.getAttribute('name');
     assert.strictEqual('warning-filled', iconImage);
-    const backgroundColorOfIcon = iconElement.style.color.toString();
-    assert.strictEqual(backgroundColorOfIcon, 'var(--icon-warning)');
   });
 });

front_end/panels/network/NetworkItemView.ts

@@ -235,7 +235,7 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
       const signedExchangeInfo = request.signedExchangeInfo();
       if (signedExchangeInfo?.errors?.length) {
         const icon = new IconButton.Icon.Icon();
-        icon.data = {iconName: 'cross-circle-filled', color: 'var(--icon-error)'};
+        icon.name = 'cross-circle-filled';
         icon.classList.add('small');
         UI.Tooltip.Tooltip.install(icon, i18nString(UIStrings.signedexchangeError));
         this.setTabIcon(NetworkForward.UIRequestLocation.UIRequestTabs.PREVIEW, icon);
@@ -343,7 +343,7 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
     if (trustTokenResult &&
         !NetworkComponents.RequestTrustTokensView.statusConsideredSuccess(trustTokenResult.status)) {
       const icon = new IconButton.Icon.Icon();
-      icon.data = {iconName: 'cross-circle-filled', color: 'var(--icon-error)'};
+      icon.name = 'cross-circle-filled';
       icon.classList.add('small');
       this.setTabIcon(NetworkForward.UIRequestLocation.UIRequestTabs.TRUST_TOKENS, icon);
     }

front_end/panels/network/RequestCookiesView.ts

@@ -306,7 +306,7 @@ export class RequestCookiesView extends UI.Widget.Widget {
       for (const malformedCookie of malformedResponseCookies) {
         const listItem = this.malformedResponseCookiesList.createChild('span', 'cookie-line source-code');
         const icon = new IconButton.Icon.Icon();
-        icon.data = {iconName: 'cross-circle-filled', color: 'var(--icon-error)'};
+        icon.name = 'cross-circle-filled';
         icon.classList.add('cookie-warning-icon', 'small');
         listItem.appendChild(icon);
         UI.UIUtils.createTextChild(listItem, malformedCookie.cookieLine);

front_end/panels/network/SignedExchangeInfoView.ts

@@ -128,7 +128,7 @@ export class SignedExchangeInfoView extends UI.Widget.VBox {
       for (const error of signedExchangeInfo.errors) {
         const fragment = document.createDocumentFragment();
         const icon = new IconButton.Icon.Icon();
-        icon.data = {iconName: 'cross-circle-filled', color: 'var(--icon-error)'};
+        icon.name = 'cross-circle-filled';
         icon.classList.add('prompt-icon', 'small');
         fragment.appendChild(icon);
         fragment.createChild('div', 'error-log').textContent = error.message;

front_end/panels/network/components/HeaderSectionRow.ts

@@ -180,12 +180,7 @@ export class HeaderSectionRow extends HTMLElement {
             Lit.nothing
           }
           ${isHeaderNameEditable && !this.#isValidHeaderName ?
-            html`<devtools-icon class="inline-icon disallowed-characters" title=${UIStrings.headerNamesOnlyLetters} .data=${{
-              iconName: 'cross-circle-filled',
-              width: '16px',
-              height: '16px',
-              color: 'var(--icon-error)',
-            }}>
+            html`<devtools-icon class="inline-icon disallowed-characters medium" title=${UIStrings.headerNamesOnlyLetters} name='cross-circle-filled'>
             </devtools-icon>` : Lit.nothing
           }
           ${isHeaderNameEditable && !this.#header.isDeleted ?

front_end/panels/sources/TabbedEditorContainer.ts

@@ -555,7 +555,7 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
 
   private addLoadErrorIcon(tabId: string): void {
     const icon = new IconButton.Icon.Icon();
-    icon.data = {iconName: 'cross-circle-filled', color: 'var(--icon-error)'};
+    icon.name = 'cross-circle-filled';
     icon.classList.add('small');
     UI.Tooltip.Tooltip.install(icon, i18nString(UIStrings.unableToLoadThisContent));
     if (this.tabbedPane.tabView(tabId)) {
@@ -635,7 +635,7 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
       this.tabbedPane.changeTabTitle(tabId, title, tooltip);
       if (uiSourceCode.loadError()) {
         const icon = new IconButton.Icon.Icon();
-        icon.data = {iconName: 'cross-circle-filled', color: 'var(--icon-error)'};
+        icon.name = 'cross-circle-filled';
         icon.classList.add('small');
         UI.Tooltip.Tooltip.install(icon, i18nString(UIStrings.unableToLoadThisContent));
         this.tabbedPane.setTrailingTabIcon(tabId, icon);