Page MenuHomePhabricator
Create Task
Maniphest T396628

CX: Wrong spacing in quick tutorial step
Closed, ResolvedPublicBUG REPORT
Actions

Assigned To
ngkountas
Authored By
ngkountas
Jun 11 2025, 3:31 PM
Tags
Referenced Files
F62446793: 2025-06-24_09-20-29.mp4.gif
Jun 24 2025, 6:02 PM
F62446806: 2025-06-24_09-18-02.mp4.gif
Jun 24 2025, 6:02 PM
F62446916: 2025-06-24_09-23-09.mp4
Jun 24 2025, 6:02 PM
F62446911: 2025-06-24_09-18-26.png
Jun 24 2025, 6:02 PM
F62446904: 2025-06-24_09-16-15.png
Jun 24 2025, 6:02 PM
F62437085: 2025-06-23_14-29-59.mp4.gif
Jun 23 2025, 9:48 PM
F62293742: CX Quick tutorial: Spacing before fix
Jun 11 2025, 3:31 PM
F31771609: Quick tutorial - Dimensions.png
Jun 11 2025, 3:31 PM
File Not Attached
Subscribers
Aklapper
GMikesell-WMF
ngkountas

Description

Steps to replicate the issue (include links if applicable):

  1. Visit CX on mobile, on a production wiki
  2. Add the force-quick-tutorial=true parameter in the URL
  3. Select an article/section to translate and proceed all the way to the "Pick a sentence" step
  4. Before the "Pick a sentence" step, the "Quick tutorial" step should be displayed.

What happens?:
The spacing in the "Quick tutorial" page is off.

What should have happened instead?:
The spacing should match the design as defined in T250898

Quick tutorial - Dimensions.png (768×1 px, 92 KB)

Screenshot of the problematic layout in production:

CX Quick tutorial: Spacing before fix (825×388 px, 40 KB)

Derived Requirement

Ensure that the Quick Tutorial step in the Content Translation (CX) mobile experience renders with correct spacing between all instructional elements, matching the specifications defined in the design task T250898. This step appears when force-quick-tutorial=true is appended to the URL before reaching the "Pick a sentence" stage.

Test Steps

