The gray line between toolbar and preferences page should be removed to match Photon visual spec.




2 years ago
2 years ago


(Reporter: evanxd, Assigned: rickychien)


(Blocks 1 bug)

55 Branch
Firefox 57
Dependency tree / graph
Bug Flags:
qe-verify +

Firefox Tracking Flags

(Not tracked)



(1 attachment)

Posted image gray-line.png
According to Photon visual spec[1], the gray line between toolbar and preferences page should be removed. See the gray line in the attachment.

Flags: qe-verify+
QA Contact: hani.yacoub
Whiteboard: [photon-preference][triage] → [photon-preference]
Assignee: nobody → rchien
Priority: P2 → P1
Customized UI is taking the same effect which removes the toolbar's bottom border by adding a "customizing" attribute [1] on the browser root element when entering customized UI and setting a CSS rule [2] for removing the border style.

We can achieve the same thing by using the same mechanism like Customized Page, but it doesn't work for about:preferences. Unlike customized page, preferences panel is loaded by a tabbrowser element (an iframe-like element) and it is unable to touch outside of its scope to add a "preferences" attribute on the browser root element.

Jared, do you have any idea how to add a "preferences" attribute on the browser element when user enters about:preferences?

Flags: needinfo?(jaws)
I strongly believe that we should not do this.

The Preferences UI is supposed to feel the same as a regular webpage. A similar idea was proposed and implemented for the Add-Ons Manager for a while and then removed later during Australis.

Both the preferences UI and the add-ons manager should continue to have this separator for multiple reasons:
1. These pages are not a special "mode" of the browser like Customize is. Customize mode allows for toolbar items to be dragged and moved around, effectively treating the browser chrome as part of the web page. These two pages do not offer this.
2. These pages scroll, and scrolling without that line will appear awkward
3. If you view Customize with a theme enabled, you will see how it is faded in to the page. We would probably need to do something similar here and it wouldn't make as much sense for these two pages.
Flags: needinfo?(jaws)

I think Jared's suggestion really makes sense to me. For technical perspective, this feature is not that easy to implement since it needs to touch the code out of preferences scope and there might be some architecture changes involved.

Do you have any opinion about this?
Flags: needinfo?(hhuang)
I agree with Jared's opinions and realize this implement might cause more issues. I will get the gray line back and updated the spec.
Flags: needinfo?(hhuang)
Thanks for the reply!

According to comment 4, we've reached a consensus that toolbar gray line will get back so this bug is invalid.
Closed: 2 years ago
Priority: P1 → --
Resolution: --- → INVALID
remove whiteboard tag due to its INVALID
Whiteboard: [photon-preference]
You need to log in before you can comment on or make changes to this bug.