Emil Ghitta, QA [:emilghitta] Reporter
	Description • 6 years ago

[Affected versions]:
Firefox 63.0a1 (BuildId:20180822221004)

[Affected platforms]:
Windows 10 64bit.
Ubuntu 16.04 64bit.
macOS 10.12.6

[Preconditions]
Activate any policy.

[Steps to reproduce]:
1. Launch Firefox.
2. Access the about:policies page.
3. Resize the browser window.

[Expected result]:
The information is displayed without any issues.

[Actual result]:
The information overlaps the category names.

[Notes]
This is reproducible with the information displayed in the "Documentation" and "Errors" categories as well.

	:Felipe Gomes (needinfo for replies!)
	Comment 1 • 6 years ago

This happens due to the CSS inherited from about:preferences, which has a rule to hide the category names and only display the icons when the window width is small. Since there are no icons here, only text, the layout ends up messed up. The same problem can be seen in about:networking.


[1] https://searchfox.org/mozilla-central/rev/f2ac80ab7dbde5400a3400d463e07331194dec94/toolkit/themes/shared/in-content/common.inc.css#708-711


We could fix the CSS, but what about we use some existing icons to add to the categories here too? Bram, what do you think?

	Bram Pitoyo [:bram]
	Comment 2 • 6 years ago

Yes. We should design some icons here.

Then our CSS can exactly match about:preferences – ensuring consistency between our in-content pages.

	Bram Pitoyo [:bram]
	Comment 8 • 6 years ago

This is my first try to design the policy icons for the sidebar. If you’d like to see it in product, use the attached SVG assets.

Thoughts?

	:Felipe Gomes (needinfo for replies!)
	Comment 9 • 6 years ago

These icons look awesome, Bram! I intend to also have a general panel at the first position, see bug 1485196. (not sure what to call it: "Overview", "General", "Status", or something else).

Could you also design one icon for that?

	Bram Pitoyo [:bram]
	Comment 13 • 6 years ago

(In reply to :Felipe Gomes (needinfo me!) from comment #9)
> I intend to also have a general panel at the
> first position, see bug 1485196. (not sure what to call it: "Overview",
> "General", "Status", or something else).
> 
> Could you also design one icon for that?

Here’s an icon for that, where I’ve borrowed the gear icon from Preferences.

Do you think that this is the right visual metaphor to use?

To answer that question, and to think of the right word to describe this page, it helps to think of what this page will have inside. Will it contain all the policies (active + inactive + error – together in the same page)?

If so, then the right word to use may be “All”. But “Overview” and “General” are both good candidates.

Instead of showing “All” and “Active”, what’s your thought about showing “Active” and “Inactive” instead? Because then the distinction between each sub-category is clear. One page for the enabled policies. One page for the disabled ones.

	Bram Pitoyo [:bram]
	Comment 14 • 6 years ago

In case we need an icon for “Inactive” or “Blocked” policies.

One thing I recommend is adopting the string from our permissions UI, and call the policies “Allowed” and “Blocked”.

	:Felipe Gomes (needinfo for replies!)
	Comment 15 • 6 years ago

No, it will be much simpler than that. What it will contain is just a status text saying if the overall feature is Active, Inactive or in Error, and something stating the source of the policies (either saying "GPO" or the filepath for the policies.json file in use)

	Bram Pitoyo [:bram]
	Comment 16 • 6 years ago

In that case, let’s call this page “Status”, and use the icon with the circled ‘i’ in it.

For “Documentation”, we can use the icon with the circled ‘?’.

What do you think?

	Bram Pitoyo [:bram]
	Comment 19 • 6 years ago

I’ve updated the icons accordingly.

	u626306 Assignee
	Comment 20 • 6 years ago

Hi, if no one is working on this bug, I'd love to take it on.

	u626306 Assignee
	Comment 21 • 6 years ago

Is there any more information required than what is mentioned above?
Should icons be placed in [1] or is there a style that should be followed? (any examples?)


[1] - https://searchfox.org/mozilla-central/source/browser/components/enterprisepolicies/content

	:Felipe Gomes (needinfo for replies!)
	Comment 23 • 5 years ago

Comment on attachment 9029449 [details] [diff] [review]
Bug 1485636 - Added images to categories, added inherited properties to SVGs & added paths to manifest file. r=felipe

Review of attachment 9029449 [details] [diff] [review]:
-----------------------------------------------------------------

Hi Adnan, this looks really good and works well! Only a few minor changes that I noticed while testing.

- The header text ("Active", "Documentation", ..) no longer displays on the main area after switching, because that text is copied from the button that was clicked: [1]
But with the structure change, the label is no longer the first child element

- Clicking on the icon itself (instead of the text) doesn't work, because the code here [2] doesn't handle that. What I suggest is to, instead of having just this one listener in the parent #categories div, let's just add one listener per each .category div and make it simpler


And, besides that, some structure changes:

- As we're not going to be using the status pane at the moment, please remove it from the commented out code, as well as the policies-status.svg file that is being added.

- Instead of adding the svg files to the generic browser/themes/shared folder, please add them directly on the browser/components/enterprisepolicies/content/ folder, and list them at the jar.mn there.  (Note that this will require you to update the src="" urls. The correct url will be e.g. "chrome://browser/content/policies/policies-active.svg"


[1] https://searchfox.org/mozilla-central/rev/232ced2697b8938073fa79b8e6aa3718876c0b69/browser/components/enterprisepolicies/content/aboutPolicies.js#319
[2] https://searchfox.org/mozilla-central/rev/232ced2697b8938073fa79b8e6aa3718876c0b69/browser/components/enterprisepolicies/content/aboutPolicies.js#289-292

	u626306 Assignee
	Comment 24 • 5 years ago

Hi Felipe,

I have applied the changes you requested.

	Pulsebot
	Comment 25 • 5 years ago

Pushed by felipc@gmail.com:
https://hg.mozilla.org/integration/mozilla-inbound/rev/dec0ff3e2943
Add icons to the about:policies sidebar. r=felipe

	:Felipe Gomes (needinfo for replies!)
	Comment 26 • 5 years ago

Comment on attachment 9033051 [details] [diff] [review]
Bug 1485636 - Added icons, updated HTML paths & fixed buttons to detect icon click and read label for page header. r=felipe

Review of attachment 9033051 [details] [diff] [review]:
-----------------------------------------------------------------

Looks good! Thanks, Adnan!

	Razvan Maries
	Comment 27 • 5 years ago
bugherder

https://hg.mozilla.org/mozilla-central/rev/dec0ff3e2943

	Md. Majedul islam
	Comment 28 • 5 years ago

I have reproduced this bug with Nightly 63.0a1 (2018-08-23) on ManjaroLinux 18.0.1, 64 Bit!

This bug's fix is verified with the latest Nightly!

Build ID   : 20181226093642
User Agent : Mozilla/5.0 (X11; Linux x86_64; rv:66.0) Gecko/20100101 Firefox/66.0

	Ryan VanderMeulen [:RyanVM]
	Comment 29 • 5 years ago

This seems moderate enough of an issue that it can just ride the trains.

	Mohammad Maruf Rahman
	Comment 30 • 5 years ago

This bug is also reproducible with Nightly 63.0a1 (2018-08-23) on Windows 7, 64 Bit!
This bug's fix is verified with latest Nightly!

Build ID 	20181228215042
User Agent 	Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:66.0) Gecko/20100101 Firefox/66.0

[bugday-20181226]

	Md. Majedul islam
	Comment 31 • 5 years ago

As per comment 28 and comment 30, I am marking this as verified fixed.