1655998 - Feature request: Show and scan QR codes from the address bar.

Status: NEW

(Firefox :: Address Bar, enhancement, P5)

Description

[Mike Hoye [:mhoye]]

I'd love to have "scan a QR code" and "show a QR code" options available as a stock part of the Firefox ecosystem, both on desktop and mobile.

It is an incredibly easy and useful way share URLs between otherwise unconnected devices, and permits a middleman-less sharing that's extremely convenient.

Comment 2

[Andrew Overholt [:overholt]]

See also https://connect.mozilla.org/t5/ideas/include-a-qr-code-generator/idi-p/1719

Comment 3

[Andrew Overholt [:overholt]]

A prototype that needs work: https://github.com/overholt/firefox/commit/f1300359fbcf6689e5b29486830e6f24578b964d . IRL, Mike and I discussed some areas for improvement and he generously offered to type them here.

Comment 4

[Mike Conley (:mconley) (:⚙️)]

Otay, here goes:

This prototype implementation is not completely unreasonable. It is exactly that - a prototype, and in lieu of being posted as a patch here in Bugzilla for a "real" review, here are my notes of what I saw on GitHub:

• Even after applying common formatting, the qrcode.js library is subtly different than the source. Adding a new third-party dependency like this would at the very least require us to add it to about:license under the MIT license. It may also require a RRA or security analysis for bringing it in.
• We'll want to get rid of all of the console.log's, and switch over to the logConsole pattern
• The QRCode library takes in some object structure, and emits a canvas with the generated image. The processing appears to all be on the main thread. This is a great use-case for a PromiseWorker, where we'd load the library in the worker, give it the object, and have it resolve with the canvas data to display. Then we can kill the worker to reclaim the memory of the script, rather than keeping it around after we load it once (which the current implementation does).
• There are a number of places where setTimeout's are used to guess as to whether certain things are done ("is the library loaded? Let's hope 50ms is enough. Is the image ready? Let's hope 100ms is enough", etc. Lots of opportunities for races there. Looking more at qrcode.js, it looks like it might have some assumptions that it's running within normal web content, which might preclude the PromiseWorker thing. Using this Rust create compiled down to WASM might be better (and more performant!), and the PromiseWorker can then also take care of blitting in the Firefox logo.
• I think switching over to this PromiseWorker also allows us to sidestep what looks like an edge-case workaround in generateQRCodeWithLogo where the canvas doesn't yet exist when we expect it to.
• From a UX perspective, this might make more sense as a Page Action in the URL bar, or maybe something that gets put into the Site Information panel under the lock?
• If this does need to exist in the toolbar, I think putting this in CustomizableWidgets.sys.mjs probably makes sense as a new built-in.
• The patch as is doesn't open a panel like in the video - instead, it opens it in a dialog in the content area, which is no bueno - we're below the line of death. This should probably exist in a panel just like in the demo video.

I think those are my high-level thoughts. Neat!

Comment 5

[Andrew Overholt [:overholt]]

Thank you, Mike!

I've tried to improve things based on your feedback. To avoid too much work at this point regarding the UX, I moved it to an entry in File > Share on macOS (I haven't had a chance to test Windows or Linux). This opens a separate dialog. I also moved things to a worker and am now using the logConsole pattern.

Would you mind taking another look? https://github.com/mozilla-firefox/firefox/compare/main...overholt:firefox:qrcodes2

Comment 6

[Kagami Rosylight 🏳️‍🌈🏳️‍⚧️ [:saschanaz] (they/them)]

Would be nice if the UI can be reused for Firefox builtin Web Share prompt. Currently we depend on Windows system provided UI to achieve the same share feature.

(On Windows, right-click on a tab and click Share, then a Windows builtin prompt shows up where you can click QR code button)