Update styles in Shields panel

[rebron]

Update Shields UI to match brave-core styling.

Design

Shields Up View

Shields Down View

Description

For Shields Up View, match design above with shields toggle on.
Label ‘Shields Up for this site’ with text below
‘If a site appears broken, try shields down’

Display favicon if available and first party domain name
Display total items blocked

Display 'Ads and trackers blocked' with toggle
Display number of items blocked
Toggle is Default on

Display '3rd-party cookies blocked' with drop down
Display number of items blocked
Drop down menu items:
‘3rd-party cookies blocked’ (default)
‘All cookies blocked'
‘Allow all cookies’

Display '3rd-party scripts blocked' with drop down
Display number of items blocked
Drop down menu items:
‘3rd-party scripts blocked’ (default)
‘All scripts blocked'
‘Allow all scripts’

Display '3rd-party device recognition attempts blocked' (this is fingerprinting) with drop down
Display number of items blocked
Drop down menu items:
‘3rd-party device recognition attempts blocked’ (default)
‘All device recognition attempts blocked'
‘Allow all device recognition attempts’

Display number of ‘Connections encrypted’

Link to Global Shield defaults with icon
chrome://settings/shields

For Shields Down View - Second screenshot
Shields toggle off with label 'Shields Down for this site'

Display favicon and first party domain name
Display shield ! alert icon with text:
‘You’re browsing this site without any privacy and security protections.’
Link to Global Shield defaults with icon
chrome://settings/shields

[srirambv]

@rebron If a site appears broken, try turning this off text doesn't make sense when shields is already off. Should probably just hide that text when shields is turned off?

[rebron]

@srirambv Let me get the screenshot updated to remove that text. I didn't have it defined in the initial issue.

[rebron]

@srirambv I updated the screenshot for Shields down view. Should be accurate now.

[bbondy]

Moving redesigned shields to 0.56.x but if it's done and tested I have no problem moving it back to 0.55.x. I hope we can do that but I don't want to introduce slippage risk for the rest which was spec'ed on time, so until that is the case it will live in 0.56.x.

[rebron]

Updated screenshot and issue description.

[bbondy]

#1339 (comment)

[tildelowengrimm]

Here's the updated specification for this feature. Please QA against the spec.
https://docs.google.com/document/d/16hoEp7TcFLg4dolIPOzswzTKms6aDeDxm-jSXuVAZvc/edit#

And here's the working design spec (click for larger).

[srirambv]

Verification Passed on

Brave	0.56.8 Chromium: 70.0.3538.77 (Official Build) (64-bit)
Revision	0f6ce0b0cd63a12cb4eccea3637b1bc9a29148d9-refs/branch-heads/3538@{#1039}
OS	Linux

Shields up

Shields down

Verification Passed on

Brave	0.56.8 Chromium: 70.0.3538.77 (Official Build) (64-bit)
Revision	0f6ce0b0cd63a12cb4eccea3637b1bc9a29148d9-refs/branch-heads/3538@{#1039}
OS	Windows

Shield up

Shield Down

Verified passed with

Brave	0.56.8 Chromium: 70.0.3538.77 (Official Build) (64-bit)
Revision	0f6ce0b0cd63a12cb4eccea3637b1bc9a29148d9-refs/branch-heads/3538@{#1039}
OS	Mac OS X