@codingame/monaco-vscode-api 17.2.1 → 18.0.1

package/vscode/src/vs/base/browser/markdownRenderer.js

@@ -7,8 +7,8 @@ import { defaultGenerator } from '../common/idGenerator.js';
 import { KeyCode } from '../common/keyCodes.js';
 import { Lazy } from '../common/lazy.js';
 import { DisposableStore, toDisposable } from '../common/lifecycle.js';
-import { defaults, lexer, parser, parse, Renderer } from 'marked';
-import { parse as parse$1 } from '../common/marshalling.js';
+import { Marked, defaults, parse as parse$1, Renderer, lexer } from 'marked';
+import { parse } from '../common/marshalling.js';
 import { Schemas, FileAccess } from '../common/network.js';
 import { cloneAndChange } from '../common/objects.js';
 import { resolvePath, dirname } from '../common/resources.js';
@@ -66,7 +66,8 @@ function renderMarkdown(markdown, options = {}, markedOptions = {}) {
     const disposables = ( new DisposableStore());
     let isDisposed = false;
     const element = createElement(options);
-    const { renderer, codeBlocks, syncCodeBlocks } = createMarkdownRenderer(options, markdown);
+    const markedInstance = new Marked(...(markedOptions.markedExtensions ?? []));
+    const { renderer, codeBlocks, syncCodeBlocks } = createMarkdownRenderer(markedInstance, options, markdown);
     const value = preprocessMarkdownString(markdown);
     let renderedMarkdown;
     if (options.fillInIncompleteTokens) {
@@ -75,12 +76,12 @@ function renderMarkdown(markdown, options = {}, markedOptions = {}) {
             ...markedOptions,
             renderer
         };
-        const tokens = lexer(value, opts);
+        const tokens = markedInstance.lexer(value, opts);
         const newTokens = fillInIncompleteTokens(tokens);
-        renderedMarkdown = parser(newTokens, opts);
+        renderedMarkdown = markedInstance.parser(newTokens, opts);
     }
     else {
-        renderedMarkdown = parse(value, { ...markedOptions, renderer, async: false });
+        renderedMarkdown = markedInstance.parse(value, { ...markedOptions, renderer, async: false });
     }
     if (markdown.supportThemeIcons) {
         const elements = renderLabelWithIcons(renderedMarkdown);
@@ -188,8 +189,8 @@ function rewriteRenderedLinks(markdown, options, root) {
         }
     }
 }
