Page MenuHomePhabricator

Vector will not use the `legacy` ResourceLoaderSkinModule
Closed, ResolvedPublic2 Estimated Story Points

Assigned To
Authored By
Jdlrobson
Mar 30 2021, 10:11 PM
Referenced Files
F34585221: Screen Shot 2021-08-05 at 6.26.59 AM.png
Aug 5 2021, 1:29 PM
F34585223: Cat righting reflex - Wikipedia.pdf
Aug 5 2021, 1:29 PM
F34585213: Screen Shot 2021-08-05 at 6.23.41 AM.png
Aug 5 2021, 1:29 PM
F34585224: Sled dog - Wikipedia.pdf
Aug 5 2021, 1:29 PM
F34585219: Screen Shot 2021-08-05 at 6.25.45 AM.png
Aug 5 2021, 1:29 PM
F34585215: Screen Shot 2021-08-05 at 6.24.50 AM.png
Aug 5 2021, 1:29 PM
F34570887: Screen Shot 2021-07-30 at 4.13.42 PM.png
Jul 30 2021, 11:22 PM
F34570904: Sled dog - Wikipedia, the free encyclopedia.pdf
Jul 30 2021, 11:22 PM

Description

The legacy feature of ResourceLoaderSkinModule will be deprecated in the 1.36 release (see T89981)
In 1.37 vector will cherry pick the styles it needs from the new features provided in https://www.mediawiki.org/wiki/Manual:ResourceLoaderSkinModule
This will reduce the CSS on the critical path by around 2kb.

https://www.mediawiki.org/wiki/Manual:ResourceLoaderSkinModule#For_skins_deprecating_the_legacy_feature as a guide to make the migration.

Blocker: T278894

Acceptance criteria

  • Vector modern drops legacy feature
  • A user notice goes out to gadgets to fix gadgets using this style (testing in modern Vector)
  • Vector legacy will drop the legacy feature

QA steps

NOTE: This QA is time sensitive and must take place before July 29th.

