Skip to content

Ensure job log keeps scrolled to bottom

Mark Florian requested to merge 207570-fix-job-log-scroll-bottom into master

What does this MR do and why?

Ensure job log keeps scrolled to bottom

The isScrolledToBottom function assumed that the scroll position of the document would always be an integer. That used to be true, but modern browsers return floats, for subpixel precision. See https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY.

Addresses #207570 (closed).

Changelog: fixed

Remove unused scrolling animation and styles

This was last confirmed working in !21442 (merged). Since then, styles changed, and the animation got silently broken.

This also removes an opacity change on the disabled buttons, which seems unnecessary, and the not-allowed cursor style, which is automatically applied by GlButton.

Correctly disable scroll to bottom in job log

The isScrolledToMiddle function suffered from the same problem as isScrolledToBottom in the previous commit: that floats can be returned for the scroll position.

This function is redundant anyway. If the view isn't scrolled to the top or the bottom, it must be in the middle!

Remove unused function

Screenshots or screen recordings

Description Before After
Video of scroll-to-bottom behaviour
NOW WORKS 		simplescreenrecorder-2023-02-07_18.28.19 simplescreenrecorder-2023-02-07_18.24.17
Button states when scrolled to top
SCROLL TO TOP BUTTON NOW OPAQUE 		before_top after_top
Button states when scrolled to middle
NO CHANGE 		before_middle after_middle
Button states when scrolled to bottom
SCROLL TO BOTTOM BUTTON NOW DISABLED 		before_bottom after_bottom

How to set up and validate locally

  1. Set your browser zoom level to something other than 100%.
  2. Run a pipeline in any project which produces a reasonable amount of ouput in one of its jobs. Clone https://gitlab.com/samdbeckham/test if you don't have one.
  3. Visit the job log of that job.
  4. Scroll to the bottom.
  5. Observe that the Scroll to bottom button is now disabled, and remains disabled as new log lines load.
  6. Observe that the scroll position stays fixed to the bottom.
  7. Scroll up a bit, and observe that the job log is no longer followed by scroll.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Mark Florian

Merge request reports