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

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

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.

Summary ID
Add a component class for comment thumbnails, with dark mode support.
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.
4ccd2b9f1c1a96da32a70e2043dc9573b5193d9e

Description From Last Updated

I notice that we don't have a border at the bottom of the comment thumbnails in dark mode, but we …

maubinmaubin
david
  1. Ship It!
  2. 
      
maubin
  1. 
      
  2. Show all issues

    I notice that we don't have a border at the bottom of the comment thumbnails in dark mode, but we do in light mode. Was this intentional? I think I prefer the look of having the border, for example:

    Image
    Image

    1. Oh, I did have those. Looks like I broke it at some point.

  3. 
      
chipx86
chipx86
maubin
  1. Ship It!
  2. 
      
chipx86
Review request changed
Status:
Completed
Change Summary:
Pushed to release-7.x (edb1cf3)