Page MenuHomePhabricator
Create Task
Maniphest T297953

Sticky header: LTR Username text and icon looks out of place on sticky header user menu on RTL wikis
Closed, ResolvedPublic3 Estimated Story Points
Actions

Assigned To
ovasileva
Authored By
ovasileva
Dec 17 2021, 3:15 PM
Tags
Referenced Files
F35047587: Screen Shot 2022-04-11 at 6.28.33 PM.png
Apr 12 2022, 1:32 AM
F35038491: Screen Shot 2022-04-04 at 4.17.30 PM.png
Apr 4 2022, 11:18 PM
F35030688: Screen Shot 2022-03-30 at 3.33.27 PM.png
Mar 30 2022, 9:39 PM
F34890926: Screen Shot 2021-12-20 at 10.39.35 AM.png
Dec 20 2021, 6:40 PM
F34890922: Screen Shot 2021-12-20 at 10.35.50 AM.png
Dec 20 2021, 6:40 PM
F34887518: Screen Shot 2021-12-17 at 4.14.13 PM.png
Dec 17 2021, 3:15 PM
Subscribers
Aklapper
Amire80
cjming
Edtadros
Jdlrobson
ovasileva
Volker_E

Description

Steps to reproduce

  1. Go to https://fa.wikipedia.org/wiki/%DA%AF%D8%A7%D9%87%E2%80%8C%D8%B4%D9%85%D8%A7%D8%B1%DB%8C_%D9%87%D8%AC%D8%B1%DB%8C_%D8%AE%D9%88%D8%B1%D8%B4%DB%8C%D8%AF%DB%8C?vectorstickyheader=1
  2. Scroll down until sticky header appears
  3. Select user menu

Observed
Username appears aligned incorrectly. Icon is on the wrong side

Screen Shot 2021-12-17 at 4.14.13 PM.png (1×2 px, 515 KB)

Expected
Username should be right aligned and the icon should appear on the right

Developer notes

Remove the dir=auto on the #pt-userpage a element which is set here:
https://gerrit.wikimedia.org/g/mediawiki/core/+/826b6f6dacbc1834ef4aa6bf972852f9a03b4d98/includes/skins/SkinTemplate.php#1038

Inside Vector modern (only)

You'll need to use one of the existing hooks to do this.

QA steps

  • Navigate to a page locally as a logged-in user in modern Vector in a rtl language i.e. he (updating this config var in local settings will render page in rtl $wgLanguageCode = "he";)
  • Hover over the user menu and narrow the view port until the username is injected into the user menu dropdown
  • Note that the user name is right-aligned

Screen Shot 2022-03-30 at 3.33.27 PM.png (1×1 px, 278 KB)

QA Results - Beta

ACStatusDetails
1✅T297953#7830341

QA Results - Prod

ACStatusDetails
1✅T297953#7847013

Details

SubjectRepoBranchLines +/-
Do not add dir attribute for usernamemediawiki/coremaster+0 -1
Customize query in gerrit

Related Objects

Event Timeline

ovasileva created this task.Dec 17 2021, 3:15 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptDec 17 2021, 3:15 PM
ovasileva triaged this task as High priority.Dec 17 2021, 3:16 PM
ovasileva mentioned this in T294926: Sticky header: full feature QA.Dec 17 2021, 3:19 PM
ovasileva lowered the priority of this task from High to Medium.Dec 20 2021, 6:35 PM
Jdlrobson subscribed.Dec 20 2021, 6:40 PM

This also impacts the user menus at lower resolutions. I think this is working correctly except that the icon margin should be flipped in this scenario like so:

Screen Shot 2021-12-20 at 10.35.50 AM.png (658×414 px, 45 KB)

The dir is set to auto, meaning the direction is auto-detected meaning our flipping code doesn't kick in. This "automatic" behaviour creates a bit of a problem that I'm not sure how to fix.

It would be easiest to set this to the same direction as the interface texct, but I think that would look odd for a native speaker ?:

Screen Shot 2021-12-20 at 10.39.35 AM.png (674×414 px, 53 KB)

Jdlrobson renamed this task from Sticky header: Username appears incorrectly within sticky header user menu on RTL wikis to Sticky header: LTR Username text and icon looks out of place on sticky header user menu on RTL wikis.Dec 20 2021, 6:41 PM
• BilalShirwani closed this task as a duplicate of T298058: [Impact Analysis] Evaluate Impact of Mobile Reply and New Discussion Tools.Dec 20 2021, 11:58 PM
JJMC89 reopened this task as Open.Dec 21 2021, 12:04 AM
ovasileva added a subscriber: Amire80.Jan 4 2022, 3:22 PM
In T297953#7580985, @Jdlrobson wrote:

This also impacts the user menus at lower resolutions. I think this is working correctly except that the icon margin should be flipped in this scenario like so:

Screen Shot 2021-12-20 at 10.35.50 AM.png (658×414 px, 45 KB)

The dir is set to auto, meaning the direction is auto-detected meaning our flipping code doesn't kick in. This "automatic" behaviour creates a bit of a problem that I'm not sure how to fix.

