Page MenuHomePhabricator
Create Task
Maniphest T301887

Vector should use list-style: disc before its list-style-image declaration to support browsers with images disabled
Closed, ResolvedPublicFeature
Actions

Description

See also: T234400

For some reason, images frequently refuse to load for me on Wikimedia websites lately. After encountering this, I have noticed an easy fix to make the no-image experience more visually consistent:

ul {
	list-style-image:url(/w/skins/Vector/resources/common/images/bullet-icon.svg?d4515)
}

This declaration from Vector’s CSS should have list-style: disc (or similar) added before it so that the lists are rendered consistently with black dots. Currently sub-lists are rendered with white dots (at least in Firefox), which is noticeable on pages with a lot of sub-lists, for example:
https://ru.wikipedia.org/wiki/Википедия:Форум/Общий

(This is a fairly simple and non-important change overall, and I hope my issues with image loading stop one day.)

Related Objects
Search...

Event Timeline

stjn created this task.Feb 16 2022, 4:36 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 16 2022, 4:36 PM
Jdlrobson subscribed.Feb 16 2022, 4:47 PM

Which Vector skin is this bug for? The new or old one?

stjn added a comment.Feb 16 2022, 5:30 PM

Both? I don’t think styles for ul are different in two skin versions.

Jdlrobson edited projects, added: Web-Team-Backlog-Archived; removed: good first task.Feb 17 2022, 6:06 PM
Jdlrobson moved this task from Incoming to Not ready to estimate on the Web-Team-Backlog-Archived board.Feb 17 2022, 8:37 PM
abhigya_pandey subscribed.EditedMar 15 2022, 11:45 AM

Hi, @Jdlrobson and @stjn I'm interested to solve this issue but in chrome browser sublists are
rendering with black dots as-

WhatsApp Image 2022-03-15 at 5.25.30 PM.jpeg (1,106×607 px, 143 KB)
could you explain me the problem more so I move ahead, waiting for your kind response.

Aklapper added a comment.Mar 15 2022, 1:48 PM

Currently sub-lists are rendered with white dots (at least in Firefox),

@stjn: Could you please provide a screenshot, plus provide browser version information? Thanks.

stjn added a comment.Mar 16 2022, 5:52 PM

Just disable images in any browser (I assume), or just latest Firefox.

Jdlrobson added a comment.Mar 16 2022, 5:59 PM

I can't replicate. A screenshot would be helpful.

Aklapper added a comment.Mar 16 2022, 6:44 PM
In T301887#7783086, @stjn wrote:

Just disable images in any browser (I assume), or just latest Firefox.

Disable how exactly? Cannot reproduce in Firefox 98.0 (without changing...something somewhere).

Jdlrobson renamed this task from Vector should use list-style: disc before its list-style-image declaration to Vector should use list-style: disc before its list-style-image declaration to support browsers with images disabled.Mar 16 2022, 7:18 PM
Jdlrobson added a project: UI-Standardization.
Jdlrobson added a subscriber: Volker_E.

For some reason, images frequently refuse to load for me on Wikimedia websites lately.

This seems like a bigger concern to me. Why are images refusing to load - is that a problem with our servers, a gadget, or an issue isolated to you? I think gracefully degrading to a disc makes sense regardless. cc @Volker_E

Volker_E added a comment.Mar 16 2022, 7:29 PM

Related T234400: Use CSS bullets where applicable

stjn added a comment.Mar 16 2022, 8:05 PM
In T301887#7783114, @Jdlrobson wrote:

I can't replicate. A screenshot would be helpful.

Three different ones in a screenshot, for example:

image.png (2,163×874 px, 247 KB)

Either way, this is not such a huge change that it needs to be so meticulously discussed. I simply proposed a solution to a small bug (of using an image but not providing a fallback for it).

This seems like a bigger concern to me. Why are images refusing to load - is that a problem with our servers, a gadget, or an issue isolated to you?

Can’t answer this. It happens occasionally. I am not sure what exactly causes it. Certainly not a location problem or something, and should not be a device ratio problem either (since SVG images also don’t load in those circumstances, like in this case).

ovasileva edited projects, added: Web-Team-Backlog-Archived (Kanbanana-FY-2021-22); removed: Web-Team-Backlog-Archived.Apr 1 2022, 2:25 PM
ovasileva triaged this task as Medium priority.Apr 5 2022, 5:23 PM
ovasileva edited projects, added: Web-Team-Backlog-Archived; removed: Web-Team-Backlog-Archived (Kanbanana-FY-2021-22).
ovasileva moved this task from Not ready to estimate to Current Fiscal Year on the Web-Team-Backlog-Archived board.
Jdlrobson moved this task from Needs triage to Design on the Vector (legacy skin) board.Apr 25 2022, 9:39 PM
Jdlrobson moved this task from Design to Technical on the Vector (legacy skin) board.Apr 25 2022, 9:45 PM
Jdlrobson updated the task description. (Show Details)Apr 25 2022, 10:31 PM
Jdlrobson moved this task from Current Fiscal Year to Incoming on the Web-Team-Backlog-Archived board.Mar 20 2024, 8:57 PM
Restricted Application added a subscriber: Base. · View Herald TranscriptMar 20 2024, 8:57 PM
SToyofuku-WMF subscribed.May 15 2024, 8:04 PM
• matmarex added a parent task: T364865: Vector dark-mode should support bulleted lists.May 17 2024, 6:04 PM
• matmarex subscribed.
Jdlrobson assigned this task to Jdrewniak.May 23 2024, 11:34 PM
Jdrewniak closed this task as Resolved.May 27 2024, 4:18 PM

As part of T364865, we actually removed the bullet SVG in Vector 2022 in favour of the browser default:

ul {
    list-style-type: disc;
}

So I'm closing out this task since I think that changes addresses the issue here. (if we've made an egregious mistake by removing the bullet SVG please file a new task for that).

Jdrewniak removed Jdrewniak as the assignee of this task.May 27 2024, 4:19 PM
Jdrewniak subscribed.
stjn added a comment.May 27 2024, 10:44 PM

@Jdrewniak old Vector seems to still have the same code that was mentioned above on en.wikipedia.beta.wmflabs.org. Are you sure you were right to close this task?

Nardog subscribed.May 28 2024, 5:45 AM
Jdlrobson removed a project: Web-Team-Backlog-Archived.May 28 2024, 4:02 PM
Jdlrobson added a comment.May 31 2024, 5:18 PM

@stjn legacy Vector is in maintenance mode now similar to Timeless, Monobook, Modern, CologneBlue so patches to that skin are only limited to what is essential.

stjn added a comment.EditedJun 1 2024, 11:59 AM

If only it was understandable why a coupled monstrosity of a skin (old/new Vector in one repo) was made if even the smallest patches to old Vector aren’t being made for no reason.

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