[Follow up work: Gadget support] Update Wikimedia deployed skins to support new mw.util.addPortlet method
Closed, ResolvedPublic2 Estimated Story PointsBUG REPORT
Actions

Assigned To

Authored By

	Jdlrobson
	Jul 26 2023, 9:10 PM

Project Tags

Referenced Files

	F37161186: Screenshot 2023-08-02 at 6.27.39 PM.png
	Aug 3 2023, 1:29 AM

	F37161184: Screenshot 2023-08-02 at 6.26.00 PM.png
	Aug 3 2023, 1:29 AM

	F37161182: Screenshot 2023-08-02 at 6.25.32 PM.png
	Aug 3 2023, 1:29 AM

	F37161180: Screenshot 2023-08-02 at 6.24.35 PM.png
	Aug 3 2023, 1:29 AM

	F37161175: Screenshot 2023-08-02 at 6.19.46 PM.png
	Aug 3 2023, 1:29 AM

	F37161178: Screenshot 2023-08-02 at 6.23.32 PM.png
	Aug 3 2023, 1:29 AM

	F37161173: Screenshot 2023-08-02 at 6.20.06 PM.png
	Aug 3 2023, 1:29 AM

Subscribers

Description

In T303488 a new mw.util.addPortlet method was created. As a first pass it was only implemented in full for Vector 2022. So other skins can use it, it must work across all skins. This will require minor modifications to all the Wikimedia deployed skins.

TODO

Update CologneBlue https://gerrit.wikimedia.org/r/c/mediawiki/skins/CologneBlue/+/942018
Update Modern https://gerrit.wikimedia.org/r/c/mediawiki/skins/Modern/+/942019
Update Monobook https://gerrit.wikimedia.org/r/c/mediawiki/skins/MonoBook/+/941984
Update Timeless https://gerrit.wikimedia.org/r/c/mediawiki/skins/Timeless/+/942009
Update Vector legacy https://gerrit.wikimedia.org/r/942023

QA

Run the following code in the developer console for all skins and check that the newly created menu (portlet) matches the design of the other menus.

const portletId = 'p-twinkle';
const p = mw.util.addPortlet(portletId, 'TW' );
$(p).insertAfter ('#p-navigation');
mw.util.addPortletLink( portletId, '#', 'csd', 'tw-csd' );
mw.util.addPortletLink( portletId, '#', 'prod', 'tw-prod' );
mw.util.addPortletLink( portletId, '#', 'xfd', 'tw-xfd' );
mw.util.addPortletLink( portletId, '#', 'rpp', 'tw-rpp' );
mw.util.addPortletLink( portletId, '#', 'tag', 'tw-tag' );
mw.util.addPortletLink( portletId, '#', 'last', 'tw-last' );
mw.util.addPortletLink( portletId, '#', 'unlink', 'tw-unlink' );

Sign off steps

Open ticket asking for adding parameter to addPortlet to append to DOM. Request input there from gadget developers.

QA Results - Beta

AC	Status	Details
1	✅	T342814#9065052

Details

Other Assignee: Jdlrobson

Related Changes in Gerrit:

Subject	Author	Repo	Branch	Lines +/-
Treat label in portlet as display block	Jdlrobson	mediawiki/skins/CologneBlue	master	+1 -0
Make Monobook compatible with mw.util.addPortlet method	Jdlrobson	mediawiki/skins/MonoBook	master	+7 -0
Style portlets created with mw.util.addPortlet consistently	Jdlrobson	mediawiki/skins/CologneBlue	master	+3 -1
Make Timeless compatible with mw.util.addPortlet	Jdlrobson	mediawiki/skins/Timeless	master	+3 -0
Style portlets created with mw.util.addPortlet consistently	Jdlrobson	mediawiki/skins/Modern	master	+2 -0
Add mw.util.addPortlet handler for legacy Vector	Jdlrobson	mediawiki/skins/Vector	master	+75 -0

Customize query in gerrit

Related Objects
Search...

Status	Subtype	Assigned	Task
Resolved		ovasileva	T321721 [SPIKE, 8hrs] Review possible ways that gadgets might be affected by page tools feature
Resolved	Feature	Jdlrobson	T303488 [Gadget support] Add a Javascript function to create a new portlet section similar to mw.util.addPortletLink
Resolved	BUG REPORT	Jdlrobson	T342814 [Follow up work: Gadget support] Update Wikimedia deployed skins to support new mw.util.addPortlet method

Event Timeline

Jdlrobson created this task.Jul 26 2023, 9:10 PM

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

[mediawiki/skins/Vector@master] Add mw.util.addPortlet handler for legacy Vector

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

gerritbot added a project: Patch-For-Review.Jul 26 2023, 9:11 PM

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

[mediawiki/skins/MonoBook@master] Make Monobook compatible with mw.util.addPortlet method

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

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

[mediawiki/skins/Timeless@master] Make Timeless compatible with mw.util.addPortlet

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

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

