Make the client preferences controls pinnable
Closed, ResolvedPublic5 Estimated Story Points
Actions

Assigned To

Authored By

	Jdlrobson
	Nov 14 2023, 12:28 AM

Description

Following T350417 and T350195 we should be able to render the client preferences either in a dropdown or the sidebar. This task will make it possible to change the default or move the menus between locations.

Pre-work

check with Jennifer whether the click tracking ID should be the same or different depending on where the menu is positioned (

either in dropdown or outside dropdown). if they are supposed to be different please edit the Acceptance criteria in this ticket.

Acceptance criteria

When I append ?vectorclientpreferences=1 to a URL, I see the client preferences in the sidebar or user menu.

[]When I append ?vectorclientpreferences=0 to a URL ?vectorclientpreferences=0 I do not see it at all.
[]When I am an anonymous user I do not see it at all.

When I append ?vectorclientprefspinned=0 to a URL I see the client preferences in the top right
When I append ?vectorclientprefspinned=1 to a URL I see the client preferences in the sidebar.
I should be able to click "hide" to move it to the dropdown
As a logged in user, my preference persists across page views.
Make sure click tracking is functioning for interactions with both types of settings - each selection of an option should have an associated click tracking event

TODO

Create ClientPreferencePinned feature
Update client pref to match existing pinnable element conventions (i.e. use PinnableContainer, PinnableHeader PHP components and templates)

QA Results - Beta

AC	Status	Details
1	✅	T351141#9362427
2	✅	T351141#9376344
3	✅	T351141#9376344
4	✅	T351141#9362427
5	✅	T351141#9362427
6	✅	T351141#9362427
7	✅	T351141#9362427
8	✅	T351141#9362427

QA Results - Prod

AC	Status	Details
1	✅	T351141#9381788
2	✅	T351141#9381788
3	✅	T351141#9381788
4	❌	T351141#9381788
5	❌	T351141#9381788
6	✅	T351141#9381788
7	✅	T351141#9381788
8	✅	T351141#9381788

Details

Subject	Repo	Branch	Lines +/-
Fix incorrect client-pref-pinned classes when client pref feature is disabled	mediawiki/skins/Vector	wmf/1.42.0-wmf.7	+1 -0
Fix incorrect client-pref-pinned classes when client pref feature is disabled	mediawiki/skins/Vector	master	+1 -0
Fix misc client pref bugs	mediawiki/skins/Vector	master	+8 -9
Fix sticky styles for pinnable elements by moving sticky styles into separate vector-sticky-pinned-container element	mediawiki/skins/Vector	master	+22 -27
Make client prefs fully pinnable	mediawiki/skins/Vector	master	+178 -115

Customize query in gerrit

Related Objects
Search...

Status	Subtype	Assigned	Task
Resolved		ovasileva	T341631 [EPIC] Q1 Main hypothesis: Typographical and palette customizations
Resolved		ovasileva	T313828 [EPIC] Typography: improve typography and allow for variable typography settings
Duplicate		Florian	T50946 Add font size adjustment feature
Duplicate		Jdlrobson	T91201 [GOAL] Accessibility settings/preferences on desktop and mobile
Duplicate		Jdlrobson	T345359 [Goal] Allow logged-out and logged-in users to set preferred typography
Resolved		ovasileva	T351141 Make the client preferences controls pinnable
Resolved	BUG REPORT	Jdlrobson	T352257 [subtask] Vector 2022 "Tools" menu collapsing does not make main content take that space anymore

Event Timeline

Jdlrobson created this task.Nov 14 2023, 12:28 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptNov 14 2023, 12:28 AM

Jdlrobson triaged this task as High priority.Nov 14 2023, 12:29 AM

Jdlrobson moved this task from Incoming to FY2023-24 Q2 Sprint 5 on the Web-Team-Backlog board.

Jdlrobson edited projects, added Web-Team-Backlog (FY2023-24 Q2 Sprint 5); removed Web-Team-Backlog.

