Add UI for easily linking to comments or replies in reviews.

Review Request #9184 — Created Sept. 8, 2017 and submitted

Review Board

Linking to particular comments or replies in reviews used to require
digging through the page to get the appropriate anchor name, which was
kind of terrible. The header/footer of reviews couldn't even be linked to.
This change aims to fix all this by introducing a couple UI enhancements
for linking.

The timestamps on entries and on replies are now anchors to their
particular locations, allowing one to right-click and copy the link.
This is a familiar concept for many, which is why it's included, but
it's not the primary means of linking, as it doesn't cover everything.
Top-level comments don't have individual timestamps, so it's not
suitable for those.

Instead, we offer a common way of linking to any comment or reply by
hovering over and clicking a link icon to the left of the review box.
This only shows on hover, keeping the UI largely clean, but making the
presence of the link obvious to users.

The "floating anchor" link is positioned such that a user can easily
move their mouse cursor from the comment/reply onto the link without it
disappearing. It covers the entire height of the comment/reply and
extends most of the way to the left of the page, with sufficient padding
around the icon itself to make it easy to hit.

This required a bit of element restructuring, as the comment and its
replies shared a parent container. Those are now split out into two
separate parents, retaining all the margins/padding that we had before,
but making it much easier to draft CSS rules that target exactly what we
need without hacks.

When linking to a comment or reply, we no longer wrap the text in a blue
box. This was kind of distracting and messed with the layout a bit.
Instead, we just use the standard browser behavior of scrolling to that
element. Highlighting of a selected comment may come back in a future
change in a different form, however, as I want to eventually add
keyboard navigation like the diff viewer has.

Tested hovering and the resulting links for all types of comments and
replies, in desktop and mobile mode.

Compared the padding/margins on the page with how things looked before
the restructuring/style changes.

Loading file attachments...

  1. Ship It!
Review request changed

Status: Closed (submitted)

Change Summary:

Pushed to release-3.0.x (935fdce)