@codingame/monaco-vscode-api 37.6.1 → 38.0.0

package/vscode/src/vs/base/browser/ui/animations/animations.js

@@ -1,6 +1,6 @@
 
 import { ThemeIcon } from '../../../common/themables.js';
-import { getWindow, $ } from '../../dom.js';
+import { getWindow, isHTMLElement, $ } from '../../dom.js';
 
 var ClickAnimation;
 (function (ClickAnimation) {
@@ -9,6 +9,13 @@ var ClickAnimation;
     ClickAnimation[ClickAnimation["PulseWave"] = 3] = "PulseWave";
     ClickAnimation[ClickAnimation["RadiantLines"] = 4] = "RadiantLines";
 })(ClickAnimation || (ClickAnimation = {}));
+function captureAnimationTarget(element) {
+    return {
+        element,
+        rect: element.getBoundingClientRect(),
+        container: element.closest('.monaco-workbench') ?? getWindow(element).document.body,
+    };
+}
 const confettiColors = [
     'var(--vscode-charts-red)',
     'var(--vscode-charts-orange)',
@@ -17,9 +24,14 @@ const confettiColors = [
     'var(--vscode-charts-blue)',
     'var(--vscode-charts-purple)',
 ];
-function createOverlay(element) {
-    const rect = element.getBoundingClientRect();
-    const ownerDocument = getWindow(element).document;
+const defaultConfettiLaunchDuration = { min: 280, max: 380 };
+const defaultConfettiFallDuration = { min: 1700, max: 2100 };
+const defaultConfettiFallDistance = { min: 90, max: 130 };
+function randomInRange(range) {
+    return range.min + Math.random() * (range.max - range.min);
+}
+function createOverlay(target) {
+    const { element, rect, container } = isHTMLElement(target) ? captureAnimationTarget(target) : target;
     const overlay = $('.animation-overlay');
     overlay.style.position = 'fixed';
     overlay.style.left = `${rect.left}px`;
@@ -29,8 +41,8 @@ function createOverlay(element) {
     overlay.style.pointerEvents = 'none';
     overlay.style.overflow = 'visible';
     overlay.style.zIndex = '10000';
-    (element.closest('.monaco-workbench') ?? ownerDocument.body).appendChild(overlay);
-    return { overlay, cx: rect.width / 2, cy: rect.height / 2 };
+    container.appendChild(overlay);
+    return { overlay, cx: rect.width / 2, cy: rect.height / 2, element, rect };
 }
 function cleanupOverlay(overlay, duration) {
     getWindow(overlay).setTimeout(() => {
@@ -69,8 +81,11 @@ function bounceElement(element, opts) {
         fill: 'forwards',
     });
 }
-function triggerConfettiAnimation(element) {
-    const { overlay, cx, cy } = createOverlay(element);
+function triggerConfettiAnimation(target, options = {}) {
+    const { overlay, cx, cy, element } = createOverlay(target);
+    const launchDuration = options.launchDuration ?? defaultConfettiLaunchDuration;
+    const fallDuration = options.fallDuration ?? defaultConfettiFallDuration;
+    const fallDistance = options.fallDistance ?? defaultConfettiFallDistance;
     bounceElement(element, {
         scale: [1, 1.3, 1],
         rotate: [0, -10, 10, 0],
@@ -85,8 +100,13 @@ function triggerConfettiAnimation(element) {
         const peakX = Math.cos(angle) * distance;
         const peakY = Math.sin(angle) * distance;
         const endX = peakX * 1.4 + (Math.random() - 0.5) * 20;
-        const endY = 25 + Math.random() * 30;
+        const endY = peakY + randomInRange(fallDistance);
         const rotation = (Math.random() - 0.5) * 720;
+        const particleLaunchDuration = randomInRange(launchDuration);
+        const particleFallDuration = randomInRange(fallDuration);
+        const particleDuration = particleLaunchDuration + particleFallDuration;
+        const launchMidpointOffset = particleLaunchDuration * 0.4 / particleDuration;
+        const apexOffset = particleLaunchDuration / particleDuration;
         const part = $('.animation-particle.animation-confetti-particle');
         part.style.position = 'absolute';
         part.style.width = `${width}px`;
@@ -96,24 +116,22 @@ function triggerConfettiAnimation(element) {
         part.style.left = `${cx}px`;
         part.style.top = `${cy}px`;
         overlay.appendChild(part);
-        part.animate([
-            { opacity: 0, transform: 'translate(-50%, -50%) scale(0) rotate(0deg)' },
-            { opacity: 1, transform: `translate(calc(-50% + ${peakX * 0.35}px), calc(-50% + ${peakY * 0.55}px)) scale(1) rotate(${rotation * 0.2}deg)`, offset: 0.15 },
-            { opacity: 1, transform: `translate(calc(-50% + ${peakX}px), calc(-50% + ${peakY}px)) rotate(${rotation * 0.5}deg)`, offset: 0.45 },
-            { opacity: 0.9, transform: `translate(calc(-50% + ${endX * 0.9}px), calc(-50% + ${endY * 0.35}px)) rotate(${rotation * 0.8}deg)`, offset: 0.75 },
+        const keyframes = [
+            { opacity: 0, transform: 'translate(-50%, -50%) scale(0) rotate(0deg)', easing: 'cubic-bezier(0.15, 0.75, 0.25, 1)' },
+            { opacity: 1, transform: `translate(calc(-50% + ${peakX * 0.35}px), calc(-50% + ${peakY * 0.55}px)) scale(1) rotate(${rotation * 0.2}deg)`, offset: launchMidpointOffset, easing: 'cubic-bezier(0.2, 0.7, 0.3, 1)' },
+            { opacity: 1, transform: `translate(calc(-50% + ${peakX}px), calc(-50% + ${peakY}px)) rotate(${rotation * 0.5}deg)`, offset: apexOffset, easing: 'linear' },
             { opacity: 0, transform: `translate(calc(-50% + ${endX}px), calc(-50% + ${endY}px)) rotate(${rotation}deg)` },
-        ], {
-            duration: 900 + Math.random() * 400,
+        ];
+        part.animate(keyframes, {
+            duration: particleDuration,
             delay: Math.random() * 100,
-            easing: 'cubic-bezier(0.2, 0.7, 0.3, 1)',
             fill: 'both',
         });
     }
-    cleanupOverlay(overlay, 2000);
+    cleanupOverlay(overlay, launchDuration.max + fallDuration.max + 200);
 }
-function triggerFloatingIconsAnimation(element, icon) {
-    const { overlay, cx, cy } = createOverlay(element);
-    const rect = element.getBoundingClientRect();
+function triggerFloatingIconsAnimation(target, icon) {
+    const { overlay, cx, cy, element, rect } = createOverlay(target);
     bounceElement(element, {
         translateY: [0, -6, 0],
         duration: 350,
@@ -166,9 +184,8 @@ function triggerFloatingIconsAnimation(element, icon) {
     });
     cleanupOverlay(overlay, 2000);
 }
-function triggerPulseWaveAnimation(element) {
-    const { overlay, cx, cy } = createOverlay(element);
-    const rect = element.getBoundingClientRect();
+function triggerPulseWaveAnimation(target) {
+    const { overlay, cx, cy, element, rect } = createOverlay(target);
     bounceElement(element, {
         scale: [1, 1.1, 1],
         rotate: [0, -12, 0],
@@ -242,8 +259,8 @@ function triggerPulseWaveAnimation(element) {
     });
     cleanupOverlay(overlay, 2000);
 }
-function triggerRadiantLinesAnimation(element) {
-    const { overlay, cx, cy } = createOverlay(element);
+function triggerRadiantLinesAnimation(target) {
+    const { overlay, cx, cy, element } = createOverlay(target);
     bounceElement(element, {
         scale: [1, 1.15, 1],
         duration: 350,
@@ -313,23 +330,23 @@ function triggerRadiantLinesAnimation(element) {
     }
     cleanupOverlay(overlay, 2000);
 }
-function triggerClickAnimation(element, animation, icon) {
+function triggerClickAnimation(target, animation, icon) {
     switch (animation) {
         case ClickAnimation.Confetti:
-            triggerConfettiAnimation(element);
+            triggerConfettiAnimation(target);
             break;
         case ClickAnimation.FloatingIcons:
             if (icon) {
-                triggerFloatingIconsAnimation(element, icon);
+                triggerFloatingIconsAnimation(target, icon);
             }
             break;
         case ClickAnimation.PulseWave:
-            triggerPulseWaveAnimation(element);
+            triggerPulseWaveAnimation(target);
             break;
         case ClickAnimation.RadiantLines:
-            triggerRadiantLinesAnimation(element);
+            triggerRadiantLinesAnimation(target);
             break;
     }
 }
 
-export { ClickAnimation, bounceElement, triggerClickAnimation, triggerConfettiAnimation, triggerFloatingIconsAnimation, triggerPulseWaveAnimation, triggerRadiantLinesAnimation };
+export { ClickAnimation, bounceElement, captureAnimationTarget, triggerClickAnimation, triggerConfettiAnimation, triggerFloatingIconsAnimation, triggerPulseWaveAnimation, triggerRadiantLinesAnimation };

package/vscode/src/vs/base/browser/ui/button/button.js

@@ -314,7 +314,7 @@ class ButtonWithDropdown extends Disposable {
         this.separator = createElement("div");
         this.separatorContainer.appendChild(this.separator);
         this.element.appendChild(this.separatorContainer);
-        const border = options.buttonBorder;
+        const border = options.secondary ? options.buttonSecondaryBorder : options.buttonBorder;
         if (border) {
             this.separatorContainer.style.borderTop = "1px solid " + border;
             this.separatorContainer.style.borderBottom = "1px solid " + border;

package/vscode/src/vs/base/browser/ui/contextview/contextview.d.ts

@@ -41,17 +41,27 @@ export interface IDelegate {
 export interface IContextViewCloseAnimation {
     readonly className: string;
     readonly duration: number;
-    readonly requiredAncestorClasses?: readonly string[];
+    /** Requirements must match one ancestor; a nested array accepts any listed class. */
+    readonly requiredAncestorClasses?: readonly (string | readonly string[])[];
 }
+export declare function hasRequiredAncestorClasses(element: HTMLElement, classNames: IContextViewCloseAnimation["requiredAncestorClasses"]): boolean;
 export declare const CONTEXT_VIEW_MENU_MOTION_CLASS = "context-view-menu-motion";
 export declare const CONTEXT_VIEW_MENU_MOTION_CLOSING_CLASS = "context-view-menu-motion-closing";
 export declare const CONTEXT_VIEW_MENU_MOTION_CLOSE_ANIMATION_DURATION = 150;
 export declare const CONTEXT_VIEW_MENU_MOTION_ANCESTOR_CLASSES: readonly [
-    "modern-ui",
+    readonly [
+        "modern-ui",
+        "modern-ui-frosted-glass"
+    ],
     "monaco-enable-motion"
 ];
 export declare const CONTEXT_VIEW_CLOSE_ANIMATION_DURATION_VARIABLE = "--vscode-context-view-close-animation-duration";
 export declare const CONTEXT_VIEW_MENU_MOTION_SHADOW_VARIABLE = "--vscode-context-view-menu-motion-shadow";
+/** Inherited while an opacity animation isolates descendant menu backdrops. */
+export declare const CONTEXT_VIEW_MENU_MOTION_BACKDROP_OPACITY_VARIABLE = "--vscode-context-view-menu-motion-backdrop-opacity";
+export declare const CONTEXT_VIEW_MENU_MOTION_CLOSE_START_TRANSFORM_VARIABLE = "--vscode-context-view-menu-motion-close-start-transform";
+export declare const CONTEXT_VIEW_MENU_MOTION_OPEN_DURATION_MS = 250;
+export declare const CONTEXT_VIEW_MENU_MOTION_EASING = "cubic-bezier(0.22, 1, 0.36, 1)";
 export declare const contextViewMenuCloseAnimation: IContextViewCloseAnimation;
 export interface IContextViewProvider {
     showContextView(delegate: IDelegate, container?: HTMLElement): void;
@@ -82,7 +92,6 @@ export declare class ContextView extends Disposable {
     private isVisible;
     private completeHideAnimation;
     private prepareMenuCloseAnimation;
-    private hasRequiredAncestorClasses;
     private onDOMEvent;
     dispose(): void;
 }

package/vscode/src/vs/base/browser/ui/contextview/contextview.js

@@ -20,12 +20,33 @@ function isAnchor(obj) {
     const anchor = obj;
     return !!anchor && typeof anchor.x === "number" && typeof anchor.y === "number";
 }
+function hasRequiredAncestorClasses(element, classNames) {
+    if (!classNames?.length) {
+        return true;
+    }
+    for (let candidate = element; candidate; ) {
+        const current = candidate;
+        if (classNames.every(
+            requirement => typeof requirement === "string" ? current.classList.contains(requirement) : ( requirement.some(className => current.classList.contains(className)))
+        )) {
+            return true;
+        }
+        if (current.parentElement) {
+            candidate = current.parentElement;
+        } else {
+            const root = current.getRootNode();
+            candidate = root instanceof ShadowRoot && isHTMLElement(root.host) ? root.host : null;
+        }
+    }
+    return false;
+}
 const CONTEXT_VIEW_MENU_MOTION_CLASS = "context-view-menu-motion";
 const CONTEXT_VIEW_MENU_MOTION_CLOSING_CLASS = "context-view-menu-motion-closing";
 const CONTEXT_VIEW_MENU_MOTION_CLOSE_ANIMATION_DURATION = 150;
-const CONTEXT_VIEW_MENU_MOTION_ANCESTOR_CLASSES = ["modern-ui", "monaco-enable-motion"];
+const CONTEXT_VIEW_MENU_MOTION_ANCESTOR_CLASSES = [["modern-ui", "modern-ui-frosted-glass"], "monaco-enable-motion"];
 const CONTEXT_VIEW_CLOSE_ANIMATION_DURATION_VARIABLE = "--vscode-context-view-close-animation-duration";
 const CONTEXT_VIEW_MENU_MOTION_SHADOW_VARIABLE = "--vscode-context-view-menu-motion-shadow";
+const CONTEXT_VIEW_MENU_MOTION_BACKDROP_OPACITY_VARIABLE = "--vscode-context-view-menu-motion-backdrop-opacity";
 const CONTEXT_VIEW_MENU_MOTION_CLOSE_START_OPACITY_VARIABLE = "--vscode-context-view-menu-motion-close-start-opacity";
 const CONTEXT_VIEW_MENU_MOTION_CLOSE_START_TRANSFORM_VARIABLE = "--vscode-context-view-menu-motion-close-start-transform";
 const CONTEXT_VIEW_MENU_MOTION_OPEN_DURATION_MS = 250;
@@ -69,6 +90,10 @@ function getContextViewMenuMotionCss(enabledSelectorPrefix) {
     }
 
     @keyframes context-view-menu-motion-open {
+        from, to {
+            ${CONTEXT_VIEW_MENU_MOTION_BACKDROP_OPACITY_VARIABLE}: 100%;
+        }
+
         0% {
             opacity: 0;
             transform: scale(0.97);
@@ -81,6 +106,10 @@ function getContextViewMenuMotionCss(enabledSelectorPrefix) {
     }
 
     @keyframes context-view-menu-motion-close {
+        from, to {
+            ${CONTEXT_VIEW_MENU_MOTION_BACKDROP_OPACITY_VARIABLE}: 100%;
+        }
+
         0% {
             opacity: var(${CONTEXT_VIEW_MENU_MOTION_CLOSE_START_OPACITY_VARIABLE}, 1);
             transform: var(${CONTEXT_VIEW_MENU_MOTION_CLOSE_START_TRANSFORM_VARIABLE}, scale(1));
@@ -295,7 +324,7 @@ class ContextView extends Disposable {
         this.toDisposeOnClean = Disposable.None;
         delegate.onHide?.(data);
         const closeAnimation = delegate.closeAnimation;
-        if (!skipAnimation && closeAnimation && closeAnimation.duration > 0 && this.hasRequiredAncestorClasses(closeAnimation.requiredAncestorClasses)) {
+        if (!skipAnimation && closeAnimation && closeAnimation.duration > 0 && hasRequiredAncestorClasses(this.view, closeAnimation.requiredAncestorClasses)) {
             this.view.style.setProperty(
                 CONTEXT_VIEW_CLOSE_ANIMATION_DURATION_VARIABLE,
                 `${closeAnimation.duration}ms`
@@ -352,24 +381,6 @@ class ContextView extends Disposable {
             computedStyle.transform
         );
     }
-    hasRequiredAncestorClasses(classNames) {
-        if (!classNames?.length) {
-            return true;
-        }
-        for (let candidate = this.view; candidate; ) {
-            const current = candidate;
-            if (classNames.every(className => current.classList.contains(className))) {
-                return true;
-            }
-            if (current.parentElement) {
-                candidate = current.parentElement;
-            } else {
-                const root = current.getRootNode();
-                candidate = root instanceof ShadowRoot && isHTMLElement(root.host) ? root.host : null;
-            }
-        }
-        return false;
-    }
     onDOMEvent(e, onCapture) {
         if (this.delegate) {
             if (this.delegate.onDOMEvent) {
@@ -427,4 +438,4 @@ const SHADOW_ROOT_CSS =  `
     ${getContextViewMenuMotionCss(":host-context(.modern-ui.monaco-enable-motion)")}
 `;
 
-export { AnchorAlignment, AnchorPosition, CONTEXT_VIEW_CLOSE_ANIMATION_DURATION_VARIABLE, CONTEXT_VIEW_MENU_MOTION_ANCESTOR_CLASSES, CONTEXT_VIEW_MENU_MOTION_CLASS, CONTEXT_VIEW_MENU_MOTION_CLOSE_ANIMATION_DURATION, CONTEXT_VIEW_MENU_MOTION_CLOSING_CLASS, CONTEXT_VIEW_MENU_MOTION_SHADOW_VARIABLE, ContextView, ContextViewDOMPosition, contextViewMenuCloseAnimation, getAnchorRect, isAnchor };
+export { AnchorAlignment, AnchorPosition, CONTEXT_VIEW_CLOSE_ANIMATION_DURATION_VARIABLE, CONTEXT_VIEW_MENU_MOTION_ANCESTOR_CLASSES, CONTEXT_VIEW_MENU_MOTION_BACKDROP_OPACITY_VARIABLE, CONTEXT_VIEW_MENU_MOTION_CLASS, CONTEXT_VIEW_MENU_MOTION_CLOSE_ANIMATION_DURATION, CONTEXT_VIEW_MENU_MOTION_CLOSE_START_TRANSFORM_VARIABLE, CONTEXT_VIEW_MENU_MOTION_CLOSING_CLASS, CONTEXT_VIEW_MENU_MOTION_EASING, CONTEXT_VIEW_MENU_MOTION_OPEN_DURATION_MS, CONTEXT_VIEW_MENU_MOTION_SHADOW_VARIABLE, ContextView, ContextViewDOMPosition, contextViewMenuCloseAnimation, getAnchorRect, hasRequiredAncestorClasses, isAnchor };

package/vscode/src/vs/base/browser/ui/grid/gridview.d.ts

@@ -435,6 +435,7 @@ export declare class GridView implements IDisposable {
      */
     set edgeSnapping(edgeSnapping: boolean);
     private maximizedNode;
+    private maximizedVisibleNodes;
     private readonly _onDidChangeViewMaximized;
     readonly onDidChangeViewMaximized: Event<boolean>;
     /**

package/vscode/src/vs/base/browser/ui/grid/gridview.js

@@ -717,6 +717,7 @@ class GridView {
         if (this._root.orientation === orientation) {
             return;
         }
+        this.exitMaximizedView();
         const {
             size,
             orthogonalSize,
@@ -874,9 +875,13 @@ class GridView {
         parent.dispose();
         if (sibling instanceof BranchNode) {
             sizes.splice(parentIndex, 1, ...sibling.children.map(c => c.size));
+            const siblingChildSizes = sibling.children.map((child, index) => {
+                const cachedVisibleSize = sibling.getChildCachedVisibleSize(index);
+                return typeof cachedVisibleSize === "number" ? Sizing.Invisible(cachedVisibleSize) : child.size;
+            });
             const siblingChildren = sibling.removeAllChildren();
             for (let i = 0; i < siblingChildren.length; i++) {
-                grandParent.addChild(siblingChildren[i], siblingChildren[i].size, parentIndex + i);
+                grandParent.addChild(siblingChildren[i], siblingChildSizes[i], parentIndex + i);
             }
         } else {
             const newSibling = ( new LeafNode(
@@ -1023,6 +1028,18 @@ class GridView {
             this.exitMaximizedView();
         }
         const excludeViewSet = ( new Set(excludeViews));
+        const visibleNodes = ( new Set());
+        function collectVisibleNodes(parent) {
+            for (let index = 0; index < parent.children.length; index++) {
+                const child = parent.children[index];
+                if (parent.isChildVisible(index)) {
+                    visibleNodes.add(child);
+                }
+                if (child instanceof BranchNode) {
+                    collectVisibleNodes(child);
+                }
+            }
+        }
         function hideAllViewsBut(parent, exclude) {
             for (let i = 0; i < parent.children.length; i++) {
                 const child = parent.children[i];
@@ -1035,7 +1052,9 @@ class GridView {
                 }
             }
         }
+        collectVisibleNodes(this.root);
         hideAllViewsBut(this.root, nodeToMaximize);
+        this.maximizedVisibleNodes = visibleNodes;
         this.maximizedNode = nodeToMaximize;
         this._onDidChangeViewMaximized.fire(true);
     }
@@ -1043,18 +1062,19 @@ class GridView {
         if (!this.maximizedNode) {
             return;
         }
+        const visibleNodes = this.maximizedVisibleNodes;
         this.maximizedNode = undefined;
-        function showViewsInReverseOrder(parent) {
+        this.maximizedVisibleNodes = undefined;
+        function restoreViewsInReverseOrder(parent) {
             for (let index = parent.children.length - 1; index >= 0; index--) {
                 const child = parent.children[index];
-                if (child instanceof LeafNode) {
-                    parent.setChildVisible(index, true);
-                } else {
-                    showViewsInReverseOrder(child);
+                if (child instanceof BranchNode) {
+                    restoreViewsInReverseOrder(child);
                 }
+                parent.setChildVisible(index, visibleNodes?.has(child) ?? true);
             }
         }
-        showViewsInReverseOrder(this.root);
+        restoreViewsInReverseOrder(this.root);
         this._onDidChangeViewMaximized.fire(false);
     }
     hasMaximizedView() {
@@ -1093,7 +1113,6 @@ class GridView {
     setViewVisible(location, visible) {
         if (this.hasMaximizedView()) {
             this.exitMaximizedView();
-            return;
         }
         const [rest, index] = tail(location);
         const [, parent] = this.getNode(rest);

package/vscode/src/vs/base/browser/ui/hover/hover.d.ts

@@ -354,11 +354,13 @@ export interface IManagedHoverTooltipMarkdownString {
 export declare function isManagedHoverTooltipMarkdownString(obj: unknown): obj is IManagedHoverTooltipMarkdownString;
 export interface IManagedHoverTooltipHTMLElement {
     element: (token: CancellationToken) => HTMLElement | Promise<HTMLElement>;
+    /** Whether the returned element owns spacing from the hover boundary. */
+    contentOwnsPadding?: boolean;
 }
 export declare function isManagedHoverTooltipHTMLElement(obj: unknown): obj is IManagedHoverTooltipHTMLElement;
 export type IManagedHoverContent = string | IManagedHoverTooltipMarkdownString | IManagedHoverTooltipHTMLElement | HTMLElement | undefined;
 export type IManagedHoverContentOrFactory = IManagedHoverContent | (() => IManagedHoverContent);
-export interface IManagedHoverOptions extends Pick<IHoverOptions, "actions" | "linkHandler" | "trapFocus"> {
+export interface IManagedHoverOptions extends Pick<IHoverOptions, "actions" | "additionalClasses" | "linkHandler" | "trapFocus" | "onDidShow"> {
     appearance?: Pick<IHoverAppearanceOptions, "showHoverHint">;
     position?: Pick<IHoverPositionOptions, "anchorAlignment">;
 }

package/vscode/src/vs/base/browser/ui/hover/hoverWidget.css

@@ -112,24 +112,25 @@
 	white-space: var(--vscode-hover-sourceWhiteSpace, pre-wrap);
 }
 
-.monaco-hover .hover-row.status-bar {
+.hover-row.status-bar {
 	font-size: 12px;
 	line-height: 22px;
 }
 
-.monaco-hover .hover-row.status-bar .info {
+.hover-row.status-bar .info {
 	font-style: italic;
 	padding: 0px 8px;
 }
 
-.monaco-hover .hover-row.status-bar .actions {
+.hover-row.status-bar .actions {
 	display: flex;
 	padding: 0px 8px;
 	width: 100%;
 	box-sizing: border-box;
+	background: var(--vscode-editorHoverWidget-statusBarBackground);
 }
 
-.monaco-hover .hover-row.status-bar .actions .action-container {
+.hover-row.status-bar .actions .action-container {
 	margin-right: 16px;
 	cursor: pointer;
 	overflow: hidden;
@@ -137,18 +138,22 @@
 	text-overflow: ellipsis;
 }
 
-.monaco-hover .hover-row.status-bar .actions .action-container .action .icon {
+.hover-row.status-bar .actions .action-container .action {
+	display: inline-flex;
+	align-items: center;
+}
+
+.hover-row.status-bar .actions .action-container .action .icon {
 	padding-right: 4px;
-	vertical-align: middle;
 	font-size: inherit;
 }
 
-.monaco-hover .hover-row.status-bar .actions .action-container a {
+.hover-row.status-bar .actions .action-container a {
 	color: var(--vscode-textLink-foreground);
 	text-decoration: var(--text-link-decoration);
 }
 
-.monaco-hover .hover-row.status-bar .actions .action-container a .icon.codicon {
+.hover-row.status-bar .actions .action-container a .icon.codicon {
 	color: var(--vscode-textLink-foreground);
 }
 

package/vscode/src/vs/base/browser/ui/iconLabel/iconlabel.css

@@ -79,11 +79,13 @@
 }
 
 .monaco-icon-label.bold > .monaco-icon-label-container > .monaco-icon-name-container > .label-name,
+.monaco-icon-label.bold > .monaco-icon-label-container > .monaco-icon-suffix-container > .label-suffix,
 .monaco-icon-label.bold > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
 	font-weight: bold;
 }
 
 .monaco-icon-label.italic > .monaco-icon-label-container > .monaco-icon-name-container > .label-name,
+.monaco-icon-label.italic > .monaco-icon-label-container > .monaco-icon-suffix-container > .label-suffix,
 .monaco-icon-label.italic > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
 	font-style: italic;
 }
@@ -94,6 +96,7 @@
 }
 
 .monaco-icon-label.strikethrough > .monaco-icon-label-container > .monaco-icon-name-container > .label-name,
+.monaco-icon-label.strikethrough > .monaco-icon-label-container > .monaco-icon-suffix-container > .label-suffix,
 .monaco-icon-label.strikethrough > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
 	text-decoration: line-through;
 }

package/vscode/src/vs/base/browser/ui/inputbox/inputBox.js

@@ -16,7 +16,7 @@ import { equals } from '../../../common/objects.js';
 import { ScrollbarVisibility } from '../../../common/scrollable.js';
 import * as inputBox from './inputBox.css';
 import { localize } from '../../../../nls.js';
-import { MutableDisposable } from '../../../common/lifecycle.js';
+import { MutableDisposable, DisposableStore } from '../../../common/lifecycle.js';
 import { mainWindow } from '../../window.js';
 import { AnchorAlignment } from '../../../common/layout.js';
 
@@ -434,13 +434,14 @@ class InputBox extends Widget {
         this.state = "idle";
     }
     observeElementResize() {
-        const observer = new DisposableResizeObserver("InputBox.validationMessage", () => {
+        const disposables = ( new DisposableStore());
+        const observer = disposables.add(new DisposableResizeObserver("InputBox.validationMessage", () => {
             if (this.element.isConnected && getTotalWidth(this.element) > 0) {
                 this.layoutMessage();
             }
-        }, getWindow(this.element));
-        observer.observe(this.element);
-        this.messageResizeObserver.value = observer;
+        }, getWindow(this.element)));
+        disposables.add(observer.observe(this.element));
+        this.messageResizeObserver.value = disposables;
     }
     layoutMessage() {
         if (this.state === "open" && this.contextViewProvider) {

package/vscode/src/vs/base/browser/ui/list/listView.js

@@ -694,17 +694,26 @@ class ListView {
             }
         }
         const insertedItems = [];
+        const insertRows = () => {
+            for (const range of rangesToInsert) {
+                for (let i = range.end - 1; i >= range.start; i--) {
+                    this.insertItemInDOM(i);
+                    insertedItems.push(this.items[i]);
+                }
+            }
+        };
+        const insertBeforeRemove = this.supportDynamicHeights && ( rangesToInsert.some(range => ( this.items.slice(range.start, range.end).some(item => this.shouldProbeDynamicHeight(item)))));
         this.cache.transact(() => {
+            if (insertBeforeRemove) {
+                insertRows();
+            }
             for (const range of rangesToRemove) {
                 for (let i = range.start; i < range.end; i++) {
                     this.removeItemFromDOM(i, onScroll);
                 }
             }
-            for (const range of rangesToInsert) {
-                for (let i = range.end - 1; i >= range.start; i--) {
-                    this.insertItemInDOM(i);
-                    insertedItems.push(this.items[i]);
-                }
+            if (!insertBeforeRemove) {
+                insertRows();
             }
         });
         if (this.horizontalScrolling && insertedItems.length > 0) {
@@ -1425,6 +1434,7 @@ class ListView {
             row
         } = this.cache.alloc(item.templateId);
         row.domNode.style.height = "";
+        row.domNode.dataset.index = String(index);
         this.rowsContainer.appendChild(row.domNode);
         const renderer = this.renderers.get(item.templateId);
         if (!renderer) {
@@ -1476,6 +1486,7 @@ class ListView {
             retainedMeasurements.set(index, measurement);
             measurements.push(measurement);
             row.domNode.style.height = "";
+            row.domNode.dataset.index = String(index);
             this.rowsContainer.appendChild(row.domNode);
             const renderer = this.renderers.get(item.templateId);
             if (!renderer) {

package/vscode/src/vs/base/browser/ui/list/listWidget.js

@@ -692,6 +692,7 @@ class DefaultStyleController {
     style(styles) {
         const suffix = this.selectorSuffix && `.${this.selectorSuffix}`;
         const content = [];
+        const hover = ":is(:hover, .hovered)";
         if (styles.listBackground) {
             content.push(
                 `.monaco-list${suffix} .monaco-list-rows { background: ${styles.listBackground}; }`
@@ -702,7 +703,7 @@ class DefaultStyleController {
                 `.monaco-list${suffix}:focus .monaco-list-row.focused { background-color: ${styles.listFocusBackground}; }`
             );
             content.push(
-                `.monaco-list${suffix}:focus .monaco-list-row.focused:hover { background-color: ${styles.listFocusBackground}; }`
+                `.monaco-list${suffix}:focus .monaco-list-row.focused${hover} { background-color: ${styles.listFocusBackground}; }`
             );
         }
         if (styles.listFocusForeground) {
@@ -715,7 +716,7 @@ class DefaultStyleController {
                 `.monaco-list${suffix}:focus .monaco-list-row.selected { background-color: ${styles.listActiveSelectionBackground}; }`
             );
             content.push(
-                `.monaco-list${suffix}:focus .monaco-list-row.selected:hover { background-color: ${styles.listActiveSelectionBackground}; }`
+                `.monaco-list${suffix}:focus .monaco-list-row.selected${hover} { background-color: ${styles.listActiveSelectionBackground}; }`
             );
         }
         if (styles.listActiveSelectionForeground) {
@@ -745,7 +746,7 @@ class DefaultStyleController {
                 `.monaco-list${suffix} .monaco-list-row.focused { color:  ${styles.listInactiveFocusForeground}; }`
             );
             content.push(
-                `.monaco-list${suffix} .monaco-list-row.focused:hover { color:  ${styles.listInactiveFocusForeground}; }`
+                `.monaco-list${suffix} .monaco-list-row.focused${hover} { color:  ${styles.listInactiveFocusForeground}; }`
             );
         }
         if (styles.listInactiveSelectionIconForeground) {
@@ -758,7 +759,7 @@ class DefaultStyleController {
                 `.monaco-list${suffix} .monaco-list-row.focused { background-color:  ${styles.listInactiveFocusBackground}; }`
             );
             content.push(
-                `.monaco-list${suffix} .monaco-list-row.focused:hover { background-color:  ${styles.listInactiveFocusBackground}; }`
+                `.monaco-list${suffix} .monaco-list-row.focused${hover} { background-color:  ${styles.listInactiveFocusBackground}; }`
             );
         }
         if (styles.listInactiveSelectionBackground) {
@@ -766,7 +767,7 @@ class DefaultStyleController {
                 `.monaco-list${suffix} .monaco-list-row.selected { background-color:  ${styles.listInactiveSelectionBackground}; }`
             );
             content.push(
-                `.monaco-list${suffix} .monaco-list-row.selected:hover { background-color:  ${styles.listInactiveSelectionBackground}; }`
+                `.monaco-list${suffix} .monaco-list-row.selected${hover} { background-color:  ${styles.listInactiveSelectionBackground}; }`
             );
         }
         if (styles.listInactiveSelectionForeground) {
@@ -776,12 +777,12 @@ class DefaultStyleController {
         }
         if (styles.listHoverBackground) {
             content.push(
-                `.monaco-list${suffix}:not(.drop-target):not(.dragging) .monaco-list-row:hover:not(.selected):not(.focused) { background-color: ${styles.listHoverBackground}; }`
+                `.monaco-list${suffix}:not(.drop-target):not(.dragging) .monaco-list-row${hover}:not(.selected):not(.focused) { background-color: ${styles.listHoverBackground}; }`
             );
         }
         if (styles.listHoverForeground) {
             content.push(
-                `.monaco-list${suffix}:not(.drop-target):not(.dragging) .monaco-list-row:hover:not(.selected):not(.focused) { color:  ${styles.listHoverForeground}; }`
+                `.monaco-list${suffix}:not(.drop-target):not(.dragging) .monaco-list-row${hover}:not(.selected):not(.focused) { color:  ${styles.listHoverForeground}; }`
             );
         }
         const focusAndSelectionOutline = asCssValueWithDefault(
@@ -818,7 +819,7 @@ class DefaultStyleController {
         }
         if (styles.listHoverOutline) {
             content.push(
-                `.monaco-list${suffix} .monaco-list-row:hover { outline: 1px dashed ${styles.listHoverOutline}; outline-offset: -1px; }`
+                `.monaco-list${suffix} .monaco-list-row${hover} { outline: 1px dashed ${styles.listHoverOutline}; outline-offset: -1px; }`
             );
         }
         if (styles.listDropOverBackground) {