From 6bdaface2a01855b765e89dfd6929f30ce9f7e99 Mon Sep 17 00:00:00 2001
From: Wolfgang Beyer <wolfi@chromium.org>
Date: Mon, 24 Jan 2022 10:24:43 +0100
Subject: [PATCH] Remove default icon color for IconButton
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This partially reverts https://crrev.com/c/3398895. Setting a default
icon color has side effects for colored icons. Instead colors are
assigned individually where necessary.

Fixed: 1290237, 1287923
Change-Id: I27d61fc70db52950c4fbee7e893ce1a6ef06e511
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3411496
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Reviewed-by: Simon Zünd <szuend@chromium.org>
Commit-Queue: Wolfgang Beyer <wolfi@chromium.org>
---
 front_end/panels/application/AppManifestView.ts           | 8 +++++++-
 .../panels/application/components/FrameDetailsView.ts     | 1 +
 front_end/ui/components/docs/icon_button/basic.ts         | 2 +-
 front_end/ui/components/icon_button/IconButton.ts         | 2 +-
 4 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/front_end/panels/application/AppManifestView.ts b/front_end/panels/application/AppManifestView.ts
index 7c054be8f1..d098c2f805 100644
--- a/front_end/panels/application/AppManifestView.ts
+++ b/front_end/panels/application/AppManifestView.ts
@@ -617,7 +617,13 @@ export class AppManifestView extends UI.Widget.VBox implements SDK.TargetManager
         const copyButton = new IconButton.IconButton.IconButton();
         copyButton.title = i18nString(UIStrings.copyToClipboard);
         copyButton.data = {
-          groups: [{iconName: 'copy_icon', iconHeight: '12px', iconWidth: '12px', text: ''}],
+          groups: [{
+            iconName: 'copy_icon',
+            iconHeight: '12px',
+            iconWidth: '12px',
+            text: '',
+            iconColor: 'var(--color-text-primary)',
+          }],
           clickHandler: (): void => {
             Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(recommendedId);
           },
diff --git a/front_end/panels/application/components/FrameDetailsView.ts b/front_end/panels/application/components/FrameDetailsView.ts
index 08cb30b705..d2dfad2fc0 100644
--- a/front_end/panels/application/components/FrameDetailsView.ts
+++ b/front_end/panels/application/components/FrameDetailsView.ts
@@ -342,6 +342,7 @@ export class FrameDetailsReportView extends HTMLElement {
         {
           iconName: 'refresh_12x12_icon',
           text: i18nString(UIStrings.refresh),
+          iconColor: 'var(--color-text-primary)',
         } as IconButton.IconButton.IconWithTextData,
       ],
     } as IconButton.IconButton.IconButtonData}>
diff --git a/front_end/ui/components/docs/icon_button/basic.ts b/front_end/ui/components/docs/icon_button/basic.ts
index 6a1b68ccc9..082ca68d5b 100644
--- a/front_end/ui/components/docs/icon_button/basic.ts
+++ b/front_end/ui/components/docs/icon_button/basic.ts
@@ -12,7 +12,7 @@ function appendComponent(data: IconButton.IconButton.IconButtonData) {
 
 appendComponent({
   clickHandler: (): void => {},
-  groups: [{iconName: 'survey_feedback_icon', text: '1 item'}],
+  groups: [{iconName: 'survey_feedback_icon', iconColor: 'var(--color-text-primary)', text: '1 item'}],
 });
 
 appendComponent({
diff --git a/front_end/ui/components/icon_button/IconButton.ts b/front_end/ui/components/icon_button/IconButton.ts
index b30c1896b6..58cd5f5cf2 100644
--- a/front_end/ui/components/icon_button/IconButton.ts
+++ b/front_end/ui/components/icon_button/IconButton.ts
@@ -85,7 +85,7 @@ export class IconButton extends HTMLElement {
       ${filteredGroups.map(counter =>
       LitHtml.html`
       <${Icon.litTagName} class="status-icon"
-      .data=${{iconName: counter.iconName, color: counter.iconColor || 'var(--color-text-primary)', width: counter.iconWidth || '1.5ex', height: counter.iconHeight || '1.5ex'} as IconData}>
+      .data=${{iconName: counter.iconName, color: counter.iconColor, width: counter.iconWidth || '1.5ex', height: counter.iconHeight || '1.5ex'} as IconData}>
       </${Icon.litTagName}>
       ${this.#compact ? LitHtml.html`<!-- Force line-height for this element --><span>&#8203;</span>` : LitHtml.nothing}
       <span class="icon-button-title">${counter.text}</span>