Open rebornix opened 3 years ago
💯
Just to outline the troubles I have only in the editor tabs control:
@rebornix thanks for doing this. Having a central place where all the z-indexes are listed is a great suggestion, that way when you introduce a new one you can see how it relates to the existing indexes.
Currently in the workbench, we have quite a lot of custom floating elements, e.g., context menu, hover, suggest, which are not native OS controls. To ensure they are above other DOM elements, we usually update
z-index
but since the workbench grid view is flat, mostz-index
we use now are universal (not limited to its own container) and we kept seeing floating elements overlap each other in funny ways (for example, suggest widget overlaps with sash, context menu, toolbar, etc).We can probably introduce some const enums for zindex, which can be used as a guidance for updating zindex in your own component:
The list will be short and give us an idea of what range of
z-index
is safe to use in one particular component.Current status
monaco-drag-image
https://github.com/microsoft/vscode/blob/97a719dd9b6f56ae724df1beb79944596d998eb6/src/vs/base/browser/ui/list/list.css#L65notifications-center
https://github.com/microsoft/vscode/blob/84043ab3b8f1aa6c60baeecffda3947366b3d888/src/vs/workbench/browser/parts/notifications/media/notificationsCenter.css#L8menubar-menu-items-holder
https://github.com/microsoft/vscode/blob/e62bf133c4562fead1e0a128294066a73a5661b8/src/vs/base/browser/ui/menu/menubar.css#L48quick-input-widget
https://github.com/microsoft/vscode/blob/73274265d7e59b458d70b182d52dccf25d565749/src/vs/base/parts/quickinput/browser/media/quickInput.css#L9context-view
https://github.com/microsoft/vscode/blob/01b37c6b5d991f959f0b31a58055fecf6bc52729/src/vs/base/browser/ui/contextview/contextview.css#L8titlebar
https://github.com/microsoft/vscode/blob/84043ab3b8f1aa6c60baeecffda3947366b3d888/src/vs/workbench/browser/parts/notifications/media/notificationsCenter.css#L8monaco-dialog-modal-block
https://github.com/microsoft/vscode/blob/0d0026e42f74553b3cd7eb8419a9bdaaa7e5573d/src/vs/base/browser/ui/dialog/dialog.css#L13window-controls-container
https://github.com/microsoft/vscode/blob/67c889e39416c958fc7cb84e4814df2225c22852/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css#L128monaco-pane-drop-overlay
https://github.com/microsoft/vscode/blob/7c3f60f86e6776c4a339c23f85fd9a11c3424bbb/src/vs/base/browser/ui/splitview/paneview.css#L123monaco-editor-overlaymessage
https://github.com/microsoft/vscode/blob/55fdf94d67dfc72eaaf25655b7b0d9ff16d2e301/src/vs/editor/contrib/message/messageController.css#L6