971955 - [B2G][General]Email address overlaps icon when signing into persona

Status: RESOLVED FIXED

(Core :: Layout, defect, P2)

Description

[Andrew Stole [:astole]]

Attachment: Screenshot

When the user has a long email address, it overlaps the icon on the 'Sign in' screen when logging into Persona

Repro Steps:
1) Updated Buri to BuildID: 20140212040203
2) Open the marketplace app
3) Select settings (gear icon in top right corner)
4) Select 'Sign In / Sign Up'
5) Enter multiple characters until they overlap icons

Actual:
The characters overlap the icon on the Persona login field.

Expected:
The characters do not overlap the icon.

Environmental Variables:
Device: Buri v1.4 M/C Mozilla RIL
BuildID: 20140212040203
Gaia: 4c6b5142d3b716f1c4ea502eeb92d3119f2b01c6
Gecko: 802d87c77e76
Version: 30.0a1
Firmware Version: V1.2-device.cfg

Notes:

Repro frequency: 100%
See attached: Screenshot

Comment 1

[Jason Smith [:jsmith]]

Does this reproduce on 1.3?

Comment 2

[Andrew Stole [:astole]]

This does not reproduce on the latest 1.3.

Environmental Variables:
Device: Buri v1.3 Mozilla RIL
BuildID: 20140212004003
Gaia: ce17d5eae7b1893ae4397c814b10ae598fcbdb58
Gecko: ab07e61c2eb0
Version: 28.0
Firmware Version: V1.2-device.cfg

Comment 3

[sarsenyev]

A regression window:

The first working build when no overlapping occurs
Device: Buri 1.4 MOZ
BuildID: 20140116040206
Gaia: 82878ba16172213cd00ba3e8b377564b290e59c1
Gecko: 324e2cba1029
Version: 29.0a1
Firmware Version: v1.2-device.cfg

The first broken build when overlapping occurs
Device: Buri 1.4 MOZ
BuildID: 20140117041037
Gaia: ef8bb31b462f364b57432a0724c78034d3f4f303
Gecko: b53589696cf8
Version: 29.0a1
Firmware Version: v1.2-device.cfg

Comment 4

[Preeti Raghunath(:Preeti)]

Blocking for regression

Comment 5

[Milan Sreckovic [:milan] (needinfo for best results)]

Peter, you are looking at this, right?

Comment 6

[Peter Chang[:pchang]]

(In reply to Milan Sreckovic [:milan] from comment #5)
> Peter, you are looking at this, right?

Yes, I could reproduce this issue on my leo. Checking now...

Comment 7

[Peter Chang[:pchang]]

I could reproduce this issue with firefox night build, but not the firefox release (27.0)build.

Here is the reproduced sample, http://people.mozilla.org/~pchang/input_overlap.html

Inside above sample, it configures "padding-left" attribute. 
But the bound rect[1] of related text display item shifted to left when input text is longer than the input field.

It looks like the "padding-left" doesn't work in latest gecko.
http://dxr.mozilla.org/mozilla-central/source/layout/base/FrameLayerBuilder.cpp#2397

Comment 8

[Mats Palmgren (inactive)]

I guess <input type="email"> makes it not match the UA rules for <input type="text">
that has "overflow-clip-box:content-box".  Hmm...  I guess we have to invert that
setup so that we have "input { overflow-clip-box:content-box; }" and then
add "overflow-clip-box:padding-box" to all the non-text/password/number rules.

Comment 9

[Mats Palmgren (inactive)]

Attachment: fix+tests

https://tbpl.mozilla.org/?tree=Try&rev=070358b8776b
https://tbpl.mozilla.org/?tree=Try&rev=cf313005f20f

Comment 10

[Mats Palmgren (inactive)]

FTR, the regression was probably caused by bug 157846.  The fixes in bug 965237 / bug 966992
were incomplete in the sense that they didn't fix that regression for unknown 'type' values
like "email".

Comment 11

[Mats Palmgren (inactive)]

Attachment: fix+tests

Make overflow-clip-box:content-box the default for all <input> @type values except type=file.

https://tbpl.mozilla.org/?tree=Try&rev=f5470da63712

Comment 12

[Mats Palmgren (inactive)]

Comment on attachment 8386133 [details] [diff] [review]
fix+tests

Actually, we should probably play it safe and make padding-box the default
for button types as well...

Comment 13

[Mats Palmgren (inactive)]

An example:
data:text/html,<input type=button style="width:60px; padding:20px; overflow:hidden" value="1234567890">

Comment 14

[Mats Palmgren (inactive)]

Attachment: fix+tests

Make overflow-clip-box:content-box the default for all <input> @type values except type=file/button/reset/submit.

https://tbpl.mozilla.org/?tree=Try&rev=a56bb8c726ed

Comment 15

[Peter Chang[:pchang]]

(In reply to Mats Palmgren (:mats) from comment #8)
> I guess <input type="email"> makes it not match the UA rules for <input
> type="text">
> that has "overflow-clip-box:content-box".  Hmm...  I guess we have to invert
> that
> setup so that we have "input { overflow-clip-box:content-box; }" and then
> add "overflow-clip-box:padding-box" to all the non-text/password/number
> rules.

I had one question. What is the default behavior if we didn't setup overlfow-clip-box properties?
It looks like it goes to padding-box one, just like the behavior of this bug.

Comment 16

[Peter Chang[:pchang]]

okay, I just found the answer from below line. The default behavior is padding-box.
Why we couldn't make content-box as default style?

http://dxr.mozilla.org/mozilla-central/source/layout/style/nsStyleStruct.cpp#2281

Comment 17

[Mats Palmgren (inactive)]

https://hg.mozilla.org/integration/mozilla-inbound/rev/6fb8bc793891

Comment 18

[Mats Palmgren (inactive)]

(In reply to peter chang[:pchang][:peter] from comment #16)
> Why we couldn't make content-box as default style?

Because CSS2 specifies that clipping occurs at the padding edge:
http://www.w3.org/TR/CSS21/visufx.html#overflow-clipping

I intend to propose 'overflow-clip-box' for inclusion in some CSS spec so that it can be used
on arbitrary elements, but the default should be padding-box for web compatibility reasons.

Comment 19

[Mats Palmgren (inactive)]

Comment on attachment 8386320 [details] [diff] [review]
fix+tests

[Approval Request Comment]
Bug caused by (feature/regressing bug #): bug 157846
User impact if declined: broken layout for <input> for some values of @type that  results in a single-line text control, e.g. <input type="email">.
Testing completed (on m-c, etc.): green on -inbound
Risk to taking this patch (and alternatives if risky): this patch is low risk, but see also bug 965237 comment 15 for the overall picture.  The alternative is to backout bug 157846, and bug 965237, and bug 966992.
String or IDL/UUID changes made by this patch: none

Comment 20

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/6fb8bc793891

Comment 21

[Mats Palmgren (inactive)]

https://hg.mozilla.org/releases/mozilla-aurora/rev/37153dfaa809