Page MenuHomePhabricator

Add Special:QrCode page
Closed, ResolvedPublic

Description

Following T242467: Automatically generate and display QR Code, we'll have a link in the toolbox to download an SVG of a QR code. However, the link does nothing if JavaScript is disabled. Additionally, without knowledge of the API, users have no means to generate QR codes for pages that don't show the toolbox.

We could bundle QR code functionality into the existing Special:UrlShortener, but for URLs that are already somewhat short, we don't want to shorten them further for QR codes because when users scan the QR code, it should show a URL they're familiar with and not https://w.wiki/ which some people may not necessarily trust. For this reason, it makes the most sense to have a separate Special page.

Designs

Subject to review by @JSengupta-WMF

Borrowing from older versions of the Figma for T242467, it would look and function similar to Special:UrlShortener except show the QR Code on the right (or below if viewport is too narrow), along with a download button.

Something like the following, except without the logo (which we may add in a future iteration), and the title should be "QR code":

Screenshot from 2023-07-07 12-06-21.png (639ร—1 px, 91 KB)

Acceptance criteria

  • Following the same rules as the API, URLs for QR codes are only shortened if they exceed 200 bytes in length
  • If the URL is shortened, the "Shortened URL" field with a copy button should be shown just like it is at Special:UrlShortener
  • If the URL is not shortened, we do not show the URL with a copy button as this would be redundant.
  • Embed the SVG directly on the page in an <img> tag, using a data URI for both the src= of the image as well as the href= of the download button.
    • Debatable: the idea here was to simply avoid backend storage which isn't needed for SVGs in particular, but might be if we wanted PNGs
  • Providing a ?url=[encoded URL] parameter to Special:QrCode should pre-supply the input field.

Possible improvements:

  • A path parameter can be any localized link and Special:QrCode will transform it into a URL. I.e. browsing to Special:QrCode/User:MusikAnimal on enwiki would pre-supply the URL field with https://en.wikipedia.org/wiki/User:MusikAnimal

Event Timeline

I'm going to clean up the patch for T242467 and move all Special page code to a separate patch and attach it to this task. That patch however will be up for grabs or may be used simply as a guide for writing a new patch. I am not happy with my implementation and I suspect someone else could do a better job :)

For now, work on this should probably wait until T242467 is completed (but not necessarily merged). We probably will want both patches to go out on the same train.

Scardenasmolinar changed the task status from Open to In Progress.Sep 26 2023, 5:50 PM
Scardenasmolinar claimed this task.

Change 961266 had a related patch set uploaded (by Scardenasmolinar; author: Scardenasmolinar):

[mediawiki/extensions/UrlShortener@master] [WIP] Add Special:QrCode page

https://gerrit.wikimedia.org/r/961266

A couple of copy edit questions for @JSengupta-WMF:

  • How about "QR Code Generator" as a title, similar to "URL Shortener"? The mock currently says "Short URL/QR" which I think is a little confusing, as we won't always be shortening the URL.
  • "Download QR" on the button I think should be "Download QR code", right? QR code = "Quick response code"

@MusikAnimal Yes to both ๐Ÿ™๐Ÿผ

Thanks for catching these!

Test wiki on Patch demo by MusikAnimal using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/2a43d83aff/w/

Change 961266 merged by jenkins-bot:

[mediawiki/extensions/UrlShortener@master] Add Special:QrCode page

https://gerrit.wikimedia.org/r/961266

dom_walden added a subscriber: dom_walden.

I tested the Special:QrCode and it behaves as the acceptance criteria describes it.

Possible improvements:

  • A path parameter can be any localized link and Special:QrCode will transform it into a URL. I.e. browsing to Special:QrCode/User:MusikAnimal on enwiki would pre-supply the URL field with https://en.wikipedia.org/wiki/User:MusikAnimal

You can pre-supply the URL field with a link like: https://en.wikipedia.beta.wmflabs.org/wiki/Special:QrCode/https://en.wikipedia.beta.wmflabs.org/wiki/Main_Page

Most of the testing that the QR code is correct (i.e. decodes to the desired URL) was done in against the API in T242467. Therefore, I did only brief testing of this on Special:QrCode.

I did some brief validation testing, trying to submit URLs that are not in the beta domain.

I tested without JavaScript. It is functional, but styles are not loaded (T356488).

I tested mostly on Firefox but also tested Safari 17 and Safari on iOS mobile.

I tested 5 skins (Vector, Vector Legacy, Minerva, Monobook, Modern).

I tested on an RTL wiki (arwiki).

I found a few relatively minor bugs which I raised separately (T357128, T357129, T357131, T357134).

Test environment: https://en.wikipedia.beta.wmflabs.org and https://ar.wikipedia.beta.wmflabs.org UrlShortener 1.2.0 (7a53d21) 07:44, 9 February 2024.