It would be easiest to set this to the same direction as the interface texct, but I think that would look odd for a native speaker ?:

Screen Shot 2021-12-20 at 10.39.35 AM.png (674×414 px, 53 KB)

@Amire80 - I wonder if you can give us some feedback on this one? What should the correct behavior here be?

Volker_E subscribed.Jan 4 2022, 7:35 PM
cjming claimed this task.Jan 5 2022, 6:00 PM
cjming removed cjming as the assignee of this task.
cjming subscribed.
Jdlrobson edited projects, added Web-Team-Backlog; removed Web-Team-Backlog (Kanbanana-FY-2021-22).Jan 13 2022, 5:12 PM

Not ready for analysis. Can move it back in when we have a clearer idea what we want to do.

Jdlrobson moved this task from Incoming to Not ready to estimate on the Web-Team-Backlog board.Jan 14 2022, 12:28 AM
Jdlrobson moved this task from Incoming to Sticky header on the Desktop Improvements (Vector 2022) board.Jan 21 2022, 9:16 PM
Amire80 added a comment.Feb 2 2022, 12:58 PM
In T297953#7580985, @Jdlrobson wrote:

The dir is set to auto, meaning the direction is auto-detected meaning our flipping code doesn't kick in. This "automatic" behaviour creates a bit of a problem that I'm not sure how to fix.

It would be easiest to set this to the same direction as the interface texct, but I think that would look odd for a native speaker ?:

Screen Shot 2021-12-20 at 10.39.35 AM.png (674×414 px, 53 KB)

This looks good to me. Right alignment + automatic direction is OK.

ovasileva edited projects, added Web-Team-Backlog (Kanbanana-FY-2021-22); removed Web-Team-Backlog.Feb 2 2022, 2:25 PM
Jdlrobson moved this task from Needs Analysis to Upcoming on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.Feb 2 2022, 9:36 PM
Jdlrobson added a project: Vector (legacy skin).Feb 2 2022, 9:39 PM
Jdlrobson updated the task description. (Show Details)
LGoto moved this task from Upcoming to Ready for Development on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.Feb 28 2022, 6:35 PM
LGoto set the point value for this task to 3.
Jdlrobson edited projects, added MediaWiki-Core-Skin-Architecture (Menus 2.0); removed Vector (legacy skin).Mar 30 2022, 4:05 PM
gerritbot added a comment.Mar 30 2022, 4:05 PM

Change 775342 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/core@master] Do not add dir attribute for username

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

gerritbot added a project: Patch-For-Review.Mar 30 2022, 4:05 PM
Jdlrobson assigned this task to Edtadros.Mar 30 2022, 4:05 PM
Jdlrobson removed Edtadros as the assignee of this task.
Jdlrobson moved this task from Ready for Development to QA on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.
Jdlrobson moved this task from QA to Needs More Work on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.
Jdlrobson moved this task from Needs More Work to Code Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.
Jdlrobson added a subscriber: Edtadros.
cjming claimed this task.Mar 30 2022, 4:45 PM
cjming reassigned this task from cjming to Edtadros.Mar 30 2022, 9:39 PM
cjming updated the task description. (Show Details)
cjming moved this task from Code Review to QA on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.
gerritbot added a comment.Mar 30 2022, 9:53 PM

Change 775342 merged by jenkins-bot:

[mediawiki/core@master] Do not add dir attribute for username

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

ReleaseTaggerBot added a project: MW-1.39-notes (1.39.0-wmf.6; 2022-04-04).Mar 30 2022, 10:00 PM
Maintenance_bot removed a project: Patch-For-Review.Mar 30 2022, 10:11 PM
Edtadros moved this task from QA to QA in Prod on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.Apr 4 2022, 11:18 PM

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

Navigate to a page locally as a logged-in user in modern Vector in a rtl language i.e. he (updating this config var in local settings will render page in rtl $wgLanguageCode = "he";)
Hover over the user menu and narrow the view port until the username is injected into the user menu dropdown
✅ AC1: Note that the user name is right-aligned

Screen Shot 2022-04-04 at 4.17.30 PM.png (706×606 px, 73 KB)

Jdlrobson moved this task from Backlog to Menu prep work on the MediaWiki-Core-Skin-Architecture (Menus 2.0) board.Apr 5 2022, 2:39 PM
Edtadros reassigned this task from Edtadros to ovasileva.Apr 12 2022, 1:32 AM
Edtadros moved this task from QA in Prod to Ready for Signoff on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

Test Result - Prod

Status: ✅ PASS
Environment: hewiki
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

Navigate to a page locally as a logged-in user in modern Vector in a rtl language i.e. he (updating this config var in local settings will render page in rtl $wgLanguageCode = "he";)
Hover over the user menu and narrow the view port until the username is injected into the user menu dropdown
✅ AC1: Note that the user name is right-aligned

Screen Shot 2022-04-11 at 6.28.33 PM.png (508×688 px, 136 KB)

Edtadros updated the task description. (Show Details)Apr 12 2022, 1:35 AM
ovasileva closed this task as Resolved.Apr 12 2022, 9:28 AM
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