Add a mobile view for the diff viewer.
Review Request #13312 — Created Oct. 6, 2023 and submitted — Latest diff uploaded
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
start).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.This change doesn't require any JavaScript or server-side work.
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.