Restyle the diff viewer to not collapse borders.

Review Request #9048 — Created July 5, 2017 and submitted


Review Board


Historically, the diff viewer table has used collapsed borders, meaning
that the browser would determine which of the borders being applied
in-between two cells would apply. This worked alright, but it meant we
were subject to the browser's implementation, and more recently it
impacted some work being done when rendering diff fragments
(specifically, that work involves transforming the position/size of
some rows, and doing this caused funky results with the border

This change moves us to a separated border model. In this model, two
neighboring cells can each have their own borders and they'll both
apply (doubling the border). Because of this, the border styles had to
be redone a bit. We now set the border-top of the first line of chunk
borders and leave the bottom borderless, allowing the following chunk to
use its border-top to complete the borders of the previous chunk.

The separate borders also allows us to have cleaner separators in the
diff fragments when expanding.

Hand-crafted precedence rules were written to choose the best borders
for each neighboring combination of chunks, helping to pick the
best-contrasting borders in each situation.

Presentation-wise, nothing has actually changed. Everything actually
renders as it did before, with the exception that some of the borders
pair up nicer. It will make some following work possible, though.

Checked all combinations of adjacent chunk types, and inspected all
borders everywhere in the diff viewer. Verified that everything looked
the same (or subtly better).

Expanded diff fragments in reviews and saw that the border lines were
still showing up.

  1. Ship It!
Review request changed

Status: Closed (submitted)

Change Summary:

Pushed to release-3.0.x (6dacd55)