5029: Comparing images is harder than necessary

jameslin

What version are you running?

5.0.6, but I confirmed that this problem still exists on demo.reviewboard.org, which is running 7.0.2 alpha 0 (dev)

What's the URL of the page containing the problem?

What steps will reproduce the problem?

  1. Create a review request that has a "before" image and an "after" image for some visual change.
  2. Open the "before" image in one browser tab. Open the "after" image in another browser tab.
  3. Try to switch between the browser tabs to compare the images.

What is the expected output? What do you see instead?

If the image is the first attachment, it will be displayed with a > button on the right side of the page. If the image is the last attachment, it will be displayed with a < button on the left side of the page. This is a problem because the existence of the buttons affects the placement of the image on the page, preventing someone from switching between browser tabs to easily see the differences between two similar images. (See the attached screenshots.)

What operating system are you using? What browser?

Windows 11 23H2 with Firefox 132.0.2.

Please provide any additional information below.

One way to fix this would be to always reserve space for both < and > buttons even if one (or possibly both) aren't visible.

There are a couple of other problems that make comparing images harder than necessary:

  • Clicking on the > and < buttons triggers a page refresh, so (at least with my browser) the page temporarily becomes blank before showing the next or previous image. If the buttons instead could dynamically show the new image without reloading the page, that would be less disruptive and also would make comparison easier.

  • I can't right-click on attached images and choose "Open Image in New Tab". If I could directly view the images in my browser without the Review Board page elements, I could still switch between browser tabs to compare them.

jameslin
#1 jameslin

I made an example review request that demonstrates this as https://demo.reviewboard.org/r/46/ (at least until the next time the demo server gets reset).