Backspacing on PIN entry affects the button labels

RESOLVED WONTFIX

Status

()

RESOLVED WONTFIX
6 years ago
3 years ago

People

(Reporter: krupa.mozbugs, Assigned: jrmuizel, NeedInfo)

Tracking

unspecified
Other
Gonk (Firefox OS)
Points:
---

Firefox Tracking Flags

(blocking-b2g:-, b2g18+)

Details

Attachments

(1 attachment)

3.12 MB, video/quicktime
Details
(Reporter)

Description

6 years ago
Created attachment 702611 [details]
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.
(Reporter)

Updated

6 years ago
Duplicate of this bug: 835849
the user cannot see what button they are clicking during the payments flow. nom this for fix?
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?
blocking-b2g: --- → tef?
Component: General → Graphics: Layers
Flags: needinfo?(jones.chris.g)
Potch: You wrote the JS to handle key press on that page, you wanna provide the minddup that jsmith is asking for?
Assignee: nobody → thepotch

Comment 5

6 years ago
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|
+---------------+
Could well be a layers bug. Milan, can you find an owner?
Jeff, could you take a look?  More information will help + or - this.
Assignee: thepotch → jmuizelaar
(Assignee)

Comment 8

6 years ago
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?
Flags: needinfo?(thepotch)
Flags: needinfo?(jones.chris.g)
Keywords: testcase-wanted
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.
blocking-b2g: tef? → -
tracking-b2g18: --- → +
Potch - Is it possible for you to implement a workaround on the marketplace side?
(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.
Blocks: 840117
Blocks: 846517
No longer blocks: 775802
(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
Flags: needinfo?(thepotch)
Keywords: testcase-wanted
Jeff - Any thoughts on comment 12?
Flags: needinfo?(jmuizelaar)
(Assignee)

Comment 14

6 years ago
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?
Flags: needinfo?(jmuizelaar) → needinfo?(scolville)
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?
Flags: needinfo?(scolville) → needinfo?(jmuizelaar)
(Assignee)

Comment 16

6 years ago
(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?
Flags: needinfo?(jmuizelaar) → needinfo?(scolville)
(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
Flags: needinfo?(scolville)
Jeff did you have any joy reproducing this with the test case?
Flags: needinfo?(jmuizelaar)
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
Status: NEW → RESOLVED
Last Resolved: 3 years ago
Resolution: --- → WONTFIX
You need to log in before you can comment on or make changes to this bug.