Image thumbs on Persian Wikipedia broken when you click on them (due to Gadget-Direct-link-to-Commons.js attaching uselang parameter)
Closed, ResolvedPublicBUG REPORT
Actions

Assigned To

Authored By

	Arian_Ar
	Oct 15 2023, 10:10 PM

Description

Steps to replicate the issue:

Open an article (Using Minerva/mobile site) with an image (uploaded in Commons) (like گربه or آنجلینا جولی)
click on the image

What happens?:

An error occurs: در هنگام بارگذاری این تصویر، خطایی رخ داد ("An error occurred when uploading this image")

What should have happened instead?:
The image box with relevant info and a link to commons should have been shown instead—this happens only on fawiki and for images that are uploaded in commons.

Software version (skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):
Android 13 - Chrome 117
Windows 10 - Chrome 117
How it should look like:

How it is on fawiki:

video_2023-10-16_01-27-32.mp43 MBDownload

I didn't know which tags to use so I'm just using MinervaNeue.

Requirement

Ensure that clicking on image thumbnails on the Persian Wikipedia (fawiki) using the Minerva/mobile site opens the image overlay with relevant information and a link to Commons. Fix the issue caused by the Gadget-Direct-link-to-Commons.js attaching the uselang parameter that breaks this functionality. Conduct exploratory testing on the beta cluster to verify similar functionality.

BDD

gherkin
Feature: Fix Image Thumbnails on Persian Wikipedia

  Scenario: Verify image overlay functionality on beta cluster
    Given the user is on the beta cluster using the mobile site
    When the user clicks on an image thumbnail
    Then the image overlay should open, and the navigation arrows should be functional

  Scenario: Clicking on image thumbnails on fawiki should open the image overlay
    Given the user is on the Persian Wikipedia (fawiki) using the Minerva/mobile site
    When the user clicks on an image thumbnail
    Then the image overlay with relevant information and a link to Commons should appear

Test Steps

Test Case 1: Exploratory Testing on Beta Cluster

Navigate to an article with images on the beta cluster using the mobile site.
Click on an image thumbnail.
AC1: Confirm that the image overlay opens correctly.
Use the arrows within the overlay to navigate between images.
AC2: Confirm that the navigation arrows are functional.

Test Case 2: Verify Image Overlay Opens Correctly on fawiki

Visit an article on the Persian Wikipedia using the mobile site (e.g., گربه or آنجلینا جولی).
Click on an image thumbnail that was uploaded to Commons.
AC3: Confirm that the image overlay opens with relevant information and a link to Commons.
AC4: Ensure no error messages are displayed when clicking the image.

QA Results - Beta

AC	Status	Details
1	✅	T348939#10098548
2	✅	T348939#10098548
3	⬜	T348939#10098548
4	⬜	T348939#10098548

QA Results - PROD

AC	Status	Details
1	✅	T348939#10136054
2	✅	T348939#10136054
3	✅	T348939#10136054
4	✅	T348939#10136054

Details

	Subject	Repo	Branch	Lines +/-
	Don't involve URL query in finding file path name	mediawiki/extensions/MobileFrontend	master	+2 K -11 K

Customize query in gerrit

Related Objects

Mentioned In: T374038: Verify 1.43.0-wmf.21 deployment
T373373: Verify 1.43.0-wmf.20 deployment
Mentioned Here: T127268: Dismantle ResourceLoader's "targets" system
T328610: Default gadgets to run on mobile

Event Timeline

Arian_Ar created this task.Oct 15 2023, 10:10 PM

Restricted Application added subscribers: Huji, Masumrezarock100, Aklapper. · View Herald TranscriptOct 15 2023, 10:10 PM

TheresNoTime added a project: SRE-swift-storage.Oct 15 2023, 10:14 PM

nb. https://fa.m.wikipedia.org/wiki/%DA%AF%D8%B1%D8%A8%D9%87#/media/File:Cat_poster_1.jpg?uselang=fa does not work, but https://fa.m.wikipedia.org/wiki/%DA%AF%D8%B1%D8%A8%D9%87#/media/File:Cat_poster_1.jpg does

