1686606 - The new non-native widget theme doesn't have any padding between blinking cursor & border, in a textfield / textarea

Status: RESOLVED FIXED

(Core :: Widget, defect)

Description

[Daniel Holbert [:dholbert]]

STR:

1. Run Firefox with about:config widget.disable-native-theme-for-content set to true.
2. View attached testcase (just a textarea and a textfield)
3. Focus either of the form controls in the testcase.

ACTUAL RESULTS:
The blinking cursor is flush with (or maybe even overlaps?) the top and bottom border of the text field. This makes it look a bit misaligned / overflowing.

EXPECTED RESULTS:
There should be a little bit of blank padding-area between the blinking cursor and the border, to visually separate them.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: screenshot with <input> focused (single-line textfield)

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: screenshot with <textarea> focused

Comment 4

[Daniel Holbert [:dholbert]]

ni=spohl to weigh in on this (e.g. maybe my expectations don't match our design-spec on this, not sure)

Note: these elements seem to have 1px of padding on the top and bottom and 4px of padding on the sides (via a UA stylesheet). If I instead restyle them to use 2px of padding on the top and bottom, then that essentially fixes this; it gives enough visual separation between the cursor and the border.

Comment 5

[Daniel Holbert [:dholbert]]

(tangent: while playing around with padding, I noticed another issue & filed it as bug 1686613)

Comment 6

[Chris Peterson [:cpeterson]]

Tracking non-native theming bugs for Fission Beta milestone (M7).

Comment 7

[Stephen A Pohl [:spohl]]

Attachment: Bug 1686606: Increase vertical padding in text fields and text areas in the non-native theme to make room for the cursor. r=heycam,emilio

Comment 8

[Stephen A Pohl [:spohl]]

(In reply to Daniel Holbert [:dholbert] from comment #4)

ni=spohl to weigh in on this (e.g. maybe my expectations don't match our design-spec on this, not sure)

It is true that this doesn't match our design-spec, but we should adjust this when necessary. This bug certainly warrants another look. I have posted a patch that increases the top and bottom padding to 2px as suggested.

Comment 9

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1686606 - Fix outline painting in the non-native theme. r=spohl

Outline should by default start outside of the border area, not inside.

Then we can use negative outline offsets to cover the border if we want
to.

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b0a2058c17a8
Fix outline painting in the non-native theme. r=spohl,mstange

Comment 11

[Dorel Luca [:dluca]]

https://hg.mozilla.org/mozilla-central/rev/b0a2058c17a8

Comment 12

[Daniel Holbert [:dholbert]]

Hmm, it looks like this is fixed for <input> (yay!) but not for <textarea> -- the cursor is still flush with the top of the textarea for me, in the attached testcase (it looks like the screenshot in comment 3).

I'll file a followup for that.

Comment 13

[Daniel Holbert [:dholbert]]

(ni? just as an FYI, in case the fix was expected to catch textarea as well.)

Comment 14

[Daniel Holbert [:dholbert]]

(er, transfering needinfo to new bug. Sorry for spam.)