Add a mobile view for the diff viewer.
Review Request #13312 — Created Oct. 6, 2023 and updated
This introduces a long-awaited mobile view for the diff viewer. This is
a pure-CSS solution for viewing existing diffs in a mobile, unified diff
display, without the need for a re-render of a diff.
All diff functionality works as normally. Users can browse the diff,
expand, collapse, download files, make multi-line comments,
view/navigate moved line flags, and view interdiffs (though the revision
slider has interaction problems on mobile).
On mobile, the diff viewer is rendered as a CSS Grid, with three
columns: Original line number, modified line number, and line content.
The grid's column setup provides ample room for large line numbers
(safely up to 6 digits) before a given row's line number column
truncates (it will truncate on the left). This is for browsers without
support for Subgrids. For those that do support Subgrids, the columns
will resize for the number of digits needed (and reserve less space to
Inserts, deletes, and equals present the same as before, though only one
column of line content is shown. Replaces work differently, as they're
shown in pairs of deletes and inserts, helping visualize on a
line-by-line basis how the content has changed.
There are some queries using the modern
:has()selector, which Firefox
doesn't fully support. This is just for cleaner border styling, and is
not detrimental. Firefox will have improved styling once this is fully
supported (which, according to bug reports, should be any day now).
Tested on Chrome, Firefox, and Safari with and witout Subgrids.
Tested the diff viewer on both desktop and mobile views.
On mobile, I tested move detection, commenting (single- and multi-line),
file downloads, move flags, expansion/collapsing, and interdiffs, with
all kinds of mixes of inserts/deletes/replaces.
While this should theoretically be safe and a strict improvement over what we have now, it makes me very nervous to be dropping changes of this size and scope this close to release.
Given that we want to turn around a 7.0 pretty quickly in order to shift us over to Django 4.2, how would you feel about making the mobile diffviewer stuff be a feature of that release instead?