Page MenuHomePhabricator
Create Task
Maniphest T350417

Build out client preferences in side bar
Closed, ResolvedPublic5 Estimated Story Points
Actions

Assigned To
None
Authored By
Jdlrobson
Nov 2 2023, 4:59 PM
Tags
Referenced Files
F41562070: screenshot 348.png
Dec 5 2023, 7:52 AM
F41562069: screenshot 346.png
Dec 5 2023, 7:52 AM
F41562068: screenshot 347.png
Dec 5 2023, 7:52 AM
F41562067: screenshot 344.png
Dec 5 2023, 7:52 AM
F41562066: screenshot 345.png
Dec 5 2023, 7:52 AM
F41562064: screenshot 349.png
Dec 5 2023, 7:52 AM
F41562093: screenshot 351.png
Dec 5 2023, 7:52 AM
F41562092: screenshot 352.png
Dec 5 2023, 7:52 AM
View All 25 Files
Subscribers
Aklapper
Edtadros
Jdlrobson
JScherer-WMF
KSarabia-WMF

Description

The first version of client preferences in side bar will look like this:

Reading theme settings anons.png (922×1 px, 345 KB)

It will not be pinnable so we recognize this temporary state may annoy certain users as they will not have the ability to make it go away. This will be taken care of in a follow up iteration of the functionality

Specs

  • The menu should only appear when the existing client preferences feature flag is enabled.
  • The first version will not have pinning functionality
  • The menu should be dynamic based on which features have been enabled.
  • It will disappear at low resolutions (e.g. resizing browser) [in future this will become pinned]

TODO

  • A new container is added. It appears below the page tools when page tools is open
  • Load codex-styles instead of codex-search-styles for logged in users
  • Since client preferences do not work without JavaScript we need a mock for how this should look while JavaScript loads
  • You will need to adjust the existing pinning code which allows content to expand when page tools is collapsed as this space will now always be reserved.

QA

  • Make sure codex-styles is not loaded for anonymous users and that we haven't introduced a performance regression.
  • Review the following states:
  • page tools open [settings should appear below]
  • page tools closed [settings should appear above]
  • 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)

QA Results - Beta

ACStatusDetails
1✅T350417#9342194
2✅T350417#9342194
3✅T350417#9342194
4✅T350417#9342194

QA Results - Prod

ACStatusDetails
1✅T350417#9381801
2✅T350417#9381801
3✅T350417#9381801
4✅T350417#9381801

Details

Other Assignee
KSarabia-WMF
SubjectRepoBranchLines +/-
Fix alignment issue in Zebramediawiki/skins/Vectormaster+13 -1
Fix sidebar component ordermediawiki/skins/Vectormaster+35 -10
Create a sidebar for user preferencesmediawiki/skins/Vectormaster+22 -44
i18n: client preferencesmediawiki/skins/Vectormaster+3 -3
[Please squash] suggested fix ups to "Create a sidebar for user preferenes"mediawiki/skins/Vectormaster+15 -19
Client preferences: Support different render locations, use Codexmediawiki/skins/Vectormaster+96 -27
Customize query in gerrit

Related Objects
Search...

Event Timeline

Jdlrobson created this task.Nov 2 2023, 4:59 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptNov 2 2023, 4:59 PM
Jdlrobson updated the task description. (Show Details)Nov 2 2023, 5:03 PM
Jdlrobson added a parent task: T345359: [Goal] Allow logged-out and logged-in users to set preferred typography.
Jdlrobson mentioned this in T345359: [Goal] Allow logged-out and logged-in users to set preferred typography.
ovasileva triaged this task as High priority.Nov 2 2023, 5:11 PM
ovasileva moved this task from Incoming to Ready for Development on the Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 3) board.
ovasileva set the point value for this task to 5.Nov 2 2023, 5:49 PM
ovasileva moved this task from Ready for Development to Blocked on Others on the Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 3) board.
Jdlrobson moved this task from Blocked on Others to Ready for Development on the Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 3) board.Nov 6 2023, 6:55 PM
Jdlrobson assigned this task to KSarabia-WMF.Nov 7 2023, 5:46 PM
Jdlrobson moved this task from Ready for Development to Doing on the Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 3) board.
Jdlrobson updated Other Assignee, added: • Mabualruz.
Jdlrobson mentioned this in T350709: QA User Preferences Selection Panel Instrumentation.Nov 7 2023, 11:04 PM
gerritbot added a comment.Nov 7 2023, 11:12 PM

Change 972492 had a related patch set uploaded (by Kimberly Sarabia; author: Kimberly Sarabia):

[mediawiki/skins/Vector@master] Create a sidebar for user preferenes

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

gerritbot added a project: Patch-For-Review.Nov 7 2023, 11:12 PM
gerritbot added a comment.Nov 7 2023, 11:44 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

