Maniphest T319447

[M] Create user preference to turn fixed width on and off
Closed, ResolvedPublic1 Estimated Story Points
Actions

Assigned To

Authored By

	ovasileva
	Oct 5 2022, 4:53 PM

Description

Background

As per request of the English Wikipedia community, we would like to explore creating a preference that can control the fixed/limited width of the site. No need to feature flag this.

Design

	Limited width on	Limited width off
Article (top of page)
Article (scrolled)
Special page (that is "full-width")

Acceptance criteria

Create a user preference which controls the content width (on/off)
Should appear in the skin settings like so:

Screen Shot 2022-10-05 at 12.12.54 PM.png (449×618 px, 81 KB)

Should not appear for skins it doesn't apply to e.g. legacy Vector, timeless. When those skins are selected, the preference should hide.
Defaults to on
When disabled, all pages should have no max width e.g. skin-vector-disable-max-width is applied to all pages

QA Results - Beta

AC	Status	Details
1	✅	T319447#8334266
2	✅	T319447#8334266
3	✅	T319447#8334266
4	✅	T319447#8334266
5	✅	~~T319447#8334266~~T319447#8343849

QA Results - Prod

AC	Status	Details
1	✅	T319447#8334270
2	✅	T319447#8334270
3	✅	T319447#8334270
4	✅	T319447#8334270
5	✅	~~T319447#8334270~~ T319447#8372998

Details

Subject	Repo	Branch	Lines +/-
Features: Make max width a feature	mediawiki/skins/Vector	master	+350 -110
Disable container max width when max width disabled	mediawiki/skins/Vector	master	+9 -0
Create user preference to turn fixed width on and off	mediawiki/skins/Vector	master	+71 -16
i18n: Rename some messages to follow common practice	mediawiki/skins/Vector	master	+6 -6
Follow-up 76d1135: Use better practice in the code	mediawiki/skins/Vector	wmf/1.40.0-wmf.6	+7 -14
Follow-up 76d1135: Use better practice in the code	mediawiki/skins/Vector	master	+7 -14

Customize query in gerrit

Related Objects
Search...

Status	Subtype	Assigned	Task
Resolved		ovasileva	T319376 [SPIKE] Would it be possible to build a toggle that allows users to expand and collapse the width of the page
Resolved		ovasileva	T319447 [M] Create user preference to turn fixed width on and off
Resolved		ovasileva	T321038 [[MediaWiki:Prefs-help-skin-limited-width/en]] (typo) replace "experinence" by "experience"
Resolved	PRODUCTION ERROR	Umherirrender	T321267 [subtask] PHP Warning: preg_match() expects parameter 2 to be string, array given (in Vector Hooks::shouldDisableMaxWidth)

Event Timeline

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

• alexhollender_WMF subscribed.Oct 5 2022, 11:23 PM

JCW555 subscribed.Oct 6 2022, 5:11 PM

Jdlrobson mentioned this in T319449: [M] Create toggle to control the fixed width of the content for Vector 2022 skin.Oct 7 2022, 5:41 PM

Agusbou2015 subscribed.Oct 7 2022, 9:38 PM

• Mabualruz claimed this task.Oct 11 2022, 2:13 PM

• Mabualruz moved this task from Upcoming to Ready for Development on the Web-Team-Backlog (Kanbanana-2022-23-Q2) board.

• Mabualruz moved this task from Ready for Development to Doing on the Web-Team-Backlog (Kanbanana-2022-23-Q2) board.

Change 841984 had a related patch set uploaded (by Mabualruz; author: Mabualruz):

[mediawiki/skins/Vector@master] Create user preference to turn fixed width on and off

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

Change 841985 had a related patch set uploaded (by Mabualruz; author: Mabualruz):

[mediawiki/core@master] Create user preference to turn fixed width on and off

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

• Mabualruz reassigned this task from • Mabualruz to Jdlrobson.Oct 13 2022, 12:01 PM

