Add a component class for comment thumbnails, with dark mode support.

Review Request #13854 — Created May 14, 2024 and submitted — Latest diff uploaded

Information

Review Board
release-7.x

Reviewers

We had multiple places were we were styling comment thumbnails. Both
reviews and the review dialog had their own variants on a structure for
these, with different styling, and those styles had hacks that made dark
mode support difficult to properly add.

In an effort to make this more maintainable, and to add dark mode, we
now have a new CSS component called rb-c-review-comment-thumbnail,
which is responsible for styling the thumbnail area for a comment. This
includes the header (usually a filename and revision) and any thumbnail
contents (an image, part of a document, or a diff).

There are still hacks involved. In particular, we still treat diffs
specially. Instead of providing its own header, this component uses the
diff's filename header. It also works with the expand-controls-on-hover
logic, when opted into. This all involves some special structure and
rules specific to diffs. However, we still benefit from having all of
this nicely grouped together with the base header and content styles,
and all in one component instead of scattered throughout other CSS
files.

Styling has also been fixed up for some of the types of content we
render. Diffed text files, for instance, no longer attempt to override
borders for everything. This will benefit the review UI as well.

Tested in light and dark mode for all comment types, both draft (in the
Review Dialog) and published (in reviews).

Tested diff expansion in light and dark modes in both the Review Dialog
and in published reviews.

Python and JavaScript unit tests pass.


Commits

Files