[meta][ux] Tracking Protection

[lime124]

For my own sanity, testing out the idea of creating a meta issue to track the various issues to consider while designing.

• Show trackers blocked in collapsed URL bar (on-scroll) #255 Show trackers blocked in collapsed URL bar (on-scroll)
• Provide feedback about what / how much has been blocked #144 Provide feedback about what / how much has been blocked
• Provide feedback about what / how much has been blocked #240 Provide feedback about what / how much has been blocked
• Indicate "Blocking" has been turned off #121 Indicate "Blocking" has been turned off
• Tracker switch to turn on/off  #96 Tracker switch to turn on/off

[lime124]

There are no strings in these design to approve. @antlam is going to provide the badged shield icon and the disabled icon (note: they make look different than my hack job! 😀 )

[lime124]

Here is the spec page for the drawer. Visual spec coming later. Strings are TBD. @mheubusch @BrianNJones

/cc @bbinto, @antlam

[antlam]

The icon with the counter is giving me issues. Will post later. Here are the others though, in SVG :)

trackingprotectiong-medium-small.zip

[antlam]

Got it! trackingprotection-medium-counter.zip

Here's the approved icon with the space cut-out for the counter.

Note: SF Pro Text, Medium, 8px

[lime124]

Here is the visual design spec!

LMK if there are any questions!

[boek]

@lime124 How do you want the drawer to look on smaller screen sizes? Right now the 4S - SE that would take up the entire screen. Is that OK?

[lime124]

Looks like the spec pages cover all the linked issues. All strings have been approved by @BrianNJones . Filing a follow up issue for one string Brian would like to tweak.

[lime124]

@boek and I just discussed the drawer width question and figured it out.

tl;dr is we are going to specify a max width for the drawer so it doesn't take up the whole screen on say an ipad in landscape, as well as have a min for the gap so that it can be an acceptable tap area to close the drawer.

[boek]

@antlam if I could get the assets here <3

[antlam]

trackingprotection-PDF.zip

@boek try these!

[liuche]

Handling the strings-approved labels - not doing anything for this meta bc it doesn't look like it has any strings.

[boek]

Hey @lime124, we wanted to get your input on the +99 having potential localization issues.

A couple of ideas we tossed around were replacing the text with an infinity symbol or some sort of other glyph. Or potentially just showing the absolute number until we can patch it in the next release.

[lime124]

It should be 99+ (see Note B in that first mock I posted). This was reviewed by Michelle (prior to @BrianNJones joining us) and should be localization friendly.