Page MenuHomePhabricator

Investigate options for changing the mobile web experience
Open, Needs TriagePublicSpike


The mobile presentation layer for production wikimedia projects has quite a few moving parts

  1. Core generates much of the markup for most pages
  2. MinervaNeue skin provides a responsive interface with limited features
  3. 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: Investigate feasibility of styling Special:Preferences sections as menu items instead of scrollable tabs on mobile web [8hr]

JS/CSS only

  • 803952 load custom css on Special:Preferences page in the minerva theme.
  • 806293 Add custom JS to Special:Preferences in core. This one replaces the tab panel layout with a booklet layout based on mw.config.get('skin') === 'minerva'.

Combined, these two changes will replace the Special:Preferences tab panel with a booklet after page load for the minerva skin only. Click the image below to see it in action

special.preferences.booklet.cropped.gif (472×222 px, 129 KB)


  • 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.