Jdlrobson updated the task description. (Show Details)Nov 8 2023, 9:28 PM
Jdrewniak mentioned this in T350907: Reuse ClientPreferencesContainer.mustache template in JS version of client preferences.Nov 9 2023, 6:08 PM
gerritbot added a comment.Nov 9 2023, 8:12 PM

Change 972495 merged by jenkins-bot:

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

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

ReleaseTaggerBot added a project: MW-1.42-notes (1.42.0-wmf.5; 2023-11-14).Nov 9 2023, 9:00 PM
Jdlrobson mentioned this in T350195: Desktop settings dropdown interface for logged in users: Version 1.Nov 9 2023, 11:14 PM
Jdlrobson moved this task from Doing to Code Review on the Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 3) board.Nov 13 2023, 11:28 PM
Jdlrobson mentioned this in T351141: Make the client preferences controls pinnable.Nov 14 2023, 12:28 AM
gerritbot added a comment.Nov 14 2023, 12:41 AM

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

[mediawiki/skins/Vector@master] [Please squash] suggested fix ups to "Create a sidebar for user preferenes"

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

gerritbot added a comment.Nov 14 2023, 12:41 AM

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

Jdlrobson moved this task from Code Review to Needs More Work on the Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 3) board.Nov 14 2023, 12:41 AM
Jdlrobson added a comment.Nov 14 2023, 12:45 AM

[Kim/Mo] I've made several fixes to the current patch in https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/973888/ to unblock work on the dropdown.

I'm going to squash that into this patchset now.

Please review my changes at https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/973888 and ask any questions there.

Please checkout the latest patchset (and understand my changes) before resuming work on this for the remaining issues.

The remaining issues to fix are:

  • page tools when open, overlaps client preferences control
  • When resizing the browser, the client preferences should be hidden (use a media query to do that one)
gerritbot added a comment.Nov 14 2023, 4:50 PM

Change 973888 abandoned by Mabualruz:

[mediawiki/skins/Vector@master] [Please squash] suggested fix ups to "Create a sidebar for user preferenes"

Reason:

Cherry Picked changes into 972492

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

gerritbot added a comment.Nov 14 2023, 5:35 PM

Change 973889 merged by jenkins-bot:

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

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

JScherer-WMF subscribed.Nov 14 2023, 10:03 PM

@KSarabia-WMF @Jdlrobson I had a look at the overflow behaviour of the tools and ToC menu components when the bottom of the menu extends past the bottom edge of the page you can scroll them separately from the main content. In the case of the theme menu, we could apply this behaviour to both the Tools and Theme menus combined. If the combined height of tools plus theme exceeds the total height of the page, you could scroll both as one content area.

Jdlrobson reassigned this task from KSarabia-WMF to Edtadros.Nov 14 2023, 10:57 PM
Jdlrobson moved this task from Needs More Work to QA on the Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 3) board.
Jdlrobson updated Other Assignee, added: KSarabia-WMF; removed: • Mabualruz.
Jdlrobson updated the task description. (Show Details)
Jdlrobson added a subscriber: KSarabia-WMF.
gerritbot added a comment.Nov 14 2023, 11:00 PM

Change 972492 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Create a sidebar for user preferences

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

Maintenance_bot removed a project: Patch-For-Review.Nov 14 2023, 11:10 PM
ReleaseTaggerBot edited projects, added MW-1.42-notes (1.42.0-wmf.7; 2023-11-28); removed MW-1.42-notes (1.42.0-wmf.5; 2023-11-14).Nov 15 2023, 1:00 AM
Jdlrobson moved this task from QA to Needs More Work on the Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 3) board.Nov 15 2023, 2:20 AM

Remaining work:

  • the client preferences panel needs to appear below the page tools
Jdlrobson removed Edtadros as the assignee of this task.Nov 15 2023, 2:20 AM
Jdlrobson added a subscriber: Edtadros.
Jdlrobson moved this task from Needs More Work to Code Review on the Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 3) board.Nov 15 2023, 11:25 PM
gerritbot added a comment.Nov 16 2023, 12:06 AM

Change 974700 had a related patch set uploaded (by Kimberly Sarabia; author: Kimberly Sarabia):

[mediawiki/skins/Vector@master] Fix sidebar component order

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

gerritbot added a project: Patch-For-Review.Nov 16 2023, 12:06 AM
Jdlrobson moved this task from Code Review to QA on the Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 3) board.Nov 16 2023, 12:45 AM
gerritbot added a comment.Nov 16 2023, 12:55 AM

Change 974700 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Fix sidebar component order

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

Maintenance_bot removed a project: Patch-For-Review.Nov 16 2023, 1:10 AM
Jdlrobson assigned this task to Edtadros.EditedNov 16 2023, 1:15 AM

