As part of T312640: Evaluate and improve diffs and undoing edits on mobile web, we need to understand how diffs work as currently implemented and identify an approach to improve diffs. We need to answer the following questions:
How do the layers of production mediawiki code and configuration interact to create the current desktop and mobile diff experiences?
The inline diff formatter has been added to core (https://gerrit.wikimedia.org/r/c/mediawiki/core/+/547057/) and dropped from mobileFrontend (https://gerrit.wikimedia.org/r/c/mediawiki/extensions/MobileFrontend/+/556811/). Various pages that use diffs (eg. Article, SpecialComparePages, Special:Undelete in core, Special:MobileDiff in mobileFrontend, etc) call createDifferenceEngine and setup the diff display within the page. Special:Diff itself is a form that directs users to the appropriate diff display based on revision ids. Currently mobileDiff has page-specific styles.
What libraries and/or frameworks (if any) are used to enable the current experience?
diffs (in mobilefrontend and core) are currently rendered using html and css. the js is minimal. The inline diff is depends upon the wikidiff2 php module (available on all wmf wikis to my knowledge) and outputs a single column table. if wikidiff2 isn't available, a two column view is displayed.
Should we build on top of MobileFrontend or core?
The balance of findings so far point towards core. The underlying markup is identical, and there is proposed work to improve the display of inline diffs in core so that they can be exposed and to remove Special:MobileDiff altogether. See: T117279: [EPIC] Core should provide inline diffs as well as side by side (Move InlineDifferenceEngine into core / remove MobileDiff). We could at least further this goal (if not complete it) by implementing our improvements in core and linking to those in mobilefrontend/minerva without necessarily exposing the inline diffs on desktop yet. The web team created a patch that we can use to create a desktop inline diff feature for mobile frontend that we could use to toggle this for AMC users if we go that route for initial rollout: https://gerrit.wikimedia.org/r/c/mediawiki/extensions/MobileFrontend/+/879628
What is the lightest lift to implement the (currently underway) codex-based design for mobile users?
We can style the existing inline diff by implementing the codex design tokens server-side. They can be imported directly into less: https://www.mediawiki.org/wiki/Codex#Using_Codex_design_tokens
The codex icons must currently be loaded client side, so those would be a progressive enhancement for now, though there is a less mixin planned.
We'll need to see what the best way is to isolate our changes to the mobile experience: we'll needed to experiment with selectively applying css classes based on parameters passed to the diff view and probably defining those in minerva. We should also investigate amending the view in mobilefrontend.
What elements of the design might need to be amended to improve feasibility of implementation?
If we're going with styling server-side markup, we should limit the use of interactive components that require js,
What level of ie11 support is required?
TBD: We seem to have declared our intention to phase out ie11 support, but I'm not sure how to apply that on a tactical level https://www.mediawiki.org/wiki/Compatibility/IE11
I'm not sure that there is enough "new" here to justify dropping ie11 or significantly degrading it.
What level of nojs support required?
TBD: I believe we can avoid big regressions by sticking with a server-side architecture, though we might leave icons as a js-only feature. Our nojs guidance still seems to indicate progressive enhancement as the way we're supposed to do things https://www.mediawiki.org/wiki/No-JavaScript_notes