Page MenuHomePhabricator

Desktop settings dropdown interface for logged in users: Version 1
Closed, ResolvedPublic5 Estimated Story Points

Description

The first version of the settings dialog will look like so:

image.png (923×1 px, 360 KB)

TODO

Phase 1: Preparation

  • The user menu should be refactored to separate the notifications, and username menus. These are originally separate but merged inside Vector 2022 (it may make sense to pull this out into a subtask - so talk about this during estimation)
  • When the VectorClientPreferences flag is enabled, Vector 2022 should use the codex-styles module instead of codex-search-styles module so it can render radio buttons on page load.

Phase 2: Refactoring of existing client preferences code

QA

Can be skipped in production. Verification will occur later. QA is restricted to the patch demo.

  • When patch demo is visited as a logged in user the new menu icon should not show
  • When patch demo is visited as an anonymous user the new menu icon should show
  • Make sure codex-search module is not loaded on anonymous page views under any circumstances.
  • Make sure codex-search-styles module is loaded on logged in page views
  • When JavaScript is disabled the button should not be shown.
  • Make sure click tracking is functioning for interactions with the settings - each selection of an option should have an associated click tracking event (testing desktop site is sufficient for now)
  • Make sure the client preferences does not show for anonymous users, or users with the beta feature disabled.

Sign off steps

  • Create a ticket to make this menu pinnable per the sequencing plan in T345359
  • Make sure a task is created for adding the new icon to Codex.

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
ovasileva set the point value for this task to 5.Nov 2 2023, 5:50 PM

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

[mediawiki/skins/Vector@master] Refactor client preferences to support different render locations

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

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

[mediawiki/skins/Vector@master] WIP: Refactor VectorComponentUserLinks to not use hooks

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

I've begun work on refactoring user links code so I can insert the new dark mode button in between user page and notificatons.

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

[mediawiki/skins/Vector@master] Relocate client side preferences to dropdown

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

@JScherer-WMF I've added a patch demo to show where I'm hoping to get to by end of task. For now it shows for anonymous users and a settings cog (but please ignore that and login)
https://patchdemo.wmflabs.org/wikis/9eb27a2666/w/index.php?title=Main_Page&vectorclientpreferences=1

Two things to discuss
#1) Icon

Adding icon is blocked on T350436

2) Inconsistency

While working on this I'm noting how in the mocks we have underlines under:
Density, Article Width, Color

However in page tools we have use underlines to separate groupings (e.g. at the bottom of the menu). Is this difference intentional (if so it would complicate things as it would mean distinguishing these 2 components)

Screenshot 2023-11-08 at 4.13.02 PM.png (231×192 px, 12 KB)

Let me know if this is acceptable (at least for now)?

Change 972495 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Client preferences: Support different render locations, use Codex

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

https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/972500 is the remaining patch. Once that is merged, please move to blocked on others. I'd like us to make more progress on T350417 before continuing the work here.

Change 972500 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Refactor VectorComponentUserLinks to not use hooks

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

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

[mediawiki/skins/Vector@master] Fixes orange bar of doom (echo alert)

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

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

[mediawiki/extensions/Echo@master] Unsets icon correctly

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

Change 973861 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Fixes orange bar of doom (echo alert)

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

Change 973860 merged by jenkins-bot:

[mediawiki/extensions/Echo@master] Unsets icon correctly

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

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

[mediawiki/skins/Vector@master] i18n: client preferences

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

Moving to code review for https://gerrit.wikimedia.org/r/973889

https://gerrit.wikimedia.org/r/c/972916 is ready to review, but can't be merged until T350195 is done. @KSarabia-WMF @Mabualruz I suggest familiarizing yourself with that patch to see how the code will evolve over time.

Change 973889 merged by jenkins-bot:

[mediawiki/skins/Vector@master] i18n: client preferences

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

Change 972916 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Allow client side preferences to render in a dropdown

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

Jdlrobson updated the task description. (Show Details)
Jdlrobson added a subscriber: Edtadros.

While setting up QA instructions i noticed this was broken - the menu is showing for anonymous users. I'm working on a fix.

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

[mediawiki/skins/Vector@master] Theme preferences should not display when feature disabled

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

Change 974702 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Theme preferences should not display when feature disabled

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

Okay this should be ready for QA on patch demo:https://patchdemo.wmflabs.org/wikis/1c68bfad1c/wiki/Main_Page
(Note it is expected that the controls do not doing anything except throw an error)

Test Result - Beta

Status: ✅ PASS / ❓Need More Info
Environment: Patch demo (974698,3)
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

Can be skipped in production. Verification will occur later. QA is restricted to the patch demo.

✅ AC1: When patch demo is visited as a logged in user the new menu icon should show

screenshot 233.png (779×1 px, 148 KB)

✅ AC2: When patch demo is visited as an anonymous user the new menu icon should not show

screenshot 236.png (776×1 px, 156 KB)

✅ AC3: Make sure codex-search module is not loaded on anonymous page views under any circumstances.
codex-search module was not loaded for anon

✅ AC4: Make sure codex-search-styles module is loaded on logged in page views

screenshot 234.png (1×1 px, 328 KB)

✅ AC5: When JavaScript is disabled the button should not be shown.

screenshot 235.png (776×1 px, 98 KB)

❓ AC6: Make sure click tracking is functioning for interactions with the settings - each selection of an option should have an associated click tracking event (testing desktop site is sufficient for now)
I was not able to get any events in patchdemo. In beta I previously verified that each setting option has an associated event. See T350417#9342194

✅ AC7: Make sure the client preferences does not show for anonymous users, or users with the beta feature disabled.
see AC2
see AC1, beta features were disabled.

AC6: Make sure click tracking is functioning for interactions with the settings - each selection of an option should have an associated click tracking event (testing desktop site is sufficient for now)

I was not able to get any events in patchdemo. In beta I previously verified that each setting option has an associated event. See
You are right. We can't test this yet so I've moved this QA step to T351141.

ovasileva updated the task description. (Show Details)

Signoff steps are completed. Resolving.