Closed Bug 1438243 Opened 2 years ago Closed 2 years ago

Improve the UI for about: pages blocked by policy

Categories

(Firefox :: Enterprise Policies, enhancement, P1)

enhancement

Tracking

()

RESOLVED FIXED
Firefox 60
Tracking Status
firefox60 --- fixed

People

(Reporter: bytesized, Assigned: bytesized)

References

Details

Attachments

(3 files)

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.
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)
Attached image 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?
Attached image blockedpage.png
Screenshot of what it looks right now, with the descriptions annotated
Attachment #8953278 - Flags: review?(felipc)
Attachment #8953278 - Flags: review?(brjones)
Flags: needinfo?(brjones)
The Long Description should be optional. Since we can't know why the organization has blocked access, we are not able to offer context that explains to the user a) what's "bad" about the page or b) what, if anything, they can do about it.

If the Long Description can be optional, we can proceed to discussions about whether or not Mozilla can/should provide examples for sys admins (or others at an organization) to use. I believe that discussion would start with Romain?

-Brian
Flags: needinfo?(rtestard)
Comment on attachment 8953278 [details]
Bug 1438243 - Improve the UI for pages blocked by policy

https://reviewboard.mozilla.org/r/222558/#review228832

Instead of creating this new file for blocked.svg, please replace the one in toolkit/themes/shared/incontent-icons/.  Then you'll have to use absolute path for it `(chrome://global/skin/icons/blocked.svg)` but that's ok. 

And then you'll need to add these two extra properties below to the file https://searchfox.org/mozilla-central/rev/88e89261ea81860f44a44ed068cf5839aea5def6/browser/themes/shared/blockedSite.css#16

> fill: currentColor;
> -moz-context-properties: fill;

so that the icon picks up the white color for the it's-a-trap page (http://itisatrap.org/firefox/its-a-trap.html)
Attachment #8953278 - Flags: review?(felipc)
(In reply to Brian Jones from comment #7)
> The Long Description should be optional. Since we can't know why the
> organization has blocked access, we are not able to offer context that
> explains to the user a) what's "bad" about the page or b) what, if anything,
> they can do about it.
> 
> If the Long Description can be optional, we can proceed to discussions about
> whether or not Mozilla can/should provide examples for sys admins (or others
> at an organization) to use. I believe that discussion would start with
> Romain?
> 
> -Brian

I'm OK to only have a short description for now.
My understanding is that custom strings cannot be done for 60 but yes let's leave the long description blank for now and we can use it later to support custom strings for sys admins.
Flags: needinfo?(rtestard)
Comment on attachment 8953278 [details]
Bug 1438243 - Improve the UI for pages blocked by policy

https://reviewboard.mozilla.org/r/222558/#review229382
Attachment #8953278 - Flags: review?(felipc) → review+
Attachment #8953278 - Flags: review?(brjones)
Pushed by ksteuber@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/70bd75b6aed9
Improve the UI for pages blocked by policy r=Felipe
https://hg.mozilla.org/mozilla-central/rev/70bd75b6aed9
Status: NEW → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 60
You need to log in before you can comment on or make changes to this bug.