Jdlrobson moved this task from FY2023-24 Q2 Sprint 5 to Web Team FY2023-24 Q2 Sprint 4 on the Web-Team-Backlog board.

Jdlrobson edited projects, added Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 4); removed Web-Team-Backlog (FY2023-24 Q2 Sprint 5).

Jdlrobson added a parent task: T345359: [Goal] Allow logged-out and logged-in users to set preferred typography.Nov 14 2023, 5:10 PM

Jdlrobson moved this task from Incoming to Ready for Development on the Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 4) board.Nov 15 2023, 6:18 PM

bwang updated the task description. (Show Details)Nov 15 2023, 9:12 PM

ovasileva set the point value for this task to 5.Nov 16 2023, 6:16 PM

Jdlrobson updated the task description. (Show Details)Nov 20 2023, 3:26 AM

Jdlrobson mentioned this in T350195: Desktop settings dropdown interface for logged in users: Version 1.

Jdlrobson moved this task from Incoming to typography/darkmode on the Desktop Improvements (Vector 2022) board.Nov 20 2023, 3:52 PM

bwang claimed this task.Nov 20 2023, 7:10 PM

bwang moved this task from Ready for Development to Doing on the Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 4) board.

bwang removed bwang as the assignee of this task.Nov 21 2023, 5:04 PM

bwang moved this task from Doing to Code Review on the Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 4) board.

bwang subscribed.

Change 976280 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Make client prefs fully pinnable

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

gerritbot added a project: Patch-For-Review.Nov 21 2023, 5:10 PM

Jdlrobson updated the task description. (Show Details)Nov 21 2023, 5:15 PM

@ovasileva @KSarabia-WMF @jwang @bwang : Looking at AC4 this looks correctly instrumented, but the same event name will be triggered for these options regardless of whether they are pinned or not. Do we need unique identifiers so we can distinguish interactions with controls in the dropdown vs controls in the sidebar? (FWIW vector-client-pref-vector-feature-limited-width-value-0 is currently the event for disabling limited width regardless of where it is located)

Jdlrobson moved this task from Code Review to Needs More Work on the Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 4) board.Nov 21 2023, 11:24 PM

Jdlrobson mentioned this in T351307: Finalize language and copy for typography settings.Nov 22 2023, 7:19 PM

In T351141#9351123, @Jdlrobson wrote:

@ovasileva @KSarabia-WMF @jwang @bwang : Looking at AC4 this looks correctly instrumented, but the same event name will be triggered for these options regardless of whether they are pinned or not. Do we need unique identifiers so we can distinguish interactions with controls in the dropdown vs controls in the sidebar? (FWIW vector-client-pref-vector-feature-limited-width-value-0 is currently the event for disabling limited width regardless of where it is located)

I don't think we need separate events here, since we'll be aggregating both to report on overall preference change

• Mabualruz updated Other Assignee, added: Jdlrobson.Nov 23 2023, 10:30 AM

Change 976280 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Make client prefs fully pinnable

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

ReleaseTaggerBot added a project: MW-1.42-notes (1.42.0-wmf.7; 2023-11-28).Nov 23 2023, 5:00 PM

Jdrewniak assigned this task to Edtadros.Nov 23 2023, 5:03 PM

Jdrewniak moved this task from Needs More Work to QA on the Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 4) board.

Jdrewniak updated Other Assignee, removed: Jdlrobson.

Maintenance_bot removed a project: Patch-For-Review.Nov 23 2023, 5:10 PM

Change 976861 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Fix sticky styles for pinnable elements by moving sticky styles into separate vector-sticky-pinned-container element

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

gerritbot added a project: Patch-For-Review.Nov 27 2023, 5:08 PM

Looks like we are either missing a message or need to make this optional:

Screenshot 2023-11-27 at 9.27.48 AM.png (524×1 px, 73 KB)

We should fix this before branch cut.

Replication:

Click hide
See popup message

Jdlrobson updated the task description. (Show Details)Nov 27 2023, 5:35 PM

Change 977747 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Fix misc client pref bugs

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

