[UX] Site Permissions Management

[lime124]

GH issue to track design work. Bram is wrapping this up before transitioning off.

┆Issue is synchronized with this Jira Task

[bbinto]

Any ETA from @brampitoyo on that?

[brampitoyo]

Mockups

https://mozilla.invisionapp.com/share/ZJPJYMJPQ6F

Walkthrough

Here’s a Setting sub-page that shows and lets users control practically every site features and permissions in one interface, using a consistent UI.

Optimize

This is one of the places where you can turn the battery saver feature on and off.

Exceptions

Inevitably, some sites will want access to your camera, location, microphone, etc. When any of that happens, we’ll list those sites here.

Listing those sites allow you to block or unblock access to specific permissions on a specific site. You can also clear/reset those permissions if you like. Here’s the “permission table” for an example site.

Recommended settings

On recommended setting, Fenix will allow and block site features/permissions in an effort to balance:

• Maximum site compatibility (so most sites will just work)
• Minimum annoyance (so users won’t get annoyed and slowed down by trackers, pop-ups, redirects, autoplaying video, and maybe even ads)

Custom settings

This allows you to specify what to allow or block globally (ie. it applies to all sites).

Site features/permissions are further broken down into 3 sub-categories, to make scanning and navigating through the page easier.

Web content and behaviours

These features will only impact things inside the Fenix.app browser chrome.

• Ads
• Autoplay sound and video
• Cookies
• DRM sound and video
• Pop-ups
• Trackers
• Website redirects

Phone features

When allowed, these features may impact things outside of Fenix.app. For example, a website may track your location or send you notification even when Fenix is running in the background.

• Camera
• Location
• Microphone
• Notifications

Advanced

As the name imply, you probably don’t want to modify the items here, because it may cause things to behave unexpectedly. For example, most sites won’t look or work properly if you block JavaScript, images, and copy/paste from clipboard.

Because of this, “Advanced” is further hidden inside an arrow that you must tap to expand.

• Cache and site data
• Clipboard
• JavaScript
• USB
• Images

Managing individual feature/permission

Some features/permissions can be controlled by a simple toggle. Example: DRM, pop-ups, redirects.

Other features/permissions are controlled by radio buttons, either because they contain more than two options, or the options inside need more explanations. Example: autoplay, cookies, trackers.

Special mentions: camera, location, microphone and location permissions (and I think a few other permissions, like USB) are controlled firstly by Android System, then by Fenix.app. So if it’s blocked by the system, we can’t even give users any control.

When this happens, we show an explanatory message that directs users to Settings.app and instructs them to turn on the necessary permission under Fenix.app.

Either way, our default value for these features/permissions is “Ask to allow”.

Here’s the camera permission page, for example:

Questions

1. Does this way of managing site permissions/features make sense?
2. Does the sub-category grouping make sense (web content, phone features, advanced)?
3. Is this UI feasible, given our timeline?

[brampitoyo]

cc @bbinto @lime124 to put this issue into a sprint/milestone.

Barbara, should this be put into Milestone 1 (#218)?

@colintheshots This issue is now also ready for estimation and feedback.

@pocmo may also be interested to tag this issue on mozilla-mobile/android-components#1818.

[pocmo]

@bram Thank you for those mocks! That's great.

We'll also need a way to handle requests (e.g. camera, microphone, location, notification, ..) from websites while browsing (or is that a different issue?). For the AC team it would be helpful to know if we want to use a doorhanger approach like in Fennec for that. :)

[bbinto]

Thanks @brampitoyo - I'll close this issue and linked it in the Site Permissions Meta for the eng to breakdown.

[bbinto]

@brampitoyo - as @pocmo pointed out, the "site controls" meta is supposed to cover the doorhanger UI. Let's reopen the "site controls" again and tackle the work in that issue.

[st3fan]

@brampitoyo I filed #332 for the prompts, so this one can be about management of permissions

[mheubusch]

@brampitoyo note that we are confused by website redirect setting and it is not on the roadmap for MVP and am asking that we remove it from the designs

[mheubusch]

@brampitoyo verify that designs support users on Android 5