Weird scrollbar in file

Problem description

In the editor, when trying to scroll in the file, there is a weird scrollbar, with squares and lines.

Expected behavior

Should be normal, with no squares or lines.

Actual behavior

Scrollbar has coloured squares and lines.

Steps to reproduce

Go to file, look at scrollbar for the file.

Browser

Chrome

OS

Windows 10

Device if mobile

NA

Plan

Core

Please upload screenshots

In many code editors, there are also various dashes and squares on the scrollbar. Different colors and shapes indicate different parts of your code. For example, an orange rectangle shows a place where there is an uncritical error or a place where the code can be improved (in short, where the text is underlined in yellow). The red rectangles most likely indicate critical errors in the code. The gray line indicates the position of the editing cursor.

This is not a bug, but a new feature.

5 Likes

The grey line doesn’t seem to be a cursor. Lines with green squares don’t seem to have any errors.

I checked several times, and the same number of times I made sure that the gray line marks the place where the file was edited.

I can’t say anything about the green line, since I didn’t find it in any of my replays.

Green squares… Comments perhaps? I can’t check, as IIRC I have my scrollbar on the other mode, and I quite like it that way.

2 Likes

Right. I’ll check when I’m on my laptop later. Maybe I’m checking wrongly? In the scrollbar, I click on the squares, so the scrollbar rectanble jumps to the square.

Hey there - this is in fact a new feature. It’s similar to the " Overview ruler" in VSCode. Many developers find this useful for quickly locating certain pieces of information in large files.

  • Green/Blue indicators on the left side (horizontally) of the overview ruler are usually “Git” related decorations. Green indicates new lines added. Blue indicates existing lines changed.

  • Red/Orange/Yellow indicators in the center (horizontally) of the overview ruler are usually “Diagnostic” related decorations, where Red typically indicates errors, yellow/orange are warnings.

There also should be a horizontal line at the position of your cursor.

Clicking anywhere on the scrollbar will jump you to that point in the file, so in large files you can quickly view errors and jump to them to fix them.

We are just testing this with explorers at the moment, so I’d love to get your feedback. Is there anything else you’d like to see? Would you prefer a way to return to the browser default scrollbar? Etc.

Thanks!

5 Likes

I’ll test it out a bit more, and see how it helps my coding.
Thanks for the update!

1 Like

I definitely like this update. It looks like a minimap that is reduced and does not interfere with viewing the code.

3 Likes