MonoBook uses 5 ResourceLoader modules, only needs 2.
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	Jdlrobson
	Jun 24 2021, 5:53 PM

Description

MonoBook supports two modes - a responsive mode and a non-responsive mode.

We can reduce this to 2 modules. I believe this is a small performance win for the startup module, and it would also make the code easier to follow, since there are some subtle differences between the responsive and non-responsive mode that are not clear in the current form.

It uses 2 modules which it conditionally loads if Echo and/or ULS is installed. It has 2 different stylesheet modules which share a lot of overlap. Simple changes to the client should suffice to provide the same end result.

Please see patch for the proposed work.

QA steps

Test 1

Go to user preferences and enable MonoBook as your default skin. Make sure the box "Enable responsive MonoBook design" is ticked. Save.
Visit https://en.wikipedia.beta.wmflabs.org/wiki/Franck_Montagny
Confirm that what you see matches
. If there are any discrepancies, not them, no matter how small.
Print the document as a pdf and confirm that the PDF you generate matches
Franck Montagny - Wikipedia, the free encyclopedia.pdf246 KBDownload
. If there are any discrepancies, not them, no matter how small.
Resize your web browser to 450px. Confirm what you see matches the screenshot below.If there are any discrepancies, not them, no matter how small.

Screen Shot 2021-07-29 at 4.45.28 PM.png (1×900 px, 266 KB)

Test 2

Go back to user preferences and untick the box "Enable responsive MonoBook design". Save.
Visit https://en.wikipedia.beta.wmflabs.org/wiki/Franck_Montagny
Confirm that what you see matches
. Note, you should not see anything different to the results of the above test. If there are any discrepancies, not them, no matter how small.

Print the document as a pdf and confirm that the PDF matches the PDF in test 2. If there are any discrepancies, not them, no matter how small.
Resize your web browser to 450px. Confirm what you see matches the screenshot below.If there are any discrepancies, not them, no matter how small.

Screen Shot 2021-07-29 at 4.49.55 PM.png (1×894 px, 436 KB)

QA Results - Beta

AC	Status	Details
1	✅	T285492#7274518
2	❌	T285492#7274518
3	❌	T285492#7274518
4	✅	T285492#7274518
5	❓	T285492#7274518
6	❓	T285492#7274518

QA Results - Prod

AC	Status	Details
1	✅	T285492#7285672
2	✅	T285492#7285672
3	❌	T285492#7285672
4	✅	T285492#7285672
5	✅	T285492#7285672
6	✅	T285492#7285672

Details

Related Changes in Gerrit:

	Subject	Repo	Branch	Lines +/-
	Reduce ResourceLoader modules used by Monobook	mediawiki/skins/MonoBook	master	+96 -179

Customize query in gerrit

Related Objects

Mentioned In: T288788: Regression: Monobook shows non-existing own user page in user tools bar as blue link instead of red link
T97892: Remove capitalize-all-nouns from MW core and move it to the Monobook skin
rSMNBc1ca90ce4b58: Reduce ResourceLoader modules used by Monobook

Event Timeline

Jdlrobson created this task.Jun 24 2021, 5:53 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 24 2021, 5:53 PM

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

[mediawiki/skins/MonoBook@master] Reduce ResourceLoader modules used by Monobook

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

gerritbot added a project: Patch-For-Review.Jun 24 2021, 5:54 PM

Jdlrobson updated the task description. (Show Details)Jun 24 2021, 5:54 PM

Krinkle edited projects, added Performance-Team (Radar); removed Performance-Team.Jun 24 2021, 6:00 PM

Krinkle awarded a token.

Krinkle moved this task from Limbo to Perf recommendation on the Performance-Team (Radar) board.Jun 24 2021, 6:02 PM

Jdlrobson added a project: MediaWiki-Core-Skin-Architecture.Jul 1 2021, 10:38 PM

Jdlrobson moved this task from Backlog to Milestone: Reduce complexity of MonoBook skin on the MediaWiki-Core-Skin-Architecture board.

Jdlrobson merged a task: T203023: skins.monobook.mobile.uls dependency doesn't do mobile?.Jul 1 2021, 10:47 PM

Jdlrobson added subscribers: Jdforrester-WMF, Isarra.

Jdlrobson moved this task from Backlog to Tech debt on the MonoBook board.Jul 1 2021, 11:04 PM

Jdlrobson updated the task description. (Show Details)Jul 29 2021, 11:50 PM

Change 701445 merged by jenkins-bot:

