Page MenuHomePhabricator
Create Task
Maniphest T307631

client-side CSS appears to be using Less syntax, which breaks in web browsers
Closed, ResolvedPublicBUG REPORT
Actions

Description

Line 146 of ./resources/lib/ooui/oojs-ui-core-wikimediaui.css

background-color: rgba(0, 24, 73, 7/255);

This is not CSS. It looks like Less, and it is being delivered client-side for web browsers to process, and it doesn't render correctly. This is not the only CSS/Less issue, but is one of the first I stumbled upon yesterday while working on trying to fix something else.

sibling task

Details

Related Changes in Gerrit:
SubjectAuthorRepoBranchLines +/-
Update OOUI to v0.44.5Jforrestermediawiki/coreREL1_39+62 -48
build: Update 'wikimedia-ui-base' to v0.20.0Funcoojs/uiv0.44+12 -8
Update OOUI to v0.46.0Jforrestermediawiki/coremaster+139 -85
build: Update 'wikimedia-ui-base' to latest v0.20.0VolkerEoojs/uimaster+12 -8
Customize query in gerrit

Related Objects

Event Timeline

Jasonkhanlar created this task.May 4 2022, 9:14 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 4 2022, 9:14 PM
Jasonkhanlar updated the task description. (Show Details)EditedMay 4 2022, 9:16 PM

Also noting from my mention of this yesterday on IRC in Libera.chat/Mediawiki,

same issue with line 155:

background-color: rgba(0, 36, 73, 21/255);

Another error on line 1399 (1400 too?):

background-position: -9999em 0\9;
padding: 0\9;

@Reedy pointed out https://github.com/wikimedia/mediawiki/commit/c3dc0a2d99ed6bb594dec7cd5095085028696588 which shows commits by @Volker_E and that it looks like it wasn't done on purpose. @Izno also guessed "that Volker just plain forgot that a css file isn't less" haha

In any case, I'm posting this so that it can be resolved/fixed, because I stumbled upon these issues after Libera.chat/CSS pointed out tons of W3C CSS validation and HTML validation errors on my MediaWiki website, and I am determined to fix all of them! even though they appear to all be from MediaWiki, skins and extensions.

DannyS712 added projects: OOUI, CSS.May 4 2022, 9:21 PM
Jasonkhanlar added subscribers: Volker_E, Izno, Reedy.May 4 2022, 9:27 PM
Jasonkhanlar added a comment.EditedMay 4 2022, 9:44 PM

Also continuing from where I last left off in The W3C CSS Validation Service results:

Property pointer-events doesn't exist : none

Actually, nevermind about this because apparently W3C-CSS Validation is outdated:

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

https://caniuse.com/pointer-events

Jasonkhanlar mentioned this in T307636: Two HTML Validation errors in MediaWiki core.May 4 2022, 10:34 PM
Jasonkhanlar updated the task description. (Show Details)
Izno unsubscribed.May 4 2022, 11:51 PM
Jack_who_built_the_house closed this task as a duplicate of T300437: Quiet default buttons have invalid hover styles.May 29 2022, 1:30 AM
Jasonkhanlar mentioned this in T300437: Quiet default buttons have invalid hover styles.May 29 2022, 1:38 AM
Jack_who_built_the_house reopened this task as Open.EditedAug 5 2022, 1:43 AM
Jack_who_built_the_house subscribed.

I thought this problem and the one mentioned in T300437 have the same base reason because they have appeared at the same time and mentioned exactly the same code rgba(0,24,73,7/255), but I see the button on the demo page linked in T300437 behaving well, so probably they are separate, so I will unmark it as duplicate.

This task affects at least the hover behavior of frameless buttons – they don't have a light gray background when they are hovered.

Jack_who_built_the_house added a subscriber: AnneT.Aug 5 2022, 1:50 AM

@AnneT, @Volker_E, can you help us?

Volker_E added a comment.Nov 8 2022, 4:40 AM

@Jack_who_built_the_house That's correct, with the next WikimediaUI Base release for the next OOUI release this will be taken care of.

gerritbot added a comment.Nov 9 2022, 7:39 AM

Change 854877 had a related patch set uploaded (by VolkerE; author: VolkerE):

[oojs/ui@master] build: Update 'wikimedia-ui-base' to latest v0.20.0

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

gerritbot added a project: Patch-For-Review.Nov 9 2022, 7:39 AM
gerritbot added a comment.Nov 9 2022, 1:46 PM

Change 854877 merged by jenkins-bot:

[oojs/ui@master] build: Update 'wikimedia-ui-base' to latest v0.20.0

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

Maintenance_bot removed a project: Patch-For-Review.Nov 9 2022, 2:30 PM
Volker_E triaged this task as Medium priority.Nov 12 2022, 1:30 AM
Volker_E raised the priority of this task from Medium to Needs Triage.
Volker_E moved this task from Backlog to OOUI-0.46.0 on the OOUI board.
Volker_E edited projects, added: OOUI (OOUI-0.46.0); removed: OOUI.
gerritbot added a comment.Dec 7 2022, 3:38 PM

Change 865677 had a related patch set uploaded (by Jforrester; author: Jforrester):

[mediawiki/core@master] Update OOUI to v0.46.0

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

gerritbot added a project: Patch-For-Review.Dec 7 2022, 3:38 PM
gerritbot added a comment.Dec 7 2022, 6:58 PM

Change 865677 merged by jenkins-bot:

[mediawiki/core@master] Update OOUI to v0.46.0

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

gerritbot added a comment.Jan 21 2023, 1:10 PM

Change 882101 had a related patch set uploaded (by Func; author: VolkerE):

[oojs/ui@v0.44] build: Update 'wikimedia-ui-base' to v0.20.0

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

Func merged a task: T326813: Invalid property value of background-color for oo-ui-toggleButtonWidget.Jan 21 2023, 1:14 PM
Func added subscribers: Func, Jdforrester-WMF.
Func added a comment.Jan 21 2023, 1:17 PM

I think the patch should be backported to 1.39, so I cherry-picked it to the v0.44 branch of ooui.

Func added a comment.Jan 21 2023, 1:22 PM
In T326813#8540894, @Jdforrester-WMF wrote:

This was fixed in OOUI's v0.46.2 release (e.g. https://gerrit.wikimedia.org/r/c/mediawiki/core/+/880992/1/resources/lib/ooui/oojs-ui-widgets-wikimediaui.css for the particular line you noticed).

I am curious about the situation though:

In T326813#8541179, @Func wrote:

So, somehow wikimedia-ui-base.less was not updated in the MediaWiki core for 2 previous OOUI updates?
It was bumped to 20.0 by commit a222a13 which contains the fix (3e13426), and then we have cd023d2 and e1d7d17 in the ooui side, f8a7e46 and fc0acab3 in the core.
What's the process of upgrading ooui in the core? manually? without CI checking?

gerritbot added a comment.Feb 2 2023, 8:32 PM

Change 882101 merged by jenkins-bot:

[oojs/ui@v0.44] build: Update 'wikimedia-ui-base' to v0.20.0

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

Maintenance_bot removed a project: Patch-For-Review.Feb 2 2023, 9:31 PM
gerritbot added a comment.Feb 6 2023, 10:28 PM

Change 886956 had a related patch set uploaded (by Jforrester; author: Jforrester):

[mediawiki/core@REL1_39] Update OOUI to v0.44.5

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

gerritbot added a project: Patch-For-Review.Feb 6 2023, 10:28 PM
gerritbot added a comment.Feb 6 2023, 11:20 PM

Change 886956 merged by jenkins-bot:

[mediawiki/core@REL1_39] Update OOUI to v0.44.5

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

Maintenance_bot removed a project: Patch-For-Review.Feb 6 2023, 11:30 PM
ReleaseTaggerBot added a project: MW-1.39-notes.Feb 7 2023, 12:00 AM
Volker_E renamed this task from client-side CSS appears to be using LESS syntax, which breaks in web browsers to client-side CSS appears to be using Less syntax, which breaks in web browsers .May 17 2023, 4:59 PM
Volker_E closed this task as Resolved.
Volker_E claimed this task.
Volker_E updated the task description. (Show Details)
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits