Page MenuHomePhabricator

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

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
    Screen Shot 2021-07-29 at 4.45.48 PM.png (1×2 px, 714 KB)
    . 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 . 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
    Screen Shot 2021-07-29 at 4.45.48 PM.png (1×2 px, 714 KB)
    . 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

QA Results - Prod

Event Timeline

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

Change 701445 merged by jenkins-bot:

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

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

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

Jdlrobson triaged this task as High priority.
Edtadros added a subscriber: Edtadros.

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
    Screen Shot 2021-07-29 at 4.45.48 PM.png (1×2 px, 714 KB)
    . If there are any discrepancies, not them, no matter how small.
    Screen Shot 2021-08-10 at 9.27.00 PM.png (834×1 px, 290 KB)
    No Visible differences
  • ❌ AC2: Print the document as a pdf and confirm that the PDF you generate matches . If there are any discrepancies, not them, no matter how small.

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.

Screen Shot 2021-08-10 at 8.13.59 PM.png (347×1 px, 56 KB)

  • ❌ 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.

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

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
    Screen Shot 2021-07-29 at 4.45.48 PM.png (1×2 px, 714 KB)
    . 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.
  • ❓ 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.

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

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)

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.

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
    Screen Shot 2021-07-29 at 4.45.48 PM.png (1×2 px, 714 KB)
    . If there are any discrepancies, not them, no matter how small.
    Screen Shot 2021-08-10 at 9.27.00 PM.png (834×1 px, 290 KB)
    No Visible differences
  • ✅ AC2: Print the document as a pdf and confirm that the PDF you generate matches . If there are any discrepancies, not them, no matter how small.

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

  • ❌ 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
    Screen Shot 2021-07-29 at 4.45.48 PM.png (1×2 px, 714 KB)
    . 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.

  • ✅ 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.

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

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

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