StarTesla subscribed.Oct 15 2023, 10:29 PM

Looks to fail around here, so tagging Thumbor

mwversion: 1.41.0-wmf.30
reqId: 9ab3256d-5f15-4483-9596-e06981716ce2
Find reqId in Logstash

normalized_message

TransformationalImageHandler::doTransform: creating 800x525 thumbnail at mwstore://shared-multiwrite/local-thumb/0/0b/Cat_poster_1.jpg/800px-Cat_poster_1.jpg using scaler im

For https://fa.m.wikipedia.org/wiki/%DA%AF%D8%B1%D8%A8%D9%87#/media/File:Cat_poster_1.jpg?uselang=fa, ?uselang=fa is appended to the fragment of the URL, not the query string. MediaViewer then makes an imageinfo API query for File:Cat_poster_1.jpg?uselang=fa, which does not exist.

?uselang=fa is being added by https://fa.wikipedia.org/wiki/%D9%85%D8%AF%DB%8C%D8%A7%D9%88%DB%8C%DA%A9%DB%8C:Gadget-Direct-link-to-Commons.js . If I had to guess, this is a side effect of T127268: Dismantle ResourceLoader's "targets" system/T328610: Default gadgets to run on mobile as the script still works on desktop. The script is an old copy of https://www.mediawiki.org/wiki/Snippets/Direct_imagelinks_to_Commons with various fixes and changes piled on top. The current version of the script seems to have no effect on Minerva, but also does not include the uselang feature.

The simplest option is probably to only load this script on non-Minerva skins using |skins=vector,vector-2022,monobook,timeless,modern,cologneblue] in the gadget definition.

Aklapper renamed this task from Image thumbs on Persian Wikipedia are broken when you click on them to Image thumbs on Persian Wikipedia broken when you click on them (due to Gadget-Direct-link-to-Commons.js attaching uselang parameter).Oct 16 2023, 9:13 AM

Aklapper added a project: Local-Wiki-Template-And-Gadget-Issues.

The simplest option is probably to only load this script on non-Minerva skins using |skins=vector,vector-2022,monobook,timeless,modern,cologneblue] in the gadget definition.

Seems like that would be prone to break in future and i'd be worried about it copied to over projects. Seems straightforward enough to fix the gadget so I'll do that later and update here.

After patching the code and on closer inspection this seems to be a bug in MobileFrontend.

When I run the following code, I see that the Thumbnail objects contain the query string in the file path.

mw.mobileFrontend.require('mobile.startup').currentPageHTMLParser().getThumbnails()

I suspect this code is at fault here.
https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/blob/0652ba81c60c25d7714b7e965c251cd415caedda/src/mobile.startup/PageHTMLParser.js#L173C2-L173C2

Patch very much welcome.

Jdlrobson edited projects, added MobileFrontend; removed Local-Wiki-Template-And-Gadget-Issues, MinervaNeue.Oct 16 2023, 10:25 PM

Change #1057195 had a related patch set uploaded (by Ebrahim; author: Ebrahim):

[mediawiki/extensions/MobileFrontend@master] Don't involve URL query in finding file path name

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

gerritbot added a project: Patch-For-Review.Jul 26 2024, 11:17 AM

Jdlrobson triaged this task as Low priority.Aug 27 2024, 9:38 PM

Jdlrobson added projects: Unplanned-Sprint-Work, Web-Team-Backlog (FY2024-25 Q1 Sprint 4).

Jdlrobson moved this task from Needs analysis to Code Review on the Web-Team-Backlog (FY2024-25 Q1 Sprint 4) board.

Jdlrobson moved this task from Code Review to QA on the Web-Team-Backlog (FY2024-25 Q1 Sprint 4) board.

Change #1057195 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] Don't involve URL query in finding file path name

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

TheDJ assigned this task to Ebrahim.Aug 27 2024, 10:16 PM

TheDJ moved this task from QA to Ready for Signoff on the Web-Team-Backlog (FY2024-25 Q1 Sprint 4) board.

TheDJ moved this task from Ready for Signoff to QA on the Web-Team-Backlog (FY2024-25 Q1 Sprint 4) board.

