Page MenuHomePhabricator

ResourceLoaderOOUIIconPackModule doesn't support selective variants
Open, LowPublic

Description

When using ResourceLoaderImageModule, an icon can select which variants or do not apply to it. When using ResourceLoaderOOUIIconPackModule we bloat modules unnecessarily. For example an icon shipped by mobile.editor.images is not used anywhere in the interface (only destructive variant used). Addressing this allows us to reduce bytes on a variety of image modules.

For example here - a module with the following defintion will define rules for .mw-ui-icon-mf-error, .mw-ui-icon-mf-citation-invert and mw-ui-icon-mf-citation but NOT .mw-ui-icon-mf-error-invert

			"variants": {
				"invert": {
					"color": "#fff"
				}
			},
			"images": {
				"citation": {
					"file": "resources/mobile.startup.images/reference.svg",
					"variants": [ "invert" ]
				},
				"error": "resources/mobile.startup.images/error.svg",

However in ResourceLoaderOOUIIconPackModule this is not possible - all variants are global.

			"variants": {
				"invert": {
					"color": "#fff"
				}
			},
			"icons": [ "citation", "error" ]

I should be able to declare the above ResourceLoaderOOUIIconPackModule like so:

			"variants": {
				"invert": {
					"color": "#fff"
				}
			},
			"icons": { "citation": { "variants": [ "invert" ] }, "error": {} }

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Krinkle removed Krinkle as the assignee of this task.EditedJun 16 2020, 5:19 PM
Krinkle triaged this task as Low priority.
Krinkle moved this task from Backlog to Accepted Enhancement on the MediaWiki-ResourceLoader board.
Krinkle subscribed.

If I understand correctly, this is not blocking development, but would allow for a (small) optimisation where a given variant would require fewer redundant bytes to be transferred.

Based on a quick test, it seems the cost is currently ~ 35 bytes transferred per additioanl image/ ariant. This makes it not very worthwhile to persue, at least not while we have more valuable things to persue instead.

Example: https://3v4l.org/XD3sn

Advice: If ResourceLoaderOOUIIconPackModule does what you need, use it :)