Page MenuHomePhabricator

Create font size settings interface functionality for vector
Closed, ResolvedPublic5 Estimated Story Points

Description

Background

We would like to create the skeleton for the settings interface

Acceptance criteria

A settings cog will appear in the bottom right corner of the page
Selecting the cog will open a modal with the following options:

  1. Width setting
  2. Three typography setting options:
    1. Small
    2. Medium
    3. Large

Selecting the option will save the preference and apply setting (without reloading the page) (or maybe we want a save button?)

Design inspiration

Screenshot 2023-09-07 at 3.58.38 PM.png (1×1 px, 550 KB)

Screenshot 2023-09-07 at 3.58.27 PM.png (986×1 px, 115 KB)

QA

Related Objects

StatusSubtypeAssignedTask
OpenJdrewniak
OpenJdrewniak
DuplicateFlorian
DuplicateJdlrobson
OpenNone
DuplicateJdlrobson
ResolvedJScherer-WMF
OpenJScherer-WMF
OpenJScherer-WMF
Resolvedovasileva
ResolvedNBaca-WMF
ResolvedEdtadros
ResolvedDesignJScherer-WMF
ResolvedJScherer-WMF
ResolvedNone
Resolvedovasileva
Resolvedovasileva
ResolvedNone
ResolvedSpikeJdrewniak
Resolvedbwang
Resolvedovasileva
ResolvedBUG REPORTJdlrobson
Resolvedovasileva
ResolvedDTorsani-WMF
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
ResolvedJdlrobson
Resolvedovasileva
Declinedovasileva
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
DuplicateNone
DuplicateBUG REPORTJdlrobson

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Jdlrobson subscribed.

This seems more than 5 points to me.

A few questions:

  • When does the settings cog appear? Is it feature flagged? Is it a new feature flag or using the existing one for font size?
  • There is no design for this -should it appear unstyled or is the idea to use existing Codex components?
  • Is it the intention that this settings dialog is functional.

This seems more than 5 points to me.

A few questions:

  • When does the settings cog appear? Is it feature flagged? Is it a new feature flag or using the existing one for font size?

I think we discussed using the existing feature flag

  • There is no design for this -should it appear unstyled or is the idea to use existing Codex components?

We were hoping to follow Kieran's previous design as inspiration for the purpose of this ticket, then switching to the official design later once it's ready

  • Is it the intention that this settings dialog is functional.

Yes.

The existing feature flag only supports current font size and larger font size. IF we need to support three font options, we'll need to either modify that feature flag or create a new feature flag to store the value. That seems like 3-5 points on its own to me. We might want to create a new ticket capturing making the settings functional and leave this work to simply showing the overlay or not (and using the existing binary feature flag to decide whether to show it).

bwang removed bwang as the assignee of this task.Sep 11 2023, 7:16 PM
bwang subscribed.

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

[mediawiki/skins/Vector@master] WIP: Feature: Client preferences interface

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

Edtadros subscribed.

Test results moved to T342277 per T345363#9175683

Jdlrobson updated the task description. (Show Details)

I'm sorry Edward. I added the QA steps to the wrong ticket. Could you move your comment to T342277 ?

Change 957794 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Feature: Client preferences interface

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

Test Result - Beta

Status: ❓Need More Info
Environment: beta
OS: macOS Ventura
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

You can test using https://en.wikipedia.beta.wmflabs.org/?=VectorClientPreferences=1
✅ AC1: A settings cog will appear in the bottom right corner of the page

❓ AC2: Selecting the cog will open a modal with the following options:

Width setting
Three typography setting options:
Small
Medium
Large

@Jdlrobson, See below, only Small and Standard typography setting options appear. Was the requirement changed?

✅ AC3: Selecting the option will save the preference and apply setting (without reloading the page) (or maybe we want a save button?)
Not shown below, I changed a setting and navigated away, the width and typography settings carried over to any new article that I navigated to.

screenshot 17.mov.gif (830×1 px, 882 KB)

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

[operations/mediawiki-config@master] Disable client preferences cog in production

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

Looks like this has broken the default experience so adding as a blocker.

Change 959040 abandoned by Jdlrobson:

[operations/mediawiki-config@master] Disable client preferences cog in production

