Brave-browser: Implement Shield Panel design with deep link to global settings on Android (core)

[anthonypkeane]

Description

Implement the simpler shield panel design

Designs

Tapping the help icon will show more information about Brave Shields:

Advanced site-specific controls are available in an expand/collapse section, which persists across sites. So if the user expanded Advanced controls on one site, it will still be expanded when they open Shields on a different site.

Label changes:

• "Block Ads & Tracking" becomes "Block cross-site trackers"
• "HTTPS Everywhere" becomes "Upgrade connections to HTTPS"
• Same options to block cookies and fingerprinting as on desktop

Tapping on "Block cross-site cookies" opens options in a subpanel:

Tapping on "Block cross-site fingerprinting" opens options in a subpanel:

Tapping "Change global Shields defaults" under Advanced Controls deeplinks the user to the app settings page:

Tap on the cookies line item to see more options in a sub-page:

Tap on the fingerprinting line item to see more options in a sub-page:

When Brave Shields is down (whether Advanced controls is expanded or not), users can report a broken site by tapping "Report a broken site"

The confirmation message should dismiss on its own after 1s if the user doesn't tap out first:

Dark theme

Dark theme is supported. Text, toggles, buttons, links, and icons have lighter colors:

Landscape mode

This works the same as currently.

Settings

Since Brave Shields global defaults now has its own page in app settings, make some minor organizational changes to main app settings page as well:

Interaction finesse

The expand/collapse Advanced controls should animate content in (this is an iOS example but also applies to Android):

Breakdown: Grow white panel 0.2s, then content fades in Y+10 0.3s

Also, use existing Android functionality to slide content in from left for each new view.

To add delight to the experience as well as a fun touch complimenting the oversized toggle, implement new color gradient when the toggle is ON:

it's a loop with 2ms between each color state + easy ease:
linear-gradient(120deg, rgba(255,167,59,1) 0%, rgba(255,118,84,1) 100%);
linear-gradient(120deg, rgba(255,118,84,1) 0%, rgba(251,84,43,1) 100%);
linear-gradient(120deg, rgba(251,84,43,1) 0%, rgba(247,36,28,1) 100%);
linear-gradient(120deg, rgba(247,36,28,1) 0%, rgba(252,79,130,1) 100%);
linear-gradient(120deg, rgba(252,79,130,1) 0%, rgba(255,167,59,1) 100%);
linear-gradient(120deg, rgba(255,167,59,1) 0%, rgba(255,118,84,1) 100%);

FFA73B :arrow_right: #FF7654 :arrow_right: #FB542B :arrow_right: #F7241C :arrow_right: #FC4F82 :arrow_right: #FFA73B

fabtoggle.mov.zip
As reference, it can be done in CSS+JS https://www.joshwcomeau.com/posts/rainbow-button/

User Flow

Zipped .mov:
android prototype.mov.zip

Notes

Shields will still show the "Report a broken site" button when Shields is down even if they have already reported that site.

Assets

Figma: https://www.figma.com/file/c5Sq98FXH6oz1z3FL8K3eN/Android-Brave-Shields

icons.zip
settings icons.zip

[karenkliu]

working on this design currently, will update the issue here when done

[karenkliu]

@anthonypkeane Designs added!

@deeppandya FYI we still need to finalize the "Google Safe Browsing" item in Settings so there are still some pending changes. But all the other screens aside from Settings are ready. :)

[karenkliu]

@deeppandya Settings designs finalized and assets uploaded. lmk if you need anything else!

[karenkliu]

@deeppandya Added gradient info!

[deeppandya]

Sub issue for shields panel design. https://github.com/brave/brave-browser/issues/9888

[srirambv]

Moving out of 1.11.x as @anthonypkeane mentioned this is for settings and wont go into 1.11.x

More info: https://bravesoftware.slack.com/archives/C0816QH3R/p1595532140182800?thread_ts=1595492138.179500&cid=C0816QH3R

@anthonypkeane please update the title of the issue appropriately so that it avoids confusion with other issues

[karenkliu]

I updated this to include the Privacy Report section

[Hazbelll]

My apologies for asking _that_ question, but is there any ETA on when this will begin to roll out? It appears excellent progress has been made, but unsure what else might be pending.

It would greatly enhance the mobile Brave experience, including squashing some unintended bugs (See #11246 for example).

[anthonypkeane]

Hi @Hazbelll
These feature is actually live now. Please update to the latest version on the play store.

@deeppandya can we close this ticket now?

[deeppandya]

@anthonypkeane it includes changes in settings screen as well. If we can create a separate issue for settings changes then we can definitely close it.

[Hazbelll]

@anthonypkeane Thank you so much! That's a nice surprise, although it's not visible in the Play Store for me yet after just now checking for updates.

I'll keep my eyes peeled over the next few days for when it pops up.

[Hazbelll]

Hello @anthonypkeane, I today received an update for Brave on the Play Store , however this has _not_ included the changes outlined here.

It seems this Brave update (1.15.76) merely updates the Chromium version, according to Brave's support team on Reddit.

Could you please clarify which version of Brave the following changes are slated for? Thank you.

[srirambv]

Updated the issue title to make it more clear. @deeppandya @anthonypkeane please update if required or if you want to log a new one instead of this. Or better to update graphics to show what is not implemented yet

@Hazbelll simpler shields is live in 1.15.76. This issue is for having global settings options in shields and settings reorder which is still not done so won't be available in the builds from playstore

[Hazbelll]

@simonhong Thank you for clarifying and my apologies as I thought initially _everything_ outlined here had been pushed to release.

I hope the settings menu changes are merged soon. They would squash the bug in issue #11246 (As previously mentioned). Thanks.