Page MenuHomePhabricator

Portlet links added via JS are unstyled in Minerva
Closed, ResolvedPublic2 Estimated Story PointsBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

What happens?:
The link is added to the portlet bar but is completely unstyled.

What should have happened instead?:
The new portlet link should look like the others.
The issue gets fixed when I manually add the class minerva__tab-text to the new link.

Software version (on Special:Version page; skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):

image.png (196×607 px, 15 KB)

Derived Requirement

Ensure that new portlet links added via mw.util.addPortletLink on mobile Wiktionary pages are styled consistently with existing links by automatically applying the appropriate classes, such as minerva__tab-text.

BDD

Feature: Portlet Link Styling on Mobile Wiktionary Pages

Scenario: Ensure new portlet links are styled like existing links

Given the user is logged in on a mobile Wiktionary page
When the user runs the command `mw.util.addPortletLink("p-associated-pages", "https://www.mediawiki.org/", "Test")`
Then the newly added portlet link should be styled like the other portlet links, including the class `minerva__tab-text`
Test Steps

Test Case 1: Ensure New Portlet Link is Styled Correctly on Mobile Wiktionary Pages

  1. Log in to the mobile version of Wiktionary and navigate to a page like https://en.m.wiktionary.org/wiki/Wiktionary:Criteria_for_inclusion?safemode=1.
  2. Open the browser console and run the command mw.util.addPortletLink("p-associated-pages", "https://www.mediawiki.org/", "Test").
  3. AC1: Confirm that the new portlet link is styled consistently with the other links in the portlet bar, including having the class minerva__tab-text.

QA Results - Beta

ACStatusDetails
1T376363#10212759

QA Results - Prod

ACStatusDetails
1T376363#10232115

Event Timeline

Ioaxxere renamed this task from Portlet links added via JS are unstyled to Portlet links added via JS are unstyled in Minerva.Oct 3 2024, 2:53 AM
Ioaxxere updated the task description. (Show Details)

Could you elaborate why you think that there is any wrong behavior currently? The default existing tabs also get "unstyled" when removing the minerva__tab-text class. I don't see any bug.

Could you elaborate why you think that there is any wrong behavior currently? The default existing tabs also get "unstyled" when removing the minerva__tab-text class. I don't see any bug.

This is a regression, so now suddenly millions of Wiktionary entries look like crap.

Jdlrobson added a project: Web-Team-Backlog.
Jdlrobson subscribed.

Should be fixed as as side effect of another change we are working on to address a systematic problem.

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

[mediawiki/skins/MinervaNeue@master] Add minerva__tab-text class

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

Change #1077766 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Add minerva__tab-text class

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

Change #1077769 had a related patch set uploaded (by Jdlrobson; author: Jdrewniak):

[mediawiki/skins/MinervaNeue@master] Use :where() for link styling

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

Change #1077769 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Use :where() for link styling

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

Test Result - Beta

Status: ✅ PASS
Environment: Beta
OS: macOS Sonoma 15.0
Browser: Chrome 129
Device: MBA
Emulated Device: NA

Test Artifact(s):

Beta
https://en.m.wiktionary.beta.wmflabs.org/wiki/cry_wolf?safemode=1

Test Steps

Test Case 1: Ensure New Portlet Link is Styled Correctly on Mobile Wiktionary Pages

Log in to the mobile version of Wiktionary and navigate to a page like https://en.m.wiktionary.beta.wmflabs.org/wiki/cry_wolf?safemode=1.
Open the browser console and run the command mw.util.addPortletLink("p-associated-pages", "https://www.mediawiki.org/", "Test").
✅ AC1: Confirm that the new portlet link is styled consistently with the other links in the portlet bar, including having the class minerva__tab-text.

2024-10-08_15-26-06.png (1×809 px, 139 KB)

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Sequoia 15.0
Browser: Chrome 129
Device: MBS
Emulated Device: NA

Test Artifact(s):

Prod
https://en.m.wiktionary.org/wiki/cry_wolf?safemode=1

Test Steps

Test Case 1: Ensure New Portlet Link is Styled Correctly on Mobile Wiktionary Pages

Log in to the mobile version of Wiktionary and navigate to a page like https://en.m.wiktionary.beta.wmflabs.org/wiki/cry_wolf?safemode=1.
Open the browser console and run the command mw.util.addPortletLink("p-associated-pages", "https://www.mediawiki.org/", "Test").
✅ AC1: Confirm that the new portlet link is styled consistently with the other links in the portlet bar, including having the class minerva__tab-text.

screenshot 99.png (1×1 px, 315 KB)

screenshot 100.png (1×1 px, 502 KB)