gitea icon indicating copy to clipboard operation
gitea copied to clipboard

Add action auto-scroll

Open bytedream opened this issue 1 year ago • 5 comments

Adds an auto-scroll/follow feature to running actions (fix #25186, fix #28535).

When new log lines are appended and the bottom of the logs container (.action-view-right) is visible at this time, the page automatically scrolls down to the bottom of the logs.

bytedream avatar Mar 25 '24 01:03 bytedream

This kind of scrolling while nice, does present a UX issue when the user scrolls up: It would scroll it down again when the next line is received which is disruptive. It would be better to:

  • Scroll down as long as the user has not manually scrolled
  • If the user has manually scrolled and is not at the end, don't scroll
  • If the user has manually scrolled and is at the end, scroll

That way, a user can to view lines in a running step, while still having autoscrolling when they scroll to bottom. This is how pretty much all terminals do it as well.

In case it's unclear how to do this, I may have some code snippets laying around somewhere.

silverwind avatar Mar 25 '24 18:03 silverwind

I try to comply to this behavior by only scrolling if the bottom of the container which contains all job steps is visible when new lines are added. So if the user scrolls up and the container bottom isn't visible, it won't continue scrolling. This was the solution with the fewest code changes I came up with, but I'm also fine with the behavior you suggested.

bytedream avatar Mar 25 '24 19:03 bytedream

Sounds good. I guess this case is a bit tricker than the ones I had because it's not a simple self-contained element that scrolls but the whole page. When in doubt, check how GitHub does it.

silverwind avatar Mar 25 '24 20:03 silverwind

GitHub has the same behavior as my PR as long as there are only a few steps (+ the scroll down when visiting the an action page). When an action has many steps which may exceed the screen height, GitHub keeps the logs around the middle of the screen, if the following to-be-executed job steps are still exceeding the remaining screen height. When manually scrolling further down so that the latest log line is in the upper half of the screen (or completely out of view), GitHub scrolls up again to keep the latest logs in the middle of the screen. For example, Rust has actions with many steps.

From how GitHub does it, how you suggested it and how I would like it, I purpose the following:

  • Scroll down as long as the user has not manually scrolled
  • When the user has manually scrolled, keep following the logs when the last log line is in the bottom half of the screen, else do not follow

bytedream avatar Mar 28 '24 01:03 bytedream