This cannot be easily tested in beta cluster, so for beta cluster we should do some exploratory testing making sure that clicking images on mobile opens the image overlay and the arrows are functional. In production we'll test the gadget issue.

ReleaseTaggerBot added a project: MW-1.43-notes (1.43.0-wmf.21; 2024-09-03).Aug 27 2024, 11:00 PM

Edtadros updated the task description. (Show Details)Aug 28 2024, 2:47 AM

Test Result - Beta

Status: ✅ PASS
Environment: Beta
OS: macOS
Browser: Chrome
Device: MS MBA
Emulated Device: NA

Test Artifact(s):

Test Steps

Test Case 1: Exploratory Testing on Beta Cluster

Navigate to an article with images on the beta cluster using the mobile site.
Click on an image thumbnail.
✅ AC1: Confirm that the image overlay opens correctly.

see AC2

Use the arrows within the overlay to navigate between images.
✅ AC2: Confirm that the navigation arrows are functional.

screenshot 2.mov.gif (972×498 px, 969 KB)

Test Case 2: Verify Image Overlay Opens Correctly on fawiki

Visit an article on the Persian Wikipedia using the mobile site (e.g., گربه or آنجلینا جولی).
Click on an image thumbnail that was uploaded to Commons.
⬜ AC3: Confirm that the image overlay opens with relevant information and a link to Commons.

to be tested in prod

⬜ AC4: Ensure no error messages are displayed when clicking the image.

to be tested in prod

Edtadros updated the task description. (Show Details)Aug 28 2024, 3:09 AM

Edtadros mentioned this in T373373: Verify 1.43.0-wmf.20 deployment.Aug 28 2024, 4:01 AM

Jdlrobson assigned this task to ovasileva.Aug 28 2024, 3:35 PM

ovasileva closed this task as Resolved.Aug 30 2024, 11:13 AM

Maintenance_bot removed a project: Patch-For-Review.Aug 30 2024, 11:32 AM

Edtadros mentioned this in T374038: Verify 1.43.0-wmf.21 deployment.Sep 9 2024, 5:28 PM

Test Result - PROD

Status: ✅ PASS
Environment: PROD
OS: macOS
Browser: Chrome
Device: MS MBA
Emulated Device: NA

Test Artifact(s):

Test Steps

Test Case 1: Exploratory Testing on PRODr

Navigate to an article with images on en Wiki using the mobile site.
Click on an image thumbnail.
✅ AC1: Confirm that the image overlay opens correctly.

see AC2

Use the arrows within the overlay to navigate between images.
✅ AC2: Confirm that the navigation arrows are functional.

2024-09-10_15-54-34.mp4.gif (760×666 px, 3 MB)

Test Case 2: Verify Image Overlay Opens Correctly on fawiki

Visit an article on the Persian Wikipedia using the mobile site (e.g., گربه or آنجلینا جولی).
Click on an image thumbnail that was uploaded to Commons.
✅ AC3: Confirm that the image overlay opens with relevant information and a link to Commons.

//see AC4/

✅AC4: Ensure no error messages are displayed when clicking the image.

2024-09-10_16-00-27.mp4.gif (688×626 px, 3 MB)

GMikesell-WMF added a project: Verified.Sep 10 2024, 11:03 PM

GMikesell-WMF updated the task description. (Show Details)

	F38303666: video_2023-10-16_01-27-32.mp4
	Oct 15 2023, 10:10 PM

	F57313309: screenshot 2.mov.gif
	Aug 28 2024, 2:54 AM

Image thumbs on Persian Wikipedia broken when you click on them (due to Gadget-Direct-link-to-Commons.js attaching uselang parameter)Closed, ResolvedPublicBUG REPORTActions

Description

Requirement

BDD

Test Steps

QA Results - Beta

QA Results - PROD

Details

Related Objects

Event Timeline

Test Result - Beta

Test Steps

Test Result - PROD

Test Steps

Image thumbs on Persian Wikipedia broken when you click on them (due to Gadget-Direct-link-to-Commons.js attaching uselang parameter)
Closed, ResolvedPublicBUG REPORT
Actions