update design for https warning interstitial

rebron commented 2 years ago

Description

Current https only warning interstitial uses chromium look and feel and is not user friendly. Update design to assist users navigate through this warning.

Steps to Reproduce

Turn on brave://settings/security Always use secure connections (https-only)
Visit a site that's http only e.g. http://ejfry.com or http://howbigismybrowser.com or your choice
Notice interstitial screen attached in actual result. Clicking through should take you to http site.

Actual result:

Expected result:

[design placeholder]

Reproduces how often:

easily

Brave version (brave://version info)

Version/Channel Information:

Can you reproduce this issue with the current release? yes
Can you reproduce this issue with the beta channel? yes
Can you reproduce this issue with the nightly channel? yes

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:

Required change before turning https-only on by default. cc: @diracdeltas @fmarier @iefremov @Brave-Matt

diracdeltas commented 2 years ago

there is a mini spec for this linked in https://bravesoftware.slack.com/archives/CD495CWLR/p1645642109975879?thread_ts=1644961566.418229&cid=CD495CWLR. the relevant section is below:

The “learn more” link points to https://support.google.com/chrome/answer/10468685?p=first_mode&visit_id=637806395632465747-627054495&rd=1#https-only-mode. At minimum we should have it go to a Brave support page instead.

We should also consider (1) redesigning the page to look less scary, especially if “Always use secure connections” is on by default and (2) adding a switch from the interstitial page to turn this feature off for {this session, until I turn it back on again}. Ryan's suggested copy is:

Header: [sitename.com] does not support HTTPS
Body: Brave tries to upgrade all sites from HTTP to a more secure HTTPS connection. In cases where a site doesn't support HTTPS, Brave will warn you before loading the page. Learn more.
CTAs: Proceed to site | Go back | Proceed & don't warn me again

We should make sure this interstitial page does NOT show up for Tor .onion sites since those have their own non-TLS encryption protocol and are thus “secure” (https://github.com/brave/brave-browser/issues/1135).

aguscruiz commented 1 year ago

Adding the new design template for interstitials here: https://www.figma.com/file/iiUbJmv6BaKwWctpysJNkU/Interstitial-screens?node-id=1%3A17

brave / brave-browser