[mediawiki/skins/MonoBook@master] Reduce ResourceLoader modules used by Monobook

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

Jdlrobson mentioned this in rSMNBc1ca90ce4b58: Reduce ResourceLoader modules used by Monobook.Aug 4 2021, 10:54 PM

Per a private chat with Edward, I've asking him to do some QA for this task relating to some architectural changes.

Jdlrobson assigned this task to Edtadros.Aug 4 2021, 10:59 PM

Jdlrobson triaged this task as High priority.

Jdlrobson moved this task from Needs Analysis to QA on the Web-Team-Backlog-Archived (Kanbanana-FY-2021-22) board.

ReleaseTaggerBot added a project: MW-1.37-notes (1.37.0-wmf.18; 2021-08-09).Aug 4 2021, 11:00 PM

Maintenance_bot removed a project: Patch-For-Review.Aug 4 2021, 11:10 PM

Test Result - Beta

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

Test Artifact(s):

QA Steps

Test 1

Go to user preferences and enable MonoBook as your default skin. Make sure the box "Enable responsive MonoBook design" is ticked. Save.
Visit https://en.wikipedia.beta.wmflabs.org/wiki/Franck_Montagny
✅ AC1: Confirm that what you see matches
. If there are any discrepancies, not them, no matter how small.
No Visible differences

❌ AC2: Print the document as a pdf and confirm that the PDF you generate matches
Franck Montagny - Wikipedia, the free encyclopedia.pdf246 KBDownload
. If there are any discrepancies, not them, no matter how small.

actual Franck Montagny - Wikipedia, the free encyclopedia.pdf415 KBDownload

[Compare Report] actual Franck Montagny - Wikipedia, the free encyclopedia.pdf1 MBDownload

The attached comparison document has a bunch of differences, but I suspect they aren't related to your change. What I did notice is that the footer appears at the end of page one instead of the end of the document as expected. This is the bottom of page on in the actual pdf.

❌ AC3: Resize your web browser to 450px. Confirm what you see matches the screenshot below.If there are any discrepancies, not them, no matter how small.

The upper right corner has some differences. There are two small squares to the left of the Notification and Inbox icons. The icons are visible in the actual image where they are not in the expected.

en.wikipedia.beta.wmflabs.org_wiki_Franck_Montagny.png (1×900 px, 259 KB)

Test 2

Go back to user preferences and untick the box "Enable responsive MonoBook design". Save.
Visit https://en.wikipedia.beta.wmflabs.org/wiki/Franck_Montagny
✅ AC4: Confirm that what you see matches
. Note, you should not see anything different to the results of the above test. If there are any discrepancies, not them, no matter how small.

No visible differences.

Screen Shot 2021-08-10 at 9.33.18 PM.png (834×1 px, 293 KB)

❓AC5: Print the document as a pdf and confirm that the PDF matches the PDF in test 2. If there are any discrepancies, not them, no matter how small. @Jdlrobson, I'm assuming this means Test 1, please confirm. The resulting PDF file is exactly the same as the actual file from Test 1. File comparison yielded zero differences. The differences between the Actual for test 2 and Expected Test1 are the same as those of Actual Test 1 and Expected Test 1.
actual 2 Franck Montagny - Wikipedia, the free encyclopedia.pdf415 KBDownload
❓ AC6: Resize your web browser to 450px. Confirm what you see matches the screenshot below.If there are any discrepancies, not them, no matter how small.

In order to get 450px I needed to use Firefox, may have some settings that are different that are affecting the font size, which is the only real difference I can see.

Screen Shot 2021-08-10 at 9.48.31 PM.png (785×452 px, 181 KB)

Here are my font settings:

Screen Shot 2021-08-10 at 9.54.20 PM.png (783×702 px, 61 KB)

Edtadros updated the task description. (Show Details)Aug 11 2021, 4:57 AM

None of these look like big problems, but looking through them later today to see if I need to create bug reports.

@Jdlrobson, let me know if I should move it to QA in Prod … or you can and assign it back to me.

AC2
The footer should appear at the end of the article. I am unable to replicate this now. Can you test that one again? We did have an issue with the footer last week so that might be why this showed up.

AC3

Thanks for finding this one. This appears to be an existing issue. Those icons should not display like that.
The dots are new, but given this already looked like this:

Screen Shot 2021-08-11 at 2.53.36 PM.png (236×906 px, 51 KB)

I don't consider this a blocker

AC5
" I'm assuming this means Test 1, please confirm." Confirmed.