Test Case 1: Ensure Proper Spacing in Quick Tutorial Step

  1. Visit any Wikipedia where Content Translation is enabled (e.g., https://bn.wikipedia.org).
  2. Navigate to: https://bn.wikipedia.org/wiki/Special:ContentTranslation?force-quick-tutorial=true
  3. Select a source and target language (e.g., English to Bengali).
  4. Select any article/section to translate and proceed to the Quick Tutorial step.
  5. Observe the spacing between tutorial elements (title, instructions, illustrations, navigation button).
  6. ✅❓❌⬜ AC1: The spacing in the Quick Tutorial step matches the dimensions and layout defined in design spec T250898.

Test Case 2: Ensure Quick Tutorial Step Is Triggered with URL Parameter

  1. Navigate to any CX-enabled wiki and open Special:ContentTranslation?force-quick-tutorial=true.
  2. Start a translation.
  3. ✅❓❌⬜ AC2: The "Quick Tutorial" step appears before the "Pick a sentence" step.

Test Case 3: Ensure Quick Tutorial Step Does Not Appear Without Parameter

  1. Navigate to the same Special:ContentTranslation page without force-quick-tutorial=true.
  2. Start a new translation.
  3. ✅❓❌⬜ AC3: The tutorial step is skipped unless previously unseen or triggered explicitly via the URL.

QA Results - PROD

ACStatusDetails
1✅T396628#10944218
2✅T396628#10944218
3✅T396628#10944218

Details

Related Changes in Gerrit:
SubjectRepoBranchLines +/-
CX3 Build 1.0.0+20250616mediawiki/extensions/ContentTranslationwmf/1.45.0-wmf.6+4 K -4 K
CX3 Build 1.0.0+20250616mediawiki/extensions/ContentTranslationmaster+4 K -4 K
CX: Fix spacing in quick tutorial stepmediawiki/extensions/ContentTranslationmaster+1 -12
Customize query in gerrit

Related Objects

Event Timeline

ngkountas created this task.Jun 11 2025, 3:31 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 11 2025, 3:31 PM
ngkountas triaged this task as Medium priority.Jun 11 2025, 3:32 PM
ngkountas updated the task description. (Show Details)
ngkountas claimed this task.Jun 11 2025, 3:40 PM
ngkountas added a project: ContentTranslation.
gerritbot added a comment.Jun 11 2025, 3:40 PM

Change #1155715 had a related patch set uploaded (by Nik Gkountas; author: Nik Gkountas):

[mediawiki/extensions/ContentTranslation@master] CX: Fix spacing in quick tutorial step

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

gerritbot added a project: Patch-For-Review.Jun 11 2025, 3:40 PM
ngkountas moved this task from In-progress to Needs Code Review on the LPL Hypothesis board.Jun 11 2025, 3:40 PM
eamedina moved this task from Needs Code Review to Pending deployment on the LPL Hypothesis board.Jun 11 2025, 4:02 PM
gerritbot added a comment.Jun 11 2025, 4:21 PM

Change #1155715 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] CX: Fix spacing in quick tutorial step

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

Maintenance_bot removed a project: Patch-For-Review.Jun 11 2025, 4:31 PM
ReleaseTaggerBot added a project: MW-1.45-notes (1.45.0-wmf.6; 2025-06-17).Jun 11 2025, 5:00 PM
ngkountas moved this task from Needs Triage to Translation editor on the ContentTranslation board.Jun 12 2025, 8:31 AM
ngkountas moved this task from Translation editor to Dashboard on the ContentTranslation board.
gerritbot added a comment.Jun 16 2025, 7:41 PM

Change #1159555 had a related patch set uploaded (by Sbisson; author: Sbisson):

[mediawiki/extensions/ContentTranslation@master] CX3 Build 1.0.0+20250616

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

gerritbot added a project: Patch-For-Review.Jun 16 2025, 7:41 PM
gerritbot added a comment.Jun 17 2025, 1:01 AM

Change #1159555 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] CX3 Build 1.0.0+20250616

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

Maintenance_bot removed a project: Patch-For-Review.Jun 17 2025, 1:31 AM
gerritbot added a comment.Jun 17 2025, 12:23 PM

Change #1160123 had a related patch set uploaded (by Sbisson; author: Sbisson):

[mediawiki/extensions/ContentTranslation@wmf/1.45.0-wmf.6] CX3 Build 1.0.0+20250616

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

gerritbot added a project: Patch-For-Review.Jun 17 2025, 12:23 PM
gerritbot added a comment.Jun 17 2025, 2:22 PM

Change #1160123 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@wmf/1.45.0-wmf.6] CX3 Build 1.0.0+20250616

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

Stashbot mentioned this in T374695: Community-defined Translation Collections: Support collections with multiple sub-collections.Jun 17 2025, 2:22 PM
Stashbot mentioned this in T395415: CX events EventGate validation errors: translation id, source section, target section values should be string.
Stashbot mentioned this in T396711: CX instrumentation should use the latest schema version.
Stashbot mentioned this in T396716: CX instrumentation: editor_segment_edit and editor_segment_skip events are not logged.

Mentioned in SAL (#wikimedia-operations) [2025-06-17T14:22:31Z] <sbisson@deploy1003> Started scap sync-world: Backport for [[gerrit:1160123|CX3 Build 1.0.0+20250616 (T374695 T395415 T396628 T396711 T396716 T396836)]]

Stashbot mentioned this in T396836: CX mobile editor: Action buttons for edited template provide the wrong options.Jun 17 2025, 2:22 PM
Stashbot added a comment.Jun 17 2025, 2:24 PM

Mentioned in SAL (#wikimedia-operations) [2025-06-17T14:24:43Z] <sbisson@deploy1003> sbisson: Backport for [[gerrit:1160123|CX3 Build 1.0.0+20250616 (T374695 T395415 T396628 T396711 T396716 T396836)]] synced to the testservers (see https://wikitech.wikimedia.org/wiki/Mwdebug). Changes can now be verified there.

Maintenance_bot removed a project: Patch-For-Review.Jun 17 2025, 2:32 PM
Stashbot added a comment.Jun 17 2025, 2:33 PM

Mentioned in SAL (#wikimedia-operations) [2025-06-17T14:33:53Z] <sbisson@deploy1003> Finished scap sync-world: Backport for [[gerrit:1160123|CX3 Build 1.0.0+20250616 (T374695 T395415 T396628 T396711 T396716 T396836)]] (duration: 11m 21s)

ngkountas moved this task from Pending deployment to Needs QA on the LPL Hypothesis board.Jun 20 2025, 10:26 AM
GMikesell-WMF moved this task from Needs QA to In-progress on the LPL Hypothesis board.Jun 23 2025, 9:43 PM
GMikesell-WMF moved this task from In-progress to Prioritized on the LPL Hypothesis board.
GMikesell-WMF moved this task from Prioritized to In-progress on the LPL Hypothesis board.
GMikesell-WMF updated the task description. (Show Details)
GMikesell-WMF updated Other Assignee, added: GMikesell-WMF.
GMikesell-WMF subscribed.Jun 23 2025, 9:48 PM

@ngkountas The order and wording is wrong on my end, as seen in the gif. Am I missing something?

Test Result - Prod

Status: ❓Need More Info
Environment: PROD
OS: macOS Sequoia 15.5
Browser: Chrome 137
Device: MBA
Emulated Device: iPhone 14 (Minerva skin)

Test Artifact(s):

https://es.m.wikipedia.org/wiki/Special:ContentTranslation?force-quick-tutorial=true
https://es.m.wikipedia.org/w/index.php?title=Special:ContentTranslation&force-quick-tutorial=true&filter-type=automatic&filter-id=previous-edits&active-list=suggestions&from=en&to=es&page=Dornod%20Province&section=Economy#/sx/quick-tutorial

Test Steps

Test Case 1: Ensure Proper Spacing in Quick Tutorial Step

  1. Visit any Wikipedia where Content Translation is enabled (e.g., https://bn.wikipedia.org).
  2. Navigate to: https://bn.wikipedia.org/wiki/Special:ContentTranslation?force-quick-tutorial=true
  3. Select a source and target language (e.g., English to Bengali).
  4. Select any article/section to translate and proceed to the Quick Tutorial step.
  5. Observe the spacing between tutorial elements (title, instructions, illustrations, navigation button).
  6. ❓ AC1: The spacing in the Quick Tutorial step matches the dimensions and layout defined in design spec T250898.

2025-06-23_14-29-59.mp4.gif (998×1 px, 2 MB)

Test Case 2: Ensure Quick Tutorial Step Is Triggered with URL Parameter

  1. Navigate to any CX-enabled wiki and open Special:ContentTranslation?force-quick-tutorial=true.
  2. Start a translation.
  3. ✅❓❌⬜ AC2: The "Quick Tutorial" step appears before the "Pick a sentence" step.

Test Case 3: Ensure Quick Tutorial Step Does Not Appear Without Parameter

  1. Navigate to the same Special:ContentTranslation page without force-quick-tutorial=true.
  2. Start a new translation.
  3. ✅❓❌⬜ AC3: The tutorial step is skipped unless previously unseen or triggered explicitly via the URL.
GMikesell-WMF updated the task description. (Show Details)Jun 23 2025, 9:49 PM
ngkountas added a comment.Jun 24 2025, 1:40 PM

@GMikesell-WMF the wording has changed since the original task was created. The task that captured the wording update is T273050. I attached the design with the old wording, because it's the only one presenting the spacing and the margins between elements. Moving this task back to "Needs QA".

ngkountas moved this task from In-progress to Needs QA on the LPL Hypothesis board.Jun 24 2025, 1:40 PM
GMikesell-WMF added a comment.Jun 24 2025, 6:02 PM

@ngkountas Order, wording and functionality work as designed from the screenshots/gifs below. I will move this to Sign-off. Thanks for all your work!

Test Result - Prod

Status: ✅ PASS
Environment: PROD
OS: macOS Sequoia 15.5
Browser: Chrome 137
Device: MBA
Emulated Device: iPhone 14 (Minerva skin)

Test Artifact(s):

https://es.m.wikipedia.org/wiki/Special:ContentTranslation?force-quick-tutorial=true
https://es.m.wikipedia.org/w/index.php?title=Special:ContentTranslation&force-quick-tutorial=true&filter-type=automatic&filter-id=previous-edits&active-list=suggestions&from=en&to=es&page=Dornod%20Province&section=Economy#/sx/quick-tutorial
https://es.m.wikipedia.org/w/index.php?title=Special:ContentTranslation&active-list=suggestions&filter-id=previous-edits&filter-type=automatic

Test Steps

Test Case 1: Ensure Proper Spacing in Quick Tutorial Step

  1. Visit any Wikipedia where Content Translation is enabled (e.g., https://es.wikipedia.org).
  2. Navigate to: https://es.wikipedia.org/wiki/Special:ContentTranslation?force-quick-tutorial=true
  3. Select a source and target language (e.g., English to Spanish).
  4. Select any article/section to translate and proceed to the Quick Tutorial step.
  5. Observe the spacing between tutorial elements (title, instructions, illustrations, navigation button).
  6. ✅ AC1: The spacing in the Quick Tutorial step matches the dimensions and layout defined in design spec T273050.
Section by SuggestionSuggested translationGif of Spacing/Order
2025-06-24_09-16-15.png (994×927 px, 64 KB)
2025-06-24_09-18-26.png (995×936 px, 62 KB)

Test Case 2: Ensure Quick Tutorial Step Is Triggered with URL Parameter

  1. Navigate to any CX-enabled wiki and open Special:ContentTranslation?force-quick-tutorial=true.
  2. Start a translation.
  3. ✅ AC2: The "Quick Tutorial" step appears before the "Pick a sentence" step.

gif

2025-06-24_09-18-02.mp4.gif (1×934 px, 1 MB)

Test Case 3: Ensure Quick Tutorial Step Does Not Appear Without Parameter

  1. Navigate to the same Special:ContentTranslation page without force-quick-tutorial=true.
  2. Start a new translation.
  3. ✅ AC3: The tutorial step is skipped unless previously unseen or triggered explicitly via the URL.

gif

2025-06-24_09-20-29.mp4.gif (1×944 px, 2 MB)

GMikesell-WMF updated the task description. (Show Details)Jun 24 2025, 6:03 PM
GMikesell-WMF updated Other Assignee, removed: GMikesell-WMF.
GMikesell-WMF moved this task from Needs QA to Design Signoff on the LPL Hypothesis board.
Pginer-WMF closed this task as Resolved.Jun 27 2025, 2:16 PM
Pginer-WMF moved this task from Design Signoff to Product Signoff on the LPL Hypothesis board.
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits