Improve UI of job log linking

While with collapsible job logs the UX is now way better, I see a small but powerful improvement that we could add.

We can now link to a specific line of a job trace. Which is awesome! But in long trace it's really hard to recognize which line was in fact linked. Please look at https://gitlab.com/gitlab-org/gitlab-runner/-/jobs/326770209#L1652

trace-lines

Since the line is at the bottom of the page, it can't be scrolled to be at the very top. Try to quickly recognize which line was linked - it's impossible wihtout looking on the URL and searching for a relevant line number.

In comparison, when we link to sources - https://gitlab.com/gitlab-org/gitlab-runner/blob/v12.4.1/main.go#L64:

code-lines

the specific line is highlighted. We can even specify a range of lines, e.g. https://gitlab.com/gitlab-org/gitlab-runner/blob/v12.4.1/main.go#L64-66

code-multiple-lines

And the whole range is highlighted.

It would be good to make the same possible with the job log UI.

Assignee Loading
Time tracking Loading