AC6

This is a pass. I can't see any issue with the font-size behaviour.

Jdlrobson reassigned this task from Jdlrobson to Edtadros.Aug 12 2021, 4:59 PM

Jdlrobson mentioned this in T97892: Remove capitalize-all-nouns from MW core and move it to the Monobook skin.Aug 13 2021, 3:49 PM

Test Result - Prod

Status: ✅ There is one issue but it is not a blocker.
Environment: enwiki
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

Test 1

Go to user preferences and enable MonoBook as your default skin. Make sure the box "Enable responsive MonoBook design" is ticked. Save.
Visit https://en.wikipedia.org/wiki/Franck_Montagny
✅ AC1: Confirm that what you see matches
. If there are any discrepancies, not them, no matter how small.
No Visible differences

✅ AC2: Print the document as a pdf and confirm that the PDF you generate matches
Franck Montagny - Wikipedia, the free encyclopedia.pdf246 KBDownload
. If there are any discrepancies, not them, no matter how small.

Printed page appears formatted correctly. Footer is in the correct location.

Franck Montagny - Wikipedia.pdf1 MBDownload

❌ AC3: Resize your web browser to 450px. Confirm what you see matches the screenshot below.If there are any discrepancies, not them, no matter how small.

The upper right corner has some differences. There are two small squares to the left of the Notification and Inbox icons. The icons are visible in the actual image where they are not in the expected. Per T285492#7277212 this is not a blocker.

Screen Shot 2021-08-16 at 9.33.23 AM.png (213×452 px, 39 KB)

Test 2

Go back to user preferences and untick the box "Enable responsive MonoBook design". Save.
Visit https://en.wikipedia.org/wiki/Franck_Montagny
✅ AC4: Confirm that what you see matches
. Note, you should not see anything different to the results of the above test. If there are any discrepancies, not them, no matter how small.

No visible differences.

✅ AC5: Print the document as a pdf and confirm that the PDF matches the PDF in test 2. If there are any discrepancies, not them, no matter how small. No differences between both pdfs.
Franck Montagny - Wikipedia2.pdf1 MBDownload

[Compare Report] Franck Montagny - Wikipedia2.pdf1 MBDownload

✅ AC6: Resize your web browser to 450px. Confirm what you see matches the screenshot below.If there are any discrepancies, not them, no matter how small.

No discrepancies

Screen Shot 2021-08-16 at 9.43.14 AM.png (981×450 px, 288 KB)

Edtadros updated the task description. (Show Details)Aug 16 2021, 4:47 PM

LGoto reassigned this task from ovasileva to • nray.Aug 17 2021, 5:07 PM

LGoto added a subscriber: ovasileva.

The 450px width somehow looks okay for me on beta (see below)

Screen Shot 2021-08-17 at 6.18.50 PM.png (1×1 px, 178 KB)

Resolving for now

Jdlrobson mentioned this in T288788: Regression: Monobook shows non-existing own user page in user tools bar as blue link instead of red link.Aug 18 2021, 1:00 AM

	F34598782: Screen Shot 2021-08-17 at 6.18.50 PM.png
	Aug 18 2021, 12:23 AM

	F34597711: Screen Shot 2021-08-16 at 9.43.14 AM.png
	Aug 16 2021, 4:46 PM

	F34597707: Screen Shot 2021-08-16 at 9.33.23 AM.png
	Aug 16 2021, 4:46 PM

	F34597710: [Compare Report] Franck Montagny - Wikipedia2.pdf
	Aug 16 2021, 4:46 PM

	F34597709: Franck Montagny - Wikipedia2.pdf
	Aug 16 2021, 4:46 PM

	F34597704: Franck Montagny - Wikipedia.pdf
	Aug 16 2021, 4:46 PM

	F34590996: Screen Shot 2021-08-11 at 2.53.36 PM.png
	Aug 11 2021, 9:56 PM

	F34590097: Screen Shot 2021-08-10 at 9.48.31 PM.png
	Aug 11 2021, 4:55 AM

MonoBook uses 5 ResourceLoader modules, only needs 2.Closed, ResolvedPublicActions

Description

QA steps

Test 1

Test 2

QA Results - Beta

QA Results - Prod

Details

Related Objects

Event Timeline

Test Result - Beta

QA Steps

Test 1

Test 2

Test Result - Prod

QA Steps

Test 1

Test 2

MonoBook uses 5 ResourceLoader modules, only needs 2.
Closed, ResolvedPublic
Actions