Add highlight to Shields button during onboarding

[rebron]

Description

After a user goes through brave://welcome and when visiting their first web site with greater than 0 ads and trackers blocked, we will highlight the shields icon in the url bar.

Expected result:

Brave version (brave://version info)

Version/Channel Information:

• Can you reproduce this issue with the current release? n/a
• Can you reproduce this issue with the beta channel? n/a
• Can you reproduce this issue with the nightly channel? n/a

Other Additional Information:

• Does the issue resolve itself when disabling Brave Shields? n/a
• Does the issue resolve itself when disabling Brave Rewards? n/a
• Is the issue reproducible on the latest version of Chrome? n/a

Miscellaneous Information:

Related issue:
#26378
#4247

[MadhaviSeelam]

Verification PASSED using

Brave | 1.63.41 Chromium: 120.0.6099.115 (Official Build) nightly (64-bit)
-- | --
Revision | c56c5ba04606284792201770bb6cb52d1ef367b6
OS | Windows 11 Version 22H2 (Build 22621.2861)

Case 1: visit to first web site with greater than 0 ads and trackers - PASSED

1. Installed 1.63.41
2. launched Brave
3. clicked Set Brave as default browser>>Skip >>Finish
4. visited bbc.com
5. clicked Shields button
6. closed and relaunched Brave
7. visit another website in a new tab (eg. nytimes.com)

Confirmed Shields button in the URL bar is highlighted with pulse animation along with the bubble

Confirmed Shields onboarding is dismissed

Confirmed when Brave closed and relaunched Shields onboarding is dismissed

Confirmed Shields onboarding is not shown for another website in a new tab

2023-12-14_13h25_15.mp4

Case 2: visit to first web site with 0 ads and trackers - PASSED

1. new profile
2. launched Brave
3. clicked Set Brave as default browser>>Skip >>Finish
4. visited brave.com
5. visited a site in a new tab with ads and trackers (eg. nytimes.com)

Confirmed Shields onboarding is not shown on a first website with 0 ads and trackers(brave.com)

Confirmed Shields onboarding is shown on a second tab with ads and trackers

step 3a	step 3b	step 3c	step 4	step 5

Case 3: Pulse animation should not be shown with --disable-gpu - FAILED

1. Installed 1.63.41
2. launched Brave with --disable-gpu
3. visited bbc.com

Actual results: Pulse animation shown on the Shields onboarding

2023-12-14_13h35_27.mp4

Dark theme:

Encountered #34802

[stephendonner]

Verification PASSED using

Brave | 1.63.138 Chromium: 121.0.6167.85 (Official Build) beta (x86_64)
-- | --
Revision | 742a3bdf71b710125a1c1dd8e89981b9009a87bc
OS | macOS Version 11.7.10 (Build 20G1427)

Case 1: visit to first website with greater than 0 ads and trackers - PASSED

Multi-source trackers (msn.com)

Single-source trackers (tmz.com)

Case 2: visit to first website with 0 ads and trackers - PASSED

search.brave.com	yahoo.com

Case 3: pulse animation should not be shown with --disable-gpu - FAILED

Encountered

• Shields onboarding pulsating ring should match (blurple) to the design #34904
• Pulse animation shown on Shields onboarding with hardware acceleration (--disable-gpu flag) #34903

[MadhaviSeelam]

Verification PASSED using

Brave	1.63.142 Chromium: 121.0.6167.139 (Official Build) beta (64-bit) 
Revision	7f6a671325da3f7f1ba2680c7a2115f895b4ff6b
OS	Linux

Case 1: visit to first web site with greater than 0 ads and trackers - PASSED

1. Installed 1.63.142
2. launched Brave
3. clicked Set Brave as default browser>>Skip >>Finish
4. visited usatoday.com
5. clicked Shields button
6. closed and relaunched Brave
7. visit another website in a new tab (eg. nytimes.com)

• Confirmed Shields button in the URL bar is highlighted with pulse animation along with the bubble
• Confirmed Shields onboarding is dismissed when clicked
• Confirmed when Brave closed and relaunched Shields onboarding is dismissed
• Confirmed Shields onboarding is not shown for another website in a new tab**

example	example	example

Case 2: visit to first web site with 0 ads and trackers - PASSED

1. new profile
2. launched Brave
3. clicked Set Brave as default browser>>Skip >>Finish
4. visited brave.com
5. visited a site in a new tab with ads and trackers (newsweek.com)

Confirmed Shields onboarding is not shown on a first website with 0 ads and trackers(brave.com)

Confirmed Shields onboarding is shown on a second tab with ads and trackers

example	example

Case 3: Pulse animation should not be shown with --disable-gpu - FAILED

1. new profile
2. launched Brave with --disable-gpu
3. visited time.com

Actual results: Pulse animation shown on the Shields onboarding

Encountered:
#34903
#34904