The mobile presentation layer for production wikimedia projects has quite a few moving parts
# [[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/43a821496787e1690cace145bd097632c5705346 | Core ]] generates much of the markup for most pages
# [[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/skins/MinervaNeue/+/3109d9aa8fe82ed69c999a7999bb44f160838653/ | MinervaNeue skin ]] provides a responsive interface with limited features
# [[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/MobileFrontend/ | MobileFrontend extension ]] provides mobile device detection to automatically switch to the MinervaNeue skin for mobile users. It also provides additional functionality for making mobile-specific experiences
Changing the mobile experience may require modifying all 3 code bases, so I've been experimenting with how to modify each, using Special:Preferences as my starting point, since it is of particular interest to us per {T309288}
- [[ https://gerrit.wikimedia.org/r/c/mediawiki/skins/MinervaNeue/+/803952 | 803952 (WIP) ]] load custom css on Special:Preferences page in the minerva theme. This example targets desktop and mobile, and completely ignores the MobileFrontend extension. In practice, this would not show up on the production desktop experience unless a user set their desktop skin preference to Minerva. Includes a very basic preferences-only javascript function.
- [[ https://gerrit.wikimedia.org/r/c/mediawiki/core/+/806293 | 806293 (WIP) ]] Add custom CSS / JS to Special:Preferences in core. This one replaces
- [[ https://gerrit.wikimedia.org/r/c/mediawiki/extensions/MobileFrontend/+/803991 | 803991 (WIP) ]]
create custom Mobile Preferences page by extending Special:Preferences. This allows us to creating our own OOUI form class so that we can avoid tab panels all together.