Reason:

https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/959013

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

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

[mediawiki/skins/Vector@master] Disable client preferences by default

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

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

[mediawiki/skins/Vector@wmf/1.41.0-wmf.27] Disable client preferences by default

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

ovasileva raised the priority of this task from High to Unbreak Now!.Sep 19 2023, 8:03 PM
ovasileva lowered the priority of this task from Unbreak Now! to High.

Change 959045 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Disable client preferences by default

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

Change 959013 merged by jenkins-bot:

[mediawiki/skins/Vector@wmf/1.41.0-wmf.27] Disable client preferences by default

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

Mentioned in SAL (#wikimedia-operations) [2023-09-19T20:57:04Z] <brennen@deploy2002> Started scap: Backport for [[gerrit:959013|Disable client preferences by default (T345363)]]

Mentioned in SAL (#wikimedia-operations) [2023-09-19T21:17:26Z] <brennen@deploy2002> jdlrobson and brennen: Backport for [[gerrit:959013|Disable client preferences by default (T345363)]] synced to the testservers mwdebug1001.eqiad.wmnet, mwdebug2001.codfw.wmnet, mwdebug1002.eqiad.wmnet, mwdebug2002.codfw.wmnet, and mw-debug kubernetes deployment (accessible via k8s-experimental XWD option)

@Jdlrobson, See below, only Small and Standard typography setting options appear. Was the requirement changed?

Yep requirement changed so this is a pass :-)

Jdlrobson updated the task description. (Show Details)

@ovasileva please note limited width and font size currently do not persist for logged in users (due to unanswered questions on T345664)

Mentioned in SAL (#wikimedia-operations) [2023-09-19T21:37:49Z] <brennen@deploy2002> Finished scap: Backport for [[gerrit:959013|Disable client preferences by default (T345363)]] (duration: 40m 45s)

brennen subscribed.

Removing as train blocker since I believe the relevant issue was patched yesterday. Please correct if I'm mistaken.

Jdlrobson updated the task description. (Show Details)

@Edtadros @ovasileva the existing modal does not work for logged in users so we should seek to fix this now we have clarity around the approach for T346987.

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

[mediawiki/skins/Vector@master] Fixes saving of limited width

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

Change 959362 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Fixes saving of limited width

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

Jdlrobson added a subscriber: Jdrewniak.

Please see the newly added two QA steps and refer to your last QA on https://phabricator.wikimedia.org/T345363#9180041

Test Result - Beta

Status:
Environment: beta
OS: macOS Ventura
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

You can test using https://en.wikipedia.beta.wmflabs.org/?=VectorClientPreferences=1
✅ AC1: A settings cog will appear in the bottom right corner of the page

✅ AC2: Selecting the cog will open a modal with the following options:

Width setting: Full or Limited
Type size: Small or Standard

See below

✅ AC3: Selecting the option will save the preference and apply setting (without reloading the page)

screenshot 17.mov.gif (830×1 px, 882 KB)

✅ AC4: Test https://en.wikipedia.beta.wmflabs.org/?VectorClientPreferences=1
The modal appears and changes the width and font size

screenshot 69.png (865×1 px, 170 KB)

✅ AC5: Test https://en.wikipedia.beta.wmflabs.org/?VectorClientPreferences=0 experience - should be consistent with current production.

screenshot 69.png (865×1 px, 170 KB)

✅ AC6: Options in the modal should persist for anonymous users

screenshot 28.mov.gif (862×1 px, 2 MB)

❌ AC7: Options in the modal should persist for registered users
@Jdlrobson, I'm not sure what's happening here. I've been messing with this AC for a bit now. It seems that the width works, but the font seems to revert. I tried this on chrome and firefox.

screenshot 29.mov.gif (862×1 px, 2 MB)

screenshot 27.mov.gif (862×1 px, 2 MB)

Initial design explorations done per T345360

❌ AC7: Options in the modal should persist for registered users

@Jdlrobson, I'm not sure what's happening here. I've been messing with this AC for a bit now. It seems that the width works, but the font seems to revert. I tried this on chrome and firefox.

Yeh that's expected! We have a follow up in the next sprint to handle that: T346987

Looks good! Resolving