Fix incorrect CAPTCHA drag image on scaled Linux display

[emerick]

Resolves brave/brave-browser#22180

Submitter Checklist:

• I confirm that no security/privacy review is needed, or that I have requested one
• There is a ticket for my issue
• Used Github auto-closing keywords in the PR description above
• Wrote a good PR/commit description
• Squashed any review feedback or "fixup" commits before merge, so that history is a record of what happened in the repo, not your PR
• Added appropriate labels (QA/Yes or QA/No; release-notes/include or release-notes/exclude; OS/...) to the associated issue
• Checked the PR locally: npm run test -- brave_browser_tests, npm run test -- brave_unit_tests, npm run lint, npm run gn_check, npm run tslint
• Ran git rebase master (if needed)

Reviewer Checklist:

• A security review is not needed, or a link to one is included in the PR description
• New files have MPL-2.0 license header
• Adequate test coverage exists to prevent regressions
• Major classes, functions and non-trivial code blocks are well-commented
• Changes in component dependencies are properly reflected in gn
• Code follows the style guide
• Test plan is specified in PR before merging

After-merge Checklist:

• The associated issue milestone is set to the smallest version that the
  changes has landed on
• All relevant documentation has been updated, for instance:
  • https://github.com/brave/brave-browser/wiki/Deviations-from-Chromium-(features-we-disable-or-remove)
  • https://github.com/brave/brave-browser/wiki/Proxy-redirected-URLs
  • https://github.com/brave/brave-browser/wiki/Fingerprinting-Protections
  • https://github.com/brave/brave-browser/wiki/Brave%E2%80%99s-Use-of-Referral-Codes
  • https://github.com/brave/brave-browser/wiki/Custom-Headers
  • https://github.com/brave/brave-browser/wiki/Web-Compatibility-Exceptions-in-Brave
  • https://github.com/brave/brave-browser/wiki/QA-Guide
  • https://github.com/brave/brave-browser/wiki/P3A

Test Plan:

• Linux settings -> Displays -> Scale -> 100%
• Clean profile
• Enable Rewards
• Claim grant
• Solve CAPTCHA
• Close browser
• Linux settings -> Displays -> Scale -> 200%
• Clean profile
• Enable Rewards
• Claim grant
• Solve CAPTCHA

We should also test this on Mac and Windows at various resolutions, although there should be no changes on either of those platforms as this fix is scoped to Linux systems running with scaled displays.

[emerick]

@tmancey mentioned recently that this is no longer a high priority as every 2 hours we fetch new token issuers and when we fetch these we refill tokens.

[brave-builds]

A Storybook has been deployed to preview UI for the latest push

[zenparsing]

Do you think this is this something that will break the captcha (for this subset of users) when the upstream bug is fixed?

[emerick]

I think it's possible, unfortunately, depending on how https://bugs.chromium.org/p/chromium/issues/detail?id=1297990 is ultiumately addressed. I tried to limit the impact as much as possible with the platform and devicePixelRatio guards. I feel like any workaround we implement will have to be removed and uplifted once the upstream bug is fixed. Definitely open to other approaches though!

[brave-builds]

A Storybook has been deployed to preview UI for the latest push

[emerick]

CI passed on all platforms but Windows; restarting on Windows.

[emerick]

CI passed; ready to merge.

[kjozwiak]

Verification PASSED on Win 11 x64 using the following build(s):

Brave | 1.40.7 Chromium: 101.0.4951.41 (Official Build) nightly (64-bit)
-- | --
Revision | 93c720db8323b3ec10d056025ab95c23a31997c9-refs/branch-heads/4951@{#904}
OS | Windows 11 Version 21H2 (Build 22000.613)

As per #13072 (comment), went through several different scales on Win 11 x64 and ensured that solving the CAPTCHA worked without any issues.

Scaling	Example	Example	Example	Example	Example

---

Verification PASSED on macOS 12.3.1 x64 Monterey using the following build(s):

Brave | 1.40.8 Chromium: 101.0.4951.41 (Official Build) nightly (x86_64)
--- | ---
Revision | 93c720db8323b3ec10d056025ab95c23a31997c9-refs/branch-heads/4951@{#904}
OS | macOS Version 12.3.1 (Build 21E258)

Scaling	Example	Example	Example	Example	Example

---

Verification PASSED on PopOS 21.10 x64 using the following build(s):

Brave | 1.40.9 Chromium: 101.0.4951.41 (Official Build) nightly (64-bit)
--- | ---
Revision | 93c720db8323b3ec10d056025ab95c23a31997c9-refs/branch-heads/4951@{#904}
OS | Linux

Used the Retina option via Parallels which really scaled the resolution in the VM.

Scaling	Example	Example	Example	Example	Example