• Mabualruz moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-2022-23-Q2) board.

• Mabualruz subscribed.

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

[mediawiki/skins/Vector@master] Create user preference to turn fixed width on and off

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

ovasileva mentioned this in T319376: [SPIKE] Would it be possible to build a toggle that allows users to expand and collapse the width of the page.Oct 17 2022, 7:57 PM

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

[mediawiki/skins/Vector@master] Create user preference to turn fixed width on and off

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

Change 841984 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Create user preference to turn fixed width on and off

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

ReleaseTaggerBot added a project: MW-1.40-notes (1.40.0-wmf.6; 2022-10-17).Oct 17 2022, 9:00 PM

Jdlrobson reassigned this task from Jdlrobson to Edtadros.Oct 17 2022, 9:57 PM

Jdlrobson moved this task from Code Review to QA on the Web-Team-Backlog (Kanbanana-2022-23-Q2) board.

Jdlrobson moved this task from QA to Code Review on the Web-Team-Backlog (Kanbanana-2022-23-Q2) board.

Jdlrobson moved this task from Code Review to QA on the Web-Team-Backlog (Kanbanana-2022-23-Q2) board.

Change 843532 had a related patch set uploaded (by Func; author: Func):

[mediawiki/skins/Vector@master] Follow-up 76d1135: Use better practice in the code

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

Change 843532 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Follow-up 76d1135: Use better practice in the code

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

ReleaseTaggerBot edited projects, added MW-1.40-notes (1.40.0-wmf.7; 2022-10-24); removed MW-1.40-notes (1.40.0-wmf.6; 2022-10-17).Oct 18 2022, 4:00 AM

Change 843886 had a related patch set uploaded (by Func; author: Func):

[mediawiki/skins/Vector@wmf/1.40.0-wmf.6] Follow-up 76d1135: Use better practice in the code

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

Change 843886 merged by jenkins-bot:

[mediawiki/skins/Vector@wmf/1.40.0-wmf.6] Follow-up 76d1135: Use better practice in the code

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

