[Form Autofill] Show select element dropmark in edit profile dialog in preferences

RESOLVED FIXED in Firefox 55

Status

()

RESOLVED FIXED
2 years ago
a year ago

People

(Reporter: scottwu, Assigned: scottwu)

Tracking

unspecified
mozilla55
Points:
---
Bug Flags:
qe-verify -

Firefox Tracking Flags

(firefox55 fixed)

Details

(Whiteboard: [form autofill:M3] ETA:612)

Attachments

(3 attachments, 2 obsolete attachments)

(Assignee)

Description

2 years ago
Created attachment 8868384 [details]
select_style.png

In an effort to shift away from XUL, we've built the edit profile dialog in XHTML[1] and try to style the elements as close to the rest of the preferences UI as possible.

However styling the select element is more problematic because the default drop down arrow is different in every platform[2] and do not look like the XUL ones in preferences.

Currently the `-moz-appearance: none` is applied to hide the out-of-place drop down arrow altogether.

[1] chrome://formautofill/content/EditProfile.xhtml
[2] https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms#Dealing_with_the_select_nightmare
Comment hidden (mozreview-request)
Comment hidden (mozreview-request)
(Assignee)

Comment 3

2 years ago
It's possible to wrap a select element and add a drop down arrow as an absolutely positioned image. It's a hack nonetheless.

Matt you mentioned this could be solved on the platform side; could you elaborate on that?
Flags: needinfo?(MattN+bmo)
Created attachment 8874285 [details]
Three different <select> styles exposed to the web

The dropmarker button gets created in C++ at https://dxr.mozilla.org/mozilla-central/rev/130efc657df7e7fe291cc42307f3eb3cb0484dfc/layout/forms/nsComboboxControlFrame.cpp#1204,1238,1248-1252,1262 which is called from https://dxr.mozilla.org/mozilla-central/rev/130efc657df7e7fe291cc42307f3eb3cb0484dfc/layout/base/nsCSSFrameConstructor.cpp#3198 (ignoring an intermediate call).

I think for now it's fine to just position the dropmarker image on the right but it seems like longer term there are some other options:
* Have all in-content pages use the native <select> styling
* Update the non-native but non `-moz-appearance: none` style to be more modern and use that for in-content pages (and on the web when applicable).
Flags: needinfo?(MattN+bmo)
Attachment #8874285 - Attachment filename: file_1365489.txt → three_select_styles.htm
Attachment #8874285 - Attachment mime type: text/plain → text/html
Created attachment 8874286 [details]
Three different <select> styles exposed to the web

Fixed attachment
Attachment #8874285 - Attachment is obsolete: true
(Assignee)

Updated

2 years ago
Whiteboard: [form autofill:M3] → [form autofill:M3] ETA:612
Comment hidden (mozreview-request)
Comment on attachment 8868402 [details]
Bug 1365489 - Show select element drop down arrow in edit profile dialog.

https://reviewboard.mozilla.org/r/139996/#review151350

Why didn't you implement the background image solution we talked about? It seems like it's simpler. Also, could you implement the solution in a file shared with the rest of the in-content preferences that pick up the -moz-appearance:none rule
Attachment #8868402 - Flags: review?(MattN+bmo)
Comment hidden (mozreview-request)
Attached is a WIP patch that you can refine which uses the background-image approach and seems to be a bit simpler. Do you agree?
Comment hidden (mozreview-request)
(Assignee)

Comment 11

2 years ago
Oh sorry I forgot about that. I kept thinking about adding the padding and text-overflow…

I've revised the patch and put the styling in `common.inc.css` so it will apply to all in-content html|select elements. Thanks!
Comment on attachment 8868402 [details]
Bug 1365489 - Show select element drop down arrow in edit profile dialog.

https://reviewboard.mozilla.org/r/139996/#review151624

Thanks
Attachment #8868402 - Flags: review?(MattN+bmo) → review+
(Assignee)

Updated

2 years ago
Keywords: checkin-needed

Comment 13

2 years ago
Pushed by cbook@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/880b0d81cf87
Show select element drop down arrow in edit profile dialog. r=MattN
Keywords: checkin-needed

Comment 14

a year ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/880b0d81cf87
Status: NEW → RESOLVED
Last Resolved: a year ago
status-firefox55: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → mozilla55
(Assignee)

Updated

a year ago
Attachment #8875761 - Flags: review?(scwwu)

Updated

a year ago
Flags: qe-verify-
You need to log in before you can comment on or make changes to this bug.