-function createMarkdownRenderer(options, markdown) {
-    const renderer = new Renderer();
+function createMarkdownRenderer(marked, options, markdown) {
+    const renderer = new marked.Renderer();
     renderer.image = defaultMarkedRenderers.image;
     renderer.link = defaultMarkedRenderers.link;
     renderer.paragraph = defaultMarkedRenderers.paragraph;
@@ -256,7 +257,7 @@ function activateLink(markdown, options, event) {
 function uriMassage(markdown, part) {
     let data;
     try {
-        data = parse$1(decodeURIComponent(part));
+        data = parse(decodeURIComponent(part));
     }
     catch (e) {
     }
@@ -437,6 +438,7 @@ function getSanitizerOptions(options) {
         Schemas.vscodeFileResource,
         Schemas.vscodeRemote,
         Schemas.vscodeRemoteResource,
+        Schemas.vscodeNotebookCell
     ];
     if (options.isTrusted) {
         allowedSchemes.push(Schemas.command);
@@ -458,7 +460,7 @@ function renderMarkdownAsPlaintext(markdown, withCodeBlocks) {
     if (value.length > 100_000) {
         value = `${value.substr(0, 100_000)}…`;
     }
-    const html = parse(value, { async: false, renderer: withCodeBlocks ? plainTextWithCodeBlocksRenderer.value : plainTextRenderer.value });
+    const html = parse$1(value, { async: false, renderer: withCodeBlocks ? plainTextWithCodeBlocksRenderer.value : plainTextRenderer.value });
     return ( sanitizeRenderedMarkdown({ isTrusted: false }, html)
         .toString())
         .replace(/&(#\d+|[a-zA-Z]+);/g, m => unescapeInfo.get(m) ?? m)

package/vscode/src/vs/base/browser/touch.js

@@ -1,6 +1,7 @@
 
 import { onDidRegisterWindow, addDisposableListener, scheduleAtNextAnimationFrame } from './dom.js';
 import { mainWindow } from './window.js';
+import '../common/errors.js';
 import { Disposable, markAsSingleton, toDisposable } from '../common/lifecycle.js';
 import '../common/cancellation.js';
 import { Event } from '../common/event.js';

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

@@ -13,6 +13,7 @@ export interface IButtonOptions extends Partial<IButtonStyles> {
     readonly supportShortLabel?: boolean;
     readonly secondary?: boolean;
     readonly hoverDelegate?: IHoverDelegate;
+    readonly disabled?: boolean;
 }
 export interface IButtonStyles {
     readonly buttonBackground: string | undefined;
@@ -114,11 +115,18 @@ export declare class ButtonWithDescription implements IButtonWithDescription {
     dispose(): void;
     set description(value: string);
 }
+export declare enum ButtonBarAlignment {
+    Horizontal = 0,
+    Vertical = 1
+}
 export declare class ButtonBar {
     private readonly container;
+    private readonly options?;
     private readonly _buttons;
     private readonly _buttonStore;
-    constructor(container: HTMLElement);
+    constructor(container: HTMLElement, options?: {
+        alignment?: ButtonBarAlignment;
+    } | undefined);
     dispose(): void;
     get buttons(): IButton[];
     clear(): void;
@@ -130,6 +138,7 @@ export declare class ButtonBar {
 export declare class ButtonWithIcon extends Button {
     private _iconElement;
     private _mdlabelElement;
+    get labelElement(): HTMLElement;
     constructor(container: HTMLElement, options: IButtonOptions);
     set label(value: IMarkdownString | string);
     set icon(icon: ThemeIcon);

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

@@ -64,6 +64,7 @@ class Button extends Disposable {
             this._element.setAttribute('aria-label', options.ariaLabel);
         }
         container.appendChild(this._element);
+        this.enabled = !options.disabled;
         this._register(Gesture.addTarget(this._element));
         [EventType.CLICK, EventType$1.Tap].forEach(eventType => {
             this._register(addDisposableListener(this._element, eventType, e => {
@@ -388,9 +389,15 @@ class ButtonWithDescription {
         }
     }
 }
+var ButtonBarAlignment;
+(function (ButtonBarAlignment) {
+    ButtonBarAlignment[ButtonBarAlignment["Horizontal"] = 0] = "Horizontal";
+    ButtonBarAlignment[ButtonBarAlignment["Vertical"] = 1] = "Vertical";
+})(ButtonBarAlignment || (ButtonBarAlignment = {}));
 class ButtonBar {
-    constructor(container) {
+    constructor(container, options) {
         this.container = container;
+        this.options = options;
         this._buttons = [];
         this._buttonStore = ( new DisposableStore());
     }
@@ -426,10 +433,10 @@ class ButtonBar {
             const event = ( new StandardKeyboardEvent(e));
             let eventHandled = true;
             let buttonIndexToFocus;
-            if (event.equals(KeyCode.LeftArrow)) {
+            if (event.equals(this.options?.alignment === ButtonBarAlignment.Vertical ? KeyCode.UpArrow : KeyCode.LeftArrow)) {
                 buttonIndexToFocus = index > 0 ? index - 1 : this._buttons.length - 1;
             }
-            else if (event.equals(KeyCode.RightArrow)) {
+            else if (event.equals(this.options?.alignment === ButtonBarAlignment.Vertical ? KeyCode.DownArrow : KeyCode.RightArrow)) {
                 buttonIndexToFocus = index === this._buttons.length - 1 ? 0 : index + 1;
             }
             else {
@@ -443,6 +450,7 @@ class ButtonBar {
     }
 }
 class ButtonWithIcon extends Button {
+    get labelElement() { return this._mdlabelElement; }
     constructor(container, options) {
         super(container, options);
         if (options.supportShortLabel) {
@@ -499,4 +507,4 @@ class ButtonWithIcon extends Button {
     }
 }
 
-export { Button, ButtonBar, ButtonWithDescription, ButtonWithDropdown, ButtonWithIcon, unthemedButtonStyles };
+export { Button, ButtonBar, ButtonBarAlignment, ButtonWithDescription, ButtonWithDropdown, ButtonWithIcon, unthemedButtonStyles };

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

@@ -11,11 +11,14 @@ export interface IListVirtualDelegate<T> {
     getDynamicHeight?(element: T): number | null;
     setDynamicHeight?(element: T, height: number): void;
 }
+export interface IListElementRenderDetails {
+    readonly height?: number;
+}
 export interface IListRenderer<T, TTemplateData> {
     readonly templateId: string;
     renderTemplate(container: HTMLElement): TTemplateData;
-    renderElement(element: T, index: number, templateData: TTemplateData, height: number | undefined): void;
-    disposeElement?(element: T, index: number, templateData: TTemplateData, height: number | undefined): void;
+    renderElement(element: T, index: number, templateData: TTemplateData, details?: IListElementRenderDetails): void;
+    disposeElement?(element: T, index: number, templateData: TTemplateData, details?: IListElementRenderDetails): void;
     disposeTemplate(templateData: TTemplateData): void;
 }
 export interface IListEvent<T> {

package/vscode/src/vs/base/browser/ui/list/listPaging.d.ts

@@ -1,6 +1,6 @@
 import { Event } from "../../../common/event.js";
 import { IDisposable } from "../../../common/lifecycle.js";
-import { IPagedModel } from "@codingame/monaco-vscode-ecf3436d-6064-5fbd-a760-37a211ce79c7-common/vscode/vs/base/common/paging";
+import { IPagedModel } from "@codingame/monaco-vscode-9ed6fe06-a052-57c2-a234-5d9b94d2e7e0-common/vscode/vs/base/common/paging";
 import { ScrollbarVisibility } from "../../../common/scrollable.js";
 import { IListContextMenuEvent, IListEvent, IListMouseEvent, IListRenderer, IListVirtualDelegate } from "./list.js";
 import { IListAccessibilityProvider, IListOptionsUpdate, IListStyles, List, TypeNavigationMode } from "./listWidget.js";

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

@@ -19,20 +19,20 @@ class PagedRenderer {
         const data = this.renderer.renderTemplate(container);
         return { data, disposable: Disposable.None };
     }
-    renderElement(index, _, data, height) {
+    renderElement(index, _, data, details) {
         data.disposable?.dispose();
         if (!data.data) {
             return;
         }
         const model = this.modelProvider();
         if (model.isResolved(index)) {
-            return this.renderer.renderElement(model.get(index), index, data.data, height);
+            return this.renderer.renderElement(model.get(index), index, data.data, details);
         }
         const cts = ( new CancellationTokenSource());
         const promise = model.resolve(index, cts.token);
         data.disposable = { dispose: () => cts.cancel() };
         this.renderer.renderPlaceholder(index, data.data);
-        promise.then(entry => this.renderer.renderElement(entry, index, data.data, height));
+        promise.then(entry => this.renderer.renderElement(entry, index, data.data, details));
     }
     disposeTemplate(data) {
         if (data.disposable) {

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

@@ -392,7 +392,7 @@ class ListView {
                 }
                 const renderer = this.renderers.get(item.templateId);
                 if (renderer && renderer.disposeElement) {
-                    renderer.disposeElement(item.element, i, item.row.templateData, item.size);
+                    renderer.disposeElement(item.element, i, item.row.templateData, { height: item.size });
                 }
                 rows.unshift(item.row);
             }
@@ -655,7 +655,7 @@ class ListView {
         if (!renderer) {
             throw ( new Error(`No renderer found for template id ${item.templateId}`));
         }
-        renderer?.renderElement(item.element, index, item.row.templateData, item.size);
+        renderer?.renderElement(item.element, index, item.row.templateData, { height: item.size });
         const uri = this.dnd.getDragURI(item.element);
         item.dragStartDisposable.dispose();
         item.row.domNode.draggable = !!uri;
@@ -705,7 +705,7 @@ class ListView {
         if (item.row) {
             const renderer = this.renderers.get(item.templateId);
             if (renderer && renderer.disposeElement) {
-                renderer.disposeElement(item.element, index, item.row.templateData, item.size);
+                renderer.disposeElement(item.element, index, item.row.templateData, { height: item.size });
             }
             this.cache.release(item.row);
             item.row = null;
@@ -1160,9 +1160,9 @@ class ListView {
         if (!renderer) {
             throw ( new BugIndicatingError('Missing renderer for templateId: ' + item.templateId));
         }
-        renderer.renderElement(item.element, index, row.templateData, undefined);
+        renderer.renderElement(item.element, index, row.templateData);
         item.size = row.domNode.offsetHeight;
-        renderer.disposeElement?.(item.element, index, row.templateData, undefined);
+        renderer.disposeElement?.(item.element, index, row.templateData);
         this.virtualDelegate.setDynamicHeight?.(item.element, item.size);
         item.lastDynamicHeightWidth = this.renderWidth;
         row.domNode.remove();

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

@@ -25,8 +25,8 @@ import { ListError } from './list.js';
 import { ListView } from './listView.js';
 import { StandardMouseEvent } from '../../mouseEvent.js';
 import '../../../common/observableInternal/index.js';
-import { constObservable } from '../../../common/observableInternal/utils.js';
-import { autorun } from '../../../common/observableInternal/autorun.js';
+import { constObservable } from '../../../common/observableInternal/observables/constObservable.js';
+import { autorun } from '../../../common/observableInternal/reactions/autorun.js';
 
 registerCss(list);
 class TraitRenderer {
@@ -909,16 +909,16 @@ class PipelineRenderer {
     renderTemplate(container) {
         return ( this.renderers.map(r => r.renderTemplate(container)));
     }
-    renderElement(element, index, templateData, height) {
+    renderElement(element, index, templateData, renderDetails) {
         let i = 0;
         for (const renderer of this.renderers) {
-            renderer.renderElement(element, index, templateData[i++], height);
+            renderer.renderElement(element, index, templateData[i++], renderDetails);
         }
     }
-    disposeElement(element, index, templateData, height) {
+    disposeElement(element, index, templateData, renderDetails) {
         let i = 0;
         for (const renderer of this.renderers) {
-            renderer.disposeElement?.(element, index, templateData[i], height);
+            renderer.disposeElement?.(element, index, templateData[i], renderDetails);
             i += 1;
         }
     }
@@ -959,7 +959,7 @@ class AccessibiltyRenderer {
             element.removeAttribute('aria-label');
         }
     }
-    disposeElement(element, index, templateData, height) {
+    disposeElement(element, index, templateData) {
         templateData.disposables.clear();
     }
     disposeTemplate(templateData) {

package/vscode/src/vs/base/browser/ui/table/tableWidget.js

@@ -45,21 +45,21 @@ class TableListRenderer {
         this.renderedTemplates.add(result);
         return result;
     }
-    renderElement(element, index, templateData, height) {
+    renderElement(element, index, templateData, renderDetails) {
         for (let i = 0; i < this.columns.length; i++) {
             const column = this.columns[i];
             const cell = column.project(element);
             const renderer = this.renderers[i];
-            renderer.renderElement(cell, index, templateData.cellTemplateData[i], height);
+            renderer.renderElement(cell, index, templateData.cellTemplateData[i], renderDetails);
         }
     }
-    disposeElement(element, index, templateData, height) {
+    disposeElement(element, index, templateData, renderDetails) {
         for (let i = 0; i < this.columns.length; i++) {
             const renderer = this.renderers[i];
             if (renderer.disposeElement) {
                 const column = this.columns[i];
                 const cell = column.project(element);
-                renderer.disposeElement(cell, index, templateData.cellTemplateData[i], height);
+                renderer.disposeElement(cell, index, templateData.cellTemplateData[i], renderDetails);
             }
         }
     }

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

@@ -1,10 +1,10 @@
-import { IKeyboardEvent } from "../../keyboardEvent.js";
-import { BaseActionViewItem, IActionViewItemOptions } from "../actionbar/actionViewItems.js";
-import { Widget } from "../widget.js";
 import { IAction } from "../../../common/actions.js";
-import { ThemeIcon } from "../../../common/themables.js";
 import { Event } from "../../../common/event.js";
+import { ThemeIcon } from "../../../common/themables.js";
+import { IKeyboardEvent } from "../../keyboardEvent.js";
+import { BaseActionViewItem, IActionViewItemOptions } from "../actionbar/actionViewItems.js";
 import { IHoverDelegate } from "../hover/hoverDelegate.js";
+import { Widget } from "../widget.js";
 export interface IToggleOpts extends IToggleStyles {
     readonly actionClassName?: string;
     readonly icon?: ThemeIcon;
@@ -33,7 +33,7 @@ export declare const unthemedToggleStyles: {
 };
 export declare class ToggleActionViewItem extends BaseActionViewItem {
     protected readonly toggle: Toggle;
-    constructor(context: any, action: IAction, options: IActionViewItemOptions);
+    constructor(context: unknown, action: IAction, options: IActionViewItemOptions);
     render(container: HTMLElement): void;
     protected updateEnabled(): void;
     protected updateChecked(): void;
@@ -91,7 +91,7 @@ export interface ICheckboxActionViewItemOptions extends IActionViewItemOptions {
 export declare class CheckboxActionViewItem extends BaseActionViewItem {
     protected readonly toggle: Checkbox;
     private cssClass?;
-    constructor(context: any, action: IAction, options: ICheckboxActionViewItemOptions);
+    constructor(context: unknown, action: IAction, options: ICheckboxActionViewItemOptions);
     render(container: HTMLElement): void;
     private onChange;
     protected updateEnabled(): void;

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

@@ -1,15 +1,15 @@
 
 import { registerCss } from '@codingame/monaco-vscode-api/css';
-import { BaseActionViewItem } from '../actionbar/actionViewItems.js';
-import { Widget } from '../widget.js';
 import { Codicon } from '../../../common/codicons.js';
-import { ThemeIcon } from '../../../common/themables.js';
 import { Emitter } from '../../../common/event.js';
 import { KeyCode } from '../../../common/keyCodes.js';
-import * as toggle from './toggle.css';
+import { ThemeIcon } from '../../../common/themables.js';
 import { isActiveElement, $, addDisposableListener, EventType } from '../../dom.js';
-import { getDefaultHoverDelegate } from '../hover/hoverDelegateFactory.js';
+import { BaseActionViewItem } from '../actionbar/actionViewItems.js';
 import { getBaseLayerHoverDelegate } from '../hover/hoverDelegate2.js';
+import { getDefaultHoverDelegate } from '../hover/hoverDelegateFactory.js';
+import { Widget } from '../widget.js';
+import * as toggle from './toggle.css';
 
 registerCss(toggle);
 const unthemedToggleStyles = {
@@ -30,19 +30,25 @@ class ToggleActionViewItem extends BaseActionViewItem {
             inputActiveOptionForeground: options.toggleStyles?.inputActiveOptionForeground,
             hoverDelegate: options.hoverDelegate
         })));
-        this._register(this.toggle.onChange(() => this._action.checked = !!this.toggle && this.toggle.checked));
+        this._register(this.toggle.onChange(() => {
+            this._action.checked = !!this.toggle && this.toggle.checked;
+        }));
     }
     render(container) {
         this.element = container;
         this.element.appendChild(this.toggle.domNode);
+        this.updateChecked();
+        this.updateEnabled();
     }
     updateEnabled() {
         if (this.toggle) {
             if (this.isEnabled()) {
                 this.toggle.enable();
+                this.element?.classList.remove('disabled');
             }
             else {
                 this.toggle.disable();
+                this.element?.classList.add('disabled');
             }
         }
     }
@@ -149,9 +155,11 @@ class Toggle extends Widget {
     }
     enable() {
         this.domNode.setAttribute('aria-disabled', String(false));
+        this.domNode.classList.remove('disabled');
     }
     disable() {
         this.domNode.setAttribute('aria-disabled', String(true));
+        this.domNode.classList.add('disabled');
     }
     setTitle(newTitle) {
         this._hover.update(newTitle);

package/vscode/src/vs/base/browser/ui/tree/abstractTree.d.ts

@@ -1,6 +1,6 @@
 import { IContextViewProvider } from "../contextview/contextview.js";
 import { IInputBoxStyles } from "../inputbox/inputBox.js";
-import { IIdentityProvider, IKeyboardNavigationLabelProvider, IListRenderer, IListVirtualDelegate } from "../list/list.js";
+import { IIdentityProvider, IKeyboardNavigationLabelProvider, IListElementRenderDetails, IListRenderer, IListVirtualDelegate } from "../list/list.js";
 import { IListOptions, IListStyles, List, MouseController, TypeNavigationMode } from "../list/listWidget.js";
 import { IToggleStyles } from "../toggle/toggle.js";
 import { ICollapseStateChangeEvent, ITreeContextMenuEvent, ITreeDragAndDrop, ITreeEvent, ITreeFilter, ITreeModel, ITreeModelSpliceEvent, ITreeMouseEvent, ITreeNavigator, ITreeNode, ITreeRenderer, TreeFilterResult, TreeVisibility } from "./tree.js";
@@ -25,6 +25,7 @@ interface ITreeListTemplateData<T> {
     readonly indent: HTMLElement;
     readonly twistie: HTMLElement;
     indentGuidesDisposable: IDisposable;
+    indentSize: number;
     readonly templateData: T;
 }
 export interface IAbstractTreeViewState {
@@ -79,8 +80,8 @@ export declare class TreeRenderer<T, TFilterData, TRef, TTemplateData> implement
     constructor(renderer: ITreeRenderer<T, TFilterData, TTemplateData>, model: ITreeModel<T, TFilterData, TRef>, onDidChangeCollapseState: Event<ICollapseStateChangeEvent<T, TFilterData>>, activeNodes: Collection<ITreeNode<T, TFilterData>>, renderedIndentGuides: SetMap<ITreeNode<T, TFilterData>, HTMLDivElement>, options?: ITreeRendererOptions);
     updateOptions(options?: ITreeRendererOptions): void;
     renderTemplate(container: HTMLElement): ITreeListTemplateData<TTemplateData>;
-    renderElement(node: ITreeNode<T, TFilterData>, index: number, templateData: ITreeListTemplateData<TTemplateData>, height: number | undefined): void;
-    disposeElement(node: ITreeNode<T, TFilterData>, index: number, templateData: ITreeListTemplateData<TTemplateData>, height: number | undefined): void;
+    renderElement(node: ITreeNode<T, TFilterData>, index: number, templateData: ITreeListTemplateData<TTemplateData>, details?: IListElementRenderDetails): void;
+    disposeElement(node: ITreeNode<T, TFilterData>, index: number, templateData: ITreeListTemplateData<TTemplateData>, details?: IListElementRenderDetails): void;
     disposeTemplate(templateData: ITreeListTemplateData<TTemplateData>): void;
     private onDidChangeTwistieState;
     private onDidChangeNodeTwistieState;

package/vscode/src/vs/base/browser/ui/tree/abstractTree.js

@@ -29,8 +29,8 @@ import { localize } from '../../../../nls.js';
 import { createInstantHoverDelegate } from '../hover/hoverDelegateFactory.js';
 import '../../../common/observableInternal/index.js';
 import { alert } from '../aria/aria.js';
-import { autorun } from '../../../common/observableInternal/autorun.js';
-import { constObservable } from '../../../common/observableInternal/utils.js';
+import { autorun } from '../../../common/observableInternal/reactions/autorun.js';
+import { constObservable } from '../../../common/observableInternal/observables/constObservable.js';
 
 registerCss(tree);
 class TreeElementsDragAndDropData extends ElementsDragAndDropData {
@@ -280,6 +280,7 @@ class TreeRenderer {
             if (indent !== this.indent) {
                 this.indent = indent;
                 for (const [node, templateData] of this.renderedNodes) {
+                    templateData.indentSize = TreeRenderer.DefaultIndent + (node.depth - 1) * this.indent;
                     this.renderTreeElement(node, templateData);
                 }
             }
@@ -310,18 +311,19 @@ class TreeRenderer {
         const twistie = append(el, $('.monaco-tl-twistie'));
         const contents = append(el, $('.monaco-tl-contents'));
         const templateData = this.renderer.renderTemplate(contents);
-        return { container, indent, twistie, indentGuidesDisposable: Disposable.None, templateData };
+        return { container, indent, twistie, indentGuidesDisposable: Disposable.None, indentSize: 0, templateData };
     }
-    renderElement(node, index, templateData, height) {
+    renderElement(node, index, templateData, details) {
+        templateData.indentSize = TreeRenderer.DefaultIndent + (node.depth - 1) * this.indent;
         this.renderedNodes.set(node, templateData);
         this.renderedElements.set(node.element, node);
         this.renderTreeElement(node, templateData);
-        this.renderer.renderElement(node, index, templateData.templateData, height);
+        this.renderer.renderElement(node, index, templateData.templateData, { ...details, indent: templateData.indentSize });
     }
-    disposeElement(node, index, templateData, height) {
+    disposeElement(node, index, templateData, details) {
         templateData.indentGuidesDisposable.dispose();
-        this.renderer.disposeElement?.(node, index, templateData.templateData, height);
-        if (typeof height === 'number') {
+        this.renderer.disposeElement?.(node, index, templateData.templateData, { ...details, indent: templateData.indentSize });
+        if (typeof details?.height === 'number') {
             this.renderedNodes.delete(node);
             this.renderedElements.delete(node.element);
         }
@@ -345,9 +347,8 @@ class TreeRenderer {
         this.renderTreeElement(node, templateData);
     }
     renderTreeElement(node, templateData) {
-        const indent = TreeRenderer.DefaultIndent + (node.depth - 1) * this.indent;
-        templateData.twistie.style.paddingLeft = `${indent}px`;
-        templateData.indent.style.width = `${indent + this.indent - 16}px`;
+        templateData.twistie.style.paddingLeft = `${templateData.indentSize}px`;
+        templateData.indent.style.width = `${templateData.indentSize + this.indent - 16}px`;
         if (node.collapsible) {
             templateData.container.setAttribute('aria-expanded', String(!node.collapsed));
         }
@@ -1314,10 +1315,10 @@ class StickyScrollWidget {
             nodeCopy = ( new Proxy(stickyNode.node, {}));
         }
         const templateData = renderer.renderTemplate(stickyElement);
-        renderer.renderElement(nodeCopy, stickyNode.startIndex, templateData, stickyNode.height);
+        renderer.renderElement(nodeCopy, stickyNode.startIndex, templateData, { height: stickyNode.height });
         const disposable = toDisposable(() => {
             accessibilityDisposable.dispose();
-            renderer.disposeElement(nodeCopy, stickyNode.startIndex, templateData, stickyNode.height);
+            renderer.disposeElement(nodeCopy, stickyNode.startIndex, templateData, { height: stickyNode.height });
             renderer.disposeTemplate(templateData);
             stickyElement.remove();
         });
@@ -2113,8 +2114,8 @@ class AbstractTree {
         const suffix = `.${this.view.domId}`;
         const content = [];
         if (styles.treeIndentGuidesStroke) {
-            content.push(`.monaco-list${suffix}:hover .monaco-tl-indent > .indent-guide, .monaco-list${suffix}.always .monaco-tl-indent > .indent-guide  { border-color: ${styles.treeInactiveIndentGuidesStroke}; }`);
-            content.push(`.monaco-list${suffix} .monaco-tl-indent > .indent-guide.active { border-color: ${styles.treeIndentGuidesStroke}; }`);
+            content.push(`.monaco-list${suffix}:hover .monaco-tl-indent > .indent-guide, .monaco-list${suffix}.always .monaco-tl-indent > .indent-guide  { opacity: 1; border-color: ${styles.treeInactiveIndentGuidesStroke}; }`);
+            content.push(`.monaco-list${suffix} .monaco-tl-indent > .indent-guide.active { opacity: 1; border-color: ${styles.treeIndentGuidesStroke}; }`);
         }
         const stickyScrollBackground = styles.treeStickyScrollBackground ?? styles.listBackground;
         if (stickyScrollBackground) {

package/vscode/src/vs/base/browser/ui/tree/asyncDataTree.js

@@ -67,8 +67,8 @@ class AsyncDataTreeRenderer {
         const templateData = this.renderer.renderTemplate(container);
         return { templateData };
     }
-    renderElement(node, index, templateData, height) {
-        this.renderer.renderElement(( this.nodeMapper.map(node)), index, templateData.templateData, height);
+    renderElement(node, index, templateData, details) {
+        this.renderer.renderElement(( this.nodeMapper.map(node)), index, templateData.templateData, details);
     }
     renderTwistie(element, twistieElement) {
         if (element.slow) {
@@ -80,8 +80,8 @@ class AsyncDataTreeRenderer {
             return false;
         }
     }
-    disposeElement(node, index, templateData, height) {
-        this.renderer.disposeElement?.(( this.nodeMapper.map(node)), index, templateData.templateData, height);
+    disposeElement(node, index, templateData, details) {
+        this.renderer.disposeElement?.(( this.nodeMapper.map(node)), index, templateData.templateData, details);
     }
     disposeTemplate(templateData) {
         this.renderer.disposeTemplate(templateData.templateData);
@@ -1046,11 +1046,11 @@ class CompressibleAsyncDataTreeRenderer {
         const templateData = this.renderer.renderTemplate(container);
         return { templateData };
     }
-    renderElement(node, index, templateData, height) {
-        this.renderer.renderElement(( this.nodeMapper.map(node)), index, templateData.templateData, height);
+    renderElement(node, index, templateData, details) {
+        this.renderer.renderElement(( this.nodeMapper.map(node)), index, templateData.templateData, details);
     }
-    renderCompressedElements(node, index, templateData, height) {
-        this.renderer.renderCompressedElements(( this.compressibleNodeMapperProvider().map(node)), index, templateData.templateData, height);
+    renderCompressedElements(node, index, templateData, details) {
+        this.renderer.renderCompressedElements(( this.compressibleNodeMapperProvider().map(node)), index, templateData.templateData, details);
     }
     renderTwistie(element, twistieElement) {
         if (element.slow) {
@@ -1062,11 +1062,11 @@ class CompressibleAsyncDataTreeRenderer {
             return false;
         }
     }
-    disposeElement(node, index, templateData, height) {
-        this.renderer.disposeElement?.(( this.nodeMapper.map(node)), index, templateData.templateData, height);
+    disposeElement(node, index, templateData, details) {
+        this.renderer.disposeElement?.(( this.nodeMapper.map(node)), index, templateData.templateData, details);
     }
-    disposeCompressedElements(node, index, templateData, height) {
-        this.renderer.disposeCompressedElements?.(( this.compressibleNodeMapperProvider().map(node)), index, templateData.templateData, height);
+    disposeCompressedElements(node, index, templateData, details) {
+        this.renderer.disposeCompressedElements?.(( this.compressibleNodeMapperProvider().map(node)), index, templateData.templateData, details);
     }
     disposeTemplate(templateData) {
         this.renderer.disposeTemplate(templateData.templateData);

package/vscode/src/vs/base/browser/ui/tree/indexTreeModel.d.ts

@@ -14,7 +14,7 @@ export interface IIndexTreeNode<T, TFilterData = void> extends ITreeNode<T, TFil
     filterData: TFilterData | undefined;
     lastDiffIds?: string[];
 }
-export declare function isFilterResult<T>(obj: any): obj is ITreeFilterDataResult<T>;
+export declare function isFilterResult<T>(obj: unknown): obj is ITreeFilterDataResult<T>;
 export declare function getVisibleState(visibility: boolean | TreeVisibility): TreeVisibility;
 export interface IIndexTreeModelOptions<T, TFilterData> {
     readonly collapseByDefault?: boolean;

package/vscode/src/vs/base/browser/ui/tree/indexTreeModel.js

@@ -8,7 +8,7 @@ import { EventBufferer, Emitter } from '../../../common/event.js';
 import { Iterable } from '../../../common/iterator.js';
 
 function isFilterResult(obj) {
-    return typeof obj === 'object' && 'visibility' in obj && 'data' in obj;
+    return !!obj && obj.visibility !== undefined;
 }
 function getVisibleState(visibility) {
     switch (visibility) {

package/vscode/src/vs/base/browser/ui/tree/media/tree.css

@@ -22,9 +22,10 @@
 	box-sizing: border-box;
 	height: 100%;
 	border-left: 1px solid transparent;
+	opacity: 0;
 }
 .monaco-workbench:not(.reduce-motion) .monaco-tl-indent > .indent-guide {
-	transition: border-color 0.1s linear;
+	transition: opacity 0.1s linear;
 }
 .monaco-tl-twistie,
 .monaco-tl-contents {