List view top padding

[rebornix]

In notebook, we allow users to insert cells at the top of the document through a toolbar (+ Code, + Markdown)

The toolbar is part of a list item, so to support it we need some padding at the top of the list view. However, we didn't put the top padding on the outer container of the list widget because when the user scrolls the list view, we want the toolbar to move out of view.

Our current approach is very "hacky", we put a top padding on the scrollable element div of the list view. The catch with this approach is that when users navigate in the list view, the list item doesn't always fully reveal itself (it's off by ${top_padding}px).

Proposal

Ideally, we would like to implement a setting similar to Monaco Editor's editor.padding.top in the list view. Monaco editor allows us to customize both the top and bottom padding (editor.padding.top, editor.padding.bottom), currently we can already customize the bottom padding by changing listOptions.additonalScrollHeight but there isn't a way to customize the top.

[rebornix]

@joaomoreno I built a prototype of adding the topPadding concept to the RangeMap in #178627 which archives what's described above. I'm not happy with how we update it https://github.com/microsoft/vscode/pull/178627/files#diff-3d4ece577e675a1d9b84484897bc7f64624f7a6d0ea9c4ce715713afcbf9032fR473-R487 but you can get an idea of what I'm asking for.

[rebornix]

Fixed via #178627

[rebornix]

We now can set list view's top padding directly instead of our hack of CSS. This means we can programmatically update the padding based on the height of sticky scroll. cc @Yoyokrazy