27.46 KB, image/png
59 bytes, text/x-review-board-request
327 bytes, text/html
Created attachment 8868384 [details] select_style.png In an effort to shift away from XUL, we've built the edit profile dialog in XHTML 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 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.  chrome://formautofill/content/EditProfile.xhtml  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?
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).
Created attachment 8874286 [details] Three different <select> styles exposed to the web 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+
Pushed by email@example.com: https://hg.mozilla.org/integration/autoland/rev/880b0d81cf87 Show select element drop down arrow in edit profile dialog. r=MattN
Status: NEW → RESOLVED
Last Resolved: a year ago
status-firefox55: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → mozilla55
Attachment #8875761 - Attachment is obsolete: true
You need to log in before you can comment on or make changes to this bug.