1269336 - Password fields look ugly in browser action's pop-up

Status: RESOLVED FIXED

(WebExtensions :: Frontend, defect, P5)

Description

[Wladimir Palant]

Attachment: Minimal test extension

Steps to reproduce:

1. Download attached extension.
2. Go to about:config and set xpinstall.signatures.required to false.
3. Open Add-ons Manager and install the extension from file.
4. Click the extension's icon in the toolbar (generic puzzle icon).

Expected results:

The pop-up shows up and the password field inside it looks nice (native or something like it). That's what you see in Chrome.

Actual results:

The password field is ugly - you get the 90ies look (2px inset). This is a regression from bug 1225633, it sets -moz-appearance:none for all input elements but only styles those with type="text" afterwards. So input elements with type="password", type="email" or without any type attribute whatsoever stay unstyled.

This should really apply styles to all input elements, regardless of type attribute (which is allowed to be missing on a regular text field) - merely type="checkbox" and type="radio" should be treated as exceptions.

Comment 1

[Andy McKay]

Attachment: Screenshot 2016-05-10 14.15.52.png

Comment 2

[Andy McKay]

This looks good to me now, was this fixed in bug 1269081 (see attachment).

Comment 3

[Wladimir Palant]

Attachment: Minimal test extension

Yes, bug 1269081 fixed this for me, neither is bug 1269334 reproducible in the same way. I'm leaving both bugs open however, because the styles applied still have issues if the add-on author opts in. I replaced the test extension with one that has browser_style flag.

Comment 4

[Blake Winton (:bwinton) (:☕️)]

Resolved fixed, I guess.  :)

Comment 5

[Blake Winton (:bwinton) (:☕️)]

Oh, wait, after re-reading the comments, I'm re-opening it to handle the browser_style case.

Comment 6

[Mark Striemer [:mstriemer]]

Attachment: current-state.png

So here's a screenshot of the extension updated to something that I could imagine an extension using.

The inputs don't match what Firefox uses exactly, for example in about:preferences there is a slight border radius and the border changes colours instead of adding an outline.

This is a modern web default though so I'm not sure how far we want to take this. If we want to support all the photon styles we should get a new bug for that I think.

If you add the browser-style class to the input you do get the retro look, but just don't add the class and you're all good, it is only useful on some elements.

Andy, is this good enough or do we want to revisit the styles that get applied for browser_styles?

Comment 7

[Mark Striemer [:mstriemer]]

After some IRC discussion, this seems to be good enough.