Page MenuHomePhabricator

ParserMigration: Add "report visual bug" link
Closed, ResolvedPublic

Assigned To
Authored By
cscott
May 20 2024, 4:05 PM
Referenced Files
F65686854: image.png
Jul 28 2025, 9:05 PM
F65686862: image.png
Jul 28 2025, 9:05 PM
F65687080: image.png
Jul 28 2025, 9:05 PM
F65686864: image.png
Jul 28 2025, 9:05 PM
F65686819: image.png
Jul 28 2025, 9:05 PM
F65673730: image.png
Jul 25 2025, 6:26 PM
F65673739: image.png
Jul 25 2025, 6:26 PM
F65673723: image.png
Jul 25 2025, 6:26 PM

Description

Per https://phabricator.wikimedia.org/T363484#9765272 add a link to "report visual bug" in the tools menu:

Desktop (with tooltip)
image.png (3,210×2,400 px, 1 MB)
Mobile
image.png (796×1,688 px, 302 KB)

which then pops up a form in a dialog to report potential parsoid-related problems:

Desktop
image.png (3,210×2,400 px, 1 MB)
Mobile
image.png (796×1,688 px, 222 KB)

with this submit progress state:

Desktop
image.png (3,210×2,400 px, 1 MB)
Mobile
image.png (796×1,688 px, 231 KB)

and thank you confirmation

Desktop
image.png (3,210×2,400 px, 1 MB)
Mobile
image.png (796×1,688 px, 264 KB)

The whole flow above can be inspected in the figma or else here's the desktop prototype

Event Timeline

Where does my question go / end up and how will I find the answer?

When it comes to interpreting words and scope, would the screenshot below also fall under "visual bug" and not be just a Parsoid rendering issue?:

f.png (946×335 px, 52 KB)

Current patch demo is at https://649538b6c5.catalyst.wmcloud.org/wiki/New%20York%20City and is ready for review. I had to make a few tweaks to the design to accomodate the selected backend (posting to a talk page). In particular, I needed to provide a topic for the post and also to inform the user of the page where the message would be/was posted.

Hiya - I've revised the mocks and link to a prototype in the description to account for the reporiting flow requiring a page subject where the message will be posted, as well progress and thanks instead of a message toast.

Key updates/changes to the patchdemo include:

UIExpectedActual
Reporting dialog
image.png (806×474 px, 173 KB)
design revisions
image.png (1,184×934 px, 279 KB)
Progress indicator
image.png (746×496 px, 142 KB)
design revisions
image.png (1,056×840 px, 117 KB)
Thanks message
image.png (890×486 px, 193 KB)
LGTM
image.png (1,310×670 px, 92 KB)
Report link hover
image.png (318×138 px, 12 KB)
low-prio
image.png (428×234 px, 74 KB)
  • Reporting dialog:
    • Use the subtitle prop for the "This page was rendered in Parsoid, which may..." text under the dialog title
    • Incorporate the posted subject title as the label above the text area (instead of a read-only field)
    • Put the "Your feedback was will be added to...." text into the footer-text slot instead of using an inline message.
  • Progress interstitial
    • Put the Progressindicator upon submit into the permanent action section of the dialog footer instead of introducing a new dialog step/screen.
    • Keep all content in the report dialog visible, but change the "Submit" button to disabled state and the make the textArea read-only.
  • Report visual bug tooltip Finally, it was expected in Matthew's mocks an inclusion of an info icon and tooltip on the link to report, but also fine to leave it if this is overkill

Two additional overarching expectations I wanted to confirm:

  1. This reporting feature is only for logged in users, as I do not think it makes sense to create a temp account for the sake of reporting potential bugs.
  2. The feature will be on mobile as well (see flow in the description).

Change #1170511 had a related patch set uploaded (by C. Scott Ananian; author: C. Scott Ananian):

[mediawiki/extensions/ParserMigration@master] Turn off old indicator and user notice; turn on Report Visual Bug.

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

Change #1165566 had a related patch set uploaded (by C. Scott Ananian; author: C. Scott Ananian):

[mediawiki/extensions/ParserMigration@master] Create "report visual bug" dialog

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

