831106 - Backspacing on PIN entry affects the button labels

Status: RESOLVED WONTFIX

(Core :: Graphics: Layers, defect)

Description

[krupa raj[:krupa]]

Attachment: video

<project name="releases/gecko.git" path="gecko" remote="mozillaorg" revision="0cdf426b06ee6e7dbde78fd5dd9be8e6012ed406"/>
  <project name="releases/gaia.git" path="gaia" remote="mozillaorg" revision="a03f7b532e9998e646d55f93a0fc03a04d7ca7d9"/>

steps to reproduce:
1. Install marketplace-dev app from https://people.mozilla.org/~kmcmillan/mktdev.html
2. Launch marketplace-dev and log in with a new account
3. Search for 'Private Yacht'
4. From the details page, click on the purchase button.
5. In The Create PIN screen, type in two numbers and then backspace. 
6. Notice the two buttons- 'Forgot Pin?' and 'Continue'

observed behavior:
Hitting backspace causes the button labels to disappear. Looks like we are clearing a larger section of the screen than necessary.

Attached is the video of the above described behavior. Notice the buttons as I type in the PIN.

Comment 2

[Caitlin Galimidi [:c8o]]

the user cannot see what button they are clicking during the payments flow. nom this for fix?

Comment 3

[Jason Smith [:jsmith]]

This reads off as a gfx layers bug if this is a platform bug. Who's the developer that worked on this? Can he minddump what he's doing here as input is typed in? That will double check if this is truly a platform bug and what the root cause is.

Chris Jones - Any ideas?

Comment 4

[Wraithan (Chris McDonald) [:wraithan]]

Potch: You wrote the JS to handle key press on that page, you wanna provide the minddup that jsmith is asking for?

Comment 5

[Potch [:potch]]

I'm not really doing anything fancy, except that the input the user is interacting with is actually invisible and overlaying the whole screen (so they can't miss the pin input). Thus when they backspace, text (which is invisible) is getting cleared, and that's interacting with the layers of the button.

webpay screen:

+---------------+
|   Enter PIN   |
|               |
|  [] [] [] []  |
|               |
|               |
|forgot   submit|
+---------------+

<input> click area (invisible, indicated by #)
+---------------+
|###############|
|###############|
|###############|
|###############|
|###############|
|forgot # submit|
+---------------+

Comment 6

[Robert O'Callahan (:roc) (email my personal email if necessary)]

Could well be a layers bug. Milan, can you find an owner?

Comment 7

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

Jeff, could you take a look?  More information will help + or - this.

Comment 8

[Jeff Muizelaar [:jrmuizel]]

Potch is it possible to get a reduced test case? i.e does the same thing happen in the browser? does the same thing happen if loaded from a bookmark?

Comment 9

[Alex Keybl [:akeybl]]

If the user becomes confused, they can always hit the 'x' button and start the process over again. Not a blocker, but definitely tracking for future releases.

Comment 10

[Jason Smith [:jsmith]]

Potch - Is it possible for you to implement a workaround on the marketplace side?

Comment 11

[Jason Smith [:jsmith]]

(In reply to Jason Smith [:jsmith] from comment #10)
> Potch - Is it possible for you to implement a workaround on the marketplace
> side?

Actually, I'll just file the bug about this.

Comment 12

[Stuart Colville [:muffinresearch]]

(In reply to Jeff Muizelaar [:jrmuizel] from comment #8)
> Potch is it possible to get a reduced test case? i.e does the same thing
> happen in the browser? does the same thing happen if loaded from a bookmark?

Here's a testcase. (This test case needs to be run in a trusted-ui it isn't reproduced running in just the device browser)

It appears to stop happening if border-radius is removed/set to 0 in the button/link styles. 

https://www.dropbox.com/s/osicv6lqk02wptb/testcase-831106.zip

Comment 13

[Jason Smith [:jsmith]]

Jeff - Any thoughts on comment 12?

Comment 14

[Jeff Muizelaar [:jrmuizel]]

I can't reproduce this on an buri. When I launch the testcase from a bookmark on the homescreen. Can you reproduce on any device when launched from a bookmark on the home screen?

Comment 15

[Stuart Colville [:muffinresearch]]

Jeff: As I mentioned in comment 12 you'll need to run this in a trusted-ui window to see the problem. It's won't be reproduced if loaded from a bookmark. Are you able to re-run the test-page in a trusted-ui?

Comment 16

[Jeff Muizelaar [:jrmuizel]]

(In reply to Stuart Colville [:scolville] from comment #15)
> Jeff: As I mentioned in comment 12 you'll need to run this in a trusted-ui
> window to see the problem. It's won't be reproduced if loaded from a
> bookmark. Are you able to re-run the test-page in a trusted-ui?

How do I run in a trusted-ui?

Comment 17

[Stuart Colville [:muffinresearch]]

(In reply to Jeff Muizelaar [:jrmuizel] from comment #16)
> (In reply to Stuart Colville [:scolville] from comment #15)
> > Jeff: As I mentioned in comment 12 you'll need to run this in a trusted-ui
> > window to see the problem. It's won't be reproduced if loaded from a
> > bookmark. Are you able to re-run the test-page in a trusted-ui?
> 
> How do I run in a trusted-ui?

Probably the easiest way to do this is to use https://github.com/kumar303/ezboot and to setup custom-prefs.js [1] to point to a local server.

See:

There's more info on this here: https://webpay.readthedocs.org/en/latest/use_hosted_webpay.html#build-a-custom-b2g-profile

The easiest way to do this will be to branch webpay [2], create a virtualenv and add ezboot to it and then tweak the custom-prefs.js to match your local testcase url.

Once you have this you'll need to flash the device with: "ezboot flash" followed by "ezboot setup"

E.g. edit dom.payment.provider.4.uri to match the url that the testcase can be found.

Then if that's setup correctly visiting this payment test page [3] and clicking on the Pay PMPP button should launch the trusted-ui with the testcase.

[1] https://github.com/mozilla/webpay/blob/master/ezboot/custom-prefs.js
[2] https://github.com/mozilla/webpay/
[3] http://people.mozilla.com/~kmcmillan/gaia-pay.html

Comment 18

[Stuart Colville [:muffinresearch]]

Jeff did you have any joy reproducing this with the test case?

Comment 19

[Stuart Colville [:muffinresearch]]

Found a workaround to this which is to modify the z-index of the buttons to force a re-paint. https://github.com/mozilla/webpay/pull/146