Okay this can now be testing on the beta cluster shortly

(Note it is expected that the controls do not doing anything except throw an error)

Jdlrobson reassigned this task from Edtadros to KSarabia-WMF.EditedNov 16 2023, 5:49 PM
Jdlrobson moved this task from QA to Needs More Work on the Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 3) board.

There is an alignment issue with the page tools. This only happens in Zebra: ?vectorzebradesign=1

Edit: I think this could be as simple as adding the vector-pinned-container class in Zebra mode, and/or making Zebra a dependency of this feature.

Jdlrobson moved this task from Needs More Work to Doing on the Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 3) board.Nov 16 2023, 5:53 PM
gerritbot added a comment.Nov 16 2023, 7:54 PM

Change 975076 had a related patch set uploaded (by Kimberly Sarabia; author: Kimberly Sarabia):

[mediawiki/skins/Vector@master] Fix alignment issue in Zebra

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

gerritbot added a project: Patch-For-Review.Nov 16 2023, 7:54 PM
gerritbot added a comment.Nov 16 2023, 8:39 PM

Change 975076 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Fix alignment issue in Zebra

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

Maintenance_bot removed a project: Patch-For-Review.Nov 16 2023, 9:10 PM
Jdlrobson reassigned this task from KSarabia-WMF to Edtadros.Nov 16 2023, 10:03 PM
Jdlrobson moved this task from Doing to QA on the Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 3) board.
KSarabia-WMF mentioned this in T351298: [User Story] Partial migration of *UIActions instrument to the Core Interaction API.Nov 17 2023, 7:37 PM
Edtadros removed Edtadros as the assignee of this task.Nov 17 2023, 10:22 PM
Edtadros moved this task from QA to Ready for Signoff on the Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 3) board.

Test Result - Beta

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

Test Artifact(s):

QA Steps

✅ AC1: Make sure codex-styles is not loaded for anonymous users and that we haven't introduced a performance regression.
codex-styles was not found in the page source. Performance regressions will have been caught by the devs.
Review the following states:
✅ AC2: page tools open [settings should appear below]

screenshot 221.png (891×1 px, 332 KB)

✅ AC3: page tools closed [settings should appear above]
Settings appears in the sidebar, not necessarily "above" anything. I'm assuming this is what was meant. Additionally, at low resolutions, the settings panel does not appear per the spec.
screenshot 220.png (895×1 px, 462 KB)

screenshot 222.png (894×978 px, 401 KB)

✅ AC4: 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)

screenshot 225.png (508×860 px, 101 KB)

screenshot 227.png (509×795 px, 101 KB)

screenshot 223.png (474×912 px, 97 KB)

screenshot 224.png (513×813 px, 101 KB)

screenshot 226.png (478×905 px, 93 KB)

screenshot 228.png (507×804 px, 101 KB)

Edtadros updated the task description. (Show Details)Nov 17 2023, 10:24 PM
Jdlrobson closed this task as Resolved.Nov 17 2023, 11:14 PM
Jdlrobson updated the task description. (Show Details)
ovasileva added a project: FY2023-24-WE 2.1 Typography and palette customizations.Nov 20 2023, 9:53 AM
Edtadros added a project: Verified.EditedDec 5 2023, 7:52 AM

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: Make sure codex-styles is not loaded for anonymous users and that we haven't introduced a performance regression.
codex-styles was not found in the page source. Performance regressions will have been caught by the devs.
Review the following states:
✅ AC2: page tools open [settings should appear below]

screenshot 356.png (1×1 px, 706 KB)

✅ AC3: page tools closed [settings should appear above]
Settings appears in the sidebar. Additionally, at low resolutions, the settings panel does not appear per the spec.

screenshot 358.png (1×982 px, 607 KB)
screenshot 357.png (1×1 px, 669 KB)

✅ AC4: 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)

See AC8 in T351141#9381788

Edtadros attached a referenced file: F41562070: screenshot 348.png. (Show Details)Dec 5 2023, 7:52 AM
Edtadros attached a referenced file: F41562069: screenshot 346.png. (Show Details)
Edtadros attached a referenced file: F41562068: screenshot 347.png. (Show Details)
Edtadros attached a referenced file: F41562067: screenshot 344.png. (Show Details)
Edtadros attached a referenced file: F41562066: screenshot 345.png. (Show Details)
Edtadros attached a referenced file: F41562064: screenshot 349.png. (Show Details)
Edtadros attached a referenced file: F41562093: screenshot 351.png. (Show Details)
Edtadros attached a referenced file: F41562092: screenshot 352.png. (Show Details)
Edtadros updated the task description. (Show Details)Dec 5 2023, 8:03 AM
Edtadros mentioned this in T351126: Verify 1.42.0-wmf.7 deployment.Dec 5 2023, 8:49 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 · Credits