Closed Bug 1365489 Opened 7 years ago Closed 7 years ago

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

Categories

(Toolkit :: Form Manager, enhancement)

enhancement
Not set
normal

Tracking

()

RESOLVED FIXED
mozilla55
Tracking Status
firefox55 --- fixed

People

(Reporter: scottwu, Assigned: scottwu)

Details

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

Attachments

(3 files, 2 obsolete files)

Attached image 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
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)
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
Fixed attachment
Attachment #8874285 - Attachment is obsolete: true
Whiteboard: [form autofill:M3] → [form autofill:M3] ETA:612
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)
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?
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+
Keywords: checkin-needed
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
https://hg.mozilla.org/mozilla-central/rev/880b0d81cf87
Status: NEW → RESOLVED
Closed: 7 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla55
Attachment #8875761 - Flags: review?(scwwu)
Attachment #8875761 - Attachment is obsolete: true
Flags: qe-verify-
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: