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

RESOLVED FIXED in Firefox 55

Status

()

Toolkit
Form Manager
RESOLVED FIXED
11 months ago
10 months 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)

MozReview Requests

()

Submitter Diff Changes Open Issues Last Updated
Loading...
Error loading review requests:

Attachments

(3 attachments, 2 obsolete attachments)

(Assignee)

Description

11 months 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

11 months 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

11 months 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

11 months 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

11 months ago
Keywords: checkin-needed

Comment 13

11 months 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

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

Updated

10 months ago
Attachment #8875761 - Flags: review?(scwwu)

Updated

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