From aacce6654a67e7eb743c969ab9a92b9d13a0ffca Mon Sep 17 00:00:00 2001 From: Jhonny Arana Date: Mon, 23 Feb 2026 16:37:44 -0400 Subject: [PATCH 1/2] Fix available viewport and style. --- .../theme-defaults/themes/membrane_dark.json | 6 ++- .../browser/ui/contextview/contextview.ts | 39 ++++++++++---- src/vs/base/browser/ui/menu/menu.ts | 51 ++++++++++--------- 3 files changed, 59 insertions(+), 37 deletions(-) diff --git a/extensions/theme-defaults/themes/membrane_dark.json b/extensions/theme-defaults/themes/membrane_dark.json index 19e8bd4939038..1bf23eac16b27 100644 --- a/extensions/theme-defaults/themes/membrane_dark.json +++ b/extensions/theme-defaults/themes/membrane_dark.json @@ -5,7 +5,9 @@ "colors": { "sash.hoverBorder": "#808080", "editorCodeLens.foreground": "#845bff", - "menu.selectionBackground": "#2a2a2a", + "menu.selectionBackground": "#2a2a2a", + "menu.border": "#282828", + "menu.separatorBackground": "#282828" }, "tokenColors": [ // BEGIN STYLE RESET: makes everything white (actual colors are below) @@ -697,4 +699,4 @@ "customLiteral": "#ececec", "numberLiteral": "#ececec", } -} +} \ No newline at end of file diff --git a/src/vs/base/browser/ui/contextview/contextview.ts b/src/vs/base/browser/ui/contextview/contextview.ts index 2da6a90f283c6..98b49982be931 100644 --- a/src/vs/base/browser/ui/contextview/contextview.ts +++ b/src/vs/base/browser/ui/contextview/contextview.ts @@ -319,30 +319,49 @@ export class ContextView extends Disposable { let left: number; const activeWindow = DOM.getActiveWindow(); + + // MEMBRANE: When the container is not document.body, use the container's + // bounds as the available viewport for layout. + let viewportHeight: number; + let viewportWidth: number; + let viewportOffsetTop = 0; + let viewportOffsetLeft = 0; + + if (this.container && this.container !== this.container.ownerDocument.body) { + const containerRect = this.container.getBoundingClientRect(); + viewportHeight = containerRect.height; + viewportWidth = containerRect.width; + viewportOffsetTop = containerRect.top; + viewportOffsetLeft = containerRect.left; + } else { + viewportHeight = activeWindow.innerHeight; + viewportWidth = activeWindow.innerWidth; + } + if (anchorAxisAlignment === AnchorAxisAlignment.VERTICAL) { - const verticalAnchor: ILayoutAnchor = { offset: around.top - activeWindow.pageYOffset, size: around.height, position: anchorPosition === AnchorPosition.BELOW ? LayoutAnchorPosition.Before : LayoutAnchorPosition.After }; - const horizontalAnchor: ILayoutAnchor = { offset: around.left, size: around.width, position: anchorAlignment === AnchorAlignment.LEFT ? LayoutAnchorPosition.Before : LayoutAnchorPosition.After, mode: LayoutAnchorMode.ALIGN }; + const verticalAnchor: ILayoutAnchor = { offset: around.top - activeWindow.pageYOffset - viewportOffsetTop, size: around.height, position: anchorPosition === AnchorPosition.BELOW ? LayoutAnchorPosition.Before : LayoutAnchorPosition.After }; + const horizontalAnchor: ILayoutAnchor = { offset: around.left - viewportOffsetLeft, size: around.width, position: anchorAlignment === AnchorAlignment.LEFT ? LayoutAnchorPosition.Before : LayoutAnchorPosition.After, mode: LayoutAnchorMode.ALIGN }; - top = layout(activeWindow.innerHeight, viewSizeHeight, verticalAnchor) + activeWindow.pageYOffset; + top = layout(viewportHeight, viewSizeHeight, verticalAnchor) + viewportOffsetTop + activeWindow.pageYOffset; // if view intersects vertically with anchor, we must avoid the anchor - if (Range.intersects({ start: top, end: top + viewSizeHeight }, { start: verticalAnchor.offset, end: verticalAnchor.offset + verticalAnchor.size })) { + if (Range.intersects({ start: top, end: top + viewSizeHeight }, { start: verticalAnchor.offset + viewportOffsetTop, end: verticalAnchor.offset + viewportOffsetTop + verticalAnchor.size })) { horizontalAnchor.mode = LayoutAnchorMode.AVOID; } - left = layout(activeWindow.innerWidth, viewSizeWidth, horizontalAnchor); + left = layout(viewportWidth, viewSizeWidth, horizontalAnchor) + viewportOffsetLeft; } else { - const horizontalAnchor: ILayoutAnchor = { offset: around.left, size: around.width, position: anchorAlignment === AnchorAlignment.LEFT ? LayoutAnchorPosition.Before : LayoutAnchorPosition.After }; - const verticalAnchor: ILayoutAnchor = { offset: around.top, size: around.height, position: anchorPosition === AnchorPosition.BELOW ? LayoutAnchorPosition.Before : LayoutAnchorPosition.After, mode: LayoutAnchorMode.ALIGN }; + const horizontalAnchor: ILayoutAnchor = { offset: around.left - viewportOffsetLeft, size: around.width, position: anchorAlignment === AnchorAlignment.LEFT ? LayoutAnchorPosition.Before : LayoutAnchorPosition.After }; + const verticalAnchor: ILayoutAnchor = { offset: around.top - viewportOffsetTop, size: around.height, position: anchorPosition === AnchorPosition.BELOW ? LayoutAnchorPosition.Before : LayoutAnchorPosition.After, mode: LayoutAnchorMode.ALIGN }; - left = layout(activeWindow.innerWidth, viewSizeWidth, horizontalAnchor); + left = layout(viewportWidth, viewSizeWidth, horizontalAnchor) + viewportOffsetLeft; // if view intersects horizontally with anchor, we must avoid the anchor - if (Range.intersects({ start: left, end: left + viewSizeWidth }, { start: horizontalAnchor.offset, end: horizontalAnchor.offset + horizontalAnchor.size })) { + if (Range.intersects({ start: left, end: left + viewSizeWidth }, { start: horizontalAnchor.offset + viewportOffsetLeft, end: horizontalAnchor.offset + viewportOffsetLeft + horizontalAnchor.size })) { verticalAnchor.mode = LayoutAnchorMode.AVOID; } - top = layout(activeWindow.innerHeight, viewSizeHeight, verticalAnchor) + activeWindow.pageYOffset; + top = layout(viewportHeight, viewSizeHeight, verticalAnchor) + viewportOffsetTop + activeWindow.pageYOffset; } this.view.classList.remove('top', 'bottom', 'left', 'right'); diff --git a/src/vs/base/browser/ui/menu/menu.ts b/src/vs/base/browser/ui/menu/menu.ts index 402ba6620057c..96502dc436f2d 100644 --- a/src/vs/base/browser/ui/menu/menu.ts +++ b/src/vs/base/browser/ui/menu/menu.ts @@ -320,15 +320,15 @@ export class Menu extends ActionBar { const fgColor = style.foregroundColor ?? ''; const bgColor = style.backgroundColor ?? ''; - const border = style.borderColor ? `1px solid ${style.borderColor}` : ''; - const borderRadius = '5px'; - const shadow = style.shadowColor ? `0 2px 8px ${style.shadowColor}` : ''; + // MEMBRANE: Match Gaze menu style + const borderColor = style.borderColor ?? '#555'; - scrollElement.style.outline = border; - scrollElement.style.borderRadius = borderRadius; + scrollElement.style.border = `1px solid ${borderColor}`; + scrollElement.style.borderRadius = '3px'; + scrollElement.style.outline = 'none'; scrollElement.style.color = fgColor; scrollElement.style.backgroundColor = bgColor; - scrollElement.style.boxShadow = shadow; + scrollElement.style.boxShadow = '0 0 0 1px #000'; } override getContainer(): HTMLElement { @@ -1025,9 +1025,9 @@ export function formatRule(c: ThemeIcon) { export function getMenuWidgetCSS(style: IMenuStyles, isForShadowDom: boolean): string { let result = /* css */` .monaco-menu { - font-size: 13px; - border-radius: 5px; - min-width: 160px; + font-size: 11px; + border-radius: 3px; + min-width: 120px; } ${formatRule(Codicon.menuSelection)} @@ -1099,8 +1099,8 @@ ${formatRule(Codicon.menuSubmenu)} .monaco-menu .monaco-action-bar.vertical .action-label.separator { display: block; border-bottom: 1px solid var(--vscode-menu-separatorBackground); - padding-top: 1px; - padding: 30px; + padding-top: 0px; + padding: 0; } .monaco-menu .secondary-actions .monaco-action-bar .action-label { @@ -1141,11 +1141,11 @@ ${formatRule(Codicon.menuSubmenu)} .monaco-menu .monaco-action-bar.vertical .action-menu-item { flex: 1 1 auto; display: flex; - height: 2em; + height: 1.6em; align-items: center; position: relative; - margin: 0 4px; - border-radius: 4px; + margin: 0 2px; + border-radius: 0px; } .monaco-menu .monaco-action-bar.vertical .action-menu-item:hover .keybinding, @@ -1156,9 +1156,9 @@ ${formatRule(Codicon.menuSubmenu)} .monaco-menu .monaco-action-bar.vertical .action-label { flex: 1 1 auto; text-decoration: none; - padding: 0 1em; + padding: 0 0.8em; background: none; - font-size: 12px; + font-size: 11px; line-height: 1; } @@ -1166,11 +1166,11 @@ ${formatRule(Codicon.menuSubmenu)} .monaco-menu .monaco-action-bar.vertical .submenu-indicator { display: inline-block; flex: 2 1 auto; - padding: 0 1em; + padding: 0 0.8em; text-align: right; - font-size: 12px; + font-size: 10px; line-height: 1; - opacity: 0.7; + opacity: 0.5; } .monaco-menu .monaco-action-bar.vertical .submenu-indicator { @@ -1178,7 +1178,7 @@ ${formatRule(Codicon.menuSubmenu)} } .monaco-menu .monaco-action-bar.vertical .submenu-indicator.codicon { - font-size: 16px !important; + font-size: 14px !important; display: flex; align-items: center; } @@ -1243,7 +1243,8 @@ ${formatRule(Codicon.menuSubmenu)} .context-view.monaco-menu-container { outline: 0; border: none; - animation: fadeIn 0.083s linear; + border-radius: 3px; + animation: fadeIn 0.06s linear; -webkit-app-region: no-drag; } @@ -1274,13 +1275,13 @@ ${formatRule(Codicon.menuSubmenu)} } .monaco-menu .monaco-action-bar.vertical .action-menu-item { - height: 2em; + height: 1.6em; } .monaco-menu .monaco-action-bar.vertical .action-label:not(.separator), .monaco-menu .monaco-action-bar.vertical .keybinding { font-size: inherit; - padding: 0 2em; + padding: 0 1.2em; max-height: 100%; } @@ -1291,7 +1292,7 @@ ${formatRule(Codicon.menuSubmenu)} .monaco-menu .monaco-action-bar.vertical .action-label.separator { font-size: inherit; - margin: 5px 0 !important; + margin: 3px 0 !important; padding: 0; border-radius: 0; } @@ -1304,7 +1305,7 @@ ${formatRule(Codicon.menuSubmenu)} .monaco-menu .monaco-action-bar.vertical .submenu-indicator { font-size: 60%; - padding: 0 1.8em; + padding: 0 1em; } .linux .monaco-menu .monaco-action-bar.vertical .submenu-indicator, From c947d39102ec5962b2acac58b923fe85b619060f Mon Sep 17 00:00:00 2001 From: Juan Campa Date: Mon, 23 Mar 2026 11:16:15 -0400 Subject: [PATCH 2/2] Apply suggestion from @juancampa --- src/vs/base/browser/ui/menu/menu.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/vs/base/browser/ui/menu/menu.ts b/src/vs/base/browser/ui/menu/menu.ts index 96502dc436f2d..5dd0b2978d613 100644 --- a/src/vs/base/browser/ui/menu/menu.ts +++ b/src/vs/base/browser/ui/menu/menu.ts @@ -328,7 +328,7 @@ export class Menu extends ActionBar { scrollElement.style.outline = 'none'; scrollElement.style.color = fgColor; scrollElement.style.backgroundColor = bgColor; - scrollElement.style.boxShadow = '0 0 0 1px #000'; + scrollElement.style.boxShadow = '0 0 0 1px #050505'; } override getContainer(): HTMLElement {