I've updated the patch demo to match the new mocks. Some responses:

  • There's also an "error" state if the attempt to post the report failed. Try logging on to patch demo as the blocked user Mallory (same password) to see this behavior.
  • I hadn't really thought about logged-in vs other users other than from a potential spam perspective. Right now I've added an additional configuration variable to control whether logged-out users are allowed to use the tool. If they are not (the default) "Report Visual Bug" is a static link to the feedback page; the user could presumably add a comment there manually if they are sufficiently motivated.
  • I've tested on mobile and things should work well there now.
  • I rather expected the stackedActions property of Dialog to be responsive to window width by default. However, code search doesn't seem to indicate any users of this property yet. I implemented the transition from horizontal to stacked buttons at window.innerWidth of 400, which seemed to match your screenshots. Is there an "official" number for where the conversion to stacked buttons should take place?

Change #1170549 had a related patch set uploaded (by C. Scott Ananian; author: C. Scott Ananian):

[operations/mediawiki-config@master] Enable the "Report Visual Bug" feature of Extension:ParserMigration

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

Change #1165566 merged by jenkins-bot:

[mediawiki/extensions/ParserMigration@master] Create "report visual bug" dialog

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

Change #1170549 merged by jenkins-bot:

[operations/mediawiki-config@master] Enable the "Report Visual Bug" feature of Extension:ParserMigration

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