Mentioned in SAL (#wikimedia-operations) [2022-10-18T07:35:18Z] <hashar> Rebased /srv/mediawiki-staging/php-1.40.0-wmf.6 for rMWde15f77aa428 ( T321021 ) and 0f8be847d9d81882ad5c1e54c2b45cc4d918eb97 ( T319447 )

Stashbot mentioned this in T321021: MediaWiki core CI failing: OutputPageTest::testAddBodyClasses.Oct 18 2022, 7:35 AM

ReleaseTaggerBot edited projects, added MW-1.40-notes (1.40.0-wmf.6; 2022-10-17); removed MW-1.40-notes (1.40.0-wmf.7; 2022-10-24).Oct 18 2022, 8:00 AM

GhostInTheMachine subscribed.Oct 18 2022, 8:49 AM

Jdlrobson added a subtask: T321038: [[MediaWiki:Prefs-help-skin-limited-width/en]] (typo) replace "experinence" by "experience".Oct 18 2022, 5:36 PM

Change 844019 had a related patch set uploaded (by Func; author: Func):

[mediawiki/skins/Vector@master] i18n: Rename some messages to follow common practice

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

Change 844019 merged by jenkins-bot:

[mediawiki/skins/Vector@master] i18n: Rename some messages to follow common practice

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

ReleaseTaggerBot edited projects, added MW-1.40-notes (1.40.0-wmf.7; 2022-10-24); removed MW-1.40-notes (1.40.0-wmf.6; 2022-10-17).Oct 19 2022, 5:00 PM

Test Result - Beta

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

Test Artifact(s):

QA Steps

✅ AC1: Create a user preference which controls the content width (on/off)
see below
✅ AC2: Should appear in the skin settings (see description)

Screen Shot 2022-10-20 at 2.17.27 PM.png (832×729 px, 135 KB)

✅ AC3: Should not appear for skins it doesn't apply to e.g. legacy Vector, timeless. When those skins are selected, the preference should hide.

Screen Recording 2022-10-20 at 2.17.51 PM.mov.gif (730×620 px, 317 KB)

✅ AC4: Defaults to on
Checked different user. Verified it was defaulted to ON.
✅ AC5: When disabled, all pages should have no max width e.g. skin-vector-disable-max-width is applied to all pages

Screen Shot 2022-10-20 at 2.19.51 PM.png (1×2 px, 503 KB)

Test Result - Prod

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

Test Artifact(s):

QA Steps

✅ AC1: Create a user preference which controls the content width (on/off)
see below
✅ AC2: Should appear in the skin settings (see description)
{F35605938}
✅ AC3: Should not appear for skins it doesn't apply to e.g. legacy Vector, timeless. When those skins are selected, the preference should hide.
{F35605940}
✅ AC4: Defaults to on
Checked different user. Verified it was defaulted to ON.
✅ AC5: When disabled, all pages should have no max width e.g. skin-vector-disable-max-width is applied to all pages
{F35605976}

Edtadros updated the task description. (Show Details)Oct 20 2022, 9:24 PM

it seems when the new limited-width mode disabled there’s still a max-width on the outer container. I think what people want is total full-width, for example:

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

[mediawiki/skins/Vector@master] Disable container max width when max width disabled

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

Jdlrobson moved this task from Needs More Work to Code Review on the Web-Team-Backlog (Kanbanana-2022-23-Q2) board.Oct 21 2022, 3:48 PM

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

[mediawiki/skins/Vector@master] Features: Make max width a feature

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

@Jdlrobson also realizing the sticky header has a max-width that should be removed as well:

default/current	max-width removed

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

[mediawiki/skins/Vector@master] Disable container max width when max width disabled

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

Jdlrobson added a comment.Oct 21 2022, 6:52 PM

This comment was removed by Jdlrobson.

Jdlrobson added a subtask: T321267: [subtask] PHP Warning: preg_match() expects parameter 2 to be string, array given (in Vector Hooks::shouldDisableMaxWidth).Oct 21 2022, 10:54 PM

Umherirrender closed subtask T321267: [subtask] PHP Warning: preg_match() expects parameter 2 to be string, array given (in Vector Hooks::shouldDisableMaxWidth) as Resolved.Oct 21 2022, 11:20 PM

@Jdlrobson I've added screenshots to the task description to hopefully clarify what is expected here

RoySmith subscribed.Oct 23 2022, 6:13 PM

In T319447#8336951, @alexhollender_WMF wrote:

@Jdlrobson I've added screenshots to the task description to hopefully clarify what is expected here

I guess this means we need to apply the change to the full page body rather than just our container, @Jdlrobson should be done now or in a followup?

I already mentioned this on the enwiki RFC, but the current implementation increases the width somewhat, but still enforces a limit. Gadget-wide-vector-2022 does the right thing. Here's some screenshots:

With limited width mode enabled

With limited width mode disabled

With Gadget-wide-vector-2022

Change 845618 abandoned by Jdlrobson:

[mediawiki/skins/Vector@master] Disable container max width when max width disabled

Reason:

This doesn't appear to be what we want. Revising.

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

Jdlrobson assigned this task to • Mabualruz.Oct 24 2022, 5:20 PM

Change 845652 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Features: Make max width a feature

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

Jdlrobson reassigned this task from • Mabualruz to Edtadros.Oct 24 2022, 9:37 PM

Jdlrobson moved this task from Code Review to QA on the Web-Team-Backlog (Kanbanana-2022-23-Q2) board.

cc @RoySmith @alexhollender_WMF the new version of the preference can now be tested on the beta cluster.

I tried it on beta. Looks good, thanks.

@Jdlrobson nice, looks correct to me:

Screen Shot 2022-10-24 at 6.00.49 PM.png (1×2 px, 985 KB)

Screen Shot 2022-10-24 at 6.01.06 PM.png (1×2 px, 700 KB)

Test Result - Beta

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

Test Artifact(s):

QA Steps

✅ AC5: When disabled, all pages should have no max width e.g. skin-vector-disable-max-width is applied to all pages

	Limited width on	Limited width off
Article (top of page)
Article (scrolled)
Special page (that is "full-width")

Edtadros updated the task description. (Show Details)Oct 25 2022, 10:16 PM

ovasileva closed subtask T321038: [[MediaWiki:Prefs-help-skin-limited-width/en]] (typo) replace "experinence" by "experience" as Resolved.Nov 1 2022, 5:37 PM

RoySmith unsubscribed.Nov 1 2022, 5:43 PM

LGoto renamed this task from Create user preference to turn fixed width on and off to [M] Create user preference to turn fixed width on and off.Nov 3 2022, 5:10 PM

Test Result - Prod

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

Test Artifact(s):

QA Steps

✅ AC5: When disabled, all pages should have no max width e.g. skin-vector-disable-max-width is applied to all pages

	Limited width on	Limited width off
Article (top of page)
Article (scrolled)
Special page (that is "full-width")

Edtadros updated the task description. (Show Details)Nov 7 2022, 4:15 AM

All done here!

It looks like the max-width is still applied when previewing an edit, in the CSS in Chrome Devtools I see that #wikiPreview has max-width: 60em set. @Jdlrobson, should this task be re-opened, or should I file a separate bug?

@Rchard2scout - thanks for the report! Could you open a new ticket?

cc @Samwilson - I thought we had a ticket for this, but perhaps not. I could only find T312963 which added the max-width. Sam: the ask is that the previews respect the full width preference (toggle), but perhaps there are good reasons not to do that (since you are previewing what the page looks like for the majority of people?)

Yeah that's a good point. So the preview should follow whatever the default value of the new preference is? i.e. if a site has it set to wide then preview should be wide even if the user has it set to narrow? And vice versa.

@Jdlrobson, @Samwilson - after doing some debugging today I'm seeing the following:

If the toggle is set to full width, the preview does respect the previous width setting and shows at full width
If the toggle is set to the default width, the preview shows at fixed width but is aligned left with the page

Did we make any changes here since this was reported? I agree that we might want to switch the preview to show the default width rather than the individual preference

	F35712775: Screenshot 2022-11-06 at 8.08.20 PM.png
	Nov 7 2022, 4:11 AM

	F35712774: Screenshot 2022-11-06 at 8.08.06 PM.png
	Nov 7 2022, 4:11 AM

	F35712772: Screenshot 2022-11-06 at 8.07.24 PM.png
	Nov 7 2022, 4:11 AM

	F35712770: Screenshot 2022-11-06 at 8.07.01 PM.png
	Nov 7 2022, 4:11 AM

	F35712778: Screenshot 2022-11-06 at 8.08.32 PM.png
	Nov 7 2022, 4:11 AM

	F35712768: Screenshot 2022-11-06 at 8.05.41 PM.png
	Nov 7 2022, 4:11 AM

	F35712780: Screenshot 2022-11-06 at 8.08.35 PM.png
	Nov 7 2022, 4:11 AM

	F35712766: Screenshot 2022-11-06 at 8.05.30 PM.png
	Nov 7 2022, 4:11 AM

[M] Create user preference to turn fixed width on and offClosed, ResolvedPublic1 Estimated Story PointsActions

Description

Background

Design

Acceptance criteria

QA Results - Beta

QA Results - Prod

Details

Related ObjectsSearch...

Event Timeline

Test Result - Beta

QA Steps

Test Result - Prod

QA Steps

Test Result - Beta

QA Steps

Test Result - Prod

QA Steps

[M] Create user preference to turn fixed width on and off
Closed, ResolvedPublic1 Estimated Story Points
Actions

Related Objects
Search...