Page MenuHomePhabricator
Create Task
Maniphest T345766

Split the Vector "common" CSS module into two: one for Legacy Vector and one for Vector 2022
Closed, ResolvedPublic3 Estimated Story PointsBUG REPORT
Actions

Description

Due to the pervasive nature of font-size values in CSS (being defined in relative em's and used for values other than text, such as spacing etc.) there is a risk that changing font sizes in Vector 2022 could affect legacy Vector.

The chart below illustrates the interdependence between legacy and modern Vector CSS

Font size entry points in Vector.jpg (1×1 px, 160 KB)

tldr; That big thing in the middle called variables.less should be gone.

We should separate the CSS for legacy & Vector 2022 as much as possible. To do this, we need to:

  1. Remove the vector/resources/common module and copy the styles over to the skins.vector.styles and skins.vector.styles.legacy modules instead.
  2. Remove common variables.less file
    • Copy the variables into mediawiki.less/vector/mediawiki.skins.variables.less and mediawiki.less/vector-2022/mediawiki.skins.variables.less instead.

There's some room for code optimization here:

  • We should determine if mixins still need to be shared between legacy & modern Vector
  • We can remove variables that are not used by legacy Vector from it's respective variables file.

A/C

  • The Vector/resources/common folder no longer exists.
  • There are no visual changes caused by this refactor.
  • There are no bytesize increases caused by this refactor.

Details

SubjectRepoBranchLines +/-
Remove common CSS modulemediawiki/skins/Vectormaster+5 -938
Copy common styles into legacy vectormediawiki/skins/Vectormaster+820 -10
Copy common styles into vectormediawiki/skins/Vectormaster+822 -12
Remove unnecessary imports in component stylesheets, make variable and mixin imports consistentmediawiki/skins/Vectormaster+5 -87
Remove common module, merge files into skins.vector.styles and skins.vector.styles.legacymediawiki/skins/Vectormaster+113 -221
Customize query in gerrit

Related Objects
Search...

Event Timeline

Jdrewniak created this task.Sep 6 2023, 6:16 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 6 2023, 6:16 PM
Jdrewniak mentioned this in T344515: Typography: Audit font sizes across Vector 2022 and Minerva.Sep 6 2023, 6:18 PM
Jdrewniak added a subtask: T261334: [Goal] Font-size: Use `rem` in modern Vector.Sep 11 2023, 4:29 PM
Jdrewniak added a subtask: T346062: [Visual change/refactor] Change 13px font-size in Vector toolbar to 14px.
Jdlrobson triaged this task as High priority.Sep 13 2023, 4:29 PM
Jdlrobson moved this task from Incoming to Web Team FY2023-24 Q2 Sprint 1 on the Web-Team-Backlog board.
Jdlrobson edited projects, added Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 1); removed Web-Team-Backlog.
ovasileva subscribed.Sep 14 2023, 5:48 PM
ovasileva set the point value for this task to 3.Sep 14 2023, 5:50 PM
ovasileva moved this task from Web Team FY2023-24 Q2 Sprint 1 to Web Team FY2023-24 Q1 Sprint 6.5 (Quarter wrap up) on the Web-Team-Backlog board.Sep 20 2023, 5:18 PM
ovasileva edited projects, added Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 6.5 (Quarter wrap up)); removed Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 1).
ovasileva moved this task from Incoming to Ready for Development on the Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 6.5 (Quarter wrap up)) board.Sep 25 2023, 5:27 PM
bwang claimed this task.Sep 28 2023, 4:38 PM
bwang moved this task from Ready for Development to Doing on the Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 6.5 (Quarter wrap up)) board.
gerritbot added a comment.Sep 29 2023, 6:18 PM

Change 962068 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Remove common module, merge files into skins.vector.styles and skins.vector.styles.legacy

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

gerritbot added a project: Patch-For-Review.Sep 29 2023, 6:18 PM
gerritbot added a comment.Oct 2 2023, 5:57 PM

Change 962659 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Remove unnecessary imports in component stylesheets, make variable and mixin imports consistent

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

gerritbot added a comment.Oct 2 2023, 6:31 PM

Change 962068 abandoned by Bernard Wang:

[mediawiki/skins/Vector@master] Remove common module, merge files into skins.vector.styles and skins.vector.styles.legacy

Reason:

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

gerritbot added a comment.Oct 2 2023, 6:31 PM

Change 962667 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Copy common styles into vector

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

gerritbot added a comment.Oct 2 2023, 6:31 PM

Change 962668 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Copy common styles into legacy vector

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

