Page MenuHomePhabricator
Create Task
Maniphest T349793

Replace legacy breakpoint value tokens in all Wikimedia web codebases
Closed, ResolvedPublic
Actions

Description

Background

As stated in T331403, from the 10 deprecated legacy tokens in WikimediaUI Base identified, changing the breakpoint variables has some disruptive potential. The change in user-interface presentation needs to be approached sensitively.

See current use of legacy breakpoint tokens (CodeSearch)

Goal

Why is it important?

  • We need to enable sunsetting WikimediaUI Base We went down a path, that removed this relation successfully
  • In order to not have devs looking at different sources of truth, needing to find their path towards Codex or even wrongly copying WikimediaUI Base vars over.
  • Having different breakpoints blocks further work like unified responsiveness on design systems patterns or infrastructure like the coming Grid. See T337282: Grid: Introduce a WIP Grid component for the Codex part of it.

What's changing?

  1. Tablet breakpoint is decreased by 80px, pushing lesser devices into a mobile phone only experience.
  2. Desktop and desktop-wide kicks in later, by 120px and 480px each.

Specifically latter change will need a closer look when testing the patches.

@width-breakpoint-tablet: 720px; /* Codex: @min-width-breakpoint-tablet is 640px */
@width-breakpoint-desktop: 1000px; /* Codex: @min-width-breakpoint-desktop is 1120px */

Update Codex 1.4.0. These breakpoints haven't been used anywhere in our environment again and were removed in 1.4.0.

// Removed in v1.4.0
@width-breakpoint-desktop-wide: 1200px; /* Codex: @min-width-breakpoint-desktop-wide is 1680px */
@width-breakpoint-desktop-extrawide: 2000px; /* Neither A nor B: unique value, no replacement suggested */

Note, that extrawide is not used in our environment. It was defined in Flow, but never got any other use case.

Acceptance criteria

Replace all mentioned tokens from

How to fix

  • Replace @width-breakpoint-* CodeSearch
  • Remove them from Codex
  • Remove them from mediawiki.skin.defaults.less

Non-blocking

Details

Related Changes in Gerrit:
SubjectRepoBranchLines +/-
docs: Amend to valid skin variable name for width breakpointmediawiki/coremaster+1 -1
docs: Replace outdated skin Less variable with current onemediawiki/services/chromium-rendermaster+2 -1
mediawiki.less: Remove deprecated `@width-breakpoint-*` Less variablesmediawiki/coremaster+2 -3
Update Codex from 1.7.0 to 1.8.0mediawiki/coremaster+596 -247
rcfilters: Replace deprecated breakpoint tokenmediawiki/coremaster+2 -2
tokens: Remove remaining deprecated `width-*` breakpoint tokensdesign/codexmain+0 -24
mediawiki.diff: Replace deprecated breakpoint tokenmediawiki/coremaster+2 -2
Reapply "styles: Replace deprecated breakpoints"mediawiki/skins/Vectormaster+2 -13
styles: Replace deprecated breakpointsmediawiki/skins/MinervaNeuemaster+88 -48
styles: Replace deprecated breakpointsmediawiki/skins/Vectormaster+0 -11
styles: Replace deprecated breakpointsmediawiki/coremaster+26 -22
styles: Replace deprecated breakpoint tokens with Codex defined onesmediawiki/extensions/FlaggedRevsmaster+1 -1
styles: Replace deprecated breakpoint tokens with Codex defined onesmediawiki/extensions/RelatedArticlesmaster+1 -1
styles: Replace deprecated breakpoint tokens with Codex defined onesmediawiki/extensions/WikimediaMessagesmaster+1 -1
Skin: Use standard tokens and import pathmediawiki/coremaster+9 -9
mediawiki.less: Remove deprecated extrawide breakpoint tokenmediawiki/coremaster+0 -1
Update Codex from 1.3.6 to 1.4.0mediawiki/coremaster+190 -114
tokens: Remove deprecated breakpoint tokensdesign/codexmain+0 -8
Show related patches Customize query in gerrit

Related Objects
Search...

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Jdlrobson renamed this task from Replace legacy breakpoint value tokens in (MediaWiki core and) Vector and MinervaNeue to Replace legacy breakpoint value tokens in all codebases.May 29 2024, 7:35 PM
Jdlrobson mentioned this in rSMWPfe08cb70c58c: Use new token.May 29 2024, 7:36 PM
Jdlrobson added projects: MediaWiki-skins-Mirage, FlaggedRevs, wikimedia-page-library.May 29 2024, 7:38 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson removed a project: Web-Team-Backlog-Archived (FY2023-24 Q4 Sprint 5).
Jdlrobson updated the task description. (Show Details)
Jdlrobson mentioned this in T366208: Replace legacy breakpoint value tokens in web team extensions.May 29 2024, 7:42 PM
Volker_E added a comment.EditedMay 29 2024, 9:37 PM

From conversations with both, @Jdlrobson and DST peer engineers, my understanding on how to move this over the finish line:

  1. We (DST) are responsible for reviewing and merging the core and the FlaggedRevs patch, former is the predecessor for Vector and MinervaNeue ones, latter is dependent on the Vector one
  2. Web team is responsible for reviewing & merging Vector and MF/MinervaNeue and RelatedArticles ones. Latter is dependent on the MinervaNeue one
  3. All four should be merged on the same day, preferably a few hours after a Tuesday's cut

Does that sound good for you @Jdlrobson?

gerritbot added a comment.May 29 2024, 9:42 PM

Change #1037181 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/extensions/RelatedArticles@master] styles: Replace deprecated breakpoint tokens with Codex defined ones

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

gerritbot added a comment.May 29 2024, 10:02 PM

Change #1037184 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/extensions/MobileFrontend@master] styles: Replace deprecated breakpoint tokens with Codex defined ones

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

Volker_E moved this task from Following to Up Next on the Design-System-Team board.May 29 2024, 10:03 PM
Jdlrobson added a comment.May 30 2024, 12:17 AM

Sounds like a plan!

Volker_E updated the task description. (Show Details)May 30 2024, 12:48 AM

Just for clarification, both mentioned skins, MediaWiki-skins-Mirage and Femiwikiskin have their own @width- variables defined, they are not in scope here.
It's better practice to orient on @min- and @max- like Codex latest does, but it's not necessary.

Volker_E updated the task description. (Show Details)May 30 2024, 12:52 AM
Volker_E renamed this task from Replace legacy breakpoint value tokens in all codebases to Replace legacy breakpoint value tokens in all Wikimedia web codebases.May 30 2024, 1:00 AM
Volker_E edited projects, added MediaWiki-extensions-WikimediaEvents, RelatedArticles, MobileFrontend; removed MediaWiki-skins-Mirage.
Volker_E updated the task description. (Show Details)
Volker_E updated the task description. (Show Details)
Volker_E updated the task description. (Show Details)May 30 2024, 4:42 PM
Volker_E updated the task description. (Show Details)May 31 2024, 1:14 AM
Volker_E updated the task description. (Show Details)May 31 2024, 1:21 AM
Od1n added a comment.Jun 4 2024, 5:54 PM

On a related note, could these breakpoint values be offered as CSS variables, just like we already have CSS variables for colors (e.g. --background-color-base)?

Use case: on frwiki there are some fine-tuned layout tweaks, for example using white-space: nowrap on large screens but not on small screens, and for consistency the same breakpoints as Codex are used, but currently the values have to be hardcoded, as there are no variables offered.

XanonymusX subscribed.Jun 4 2024, 6:50 PM

I was thinking the same thing, as I have always used the 720px breakpoint when making templates on dewiki responsive. Would be good to keep it variable based on skins.

Izno added a comment.Jun 4 2024, 7:34 PM

I would suggest waiting for container queries to be well supported so that we get basically-skin-agnostic break points, for the content use case. (See also T331227.) WMF will still need their current set but we basically won't once we have those. (We can hardcode the like 2 gadgets that actually play with the full layout e.g. the experimental Timeless and Vector responsive gadgets en.wp has.)

gerritbot added a comment.Jun 6 2024, 5:33 PM

Change #972327 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/skins/MinervaNeue@master] styles: Replace deprecated breakpoints

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

gerritbot added a comment.Jun 6 2024, 7:44 PM

Change #945931 merged by jenkins-bot:

[mediawiki/core@master] styles: Replace deprecated breakpoints

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

gerritbot added a comment.Jun 6 2024, 7:46 PM

Change #972331 merged by jenkins-bot:

[mediawiki/skins/Vector@master] styles: Replace deprecated breakpoints

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

gerritbot added a comment.Jun 6 2024, 7:46 PM

Change #1037150 merged by jenkins-bot:

[mediawiki/extensions/FlaggedRevs@master] styles: Replace deprecated breakpoint tokens with Codex defined ones

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

gerritbot added a comment.Jun 6 2024, 7:46 PM

Change #1037181 merged by jenkins-bot:

[mediawiki/extensions/RelatedArticles@master] styles: Replace deprecated breakpoint tokens with Codex defined ones

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

ReleaseTaggerBot edited projects, added MW-1.43-notes (1.43.0-wmf.9; 2024-06-11); removed MW-1.43-notes (1.43.0-wmf.8; 2024-06-04).Jun 6 2024, 8:00 PM
Jdlrobson mentioned this in T366859: Optimize Minerva mobile header for 640px-720px.Jun 7 2024, 12:14 AM
Od1n subscribed.Jun 7 2024, 1:23 AM
gerritbot added a comment.Jun 7 2024, 11:20 PM

Change #972327 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] styles: Replace deprecated breakpoints

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

Jdlrobson added a comment.EditedJun 7 2024, 11:35 PM

Thanks for your help on this @Volker_E and for flagging that it needed review from the web team - although at first glance these looked trivial you were right to flag this as more risky than most token changes!

It looks like this work uncovered some problems with the Minerva code, that we wouldn't have known about without doing this. I'm happy we managed to decouple those things and bring skins more in line with the design system team - that's going to reduce a lot of bugs on the long run. There are six visual changes with the above patch but all are improvements so it is an indication we are heading in the right direction. Thanks for the fruitful collaboration.

We will look at the last patch for Vector on Monday 💪

Volker_E updated the task description. (Show Details)Jun 7 2024, 11:56 PM
Volker_E updated the task description. (Show Details)
gerritbot added a comment.Jun 8 2024, 12:08 AM

Change #1040301 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] tokens: Remove remaining deprecated `width-*` breakpoint tokens

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

TheDJ subscribed.EditedJun 8 2024, 8:21 AM

Related, noticed that Echo defines custom breakpoint ‘@specialpage-hd-width: 982px;’

After T337954 we might now be able to replace that as well

Volker_E added a comment.Jun 8 2024, 11:50 AM
In T349793#9873038, @TheDJ wrote:

Related, noticed that Echo defines custom breakpoint ‘@specialpage-hd-width: 982px;’

After T337954 we might now be able to replace that as well

Nice catch! I think it's better to tackle those in a different task. Researching also uncovered a few more similar, but slightly different breakpoints that would benefit from unification: https://codesearch-beta.wmcloud.org/search/?q=%5C%40media+all+and+%5C%28+min-width&files=&excludeFiles=&repos=#Extension:FlaggedRevs

Volker_E updated the task description. (Show Details)Jun 8 2024, 7:18 PM
gerritbot added a comment.Jun 10 2024, 8:01 PM

Change #1040085 had a related patch set uploaded (by Jdlrobson; author: VolkerE):

[mediawiki/skins/Vector@master] Reapply "styles: Replace deprecated breakpoints"

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

Volker_E added a comment.Jun 10 2024, 9:35 PM

Just for completion, an issue in the original implementation of Codex carrying MediaWiki skin variables was uncovered by the work here: T367103: Media queries using max width breakpoints are not working in Monobook and Fallback skin

gerritbot added a comment.Jun 10 2024, 11:32 PM

Change #1040085 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Reapply "styles: Replace deprecated breakpoints"

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

Jdlrobson updated the task description. (Show Details)Jun 11 2024, 12:00 AM
Jdlrobson closed subtask T366208: Replace legacy breakpoint value tokens in web team extensions as Resolved.Jun 13 2024, 1:07 AM
gerritbot added a comment.Jun 13 2024, 8:17 PM

Change #1043218 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/core@master] mediawiki.diff: Replace deprecated breakpoint token

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

gerritbot added a comment.Jun 13 2024, 9:12 PM

Change #1043218 merged by jenkins-bot:

[mediawiki/core@master] mediawiki.diff: Replace deprecated breakpoint token

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

ReleaseTaggerBot edited projects, added MW-1.43-notes (1.43.0-wmf.10; 2024-06-18); removed MW-1.43-notes (1.43.0-wmf.9; 2024-06-11).Jun 13 2024, 10:00 PM
gerritbot added a comment.Jun 13 2024, 10:15 PM

Change #1043269 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/core@master] rcfilters: Replace deprecated breakpoint token

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

gerritbot added a comment.Jun 13 2024, 10:38 PM

Change #1040301 merged by jenkins-bot:

[design/codex@main] tokens: Remove remaining deprecated `width-*` breakpoint tokens

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

gerritbot added a comment.Jun 13 2024, 10:48 PM

Change #1043269 merged by jenkins-bot:

[mediawiki/core@master] rcfilters: Replace deprecated breakpoint token

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

AlbanGeller subscribed.Jun 15 2024, 2:51 AM
AlbanGeller awarded a token.Jun 15 2024, 2:57 AM
AlbanGeller added a comment.Jun 15 2024, 5:41 PM

How can one change the viewport back to 1000px?

AlbanGeller mentioned this in T367643: Font size decrease in Vector 2010 skin after viewport change to width=1120.Jun 15 2024, 9:01 PM
Guycn2 subscribed.Jun 19 2024, 12:05 AM
gerritbot added a comment.Jun 25 2024, 9:23 PM

Change #1049640 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/core@master] Update Codex from 1.7.0 to 1.8.0

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

PatchDemoBot added a comment.Jun 25 2024, 9:34 PM

Test wiki created on Patch demo by EGardner (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/f74be9bc8e/w

gerritbot added a comment.Jun 25 2024, 10:25 PM

Change #1049640 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from 1.7.0 to 1.8.0

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

Volker_E updated the task description. (Show Details)Jun 26 2024, 2:03 PM
gerritbot added a comment.Jun 26 2024, 2:31 PM

Change #1049955 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/core@master] mediawiki.less: Remove deprecated `@width-breakpoint-*` Less variables

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

gerritbot added a comment.Jun 26 2024, 5:47 PM

Change #1049955 merged by jenkins-bot:

[mediawiki/core@master] mediawiki.less: Remove deprecated `@width-breakpoint-*` Less variables

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

ReleaseTaggerBot edited projects, added MW-1.43-notes (1.43.0-wmf.12; 2024-07-02); removed MW-1.43-notes (1.43.0-wmf.10; 2024-06-18).Jun 26 2024, 6:00 PM
CCiufo-WMF moved this task from Up Next to Backlog on the Design-System-Team board.Aug 27 2024, 4:21 PM
AlbanGeller added a subtask: T367643: Font size decrease in Vector 2010 skin after viewport change to width=1120.Sep 10 2024, 7:04 PM
Jdlrobson closed subtask T367643: Font size decrease in Vector 2010 skin after viewport change to width=1120 as Declined.Sep 25 2024, 12:26 AM
Volker_E updated the task description. (Show Details)Sep 26 2024, 12:53 PM
Volker_E updated the task description. (Show Details)
gerritbot added a comment.Sep 26 2024, 1:10 PM

Change #1075916 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/services/chromium-render@master] docs: Replace outdated skin Less variable with current one

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

gerritbot added a comment.Sep 26 2024, 1:15 PM

Change #1075916 merged by jenkins-bot:

[mediawiki/services/chromium-render@master] docs: Replace outdated skin Less variable with current one

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

Volker_E updated the task description. (Show Details)Sep 26 2024, 3:19 PM
Iniquity subscribed.EditedSep 27 2024, 5:13 AM

Hi! :) Just to clarify, is this task not subject to breakpoint changes? Or does the menu appear according to new breakpoints?
T330532: [Design] Re-evaluate breakpoint for hiding page tools/toc to keep content width more consistent

gerritbot added a comment.Oct 1 2024, 3:38 PM

Change #1077052 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/core@master] docs: Amend to valid skin variable name for width breakpoint

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

Volker_E added a comment.Oct 1 2024, 3:43 PM
In T349793#10181974, @Iniquity wrote:

Hi! :) Just to clarify, is this task not subject to breakpoint changes? Or does the menu appear according to new breakpoints?
T330532: [Design] Re-evaluate breakpoint for hiding page tools/toc to keep content width more consistent

Hi, no it's probably not. The task linked could point at either a wrong breakpoint choice or a gap in our current breakpoints or none of all of them. Will provide the current tokens breakpoints there.

Volker_E updated the task description. (Show Details)Oct 1 2024, 5:40 PM
gerritbot added a comment.Oct 1 2024, 5:53 PM

Change #1077052 merged by jenkins-bot:

[mediawiki/core@master] docs: Amend to valid skin variable name for width breakpoint

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

ReleaseTaggerBot edited projects, added MW-1.43-notes (1.43.0-wmf.26; 2024-10-08); removed MW-1.43-notes (1.43.0-wmf.12; 2024-07-02).Oct 1 2024, 6:00 PM
Iniquity added a comment.Oct 1 2024, 6:15 PM
In T349793#10192449, @Volker_E wrote:
In T349793#10181974, @Iniquity wrote:

Hi! :) Just to clarify, is this task not subject to breakpoint changes? Or does the menu appear according to new breakpoints?
T330532: [Design] Re-evaluate breakpoint for hiding page tools/toc to keep content width more consistent

Hi, no it's probably not. The task linked could point at either a wrong breakpoint choice or a gap in our current breakpoints or none of all of them. Will provide the current tokens breakpoints there.

Thanks for the answer :)

Od1n added a comment.Oct 26 2024, 12:43 AM

There are a few legacy breakpoints remaining, but not many: Code search.

Notably, addressing these in mediawiki-services-mobileapps would nicely complement fixing https://phabricator.wikimedia.org/T172078#8533594.

Jdlrobson moved this task from Backlog to Tech debt on the MinervaNeue board.Jan 2 2025, 9:38 PM
Jdlrobson moved this task from Untriaged to team:other on the MobileFrontend board.Jan 2 2025, 11:35 PM
Volker_E closed this task as Resolved.Feb 13 2025, 4:37 AM
Volker_E claimed this task.
Volker_E mentioned this in T386310: Replace equivalent numeric pixel values in JS window.matchMedia() occurrences with Codex breakpoint token values.
Volker_E removed a project: Patch-For-Review.
Volker_E updated the task description. (Show Details)
PatchDemoBot added a comment.May 20 2025, 12:12 PM

Test wiki on Patch demo by EGardner (WMF) using patch(es) linked to this task was deleted:

https://patchdemo-legacy.wmcloud.org/wikis/f74be9bc8e/w/

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