Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Android] Implement simpler Shield Panel #9888

Closed
deeppandya opened this issue May 22, 2020 · 2 comments · Fixed by brave/brave-core#5618
Closed

[Android] Implement simpler Shield Panel #9888

deeppandya opened this issue May 22, 2020 · 2 comments · Fixed by brave/brave-core#5618

Comments

@deeppandya
Copy link

Description

Implement the simpler shield panel design
It is the sub issue of #6831

@anthonypkeane
Copy link

Designs

shields 1

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

shields 2

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.

shields 3

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:
shields 4

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

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

Settings 2

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

Settings 3

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

Settings 4

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

shields webcompat 1
shields webcompat 2

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

shields webcompat 3

Dark theme

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

dark theme shields 1
dark theme shields 2
dark theme shields 3
dark theme shields 4
dark theme shields 5
dark theme shields 6

Landscape mode

This works the same as currently.

shields landscape

@srirambv
Copy link
Contributor

Verification passed on OnePlus 6T with Android 10 running 1.11.102 x64 build

Verified shields design is as per spec
Dark Theme
Light Theme
Landscape Orientation

Verification passed on Samsung Tab A with Android 10 running 1.11.102 x64 build

Verified shields design is as per spec
Dark Theme
Light Theme
Landscape Orientation

Logged follow up issues #10992 & #10993

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants