Use ResourceLoaderImageModule to serve icons for OOjs UI

Authored by matmarex.


Use ResourceLoaderImageModule to serve icons for OOjs UI


  • Full per-language icons support. Icons that differ for each language (such as the 'Bold' icon) will now always display correctly according to user interface language, even on old browsers.
  • MediaWiki UI icons support. When the 'mediawiki.ui.icon' module is loaded, you can use syntaxes such as below to display any OOUI icons (from the packs that were loaded) without involving OOUI itself. <div class="mw-ui-icon mw-ui-icon-before mw-ui-icon-check">OK</div> <div class="mw-ui-icon mw-ui-icon-after mw-ui-icon-check">OK</div> <div class="mw-ui-icon mw-ui-icon-element mw-ui-icon-check">OK</div>

Summary of changes:

  • Resources.php:
    • Remove icons CSS files. Include image data JSON files instead.
    • Split the images from 'oojs-ui.styles' module to separate ones.
  • OutputPage: Update enableOOUI() method for newly split modules.
  • ResourceLoaderImageModule: Make it possible to load image data from a JSON file.
  • update-oojs-ui.sh: Copy source files rather than distribution for icon packs.

This is not an improvement when it comes to code quality, though :(
Issues include some nasty code duplication, using "source code" (image
definitions) from OOUI rather than just distribution files, and hacky
methods to load image data from JSON files live.

Bug: T92551
Change-Id: Id369ecaec7048dcf68ba1e4df748362760533782