Shields onboarding highlight should time out

[LaurenWags]

Description

Shields onboarding added with #27490 doesn't seem to have any timeout.

It would be nice if it went away on its own after a bit rather than a user needing to click on shields to dismiss it.

Steps to Reproduce

1. Clean profile on Nightly.
2. Visit a site where things will be blocked
3. See shields onboarding

Actual result:

The below doesn't time out

Expected result:

should time out

Reproduces how often:

easily

Brave version (brave://version info)

Brave | 1.63.26 Chromium: 120.0.6099.71 (Official Build) nightly (x86_64)
-- | --
Revision | 2a6e297bd394f70bf15a195fba3b007f54317995
OS | macOS Version 13.6.1 (Build 22G313)

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? yes 1.63.x

Other Additional Information:

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

Miscellaneous Information:

cc @rebron

[stephendonner]

Maybe only if we detect active users, rather than idle ones? Just thinking of a use-case where the user is pulled away from screen, returns later, misses notification.

[rebron]

cc: @aguscruiz @simonhong

[simonhong]

Another option is making it activated bubble after some times passed.
For now, that bubble is launched with in-activate bubble.
So, it's not dismissed by itself till it gets activated and de-activated or user clicks shields button.
If we make it activated bubble at some point, it'll be gone when user clicks any area outside of that bubble.

[LaurenWags]

clicking outside of the bubble to dismiss it would be great too 😄

[aguscruiz]

+1 to clicking outside to dismiss

[simonhong]

I realized that making bubble activate after some times passed have a severe drawback.
It steals user's current focus as bubble gets activated.
I think closing with timer is more proper option.

How about this?

1. Launch bubble with inactive state
2. Schedule timer for auto closing bubble (15s?)
3. If user doesn't interact with bubble, bubble will be closed when timer fires
4. If user interacts with bubble before timer fires, cancelling timer.
5. As user makes bubble activated, it'll be dismissed when user clicks outside of bubble.

[MadhaviSeelam]

Verification PASSED using

Brave | 1.63.101 Chromium: 120.0.6099.199 (Official Build) nightly (64-bit)
-- | --
Revision | 8d3f0a563e185b6a763cc8e210ab24775dfb9047
OS | Windows 11 Version 22H2 (Build 22621.2861)

Case 1: Auto timeout at 15secs

1. Installed 1.63.101
2. launched Brave
3. visited Washingtonpost.com in a new tab
4. waited until Shields onboarding bubble (~1sec) appears
5. waited for about 15secs

Confirmed the bubble auto dismissed at about 15seconds

2024-01-08_15h55_22.mp4

Case 2: Manually activate the bubble and dismiss

1. New profile
2. launched Brave
3. visited nytimes.com
4. clicked Shields icon
5. confirmed Shields onboarding bubble activated

Confirmed when clicked outside the bubble, it was dismissed

bubble.dismissed.after.manually.activating.it1.mp4

Case 3: Dismiss Active bubble

1. New profile
2. launched Brave
3. visited nytimes.com
4. waited for the bubble to appear

Confirmed when clicked outside the bubble, it was dismissed

active.bubble.dismissed.mp4

Case 4: Manually activate the bubble and auto close

1. New profile
2. launched Brave
3. visited nytimes.com
4. clicked Shields icon
5. confirmed Shields onboarding bubble activated

Confirmed the bubble auto dismissed at 15sec

manuallyactivatebutdontdismiss.mp4