[SOLVED] What are the class names of the first-level and second-level menus of the workspace right-click menu?

What are the class names of the first-level and second-level menus of the workspace right-click menu?

I want to customize the style of vscode and use the apc extension. Now I want to know the class name of the right-click menu.

Reason: I know it can be set through menu.background in workbench.colorCustomizations, but I not only want to change the color, but also want to add the effect of frosted glass

And after trying, I found that the class names of the first-level menu and the second-level menu are different.

But I searched for the source code of vscode, but I don’t know how to find it, and I didn’t find a similar class name.

And the developer tools cannot locate this element because the menu will be hidden if you click anywhere

imgLink:

myconfig:

"workbench.colorCustomizations": {
  // ...
  "menu.background": "#00000033",
  // ...
},
"apc.stylesheet": {
  ".monaco-menu-container": "background: #00000000; backdrop-filter: blur(8px);"
},

I hope to achieve the frosted glass effect of the menubar in the picture above, so I want to know the class name of the menu.

Solution

From a brief excursion in the source code, context-view.

See also the related monaco-menu-container, monaco-action-bar (and vertical), monaco-menu, action-item.

context-view seems to get re-parented depending on what the menu is for / where it is, and sometimes it gets re-parented under a shadow DOM. So much of the CSS for this kind of menu is sort of programmatically generated, and a large chunk of that generated CSS is only for the shadow DOM case. The shadow root for the editor area seems to be open, so as long as your extension handles styling stuff in shadow DOMs, you still have a chance at this. I don't know how APC works though. There does seem to be some loosely related example code here.