Toned down interstitials for top-level blocking

[fmarier]

Description

Ignoring list errors, there are currently three classes of resources that will be blocked using the Top Level Blocking feature (Search for Top Level Blocking feature spec on GDrive):

1. email trackers with server-side redirections
2. cookie syncing redirect chains
3. bad sites (e.g. typo squatters)

The V1 UX works well for the third category since we don't want/expect users to ignore our warning and click through to the tracking site.

In the case of the first one however, we expect a high click-through rate because of the implicit intent to visit the destination site (on the other side of the tracker). The risk with warning for this class of trackers is that it will train users to ignore all interstitial warning pages, most of which can lead to very serious harm (e.g. a phishing page blocked by Safe Browsing):

@pes10k tells me that he is less concerned about the third class of sites and that we should optimize the warning interstitials in V2 of the top-level blocking for the first two classes.

Designs

Existing

Revised

Assets

Figma: https://www.figma.com/file/aJu3WGDztEWNZgwQTD9yx2/?node-id=0%3A1

Use Brave's shared checkbox and button component.

[fmarier]

@karenkliu recommended the following UI treatment:

• White background
• Info icon

as per the redesigned error pages on brave/brave-ios#483.

I also brought up https://testsafebrowsing.appspot.com/s/trick_to_bill.html and we agreed that it should have a red background instead to align its severity with the other Safe Browsing pages.

[fmarier]

Here's an idea for the revised copy:

The page ahead may attempt to track you across sites

This page may be trying to link some of your personal data with a cookie before taking you to your intended destination. You can choose to allow this potential privacy leak and proceed to the next page, or you can block this tracking attempt by going back to the previous page.

[bridiver]

The current "Suspicious site ahead" seems overly ominous sounding for a tracking click-through and #15189 (comment) seems better to me

[pes10k]

Just wanted to say that this all looks terrific, thanks everyone in the issue for working on this!

[bsclifton]

@fmarier is the spec'd design (above) a modal? or would this new UI be displayed in a tab (like it is now)… just with updated copy/styling?

[fmarier]

@bsclifton The new UI would be displayed exactly like it is right now (e.g. visit https://adcash.com/ to see one), just with updated copy & styling.

[pes10k]

@fmarier @pilgrim-brave can this be closed now?

[karenkliu]

The new UI hasn't been done for Android/Desktop yet, so I don't think this can be closed yet.

[fmarier]

The Android interstitial for this is currently broken (showing the desktop one by the looks of it):

[ShivanKaul]

The Desktop version OTOH looks LGTM.

[ShivanKaul]

I think the UI for Desktop looks good. I opened #34573 to track Android design updates for this. Closing this one.