Change 976861 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Fix sticky styles for pinnable elements by moving sticky styles into separate vector-sticky-pinned-container element

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

Change 977747 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Fix misc client pref bugs

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

Maintenance_bot removed a project: Patch-For-Review.Nov 27 2023, 6:10 PM

Jdlrobson moved this task from Needs More Work to QA on the Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 4) board.Nov 27 2023, 6:25 PM

Test Result - Beta

Status: ❓Need More Info / ❌ FAIL
Environment: beta
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

@ovasileva Please take a look at AC2 and AC3. Also, a second pair of eyes on AC8 would be good.

✅ AC1: When I append ?vectorclientpreferences=1 to a URL, I see the client preferences in the sidebar or user menu.

screenshot 133.mov.gif (972×1 px, 911 KB)

❌ AC2: When I append ?vectorclientpreferences=0 to a URL I do not see it at all.
I do not see it, but the content is still shifted left.

❓ AC3: When I am an anonymous user I do not see it at all.

The menu will still appear if I append the parameter to the URL, but it is blank. Is this expected?

screenshot 134.mov.gif (972×1 px, 887 KB)

✅ AC4: When I append ?vectorclientprefspinned=0 to a URL I see the client preferences in the top right

✅ AC5: When I append ?vectorclientprefspinned=1 to a URL I see the client preferences in the sidebar.

✅ AC6: I should be able to click "hide" to move it to the dropdown

✅ AC7: As a logged in user, my preference persists across page views.

✅ AC8: Make sure click tracking is functioning for interactions with both types of settings - each selection of an option should have an associated click tracking event
Pinned to Sidebar

Unpinned (in dropdown)

bwang claimed this task.Nov 28 2023, 5:48 PM

bwang moved this task from QA to Needs More Work on the Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 4) board.

bwang moved this task from Needs More Work to Code Review on the Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 4) board.Nov 28 2023, 6:11 PM

Change 978116 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Fix incorrect client-pref-pinned classes when client pref feature is disabled

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

gerritbot added a project: Patch-For-Review.Nov 28 2023, 6:11 PM

bwang removed bwang as the assignee of this task.Nov 28 2023, 6:11 PM

Jdlrobson mentioned this in T352257: [subtask] Vector 2022 "Tools" menu collapsing does not make main content take that space anymore.Nov 29 2023, 3:09 PM

Change 978513 had a related patch set uploaded (by Jdlrobson; author: Bernard Wang):

[mediawiki/skins/Vector@wmf/1.42.0-wmf.7] Fix incorrect client-pref-pinned classes when client pref feature is disabled

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

Jdlrobson added a subtask: T352257: [subtask] Vector 2022 "Tools" menu collapsing does not make main content take that space anymore.Nov 29 2023, 8:20 PM

Change 978116 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Fix incorrect client-pref-pinned classes when client pref feature is disabled

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

Change 978513 merged by jenkins-bot:

[mediawiki/skins/Vector@wmf/1.42.0-wmf.7] Fix incorrect client-pref-pinned classes when client pref feature is disabled

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

Maintenance_bot removed a project: Patch-For-Review.Nov 29 2023, 9:30 PM

