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.