When I installed MobileFrontend without exposing /w/extensions/MobileFrontend on my web server, I got 8 404s for various images and lots of stuff was missing from the interface.

Grepping showed that there are lots and lots of background images that aren't embedded because they're not using the mixin.

Example of correct code:

less/common/ui.less
53: #mw-mf-main-menu-button {
54- .background-size( 24px, auto );
55- background-position: 40% 40%;
56- .background-image-svg( 'images/menu/hamburger.svg', 'images/menu/hamburger.png' );
57- }

Example of incorrect code:

less/common/pageactions.less
81-#ca-edit {

82: background-image: url(images/pagemenu/edit-locked.png);

84- &.enabled {
85: background-image: url(images/pagemenu/edit.png);

I forget what the mixin is for when you don't have both an SVG and a PNG (also, isn't there an SVG for every single icon?), but there is one in MW core and it should be used.

Running ack-grep -Q 'url(' -B 1 extensions/MobileFrontend/less reveals a total of 50 (!!) cases where url() is used without /* @embed */ and without using a mixin.

Version: unspecified
Severity: normal
See Also:
https://bugzilla.wikimedia.org/show_bug.cgi?id=72620