Please compare several pages in production (en.wikipedia.org) to beta cluster (https://en.wikipedia.beta.wmflabs.org/)

Developer notes

I'm fairly confident this should be drama free. Visual impacts to the Vector skin are unlikely but there is an unlikely but small risk that this causes minor impact to user gadgets.

QA Results - Beta

ACStatusDetails
1T278896#7238476

QA Results - Beta (retest)

ACStatusDetails
1T278896#7249819

QA Results - Prod

ACStatusDetails
1T278896#7263220

Event Timeline

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

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

[mediawiki/skins/Vector@master] [modern/performance] Simplify Vector styles

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

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

[mediawiki/skins/Vector@master] [modern/performance] Simplify Vector styles

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

I can predict one regression ahead of time: red links. Vector currently uses ba0000 from legacy, which will change to d33 when only using elements. T213778 states that this shouldn't change, so the definition for a.new should be added to typography.less.

Thanks @mainframe I've started documenting the legacy deprecation on https://m.mediawiki.org/wiki/Manual:ResourceLoaderSkinModule#For_skins_deprecating_the_legacy_feature
Please feel free to edit if you think of anything I've missed.

Oh and perhaps we'll want to User-notice this for tech news. Something like:

Vector is no longer using some outdated styles. This should not have any visible effect as the styles had been moved earlier.

Especially because things like T279099 pop up, and if we've got something to shepherd them to, we can spot the regressions easier.

Thanks @mainframe I've started documenting the legacy deprecation on https://m.mediawiki.org/wiki/Manual:ResourceLoaderSkinModule#For_skins_deprecating_the_legacy_feature
Please feel free to edit if you think of anything I've missed.

I'll have a more in-depth look later, but I made some adjustments.

Krinkle added a subscriber: Krinkle.

LGTM. It seems the deprecatation itself of legacy is being tracked at ResourceLoaderSkinModule, so I'll untag us here. If not, then perhaps that's worth tracking as its own follow-up Technical-Debt (Deprecation process) task to tag RL+Perf with.

Jdlrobson added a subscriber: ovasileva.

@ovasileva good opportunity to improve performance on Vector. Please prioritize at your leisure. Happy to talk through in more detail.

Jdlrobson lowered the priority of this task from High to Medium.Jul 21 2021, 4:21 PM

Adjusting priority compared to other patches in code review.

Change 675918 merged by jenkins-bot:

[mediawiki/skins/Vector@master] [modern/performance] Simplify Vector styles

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

Test Result - Beta

Status: ❌ Fail
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

Please compare several pages in production (en.wikipedia.org) to beta cluster (https://en.wikipedia.beta.wmflabs.org/)

✅ AC1: Check categories at bottom of the page render identically

BetaEnwiki
Screen Shot 2021-07-26 at 6.05.05 PM.png (1×1 px, 515 KB)
Screen Shot 2021-07-26 at 6.05.11 PM.png (1×1 px, 506 KB)

✅ AC2: Please check headings in page render identically

BetaEnwiki
Screen Shot 2021-07-26 at 6.08.10 PM.png (1×1 px, 543 KB)
Screen Shot 2021-07-26 at 6.08.15 PM.png (1×1 px, 673 KB)

✅ AC3: Please check thumbnails in page render identically

BetaEnwiki
Screen Shot 2021-07-26 at 6.11.17 PM.png (1×1 px, 819 KB)
Screen Shot 2021-07-26 at 6.11.21 PM.png (1×1 px, 765 KB)

✅ AC4: Please check any lists in page render identically (make sure to test numbered lists as well as unordered lists)

BetaEnwiki
Screen Shot 2021-07-26 at 6.55.45 PM.png (1×1 px, 474 KB)
Screen Shot 2021-07-26 at 6.55.48 PM.png (1×1 px, 516 KB)

❌ AC5: Please check all the above in the print version

BetaEnwiki

Beta has the following issues:

  1. Sidebar menu is printed
  2. Top Menu items are printed

Screen Shot 2021-07-26 at 7.11.53 PM.png (157×901 px, 27 KB)

Screen Shot 2021-07-26 at 7.12.56 PM.png (1×1 px, 118 KB)

Jdlrobson added a subscriber: Edtadros.

Very nice catch Edward! On it...

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

[mediawiki/skins/Vector@master] Restore print and message box styles

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

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

[mediawiki/skins/Vector@wmf/1.37.0-wmf.16] Restore print, links, table and message box styles

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

Change 708307 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Restore print, links, table and message box styles

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

This should shortly be ready for another round of QA on the beta cluster.

Change 708220 merged by jenkins-bot:

[mediawiki/skins/Vector@wmf/1.37.0-wmf.16] Restore print, links, table and message box styles

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

Mentioned in SAL (#wikimedia-operations) [2021-07-27T23:53:51Z] <thcipriani@deploy1002> Synchronized php-1.37.0-wmf.16/skins/Vector: Backport: [[gerrit:708220|Restore print, links, table and message box styles (T278896)]] (duration: 01m 07s)

Change 708425 had a related patch set uploaded (by DannyS712; author: DannyS712):

[mediawiki/skins/Vector@master] Revert \"[modern/performance] Simplify Vector styles\"

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

Hi. Can I understand from this that mw-content-ltr and mw-content-rtl classes will not work any more in the new Vector? Our wiki has 26,582 uses of these classes, and they show noncence now. Why did you do this? Why did not you announced a year before, so we can fix all the uses? What other classes are broken? Thank you.

Hi. Can I understand from this that mw-content-ltr and mw-content-rtl classes will not work any more in the new Vector? Our wiki has 26,582 uses of these classes, and they show noncence now. Why did you do this? Why did not you announced a year before, so we can fix all the uses? What other classes are broken? Thank you.

Yes, we are moving away from mw-content-(ltr|rtl) classes (without dir and lang attributes) and encouraging use of the dir attribute inside HTML which is better for screen readers and accessibility as well as being easier to support. When you say "our wiki" can you clarify which wiki you mean and provide some examples? I would suggest these wikis ship these styles in MediaWiki:Vector.css as a relatively straightforward solution.

It's a disaster. I'm talking about hewiki. The examples are all our sources. We use

==References==
* Some local article
* Some local article
<div class="mw-content-rtl">
* Some article from US
* Some article from Britain
</div>

We can change this to dir attribute, but as I already said, you should give us a year. Working on common.css.

We can change this to dir attribute, but as I already said, you should give us a year. Working on common.css.

Yep using Mediawiki:Vector.css would be the way to go for now if you are saying this problem is widespread.

.mw-content-ltr { dir: ltr; }
.mw-content-rtl { dir: rtl; }

The following markup would fix th

==References==
* Some local article
* Some local article
<div class="mw-content-rtl" dir="rtl">
* Some article from US
* Some article from Britain
</div>

It's a disaster.

Thanks for bringing this issue to my attention. I'll create a User-notice to make sure other projects are notified about this particular issue. I wouldn't say this is a disaster :). On the long term by providing HTML markup for our users, they'll have a much better experience of the site. The site should also be loading faster due to the reduction of unnecessary CSS.

Already worked on this, before spiking with you. It is for sure disaster. There are many thousands of broken articles. Every user knows how to do this, and they all will need to learn it again, while most of them do not know html and css.

I have created T287701. Thanks for reporting.

Already worked on this, before spiking with you. It is for sure disaster. There are many thousands of broken articles. Every user knows how to do this, and they all will need to learn it again, while most of them do not know html and css.

I would suggest on the longer term a template would be an appropriate solution to this. Hardcoding HTML inside wikitext doesn't seem like an ideal solution.

Change 708425 abandoned by Jdlrobson:

[mediawiki/skins/Vector@master] Revert \"[modern/performance] Simplify Vector styles\"

Reason:

Fixed in GlobalWatchlist extension.

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

Test Result - Beta

Status: ✅ Pass
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

Please compare several pages in production (en.wikipedia.org) to beta cluster (https://en.wikipedia.beta.wmflabs.org/)

✅ AC1: Check categories at bottom of the page render identically

BetaEnwiki
Screen Shot 2021-07-30 at 4.09.15 PM.png (1×885 px, 428 KB)
Screen Shot 2021-07-30 at 4.09.20 PM.png (1×929 px, 397 KB)

✅ AC2: Please check headings in page render identically

BetaEnwiki
Screen Shot 2021-07-30 at 4.13.42 PM.png (1×885 px, 462 KB)
Screen Shot 2021-07-30 at 4.13.45 PM.png (1×885 px, 476 KB)

✅ AC3: Please check thumbnails in page render identically

BetaEnwiki
Screen Shot 2021-07-30 at 4.16.15 PM.png (1×885 px, 754 KB)
Screen Shot 2021-07-30 at 4.16.21 PM.png (1×929 px, 649 KB)

✅ AC4: Please check any lists in page render identically (make sure to test numbered lists as well as unordered lists)

BetaEnwiki
Screen Shot 2021-07-30 at 4.15.22 PM.png (1×885 px, 367 KB)
Screen Shot 2021-07-30 at 4.15.25 PM.png (1×885 px, 385 KB)

✅ AC5: Please check all the above in the print version

BetaEnwiki

Test Result - Prod

Status: ✅ Pass
Environment: enwiki
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

Please compare several pages in production (en.wikipedia.org) to beta cluster (https://en.wikipedia.beta.wmflabs.org/)

✅ AC1: Check categories at bottom of the page render correctly

Screen Shot 2021-08-05 at 6.23.41 AM.png (935×1 px, 328 KB)

✅ AC2: Please check headings in page render correctly

Screen Shot 2021-08-05 at 6.24.50 AM.png (936×1 px, 459 KB)

✅ AC3: Please check thumbnails in page render correctly

Screen Shot 2021-08-05 at 6.25.45 AM.png (935×1 px, 510 KB)

✅ AC4: Please check any lists in page render identically (make sure to test numbered lists as well as unordered lists)

Screen Shot 2021-08-05 at 6.26.59 AM.png (1×1 px, 343 KB)

✅ AC5: Please check all the above in the print version

Ran through QA steps on prod - saw the same things as Edward noted during his QA - lgtm!

cjming updated the task description. (Show Details)
cjming added a subscriber: cjming.