Mentioned in SAL (#wikimedia-operations) [2023-11-29T21:50:44Z] <tgr@deploy2002> Started scap: Backport for [[gerrit:978683|Update coverage of Reader Demographics 2 surveys (T344393)]], [[gerrit:978513|Fix incorrect client-pref-pinned classes when client pref feature is disabled (T351141 T352257)]]

Mentioned in SAL (#wikimedia-operations) [2023-11-29T21:52:07Z] <tgr@deploy2002> dani and tgr and jdlrobson: Backport for [[gerrit:978683|Update coverage of Reader Demographics 2 surveys (T344393)]], [[gerrit:978513|Fix incorrect client-pref-pinned classes when client pref feature is disabled (T351141 T352257)]] synced to the testservers (https://wikitech.wikimedia.org/wiki/Mwdebug)

Mentioned in SAL (#wikimedia-operations) [2023-11-29T22:01:20Z] <tgr@deploy2002> Finished scap: Backport for [[gerrit:978683|Update coverage of Reader Demographics 2 surveys (T344393)]], [[gerrit:978513|Fix incorrect client-pref-pinned classes when client pref feature is disabled (T351141 T352257)]] (duration: 10m 35s)

Jdlrobson moved this task from Code Review to QA on the Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 4) board.Nov 29 2023, 10:48 PM

QA content not shifting properly.

KSarabia-WMF assigned this task to Edtadros.Nov 30 2023, 5:39 PM

Jdlrobson closed subtask T352257: [subtask] Vector 2022 "Tools" menu collapsing does not make main content take that space anymore as Resolved.Dec 1 2023, 6:33 PM

Test Result - Beta

Status: ✅ Pass
Environment: beta
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC2: When I append ?vectorclientpreferences=0 to a URL I do not see it at all.

screenshot 138.mov.gif (588×1 px, 717 KB)

✅ AC3: When I am an anonymous user I do not see it at all.

This is as designed per task sync discussion.

Edtadros updated the task description. (Show Details)Dec 1 2023, 10:03 PM

Jdlrobson assigned this task to ovasileva.Dec 2 2023, 12:58 AM

Looks good, resolving!

Test Result - Prod

Status: ❌ FAIL
Environment: enwiki
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: When I append ?vectorclientpreferences=1 to a URL, I see the client preferences in the sidebar or user menu.

✅ AC2: When I append ?vectorclientpreferences=0 to a URL I do not see it at all.

✅ AC3: When I am an anonymous user I do not see it at all.

❌ AC4: When I append ?vectorclientprefspinned=0 to a URL I see the client preferences in the top right

❌ AC5: When I append ?vectorclientprefspinned=1 to a URL I see the client preferences in the sidebar.

✅ AC6: I should be able to click "hide" to move it to the dropdown

✅ AC7: As a logged in user, my preference persists across page views.

screenshot 170.mov.gif (770×1 px, 1002 KB)

✅ AC8: Make sure click tracking is functioning for interactions with both types of settings - each selection of an option should have an associated click tracking event
Pinned to Sidebar

Unpinned (in dropdown)

Edtadros updated the task description. (Show Details)Dec 5 2023, 7:46 AM

Edtadros mentioned this in T350417: Build out client preferences in side bar.Dec 5 2023, 8:01 AM

Edtadros mentioned this in T351126: Verify 1.42.0-wmf.7 deployment.Dec 5 2023, 8:49 AM

Regarding the pinning functionality,

❌ AC4: When I append ?vectorclientprefspinned=0 to a URL I see the client preferences in the top right
❌ AC5: When I append ?vectorclientprefspinned=1 to a URL I see the client preferences in the sidebar.

It looks like you need both the vectorclientprefs and the vectorclientprefspinned flags in the URL to see that functionality, with vectorclientprefs=1
Logged in, I can see this working in prod: https://en.wikipedia.org/wiki/Rome?vectorclientpreferences=1&vectorclientprefspinned=0

Jdlrobson mentioned this in T352805: Add tests that assert that template only uses template data from associated component.Dec 5 2023, 8:23 PM

	F41562070: screenshot 348.png
	Dec 5 2023, 7:44 AM

	F41562069: screenshot 346.png
	Dec 5 2023, 7:44 AM

	F41562068: screenshot 347.png
	Dec 5 2023, 7:44 AM

	F41562067: screenshot 344.png
	Dec 5 2023, 7:44 AM

Make the client preferences controls pinnableClosed, ResolvedPublic5 Estimated Story PointsActions

Description

Pre-work

Acceptance criteria

TODO

QA Results - Beta

QA Results - Prod

Details

Related ObjectsSearch...

Event Timeline

Test Result - Beta

QA Steps

Test Result - Beta

QA Steps

Test Result - Prod

QA Steps

Make the client preferences controls pinnable
Closed, ResolvedPublic5 Estimated Story Points
Actions

Related Objects
Search...