Arrange diffs with CSS grid layout
Open, Needs TriagePublic

Actions

Assigned To

None

Authored By

	Esanders
	Dec 23 2020, 4:41 PM

Description

This allows users to select (and copy) and entire column, without ending up with an interlaced mess.

Demo: https://jsfiddle.net/edg2s/qdhrxz9y/

Requested in https://meta.wikimedia.org/wiki/Community_Wishlist_Survey_2021/Editing/Copy_and_paste_from_diffs

Details

	Subject	Repo	Branch	Lines +/-
	POC Re-arrange diff into a grid layout	mediawiki/core	master	+74 -4

Customize query in gerrit

Related Objects

Search...

		Status	Subtype	Assigned	Task
		Open	BUG REPORT	None	T293898 Chrome ignores the side-locking CSS in diffs for the HTML clipboard content
		Open		None	T270775 Arrange diffs with CSS grid layout

Event Timeline

Esanders created this task.Dec 23 2020, 4:41 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptDec 23 2020, 4:41 PM

Note that CSS grids are not supported by all our target browsers:

So the table layout will need to be preserved for legacy browser users.

As the DOM order will change between the table layout and the grid layout, the conversion will have to done with JS.

Rschen7754 subscribed.Dec 23 2020, 5:24 PM

Change 651830 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/core@master] POC Re-arrange diff into a grid layout

https://gerrit.wikimedia.org/r/651830

gerritbot added a project: Patch-For-Review.Dec 23 2020, 7:57 PM

Test wiki created on Patch Demo by ESanders (WMF) using patch(es) linked to this task:

http://patchdemo.wmflabs.org/wikis/6c72ee9e5d4aa76e332674428e3cc588/w/

Example: https://patchdemo.wmflabs.org/wikis/6c72ee9e5d4aa76e332674428e3cc588/w/index.php?title=Main_Page&type=revision&diff=21&oldid=20

Aklapper awarded a token.Dec 24 2020, 11:02 AM

taavi subscribed.Dec 24 2020, 12:52 PM

The above approach is a bit hacky as it modifies the DOM output significantly after doing some feature detection. It could be gadgetised.

A better approach would be to create a new DiffFormatter in the backend that outputs the grid DOM structure, but it’s hard to know which structure the client supports ahead of time.

Once we are generating the grid DOM on the server the following options are available:

Grid only

Output the grid DOM only and fix the alignment using JS for browsers which don’t support CSS grids (similar to how ContentTranslation keeps paragraphs aligned). You would then have:

browsers which support CSS grid (~93% according to caniuse) get a correct layout instantly, regardless of if JS is enabled
browsers without CSS grid (mostly IE11) will get a two column layout, with the rows aligned momentarily later by JS
if JS disabled and no CSS grid support (probably a small fraction of a percent), then side by side diff without alignment shown.

Grid and table

Another approach would be to ship both versions of the diff (grid and table) to the client, and then only show the one which is supported using an @supports selector. The downside here is increased bandwidth for large diffs, but it would work in all browsers without requiring JS.

Issues

I also expect a lot of gadgets and extensions (three col diff, revision slider ?) have come to rely on the current table DOM, so changing that could cause regressions.