Mentioned in SAL (#wikimedia-operations) [2025-07-23T20:21:35Z] <cscott@deploy1003> Started scap sync-world: Backport for [[gerrit:1170549|Enable the "Report Visual Bug" feature of Extension:ParserMigration (T365371)]]

Mentioned in SAL (#wikimedia-operations) [2025-07-23T20:23:43Z] <cscott@deploy1003> cscott: Backport for [[gerrit:1170549|Enable the "Report Visual Bug" feature of Extension:ParserMigration (T365371)]] synced to the testservers (see https://wikitech.wikimedia.org/wiki/Mwdebug). Changes can now be verified there.

Change #1172108 had a related patch set uploaded (by C. Scott Ananian; author: C. Scott Ananian):

[mediawiki/extensions/ParserMigration@wmf/1.45.0-wmf.11] Create "report visual bug" dialog

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

Mentioned in SAL (#wikimedia-operations) [2025-07-23T20:32:08Z] <cscott@deploy1003> Finished scap sync-world: Backport for [[gerrit:1170549|Enable the "Report Visual Bug" feature of Extension:ParserMigration (T365371)]] (duration: 10m 32s)

Change #1172108 merged by jenkins-bot:

[mediawiki/extensions/ParserMigration@wmf/1.45.0-wmf.11] Create "report visual bug" dialog

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

Mentioned in SAL (#wikimedia-operations) [2025-07-23T20:34:35Z] <cscott@deploy1003> Started scap sync-world: Backport for [[gerrit:1172108|Create "report visual bug" dialog (T365371)]], [[gerrit:1165094|Disable ParserMigration indicator and user notice (T363484 T363472)]]

Mentioned in SAL (#wikimedia-operations) [2025-07-23T20:58:49Z] <cscott@deploy1003> cscott: Backport for [[gerrit:1172108|Create "report visual bug" dialog (T365371)]], [[gerrit:1165094|Disable ParserMigration indicator and user notice (T363484 T363472)]] synced to the testservers (see https://wikitech.wikimedia.org/wiki/Mwdebug). Changes can now be verified there.

Mentioned in SAL (#wikimedia-operations) [2025-07-23T21:15:32Z] <cscott@deploy1003> Finished scap sync-world: Backport for [[gerrit:1172108|Create "report visual bug" dialog (T365371)]], [[gerrit:1165094|Disable ParserMigration indicator and user notice (T363484 T363472)]] (duration: 40m 57s)

Latest design review (using wikivoyage):

ExpectedActualReview note
1. Add a link to "report visual bug" in the tools menu
Desktop (with tooltip)
image.png (3,210×2,400 px, 1 MB)
image.png (2,700×1,330 px, 1 MB)
tooltip uses native browser instead. this is fine.
Mobile F62763350
image.png (796×1,688 px, 302 KB)
[revised mock]
image.png (772×1,318 px, 285 KB)
block instead of icon. Apologies the original mock did not show the intended which should be cdxIconFeedback from codex
2. Select opens a form within a dialog to report potential parsoid-related problems
Desktop
image.png (3,210×2,400 px, 1 MB)
image.png (3,070×1,638 px, 1 MB)
image.png (1,194×902 px, 296 KB)
Looks good to me.
Mobile
image.png (796×1,688 px, 222 KB)
image.png (760×1,316 px, 204 KB)
image.png (762×1,352 px, 216 KB)
LGTM
**3. Submit progress state
Desktop
image.png (3,210×2,400 px, 1 MB)
image.png (1,096×824 px, 669 KB)
LGTM
Mobile
image.png (796×1,688 px, 231 KB)
image.png (838×1,544 px, 669 KB)
FOUC on the cancel button. Low prio fix though, would accept if you want to jog on.
**4. Thank you confirmation
Desktop
image.png (3,210×2,400 px, 1 MB)
image.png (1,198×874 px, 914 KB)
Uses progressive instead of neutral button. Also low prio fix.
Mobile
image.png (796×1,688 px, 264 KB)
image.png (898×1,630 px, 606 KB)
Uses progressive instead of neutral button. Also low prio fix.
**5. Logged out - no reporting link or flow available
Desktop
image.png (2,442×1,298 px, 1 MB)
image.png (3,154×1,670 px, 1 MB)
Reporting link is still showing in the tools menu for logged out users
Mobile
image.png (754×1,334 px, 221 KB)
image.png (730×1,358 px, 525 KB)
LGTM

Change #1172707 had a related patch set uploaded (by C. Scott Ananian; author: C. Scott Ananian):

[mediawiki/extensions/ParserMigration@master] Report Visual Bug: address design feedback

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

I'm having trouble reproducing the FOUC, but the above patch should address all the other feedback.

Change #1172707 merged by jenkins-bot:

[mediawiki/extensions/ParserMigration@master] Report Visual Bug: address design feedback

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

Thank you! I retested the issues and TLDR all looks good ...details below

ExpectedActual 25th July + notesActual 28th July + notes
1. Add a link to "report visual bug" in the tools menu
Desktop (with tooltip)
image.png (3,210×2,400 px, 1 MB)
tooltip uses native browser instead. this is fine.
image.png (2,700×1,330 px, 1 MB)
n/a
Mobile F62763350
image.png (796×1,688 px, 302 KB)
[revised mock]
block instead of icon. Apologies the original mock did not show the intended which should be cdxIconFeedback from codex
image.png (772×1,318 px, 285 KB)
LGTM
image.png (758×1,332 px, 140 KB)
2. Select opens a form within a dialog to report potential parsoid-related problems
Desktop
image.png (3,210×2,400 px, 1 MB)
Looks good to me.
image.png (3,070×1,638 px, 1 MB)
image.png (1,194×902 px, 296 KB)
n/a
Mobile
image.png (796×1,688 px, 222 KB)
LGTM
image.png (760×1,316 px, 204 KB)
image.png (762×1,352 px, 216 KB)
n/a
**3. Submit progress state
Desktop
image.png (3,210×2,400 px, 1 MB)
LGTM
image.png (1,096×824 px, 669 KB)
n/a
Mobile
image.png (796×1,688 px, 231 KB)
FOUC on the cancel button. Low prio fix though, would accept if you want to jog on.
image.png (838×1,544 px, 669 KB)
LGTM - in rechecking I think this was not FOUC but issues with the progress message breaking the cancel and submit buttons. This is fixed with the change to stacked actions.
image.png (620×944 px, 174 KB)
**4. Thank you confirmation
Desktop
image.png (3,210×2,400 px, 1 MB)
Uses progressive instead of neutral button. Also low prio fix.
image.png (1,198×874 px, 914 KB)
LGTM
image.png (2,772×1,666 px, 267 KB)
Mobile
image.png (796×1,688 px, 264 KB)
Uses progressive instead of neutral button. Also low prio fix.
image.png (898×1,630 px, 606 KB)
LGTM
image.png (622×1,092 px, 147 KB)
**5. Logged out - no reporting link or flow available
Desktop
image.png (2,442×1,298 px, 1 MB)
Reporting link is still showing in the tools menu for logged out users
image.png (3,154×1,670 px, 1 MB)
LGTM (though unable to verify on wikivoyage)
image.png (2,056×1,012 px, 199 KB)
Mobile
image.png (754×1,334 px, 221 KB)
LGTM
image.png (730×1,358 px, 525 KB)
n/a

About parsermigration-reportbug-feedback-title: how will it work in practice on Wikimedia sites? Will the reporting be on local wikis or on a central wiki?

It is currently centralized, following the model of Visual editor's feedback link. It can be configured to have local feedback pages for certain communities, but that adds burden to our team to try to monitor them all. We'd like to try to have a single page for as long as that is workable.