[Bug] Plainlink class commonly used in editor templates makes audio files invisible on Minerva skin
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	Izno
	Feb 13 2021, 11:22 PM

Description

On both mobile and desktop domains on Minerva, [[Template:Spoken_Wikipedia/testcases]] displays as:

The background for the file is implemented as

.mw-tmh-player.audio > .mw-tmh-play {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22220%22 height=%2230%22 viewBox=%220 0 58.209 7.938%22%3E%3Cpath fill-rule=%22evenodd%22 fill-opacity=%22.67%22 d=%22M0 0h58.209v7.938H0z%22/%3E%3Cpath d=%22M 7.126 4.076 L 3.876 5.986 V 2.165 Z%22 fill=%22%23fff%22/%3E%3C/svg%3E");
    opacity: 0.5;
}

while the background for plainlinks is implemented as

.plainlinks a {
    background: none !important;
    padding: 0 !important;
}

The element is still interactable. There is a slight FOUC, but I don't know whether that's related to the fact these elements are inside a collapsible element.

Issue does not appear in Timeless or Vector.

I'm probably going to remove plainlinks here since there are no links in the template that wouldn't be plain to begin with.

Developer notes

This is because of the rule in resources/skins.minerva.content.styles/links.less:

.plainlinks a {
2cc9516cde (jdlrobson           2017-07-12 08:12:40 -0700 64) .plainlinks a {
2cc9516cde (jdlrobson           2017-07-12 08:12:40 -0700 65)   background: none !important;
2cc9516cde (jdlrobson           2017-07-12 08:12:40 -0700 66)   padding: 0 !important;
2cc9516cde (jdlrobson           2017-07-12 08:12:40 -0700 67) }

It appears to be done to make sure the rule takes precedence over .external classes.

We should drop the !important here. This may reveal icons on certain links so....
...We should add an additional rule to links for the .plainlinks a.external class.

Details

	Subject	Repo	Branch	Lines +/-
	Minerva uses centralized link styling colors	mediawiki/skins/MinervaNeue	master	+17 -24

Customize query in gerrit

Event Timeline

Izno created this task.Feb 13 2021, 11:22 PM

Restricted Application added subscribers: Masumrezarock100, Aklapper. · View Herald TranscriptFeb 13 2021, 11:22 PM

For the records, if this is about https://en.wikipedia.org/wiki/Template:Spoken_Wikipedia/testcases?useskin=minerva , then I fail to reproduce in Firefox 85 on Linux, using desktop and minerva:

Screenshot from 2021-02-14 11-21-34.png (795×1 px, 204 KB)

In T274717#6828895, @Aklapper wrote:

For the records, if this is about https://en.wikipedia.org/wiki/Template:Spoken_Wikipedia/testcases?useskin=minerva , then I fail to reproduce in Firefox 85 on Linux, using desktop and minerva:

I have since fixed it by removing plainlinks. I would recommend opening your browser console tools and add plainlinks to one of the boxes if you haven't.

I have since fixed it by removing plainlinks. I would recommend opening your browser console tools and add plainlinks to one of the boxes if you haven't.

@Izno I'm not really sure what this means so I'm going to need some more information here. Could you perhaps replicate the same issue in a sandbox (or our beta cluster) with a permalink or provide me with some sample HTML to replicate this with ?

Sure, see https://test.wikipedia.org/wiki/User:Izno?useskin=minerva

Got it! super helpful! Thank you. Will take a look at this tomorrow to see what needs to be fixed.

Jdlrobson renamed this task from Plainlinks and audio files don't play nice to Plainlink class makes audio files invisible on Minerva skin.Feb 17 2021, 2:23 AM

Jdlrobson renamed this task from Plainlink class makes audio files invisible on Minerva skin to Plainlink class commonly used in editor templates makes audio files invisible on Minerva skin.Feb 17 2021, 7:16 PM

Jdlrobson assigned this task to ovasileva.

Jdlrobson updated the task description. (Show Details)

Jdlrobson moved this task from Incoming to Needs Prioritization on the Web-Team-Backlog board.

ovasileva triaged this task as Medium priority.Feb 18 2021, 10:25 AM

ovasileva moved this task from Needs Prioritization to Triaged but Future on the Web-Team-Backlog board.

Alternatively this could be resolved by removing (<minerva>/resources/skins.minerva.content.styles/links.less) and deferring to the one in core provided by the content.links feature (<core>/resources/src/mediawiki.skinning/content.links.less). This would also lead to the link behaviour in mobile and desktop being consistent.

@Volker_E is that something we'd want to do? Note we could use skin variables if different colors are needed for different skins.

Jdlrobson renamed this task from Plainlink class commonly used in editor templates makes audio files invisible on Minerva skin to [Bug] Plainlink class commonly used in editor templates makes audio files invisible on Minerva skin.Jun 21 2021, 10:17 PM

Jdlrobson added a project: MediaWiki-Core-Skin-Architecture.

Jdlrobson moved this task from Backlog to It's complicated on the MediaWiki-Core-Skin-Architecture board.Jun 21 2021, 11:11 PM

From a design perspective it makes all sense to have one central treatment for such essential experience like links on our main mobile and desktop skins!
Yes, variables also should be the way to go.

There are also small pieces between MN and MW core that would need to be added:

a:not( [ href ] ),
a.external, which is not defined in 'content-links', but 'content-externallinks'. With a weird few rules in https://gerrit.wikimedia.org/r/c/mediawiki/core/+/675210/5/resources/src/mediawiki.skinning/content.parser-output.less#22

@Jdlrobson why aren't they in externallinks?

.return-link

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

[mediawiki/core@master] Links should be subject to skin variables

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

gerritbot added a project: Patch-For-Review.Jun 22 2021, 7:07 PM

In T274717#7169242, @Volker_E wrote:

From a design perspective it makes all sense to have one central treatment for such essential experience like links on our main mobile and desktop skins!
Yes, variables also should be the way to go.

Taken care of in https://gerrit.wikimedia.org/r/700975

There are also small pieces between MN and MW core that would need to be added:

a:not( [ href ] ),

These links should also have the class .selflink, so this wouldn't need to be added.

What about the a styles in elements.less would they make sense to be in content.links instead? Minerva doesn't load elements and I'm not sure whether it should, but it also doesn't need to, to resolve this ticket.

a.external, which is not defined in 'content-links', but 'content-externallinks'. With a weird few rules in https://gerrit.wikimedia.org/r/c/mediawiki/core/+/675210/5/resources/src/mediawiki.skinning/content.parser-output.less#22

@Jdlrobson why aren't they in externallinks?

.return-link

The content-links-external feature provides external link icons by type e.g. pdf. We can move the style there but it would also mean Vector would either have to gain all those icons or drop external icon differentiation completion.

The styles in content.parser-output are enabled for all skins, and should be considered non-optional. They relate to parser artifacts internals. That's why they are there. Is documented at top of that file.

Jdlrobson removed a project: Web-Team-Backlog.Jun 23 2021, 6:39 PM

Jdlrobson moved this task from It's complicated to Milestone: More flexibility in article heading area (subpages, descriptions) on the MediaWiki-Core-Skin-Architecture board.Jul 1 2021, 11:11 PM

Jdlrobson moved this task from Milestone: More flexibility in article heading area (subpages, descriptions) to Clean up the reset rules on the MediaWiki-Core-Skin-Architecture board.Jul 14 2021, 12:06 AM

Jdlrobson moved this task from Backlog to TODO on the MinervaNeue board.Jul 21 2021, 7:36 PM

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

[mediawiki/skins/MinervaNeue@master] WIP: Minerva uses centralized link styling rules

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

Change 715125 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Minerva uses centralized link styling colors

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

The original bug as written no longer applies (the template has since changed) but the changes above make sure Minerva treats plainlinks the same way as Vector so any associated plain link issues should now be solved.

ReleaseTaggerBot added a project: MW-1.38-notes (1.38.0-wmf.1; 2021-09-21).Sep 14 2021, 4:00 PM

	F34104305: Screenshot from 2021-02-14 11-21-34.png
	Feb 14 2021, 10:25 AM

[Bug] Plainlink class commonly used in editor templates makes audio files invisible on Minerva skinClosed, ResolvedPublicActions

Description

Developer notes

Details

Event Timeline

[Bug] Plainlink class commonly used in editor templates makes audio files invisible on Minerva skin
Closed, ResolvedPublic
Actions