[mediawiki/skins/Modern@master] Style portlets created with mw.util.addPortlet consistently

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

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

[mediawiki/skins/CologneBlue@master] Style portlets created with mw.util.addPortlet consistently

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

Jdlrobson updated the task description. (Show Details)Jul 26 2023, 9:22 PM

Jdlrobson added a project: Web-Team-Backlog-Archived (Web Team FY2023-24 Q1 Sprint 3).

Jdlrobson mentioned this in T342815: Provide an API for creating dropdowns in Vector and Vector legacy.Jul 26 2023, 9:29 PM

Jdlrobson mentioned this in T303488: [Gadget support] Add a Javascript function to create a new portlet section similar to mw.util.addPortletLink.

Jdlrobson renamed this task from [Gadget support] Update Wikimedia deployed skins to support new mw.util.addPortlet method to [Follow up work: Gadget support] Update Wikimedia deployed skins to support new mw.util.addPortlet method.Jul 26 2023, 9:33 PM

DavidBrooks subscribed.Jul 26 2023, 9:36 PM

MaterialWorks subscribed.Jul 26 2023, 10:50 PM

ovasileva triaged this task as Medium priority.Jul 27 2023, 4:48 PM

ovasileva added a parent task: T303488: [Gadget support] Add a Javascript function to create a new portlet section similar to mw.util.addPortletLink.

Jdlrobson updated the task description. (Show Details)Jul 27 2023, 5:40 PM

ovasileva set the point value for this task to 2.Jul 27 2023, 5:43 PM

Novem_Linguae subscribed.Jul 27 2023, 7:24 PM

ovasileva moved this task from Incoming to Ready for Development on the Web-Team-Backlog-Archived (Web Team FY2023-24 Q1 Sprint 3) board.Jul 31 2023, 2:13 PM

Jdlrobson moved this task from Ready for Development to Code Review on the Web-Team-Backlog-Archived (Web Team FY2023-24 Q1 Sprint 3) board.Jul 31 2023, 6:09 PM

Jdlrobson moved this task from Code Review to Blocked on Others on the Web-Team-Backlog-Archived (Web Team FY2023-24 Q1 Sprint 3) board.

• Mabualruz updated the task description. (Show Details)Aug 1 2023, 5:01 PM

Change 942023 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Add mw.util.addPortlet handler for legacy Vector

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

ReleaseTaggerBot added a project: MW-1.41-notes (1.41.0-wmf.22; 2023-08-15).Aug 1 2023, 6:00 PM

@MusikAnimal said he could help review the remaining skin patches.

• matmarex subscribed.Aug 2 2023, 2:29 PM

Change 942019 merged by jenkins-bot:

[mediawiki/skins/Modern@master] Style portlets created with mw.util.addPortlet consistently

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

Change 942018 merged by jenkins-bot:

[mediawiki/skins/CologneBlue@master] Style portlets created with mw.util.addPortlet consistently

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

Change 942009 merged by jenkins-bot:

[mediawiki/skins/Timeless@master] Make Timeless compatible with mw.util.addPortlet

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

Change 941984 merged by jenkins-bot:

[mediawiki/skins/MonoBook@master] Make Monobook compatible with mw.util.addPortlet method

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

Maintenance_bot removed a project: Patch-For-Review.Aug 2 2023, 3:11 PM

Thanks @MusikAnimal !

Jdlrobson updated the task description. (Show Details)Aug 2 2023, 3:26 PM

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Ventura
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: Run the following code in the developer console for all skins and check that the newly created menu (portlet) matches the design of the other menus.

const portletId = 'p-twinkle';
const p = mw.util.addPortlet(portletId, 'TW' );
$(p).insertAfter ('#p-navigation');
mw.util.addPortletLink( portletId, '#', 'csd', 'tw-csd' );
mw.util.addPortletLink( portletId, '#', 'prod', 'tw-prod' );
mw.util.addPortletLink( portletId, '#', 'xfd', 'tw-xfd' );
mw.util.addPortletLink( portletId, '#', 'rpp', 'tw-rpp' );
mw.util.addPortletLink( portletId, '#', 'tag', 'tw-tag' );
mw.util.addPortletLink( portletId, '#', 'last', 'tw-last' );
mw.util.addPortletLink( portletId, '#', 'unlink', 'tw-unlink' );

Vector 2022	Vector Legacy	MonoBook	Modern	Timeless

And for fun I tried it on Minerva, omitting the TW.

Minerva

Edtadros updated the task description. (Show Details)Aug 3 2023, 1:30 AM

Top-margin bug

https://en.wikipedia.beta.wmflabs.org/wiki/Main_Page?useskin=cologneblue

The margin-top above "TW" on CologneBlue doesn't match the margin-top above other portlets such as "This page" and "My pages". The problem appears to be the top-margin of <label>TW</label> is 0 instead of 6px. Let me know if I should create a separate ticket.

