Frontend standards group/Roadmap
In progress edit
Server-side OOUI (OOUI PHP) edit
Some components can be generated on the server using PHP. HTML structures are compatible with Client-side OOUI (OOUI JS) allowing a single theme to be used.
Next up edit
OOjs Element DOM binding edit
Elements can be created by binding to and modifying existing DOM structures. Depends on Server-side OOUI.
ResourceLoader image support edit
ResourceLoader can generate stylesheets containing embedded variants and PNG fallbacks for images on disk.
Recently completed edit
Icon generation edit
SVG icons can be colored and rasterized to produce theme-specific versions. Currently used by OOUI WikimediaUI theme but needs to be integrated into MediaWiki core.
Areas of work edit
This is an overview of all work planned to be completed. It is not necessarily in progress, scheduled or finalized in it's current state.
Adoption of OOjs edit
- Standardize on OOjs as the official Object inheritance and utility library for the client within MediaWiki core and projects
- Specifically, moving away from dependence on Mantle for similar functionality (phab:T85890).
- MobileFrontend is still using
ext.mantle.oo(and ext.mantle.views). Flow uses OO.Registry, oo.EventEmitter, and oo.initClass instead of its home-grown OO code since 2014-10.
- MobileFrontend is still using
- Also improving documentation and finding other one-off solutions that may warrant conversion
Adoptability of OOUI edit
- PHP Implementation
- Testing between implementations to keep them in sync
- Available widgets for existing use cases
- Support for progressive enhancement
- Ability to automatically create a client-side widget object from existing DOM rendering ("resurrection")
- Simplified static controls that become rich controls when possible on the client
- Convenient integration into MediaWiki
- Image support in ResourceLoader
- Including support for variants, rasterized fallbacks, language-specific overrides and RTL overrides / generated flipping
- Granular packaging for a-la-carte use
- MediaWiki theme lives in MediaWiki
- Documentation
- Useful and CI tested examples
- More tutorial documentation on wiki
- Improved reference documentation
- Integration into User Interface Guidelines
- Useful guidelines for practical application
- Live demos of controls with guidelines on how they should be used
- Links to examples and references, possibly a component playground
Use of OOUI in MediaWiki Core edit
- Show by way of example in core how extensions can take advantage of OOUI
- Convert existing interfaces to use OOUI for control generation
- Login (gerrit:183390) and CreateAccount
- Preferences
- Frequent page-level commands
- MovePage, Protect, Delete, etc.
- Major non-form pages
- Special:Log, RecentChanges, Watchlist, etc.
- Utilize progressive enhancement where appropriate
- Text inputs become TitleInputWidget objects on the client with title suggestions as you type
- Example use: the search box in skin
- Restricted wikitext textareas become WikitextInputWidget objects with a basic formatting toolbar, restrictions
- Example use: log message entry for Special:MovePage
- Drop-down menus with few options become ButtonSelectWidget objects
- Example use: the render option block in Special:Preferences > Appearance > Math
- Drop-down menus with many options become InlineMenuWidget objects and conform to style guidelines
- Example use: the "image size limit" control in Special:Preferences > Appearance > Files
- Text inputs become TitleInputWidget objects on the client with title suggestions as you type
Template system in MediaWiki Core edit
- Remove dependence on Mantle extension for templating and instead use directly from core
- Introduce template processing for server and client into MediaWiki core
- Use ResourceLoader to transport templates
- Support pluggable template languages, initially allowing plain HTML and one other template language (Architecture Team to decide which one)
Skin rewrite edit
Skins are are assembled using client-side and server-side widgets which are generated from and modified via a data model. Depends on Server-side OOUI and OOjs Widget binding.