[SHv2] Make Safety Hub entry point icon color dynamic

The entry point icon on the Privacy page should be blue when there are recommendations and grey otherwise. Make sure the other entry points
(on Site Settings and Notifications pages) are always blue.

Bug: 1443466
Screenshots: https://crbug.com/1443466#c107
Change-Id: I2911759044995c942a1120ef1e8ab710b5512682
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4982285
Reviewed-by: Side YILMAZ <sideyilmaz@chromium.org>
Code-Coverage: findit-for-me@appspot.gserviceaccount.com <findit-for-me@appspot.gserviceaccount.com>
Commit-Queue: Aisulu Rakhmetullina <aisulu@google.com>
Cr-Commit-Position: refs/heads/main@{#1216219}

chrome/browser/resources/settings/privacy_page/privacy_page.html

@@ -718,7 +718,7 @@ <h2>$i18n{siteSettingsDefaultBehavior}</h2>
                 <settings-safety-hub-module id="safetyHubEntryPoint"
                     header="[[notificationPermissionsReviewHeader_]]"
                     subheader="[[notificationPermissionsReviewSubheader_]]"
-                    header-icon="cr:security">
+                    header-icon="cr:security" header-icon-color="blue">
                   <cr-button id="safetyHubButton" slot="button-container"
                       on-click="onSafetyHubButtonClick_">
                     $i18n{safetyHubEntryPointButton}

chrome/browser/resources/settings/safety_hub/safety_hub_entry_point.html

@@ -1,11 +1,10 @@
 <style include="cr-shared-style">
 </style>
 
-<!-- TODO(1443466): Change icon color based on state. -->
 <!-- TODO(1443466): Right-align button. -->
 <settings-safety-hub-module class="cr-row first" id="module"
     header$="[[headerString_]]" subheader$="[[subheaderString_]]"
-    header-icon="cr:security">
+    header-icon-color$="[[headerIconColor_]]" header-icon="cr:security">
   <cr-button id="button" on-click="onClick_" slot="button-container"
       class$="[[buttonClass_]]">
     $i18n{safetyHubEntryPointButton}

chrome/browser/resources/settings/safety_hub/safety_hub_entry_point.ts

@@ -57,6 +57,11 @@ export class SettingsSafetyHubEntryPointElement extends
       },
 
       subheaderString_: String,
+
+      headerIconColor_: {
+        type: String,
+        computed: 'computeHeaderIconColor_(hasRecommendations_)',
+      },
     };
   }
 
@@ -67,6 +72,7 @@ export class SettingsSafetyHubEntryPointElement extends
   private hasRecommendations_: boolean;
   private headerString_: string;
   private subheaderString_: string;
+  private headerIconColor_: string;
 
   override connectedCallback() {
     super.connectedCallback();
@@ -90,6 +96,10 @@ export class SettingsSafetyHubEntryPointElement extends
                                       '';
   }
 
+  private computeHeaderIconColor_() {
+    return this.hasRecommendations_ ? 'blue' : '';
+  }
+
   private onClick_() {
     Router.getInstance().navigateTo(routes.SAFETY_HUB);
   }

chrome/browser/resources/settings/safety_hub/safety_hub_module.ts

@@ -267,15 +267,12 @@ export class SettingsSafetyHubModuleElement extends
   }
 
   private onHeaderIconChanged_() {
-    switch (this.headerIcon) {
-      case 'cr:check':
-        this.headerIconColor = 'green';
-        break;
-      case 'cr:security':
-        this.headerIconColor = 'blue';
-        break;
-      default:
-        this.headerIconColor = '';
+    // The check icon is always green for all Safety Hub modules.
+    if (this.headerIcon === 'cr:check') {
+      this.headerIconColor = 'green';
+      // The Safety Check icon color is managed in specific Safety Hub modules.
+    } else if (this.headerIcon !== 'cr:security') {
+      this.headerIconColor = '';
     }
   }
 

chrome/browser/resources/settings/site_settings_page/site_settings_page.html

@@ -19,7 +19,7 @@
         <settings-safety-hub-module id="safetyHubModule"
             header="[[unusedSitePermissionsHeader_]]"
             subheader="[[unusedSitePermissionsSubheader_]]"
-            header-icon="cr:security">
+            header-icon="cr:security" header-icon-color="blue">
           <cr-button id="safetyHubButton" slot="button-container"
               on-click="onSafetyHubButtonClick_">
             $i18n{safetyHubEntryPointButton}

chrome/test/data/webui/settings/safety_hub_entry_point_test.ts

@@ -14,7 +14,7 @@ import {TestSafetyHubBrowserProxy} from './test_safety_hub_browser_proxy.js';
 
 // clang-format on
 
-suite('SafetyHubEntryPointUI', function() {
+suite('SafetyHubEntryPoint', function() {
   let browserProxy: TestSafetyHubBrowserProxy;
   let page: SettingsSafetyHubEntryPointElement;
 
@@ -47,6 +47,9 @@ suite('SafetyHubEntryPointUI', function() {
         page.i18n('safetyHubEntryPointHeader'));
     assertTrue(page.$.module.hasAttribute('subheader'));
     assertEquals(page.$.module.getAttribute('subheader')!.trim(), subheader);
+    assertTrue(page.$.module.hasAttribute('header-icon-color'));
+    assertEquals(
+        page.$.module.getAttribute('header-icon-color')!.trim(), 'blue');
 
     // Entry point has primary button leading to Safety Hub.
     assertEquals(page.$.button!.getAttribute('class'), 'action-button');
@@ -65,6 +68,8 @@ suite('SafetyHubEntryPointUI', function() {
     assertEquals(
         page.$.module.getAttribute('subheader')!.trim(),
         page.i18n('safetyHubEntryPointNothingToDo'));
+    assertTrue(page.$.module.hasAttribute('header-icon-color'));
+    assertEquals(page.$.module.getAttribute('header-icon-color')!.trim(), '');
 
     // Entry point has secondary button leading to Safety Hub.
     assertEquals(page.$.button!.getAttribute('class'), '');