HTML elements differ greatly

Visually, addPortlet() as currently coded seems to do the job.

But the HTML generated by addPortlet() is completely different from its neighbors. Tag names are different. Classes are different. Even level of nesting is different, with extra elements.

Is this because addPortlet in core is generating the elements? Perhaps each skin should generate the elements instead?

I'm a bit surprised we don't have each skin generate HTML that is identical to what is used by its neighbors. Then we wouldn't need to modify any CSS, would reduce likelihood of bugs such as the margin-top bug above, and the HTML when inspected by a developer or when targeted by a user script would look native to the skin.

CologneBlue addPortlet() current:

<div class="mw-portlet mw-portlet-p-twinkle mw-portlet-js" id="p-twinkle">
    <label>TW</label>
    <div>
        <ul>

CologneBlue expected:

<div class="portlet mw-portlet mw-portlet-twinkle" id="p-twinkle" role="twinkle">
    <h3>TW</h3>
    <ul>

@Novem_Linguae thanks for trying it out! Yes the HTML differences are intentional. In Vector 2022 we moved away from headings as they impact the heading structure of the page (T290280). The portlet HTML varies too much across skins and we believe standardizing it would be too limiting to skin developers

The hook we added allows skins to have identical markup. So far we have used it in Vector and Vector 2022 allowing markup to be near identical (if you check the HTML of those skins you should find fewer difference).

CologneBlue's markup could be modified to match the new HTML or could use a hook to normalize the markup, but since only Minerva, and Vector 2022 are actively maintained these days and we are still not 100% we will see adoption of this method I figured it was better to do the minimum possible work here for other skins and focus on the visual styling. I hope that makes sense?

I'll take a look at the bug you've flagged. Should hopefully be a straightforward fix.

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

[mediawiki/skins/CologneBlue@master] Treat label in portlet as display block

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

gerritbot added a project: Patch-For-Review.Aug 3 2023, 8:06 PM

Change 945642 merged by jenkins-bot:

[mediawiki/skins/CologneBlue@master] Treat label in portlet as display block

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

Maintenance_bot removed a project: Patch-For-Review.Aug 4 2023, 5:11 PM

@Novem_Linguae would you be interested in taking the API for a test drive? I left some comments on https://github.com/wikimedia-gadgets/twinkle/issues/1835.

Based on discussions with @MusikAnimal and per sign off step I've also opened T343598 - discussion welcomed as we improve this API!

In T342814#9066895, @Jdlrobson wrote:

@Novem_Linguae thanks for trying it out! Yes the HTML differences are intentional. In Vector 2022 we moved away from headings as they impact the heading structure of the page (T290280). The portlet HTML varies too much across skins and we believe standardizing it would be too limiting to skin developers

The hook we added allows skins to have identical markup. So far we have used it in Vector and Vector 2022 allowing markup to be near identical (if you check the HTML of those skins you should find fewer difference).

CologneBlue's markup could be modified to match the new HTML or could use a hook to normalize the markup, but since only Minerva, and Vector 2022 are actively maintained these days and we are still not 100% we will see adoption of this method I figured it was better to do the minimum possible work here for other skins and focus on the visual styling. I hope that makes sense?

Seems like having each skin override mw.util.addPortlet and emit its own HTML, HTML that matches surrounding portlets, would be the best solution.

If I wrote some patches that customized mw.util.addPortlet for each skin to match how that skin normally emits portlets, would the patches be accepted?

Seems like having each skin override mw.util.addPortlet and emit its own HTML, HTML that matches surrounding portlets, would be the best solution.

I think if you wanted to take this approach it would make more sense to update the skins to use HTML that mirrors mw.util.addPortlet. That way you'd have a more standardized HTML across portlets across skins. For example instead of Modern using a h3 for portlet headings it would use the label element. This would also fix accessibility issues with the existing HTML. I'd be willing to review those kind of patches but reviews might be a little slow :-) I think the end result would be more standardized HTML across the non-actively developed skins which would be a good thing IMO for maintenance.

If I wrote some patches that customized mw.util.addPortlet for each skin to match how that skin normally emits portlets, would the patches be accepted?

Please see T291700 - there's no guarantee that this hook approach will stay around, so personally i'm reluctant to add hook handlers to all the skins until we make a decision there.

I think if you wanted to take this approach it would make more sense to update the skins to use HTML that mirrors mw.util.addPortlet.

Seems like this would be a lot more work than just overriding mw.util.addPortlet per skin, and also risk breaking a bunch of gadgets and user scripts.

Mr._Starfleet_Command mentioned this in T432821: Fix various deficiencies of mw.util.addPortlet.Jul 22 2026, 9:32 AM

DavidBrooks unsubscribed.Jul 23 2026, 3:46 PM

[Follow up work: Gadget support] Update Wikimedia deployed skins to support new mw.util.addPortlet methodClosed, ResolvedPublic2 Estimated Story PointsBUG REPORTActions