Consolidate zindex for floating elements in the workbench

[rebornix]

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, most z-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:

const enum ZINDEX {
  Sash = 35,
  SuggestWidget = 40,
  QuickInput= 1000,
  ContextView = 2500,
  ModalDialog = 2600
  ...
}

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

• 35
  • Sash
  • Find Widget https://github.com/microsoft/vscode/blob/a8b8e7bd483aeb886e087fd57a0fb6edf23096f9/src/vs/editor/contrib/find/findWidget.css#L9
• 39
  • debug toolbar https://github.com/microsoft/vscode/blob/75c0562a26ee96fa03a235dec785333219a2d028/src/vs/workbench/contrib/debug/browser/media/debugToolBar.css#L8
• 40
  • Suggest Widget https://github.com/microsoft/vscode/blob/3172af8aef96276479bdab0a8bca6ef5c1806fda/src/vs/editor/contrib/rename/renameInputField.css#L7
• 50
  • Hover https://github.com/microsoft/vscode/blob/ef55a57968e30be8cbe82a2844277550d5c79da4/src/vs/base/browser/ui/hover/hover.css#L10
• 100
  • Rename input https://github.com/microsoft/vscode/blob/3172af8aef96276479bdab0a8bca6ef5c1806fda/src/vs/editor/contrib/rename/renameInputField.css#L7
• 1000
  • monaco-drag-image https://github.com/microsoft/vscode/blob/97a719dd9b6f56ae724df1beb79944596d998eb6/src/vs/base/browser/ui/list/list.css#L65
  • notifications-center https://github.com/microsoft/vscode/blob/84043ab3b8f1aa6c60baeecffda3947366b3d888/src/vs/workbench/browser/parts/notifications/media/notificationsCenter.css#L8
• 2000
  • menubar-menu-items-holder https://github.com/microsoft/vscode/blob/e62bf133c4562fead1e0a128294066a73a5661b8/src/vs/base/browser/ui/menu/menubar.css#L48
  • quick-input-widget https://github.com/microsoft/vscode/blob/73274265d7e59b458d70b182d52dccf25d565749/src/vs/base/parts/quickinput/browser/media/quickInput.css#L9
• 2500
  • context-view https://github.com/microsoft/vscode/blob/01b37c6b5d991f959f0b31a58055fecf6bc52729/src/vs/base/browser/ui/contextview/contextview.css#L8
  • titlebar https://github.com/microsoft/vscode/blob/84043ab3b8f1aa6c60baeecffda3947366b3d888/src/vs/workbench/browser/parts/notifications/media/notificationsCenter.css#L8
• 2600
  • monaco-dialog-modal-block https://github.com/microsoft/vscode/blob/0d0026e42f74553b3cd7eb8419a9bdaaa7e5573d/src/vs/base/browser/ui/dialog/dialog.css#L13
• 3000
  • window-controls-container https://github.com/microsoft/vscode/blob/67c889e39416c958fc7cb84e4814df2225c22852/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css#L128
• 9999
  • welcome overlay https://github.com/microsoft/vscode/blob/a5ee0a3449442e2f05074b38d935d4e361d6b963/src/vs/workbench/contrib/welcome/overlay/browser/welcomeOverlay.css#L12
• 10000
  • monaco-pane-drop-overlay https://github.com/microsoft/vscode/blob/7c3f60f86e6776c4a339c23f85fd9a11c3424bbb/src/vs/base/browser/ui/splitview/paneview.css#L123
  • monaco-editor-overlaymessage https://github.com/microsoft/vscode/blob/55fdf94d67dfc72eaaf25655b7b0d9ff16d2e301/src/vs/editor/contrib/message/messageController.css#L6
• 100000
  • screen cast

[bpasero]

💯

Just to outline the troubles I have only in the editor tabs control:

https://github.com/microsoft/vscode/blob/de6057e397eb2e2bdc45cf20b1b880f040145c6c/src/vs/workbench/browser/parts/editor/media/tabstitlecontrol.css#L6-L35

[isidorn]

@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.