bwang removed bwang as the assignee of this task.Oct 2 2023, 6:40 PM
bwang moved this task from Doing to Code Review on the Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 6.5 (Quarter wrap up)) board.
bwang subscribed.
gerritbot added a comment.Oct 2 2023, 7:58 PM

Change 962685 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Remove common CSS module

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

Jdlrobson assigned this task to Jdrewniak.Oct 3 2023, 5:12 PM
gerritbot added a comment.Oct 3 2023, 9:35 PM

Change 962659 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Remove unnecessary imports in component stylesheets, make variable and mixin imports consistent

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

ReleaseTaggerBot added a project: MW-1.41-notes (1.41.0-wmf.30; 2023-10-10).Oct 3 2023, 10:00 PM
gerritbot added a comment.Oct 5 2023, 7:46 PM

Change 962667 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Copy common styles into vector

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

gerritbot added a comment.Oct 5 2023, 8:58 PM

Change 962668 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Copy common styles into legacy vector

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

gerritbot added a comment.Oct 5 2023, 11:52 PM

Change 962685 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Remove common CSS module

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

Maintenance_bot removed a project: Patch-For-Review.Oct 6 2023, 12:10 AM
Jdlrobson reassigned this task from Jdrewniak to Edtadros.Oct 6 2023, 8:58 PM
Jdlrobson moved this task from Code Review to QA on the Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 6.5 (Quarter wrap up)) board.
Edtadros reassigned this task from Edtadros to Jdlrobson.Oct 9 2023, 8:56 PM
Edtadros added subscribers: Jdlrobson, Edtadros.

@Jdlrobson, I'm not sure how to test this.

Jdlrobson closed this task as Resolved.Oct 10 2023, 3:26 PM
Jdlrobson moved this task from QA to Ready for Signoff on the Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 6.5 (Quarter wrap up)) board.

This is covered by our Pixel tests. Both old Vector and modern Vector look good to me, when I compare origin/wmf/1.41.0-wmf.30 against master.

.

Jdlrobson mentioned this in T348530: Less_Exception_Compiler: variable @min-width-desktop-wide is undefined in file /srv/mediawiki/php-1.41.0-wmf.30/skins/Vector/skinStyles/ext.echo.styles.alert.less in ext.echo.styles.alert.less on line 22, column 2320.Oct 10 2023, 6:54 PM
Ammarpad mentioned this in T348572: Wrong font size in OOUI dropdowns in Vector.Oct 10 2023, 7:30 PM
Edtadros mentioned this in T346851: Verify 1.41.0-wmf.30 deployment.Oct 16 2023, 5:15 PM
Jdlrobson added a project: Verified.Oct 16 2023, 5:24 PM
Volker_E subscribed.Oct 19 2023, 7:53 AM
Volker_E added a comment.Oct 19 2023, 8:13 AM

After I've been using the week of no new code work on Codex to get back to my favorite topics of getting rid of legacy and non-standard values across codebases in preparation for a number of great possible next achievements as preparing sunsetting WikimediaUI Base and introducing a standard Grid, I've stumbled today into this task.
I've provided over the course of today three simplifying patches, the second one in the chain for T331403.

There is a small mistake in the diagram on top, the skin.defaults are never used in Vectors. The diagram is correct though that Vector and Vector legacy are using the different Codex theme files, where the legacy one has solely been introduced for Vector's cause. Assigned further down, in the skin's power is the reference to those two theme files.

There's a broader and in my opinion problematic misconception altogether. The skin's mediawiki.skin.variables files are per definition not extendable. You can't add custom vars to the _mediawiki_.skin.variables files.
All the vars and all the naming is centralized in order to

  • have a standard nomenclature that our multiverse can rely and align on
  • have values that work in my extension in every skin
  • imply a feedback channel into possible skin extension needs to expand (or contract) the available skin variables in case something is so common and missing

It It should be the exception not the rule to have skin specific variables and they have to also live elsewhere in order to clarify their scope immediately.

So a shared variables file will, in current ResourceLoader technical setting of how the skin variables are meant to work be necessary!

Jdlrobson added a comment.Nov 1 2023, 9:05 PM

I assume T349359 will address the issues @Volker_E raises above. Please open a new ticket for any other concerns we may have.

• Mabualruz closed subtask T346062: [Visual change/refactor] Change 13px font-size in Vector toolbar to 14px as Resolved.Nov 2 2023, 10:08 PM
Guycn2 reopened subtask T346062: [Visual change/refactor] Change 13px font-size in Vector toolbar to 14px as Open.Nov 8 2023, 5:24 AM
Aklapper closed subtask T346062: [Visual change/refactor] Change 13px font-size in Vector toolbar to 14px as Resolved.Nov 8 2023, 8:07 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