Page MenuHomePhabricator

[SPIKE] - Investigate technical approaches for improving mobile diffs [32hrs]
Closed, ResolvedPublicSpike

Description

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

Event Timeline

jsn.sherman changed the task status from Open to In Progress.Jan 26 2023, 3:29 PM
jsn.sherman created this task.
jsn.sherman renamed this task from [SPIKE] - Investigate technical approaches for improving mobile diffs [20hrs] to [SPIKE] - Investigate technical approaches for improving mobile diffs [24hrs].Jan 26 2023, 7:11 PM
jsn.sherman updated the task description. (Show Details)

moving to review so we can discuss findings to date

there is proposed work to improve the display of inline diffs in core so that they can be exposed

We may want to stay in touch with CommTech as I believe this came up as something they might work on - @NRodriguez

We'll need to see what the best way is to isolate our changes to the mobile experience

@jsn.sherman At some points I think you've mentioned foregoing thinking about mobile and instead thinking about screen width - could that be an option here? i.e. we switch to this view when screen width is below some number?

there is proposed work to improve the display of inline diffs in core so that they can be exposed

We may want to stay in touch with CommTech as I believe this came up as something they might work on - @NRodriguez

Yeah, I'm imagining specifically substituting our design for T240624: Style desktop Minerva diff page to look like Special:MobileDiff along with whatever core adjustments might need to be made.

We'll need to see what the best way is to isolate our changes to the mobile experience

@jsn.sherman At some points I think you've mentioned foregoing thinking about mobile and instead thinking about screen width - could that be an option here? i.e. we switch to this view when screen width is below some number?

The inline diff is different content from the 2-column diff, and it's computed separately, so that's not really feasible with a server-side design. My suggestion would vary the layout on the query parameter that selects the diff type. A client-side approach could request the diff type based on width after page load, but that would be a bigger change compared to my suggested approach.

I'm going to park this for now so we can create a proof of concept for replacing mobilediffs with diffs

Note that to use the same diff engine as production wikis locally, you need to install it locally. So far, I've just done:
docker-compose exec -u root mediawiki bash -c 'apt update && apt install -y php-wikidiff2'

the packaged version is too old to run with mediawiki-docker's php, so I'll either need to build it or see if there's another convenient way.

I created a dockerfile to use as context for building a mediawiki image with wikidiff2 support in docker compose.
https://github.com/jsnshrmn/buster-php81-fpm-wikidiff2/tree/master
I've reached out to see if there's a more convenient way to do this, and post my findings here.

jsn.sherman renamed this task from [SPIKE] - Investigate technical approaches for improving mobile diffs [24hrs] to [SPIKE] - Investigate technical approaches for improving mobile diffs [32hrs].Feb 8 2023, 8:11 PM