Improve the UI for about: pages blocked by policy

NEW
Assigned to

Status

()

Firefox
Enterprise Policies
P1
normal
9 days ago
6 hours ago

People

(Reporter: bytesized, Assigned: bytesized)

Tracking

(Blocks: 1 bug)

Firefox Tracking Flags

(Not tracked)

Details

MozReview Requests

()

Submitter Diff Changes Open Issues Last Updated
Loading...
Error loading review requests:

Attachments

(3 attachments)

(Assignee)

Description

9 days ago
The page displayed by Bug 1421707's mechanism for blocking about pages is meant to be more of a placeholder than a final UI. This bug addresses updating that UI.
(Assignee)

Comment 1

9 days ago
Quoting Amin Al Hazwani from Bug 1421707 Comment 36 on how the UI should look:

> Hey Felipe, sorry for the late response but I've been waiting for a feedback
> from the content team. The page looks good, using the already existing
> styles of about: pages is a smart solution. The only minor thing that I
> would suggest is to replace the icon with the forbidden icon that you can
> find here https://design.firefox.com/icons/viewer/#forbidden. The fill color
> of the icon should be Grey 90 a80
> https://github.com/FirefoxUX/design-tokens/blob/master/photon-colors/photon-colors.css#L70
> 
> Moreover if possible I would add a "Learn more" link that points to a SUMO
> (or other) resource where we give more information around policies and
> enterprise.
> 
> Nice to have, again considering resources and time, would also be a "Contact
> Admin..." button that allows ESR users to directly contact their policy
> manager administrator.
> 
> More details here
> https://mozilla.invisionapp.com/share/QWFUIA593BH#/279275422_Enterprise_Edition (at the bottom)
> 
> I know that Brian Jones would like to let administrator customize the texts
> but we would need anyway default texts. Needinfo him to provide the default
> title,  description and button label.
Flags: needinfo?(brjones)
Created attachment 8951007 [details]
blocked.svg

This is the icon to be used. It's a small update provided by Amin from what was in design.firefox.com (he will also update the icon on the website with this new one)

Note that there's already a similar icon in the tree, used to show the "deceptive website" block page: http://itisatrap.org/firefox/its-a-trap.html

https://searchfox.org/mozilla-central/source/toolkit/themes/shared/incontent-icons/blocked.svg

In order to avoid duplication, we should update that icon with this more modern one that was designed as part of the Photon effort.

Note that the existing icon has a white color built-in, whereas this new one supports defining the color through css, like so:
https://searchfox.org/mozilla-central/rev/d03ad8843e3bf2e856126bc53b0475c595e5183b/browser/themes/shared/incontentprefs/preferences.inc.css#633
FWIW, the aboutNetError page supports providing a custom page title. Right now it's using the default "Problem loading page", but it'd be nice to reuse the "Page Blocked" label. (no need to create a new string for this, you can reuse the same entity as the big "Page Blocked" in the middle of the page)

See here: https://searchfox.org/mozilla-central/rev/cac28623a15ace458a8f4526e107a71db1519daf/browser/base/content/aboutNetError.xhtml#182
Brian Jones provided the following string in the design doc:

"Your organization has blocked access to this page or website."

One thing I just noticed is that the page actually requires two strings: a _short description_ and a _long description_

However, I think this string is clear enough that we don't need to have two different ones. Maybe we can leave the long description blank, and use it to later add support for the sysadmin to provide a custom string.

What do you all think?
Created attachment 8951790 [details]
blockedpage.png

Screenshot of what it looks right now, with the descriptions annotated
Comment hidden (mozreview-request)
(Assignee)

Updated

12 hours ago
Attachment #8953278 - Flags: review?(felipc)
Attachment #8953278 - Flags: review?(brjones)
(Assignee)

Updated

12 hours ago
Flags: needinfo?(brjones)
You need to log in before you can comment on or make changes to this bug.