Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix hold to reveal button on mobile browsers #19847

Merged
merged 3 commits into from
Jun 30, 2023

Conversation

georgewrmarshall
Copy link
Contributor

@georgewrmarshall georgewrmarshall commented Jun 30, 2023

Explanation

Currently users who use the extension on their mobile devices are not able to reveal their SRP because the hold to reveal button is not working. This PR changes the onMouseDown and onMouseUp events to onPointerDown and onPointerUp which "integrates various inputs from mice, touchscreens, and pens, making separate implementations no longer necessary and authoring for cross-device pointers easier."

https://caniuse.com/pointer

Screenshot 2023-06-30 at 7 03 51 AM

Screenshots/Screencaps

Before

Checking the story of the HoldToRevealButton on an iPhone doesn't work

hold.to.reveal.button.mp4

After

Checking story of the HoldToRevealButton on iPhone

RPReplay_Final1688150899.MP4

Still working in extension in Chrome browsers

hold.to.reveal.desktop.after.mov

Manual Testing Steps

  • On a mobile device
  • Go to the storybook build on this PR
  • Search HoldToRevealButton
  • Press down to see if circle loader completes and lock icon unlocks

Pre-merge author checklist

  • I've clearly explained:
    • What problem this PR is solving
    • How this problem was solved
    • How reviewers can test my changes
  • Sufficient automated test coverage has been added

Pre-merge reviewer checklist

  • Manual testing (e.g. pull and build branch, run in browser, test code being changed)
  • PR is linked to the appropriate GitHub issue
  • IF this PR fixes a bug in the release milestone, add this PR to the release milestone

If further QA is required (e.g. new feature, complex testing steps, large refactor), add the Extension QA Board label.

In this case, a QA Engineer approval will be be required.

@github-actions
Copy link
Contributor

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

Comment on lines -6 to +7
import Box from '../../ui/box';
import {
AlignItems,
DISPLAY,
Display,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Replacing deprecated code

Comment on lines 199 to 200
onPointerDown={onMouseDown}
onPointerUp={onMouseUp}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"integrates various inputs from mice, touchscreens, and pens, making separate implementations no longer necessary and authoring for cross-device pointers easier. Not to be mistaken with the unrelated "pointer-events" CSS property." https://caniuse.com/pointer

@georgewrmarshall georgewrmarshall force-pushed the fix/hold-to-reveal-mobile-browsers branch from 305ac8e to 57936bf Compare June 30, 2023 14:50
@georgewrmarshall georgewrmarshall force-pushed the fix/hold-to-reveal-mobile-browsers branch from 8c7ece0 to c92919b Compare June 30, 2023 15:13
@georgewrmarshall georgewrmarshall marked this pull request as ready for review June 30, 2023 17:38
@georgewrmarshall georgewrmarshall requested a review from a team as a code owner June 30, 2023 17:38
@metamaskbot
Copy link
Collaborator

Builds ready [81d2271]
Page Load Metrics (1587 ± 34 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint111182139209
domContentLoaded1453175415867034
load1453175415877034
domInteractive1453175415867034
Bundle size diffs
  • background: 0 bytes
  • ui: -109 bytes
  • common: 0 bytes

@codecov
Copy link

codecov bot commented Jun 30, 2023

Codecov Report

Merging #19847 (81d2271) into develop (7c7b5fe) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff            @@
##           develop   #19847   +/-   ##
========================================
  Coverage    69.68%   69.68%           
========================================
  Files          982      982           
  Lines        37067    37067           
  Branches      9941     9941           
========================================
  Hits         25829    25829           
  Misses       11238    11238           
Impacted Files Coverage Δ
...app/hold-to-reveal-button/hold-to-reveal-button.js 94.44% <ø> (ø)

@garrettbear
Copy link
Contributor

LGTM and worked on iPhone

RPReplay_Final1688152375.MP4

@HowardBraham HowardBraham merged commit 7c01489 into develop Jun 30, 2023
9 checks passed
@HowardBraham HowardBraham deleted the fix/hold-to-reveal-mobile-browsers branch June 30, 2023 21:11
@github-actions github-actions bot locked and limited conversation to collaborators Jun 30, 2023
@metamaskbot metamaskbot added the release-10.35.0 Issue or pull request that will be included in release 10.35.0 label Jun 30, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
release-10.35.0 Issue or pull request that will be included in release 10.35.0 type-bug
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants