Currently skins need to implement the JS for lazy loading themselves.
e.g. Minerva :
https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/blob/master/resources/mobile.startup/Skin.js#L81
As a result images do not load in other skins when they run in mobile mode
e.g. Vector
https://en.m.wikipedia.org/wiki/Jennifer_Lawrence?useskin=vector
The HTML markup comes from MobileFrontend and MobileFormatter.
To get lazy loading images working a skin needs to run the following code:
mw.loader.using('mobile.startup').then(()=> {
var M = mw.mobileFrontend;
var Page = M.require( 'mobile.startup/Page');
var Skin = M.require('mobile.startup/Skin');
new Skin( { el: 'body', page: new Page( { namespaceNumber: mw.config.get( 'wgNamespaceNumber' ) } ), tabletModules: [] } );
})This is highly unreasonable.
Proposed solution
The MobileFrontend extension will register a lightweight mobile.init module which runs script for all skins operating in mobile mode. It will provide an instance of a skin and will provide the method mw.mobileFrontend.getCurrentPage that is currently inside MinervaNeue.
MinervaNeue will no longer create its own instance of a skin, instead making use of the skin created inside the new mobile.init module.
Open questions
While working on this I hit one snag: https://gerrit.wikimedia.org/r/376553
- When we port this over we'll need to make a decision about the tabletModules. Currently the Skin object is responsible for loading certain modules on demand. If the Skin is defined inside MobileFrontend, then Minerva has no way to communicate what modules it needs to load. We'll need to create that mechanism using mw.config or mw.hook. I personally think this code is a burden that provides very little value and I propose we remove it and merge the skins.minerva.tablet.scripts with skins.minerva.scripts per T167713 to make this problem go away.
Acceptance criteria
- The Skin code should be refactored so it is loaded and run on all mobile skins and initialisation of the skin should happen in MobileFrontend not MinervaNeue like so: https://gerrit.wikimedia.org/r/376557
- Images will load on https://en.m.wikipedia.org/wiki/Jennifer_Lawrence?useskin=vector