@codingame/monaco-vscode-api 2.0.3-improve-modularity.1 → 2.1.0-update-vscode-1.86.1

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

@@ -1,11 +1,11 @@
-import { append, $, clearNode, createStyleSheet, isActiveElement, hasParentWithClass, h, getWindow } from '../../dom.js';
+import { append, $, clearNode, createStyleSheet, isActiveElement, asCssValueWithDefault, isKeyboardEvent, hasParentWithClass, h, getWindow } from '../../dom.js';
 import { DomEmitter } from '../../event.js';
 import { StandardKeyboardEvent } from '../../keyboardEvent.js';
 import { ActionBar } from '../actionbar/actionbar.js';
 import { FindInput } from '../findinput/findInput.js';
 import { unthemedInboxStyles } from '../inputbox/inputBox.js';
 import { ElementsDragAndDropData } from '../list/listView.js';
-import { isInputElement, List, MouseController, isButton, isMonacoEditor, isStickyScrollElement, isMonacoCustomToggle, isActionItem } from '../list/listWidget.js';
+import { isInputElement, isStickyScrollContainer, isStickyScrollElement, List, MouseController, isButton, isMonacoEditor, isMonacoCustomToggle, isActionItem } from '../list/listWidget.js';
 import { Toggle, unthemedToggleStyles } from '../toggle/toggle.js';
 import { isFilterResult, getVisibleState } from './indexTreeModel.js';
 import { TreeMouseEventTarget, TreeError } from './tree.js';
@@ -59,8 +59,8 @@ class TreeNodeListDragAndDrop {
     onDragStart(data, originalEvent) {
         this.dnd.onDragStart?.(asTreeDragAndDropData(data), originalEvent);
     }
-    onDragOver(data, targetNode, targetIndex, originalEvent, raw = true) {
-        const result = this.dnd.onDragOver(asTreeDragAndDropData(data), targetNode && targetNode.element, targetIndex, originalEvent);
+    onDragOver(data, targetNode, targetIndex, targetSector, originalEvent, raw = true) {
+        const result = this.dnd.onDragOver(asTreeDragAndDropData(data), targetNode && targetNode.element, targetIndex, targetSector, originalEvent);
         const didChangeAutoExpandNode = this.autoExpandNode !== targetNode;
         if (didChangeAutoExpandNode) {
             this.autoExpandDisposable.dispose();
@@ -93,7 +93,7 @@ class TreeNodeListDragAndDrop {
             const parentRef = model.getParentNodeLocation(ref);
             const parentNode = model.getNode(parentRef);
             const parentIndex = parentRef && model.getListIndex(parentRef);
-            return this.onDragOver(data, parentNode, parentIndex, originalEvent, false);
+            return this.onDragOver(data, parentNode, parentIndex, targetSector, originalEvent, false);
         }
         const model = this.modelProvider();
         const ref = model.getNodeLocation(targetNode);
@@ -101,10 +101,10 @@ class TreeNodeListDragAndDrop {
         const length = model.getListRenderCount(ref);
         return { ...result, feedback: range(start, start + length) };
     }
-    drop(data, targetNode, targetIndex, originalEvent) {
+    drop(data, targetNode, targetIndex, targetSector, originalEvent) {
         this.autoExpandDisposable.dispose();
         this.autoExpandNode = undefined;
-        this.dnd.drop(asTreeDragAndDropData(data), targetNode && targetNode.element, targetIndex, originalEvent);
+        this.dnd.drop(asTreeDragAndDropData(data), targetNode && targetNode.element, targetIndex, targetSector, originalEvent);
     }
     onDragEnd(originalEvent) {
         this.dnd.onDragEnd?.(originalEvent);
@@ -884,7 +884,7 @@ class FindController {
         }
     }
     shouldAllowFocus(node) {
-        if (!this.widget || !this.pattern || this._mode === TreeFindMode.Filter) {
+        if (!this.widget || !this.pattern) {
             return true;
         }
         if (this.filter.totalCount > 0 && this.filter.matchCount <= 1) {
@@ -903,34 +903,59 @@ class FindController {
         this.disposables.dispose();
     }
 }
+function stickyScrollNodeStateEquals(node1, node2) {
+    return node1.position === node2.position && stickyScrollNodeEquals(node1, node2);
+}
 function stickyScrollNodeEquals(node1, node2) {
-    return node1.position === node2.position &&
-        node1.node.element === node2.node.element &&
+    return node1.node.element === node2.node.element &&
         node1.startIndex === node2.startIndex &&
         node1.height === node2.height &&
         node1.endIndex === node2.endIndex;
 }
-class StickyScrollState extends Disposable {
+class StickyScrollState {
     constructor(stickyNodes = []) {
-        super();
         this.stickyNodes = stickyNodes;
     }
     get count() { return this.stickyNodes.length; }
     equal(state) {
-        return equals(this.stickyNodes, state.stickyNodes, stickyScrollNodeEquals);
+        return equals(this.stickyNodes, state.stickyNodes, stickyScrollNodeStateEquals);
     }
-    addDisposable(disposable) {
-        this._register(disposable);
+    lastNodePartiallyVisible() {
+        if (this.count === 0) {
+            return false;
+        }
+        const lastStickyNode = this.stickyNodes[this.count - 1];
+        if (this.count === 1) {
+            return lastStickyNode.position !== 0;
+        }
+        const secondLastStickyNode = this.stickyNodes[this.count - 2];
+        return secondLastStickyNode.position + secondLastStickyNode.height !== lastStickyNode.position;
+    }
+    animationStateChanged(previousState) {
+        if (!equals(this.stickyNodes, previousState.stickyNodes, stickyScrollNodeEquals)) {
+            return false;
+        }
+        if (this.count === 0) {
+            return false;
+        }
+        const lastStickyNode = this.stickyNodes[this.count - 1];
+        const previousLastStickyNode = previousState.stickyNodes[previousState.count - 1];
+        return lastStickyNode.position !== previousLastStickyNode.position;
     }
 }
-class StickyScrollController extends Disposable {
-    get firstVisibleNode() {
-        const index = this.view.firstVisibleIndex;
-        if (index < 0 || index >= this.view.length) {
-            return undefined;
+class DefaultStickyScrollDelegate {
+    constrainStickyScrollNodes(stickyNodes, stickyScrollMaxItemCount, maxWidgetHeight) {
+        for (let i = 0; i < stickyNodes.length; i++) {
+            const stickyNode = stickyNodes[i];
+            const stickyNodeBottom = stickyNode.position + stickyNode.height;
+            if (stickyNodeBottom > maxWidgetHeight || i >= stickyScrollMaxItemCount) {
+                return stickyNodes.slice(0, i);
+            }
         }
-        return this.view.element(index);
+        return stickyNodes;
     }
+}
+class StickyScrollController extends Disposable {
     constructor(tree, model, view, renderers, treeDelegate, options = {}) {
         super();
         this.tree = tree;
@@ -940,7 +965,17 @@ class StickyScrollController extends Disposable {
         this.maxWidgetViewRatio = 0.4;
         const stickyScrollOptions = this.validateStickySettings(options);
         this.stickyScrollMaxItemCount = stickyScrollOptions.stickyScrollMaxItemCount;
-        this._widget = this._register(( new StickyScrollWidget(view.getScrollableElement(), view, model, renderers, treeDelegate)));
+        this.stickyScrollDelegate = options.stickyScrollDelegate ?? ( new DefaultStickyScrollDelegate());
+        this._widget = this._register(( new StickyScrollWidget(
+            view.getScrollableElement(),
+            view,
+            tree,
+            renderers,
+            treeDelegate,
+            options.accessibilityProvider
+        )));
+        this.onDidChangeHasFocus = this._widget.onDidChangeHasFocus;
+        this.onContextMenu = this._widget.onContextMenu;
         this._register(view.onDidScroll(() => this.update()));
         this._register(view.onDidChangeContentHeight(() => this.update()));
         this._register(tree.onDidChangeCollapseState(() => this.update()));
@@ -955,8 +990,21 @@ class StickyScrollController extends Disposable {
     getNode(node) {
         return this._widget.getNode(node);
     }
+    getNodeAtHeight(height) {
+        let index;
+        if (height === 0) {
+            index = this.view.firstVisibleIndex;
+        }
+        else {
+            index = this.view.indexAt(height + this.view.scrollTop);
+        }
+        if (index < 0 || index >= this.view.length) {
+            return undefined;
+        }
+        return this.view.element(index);
+    }
     update() {
-        const firstVisibleNode = this.firstVisibleNode;
+        const firstVisibleNode = this.getNodeAtHeight(0);
         if (!firstVisibleNode || this.tree.scrollTop === 0) {
             this._widget.setState(undefined);
             return;
@@ -966,31 +1014,25 @@ class StickyScrollController extends Disposable {
     }
     findStickyState(firstVisibleNode) {
         const stickyNodes = [];
-        const maximumStickyWidgetHeight = this.view.renderHeight * this.maxWidgetViewRatio;
         let firstVisibleNodeUnderWidget = firstVisibleNode;
         let stickyNodesHeight = 0;
         let nextStickyNode = this.getNextStickyNode(firstVisibleNodeUnderWidget, undefined, stickyNodesHeight);
-        while (nextStickyNode && stickyNodesHeight + nextStickyNode.height < maximumStickyWidgetHeight) {
+        while (nextStickyNode) {
             stickyNodes.push(nextStickyNode);
             stickyNodesHeight += nextStickyNode.height;
-            if (stickyNodes.length >= this.stickyScrollMaxItemCount) {
-                break;
-            }
-            firstVisibleNodeUnderWidget = this.getNextVisibleNode(firstVisibleNodeUnderWidget);
-            if (!firstVisibleNodeUnderWidget) {
-                break;
+            if (stickyNodes.length <= this.stickyScrollMaxItemCount) {
+                firstVisibleNodeUnderWidget = this.getNextVisibleNode(nextStickyNode);
+                if (!firstVisibleNodeUnderWidget) {
+                    break;
+                }
             }
             nextStickyNode = this.getNextStickyNode(firstVisibleNodeUnderWidget, nextStickyNode.node, stickyNodesHeight);
         }
-        return stickyNodes.length ? ( new StickyScrollState(stickyNodes)) : undefined;
+        const contrainedStickyNodes = this.constrainStickyNodes(stickyNodes);
+        return contrainedStickyNodes.length ? ( new StickyScrollState(contrainedStickyNodes)) : undefined;
     }
-    getNextVisibleNode(node) {
-        const nodeIndex = this.getNodeIndex(node);
-        if (nodeIndex === -1 || nodeIndex === this.view.length - 1) {
-            return undefined;
-        }
-        const nextNode = this.view.element(nodeIndex + 1);
-        return nextNode;
+    getNextVisibleNode(previousStickyNode) {
+        return this.getNodeAtHeight(previousStickyNode.position + previousStickyNode.height);
     }
     getNextStickyNode(firstVisibleNodeUnderWidget, previousStickyNode, stickyNodesHeight) {
         const nextStickyNode = this.getAncestorUnderPrevious(firstVisibleNodeUnderWidget, previousStickyNode);
@@ -1016,7 +1058,7 @@ class StickyScrollController extends Disposable {
     createStickyScrollNode(node, currentStickyNodesHeight) {
         const height = this.treeDelegate.getHeight(node);
         const { startIndex, endIndex } = this.getNodeRange(node);
-        const position = this.calculateStickyNodePosition(endIndex, currentStickyNodesHeight);
+        const position = this.calculateStickyNodePosition(endIndex, currentStickyNodesHeight, height);
         return { node, position, height, startIndex, endIndex };
     }
     getAncestorUnderPrevious(node, previousAncestor = undefined) {
@@ -1034,7 +1076,7 @@ class StickyScrollController extends Disposable {
         }
         return undefined;
     }
-    calculateStickyNodePosition(lastDescendantIndex, stickyRowPositionTop) {
+    calculateStickyNodePosition(lastDescendantIndex, stickyRowPositionTop, stickyNodeHeight) {
         let lastChildRelativeTop = this.view.getRelativeTop(lastDescendantIndex);
         if (lastChildRelativeTop === null && this.view.firstVisibleIndex === lastDescendantIndex && lastDescendantIndex + 1 < this.view.length) {
             const nodeHeight = this.treeDelegate.getHeight(this.view.element(lastDescendantIndex));
@@ -1048,11 +1090,30 @@ class StickyScrollController extends Disposable {
         const lastChildHeight = this.treeDelegate.getHeight(lastChildNode);
         const topOfLastChild = lastChildRelativeTop * this.view.renderHeight;
         const bottomOfLastChild = topOfLastChild + lastChildHeight;
-        if (stickyRowPositionTop > topOfLastChild && stickyRowPositionTop <= bottomOfLastChild) {
-            return topOfLastChild;
+        if (stickyRowPositionTop + stickyNodeHeight > bottomOfLastChild && stickyRowPositionTop <= bottomOfLastChild) {
+            return bottomOfLastChild - stickyNodeHeight;
         }
         return stickyRowPositionTop;
     }
+    constrainStickyNodes(stickyNodes) {
+        if (stickyNodes.length === 0) {
+            return [];
+        }
+        const maximumStickyWidgetHeight = this.view.renderHeight * this.maxWidgetViewRatio;
+        const lastStickyNode = stickyNodes[stickyNodes.length - 1];
+        if (stickyNodes.length <= this.stickyScrollMaxItemCount && lastStickyNode.position + lastStickyNode.height <= maximumStickyWidgetHeight) {
+            return stickyNodes;
+        }
+        const constrainedStickyNodes = this.stickyScrollDelegate.constrainStickyScrollNodes(stickyNodes, this.stickyScrollMaxItemCount, maximumStickyWidgetHeight);
+        if (!constrainedStickyNodes.length) {
+            return [];
+        }
+        const lastConstrainedStickyNode = constrainedStickyNodes[constrainedStickyNodes.length - 1];
+        if (constrainedStickyNodes.length > this.stickyScrollMaxItemCount || lastConstrainedStickyNode.position + lastConstrainedStickyNode.height > maximumStickyWidgetHeight) {
+            throw new Error('stickyScrollDelegate violates constraints');
+        }
+        return constrainedStickyNodes;
+    }
     getParentNode(node) {
         const nodeLocation = this.model.getNodeLocation(node);
         const parentLocation = this.model.getParentNodeLocation(nodeLocation);
@@ -1062,10 +1123,8 @@ class StickyScrollController extends Disposable {
         const nodeLocation = this.model.getNodeLocation(node);
         return this.model.getListRenderCount(nodeLocation) > 1;
     }
-    getNodeIndex(node, nodeLocation) {
-        if (nodeLocation === undefined) {
-            nodeLocation = this.model.getNodeLocation(node);
-        }
+    getNodeIndex(node) {
+        const nodeLocation = this.model.getNodeLocation(node);
         const nodeIndex = this.model.getListIndex(nodeLocation);
         return nodeIndex;
     }
@@ -1092,7 +1151,19 @@ class StickyScrollController extends Disposable {
         }
         return widgetHeight;
     }
+    getFocus() {
+        return this._widget.getFocus();
+    }
+    domFocus() {
+        this._widget.domFocus();
+    }
+    focusedLast() {
+        return this._widget.focusedLast();
+    }
     updateOptions(optionsUpdate = {}) {
+        if (!optionsUpdate.stickyScrollMaxItemCount) {
+            return;
+        }
         const validatedOptions = this.validateStickySettings(optionsUpdate);
         if (this.stickyScrollMaxItemCount !== validatedOptions.stickyScrollMaxItemCount) {
             this.stickyScrollMaxItemCount = validatedOptions.stickyScrollMaxItemCount;
@@ -1100,7 +1171,7 @@ class StickyScrollController extends Disposable {
         }
     }
     validateStickySettings(options) {
-        let stickyScrollMaxItemCount = 5;
+        let stickyScrollMaxItemCount = 7;
         if (typeof options.stickyScrollMaxItemCount === 'number') {
             stickyScrollMaxItemCount = Math.max(options.stickyScrollMaxItemCount, 1);
         }
@@ -1108,14 +1179,21 @@ class StickyScrollController extends Disposable {
     }
 }
 class StickyScrollWidget {
-    constructor(container, view, model, treeRenderers, treeDelegate) {
+    constructor(container, view, tree, treeRenderers, treeDelegate, accessibilityProvider) {
         this.view = view;
-        this.model = model;
+        this.tree = tree;
         this.treeRenderers = treeRenderers;
         this.treeDelegate = treeDelegate;
-        this._rootDomNode = document.createElement('div');
-        this._rootDomNode.classList.add('monaco-tree-sticky-container');
+        this.accessibilityProvider = accessibilityProvider;
+        this._previousElements = [];
+        this._previousStateDisposables = ( new DisposableStore());
+        this._rootDomNode = $('.monaco-tree-sticky-container.empty');
         container.appendChild(this._rootDomNode);
+        const shadow = $('.monaco-tree-sticky-container-shadow');
+        this._rootDomNode.appendChild(shadow);
+        this.stickyScrollFocus = ( new StickyScrollFocus(this._rootDomNode, view));
+        this.onDidChangeHasFocus = this.stickyScrollFocus.onDidChangeHasFocus;
+        this.onContextMenu = this.stickyScrollFocus.onContextMenu;
     }
     get height() {
         if (!this._previousState) {
@@ -1139,28 +1217,34 @@ class StickyScrollWidget {
         if (wasVisible !== isVisible) {
             this.setVisible(isVisible);
         }
-        this._previousState?.dispose();
-        this._previousState = state;
         if (!isVisible) {
+            this._previousState = undefined;
+            this._previousElements = [];
+            this._previousStateDisposables.clear();
             return;
         }
-        for (let stickyIndex = state.count - 1; stickyIndex >= 0; stickyIndex--) {
-            const stickyNode = state.stickyNodes[stickyIndex];
-            const previousStickyNode = stickyIndex ? state.stickyNodes[stickyIndex - 1] : undefined;
-            const currentWidgetHieght = previousStickyNode ? previousStickyNode.position + previousStickyNode.height : 0;
-            const { element, disposable } = this.createElement(stickyNode, currentWidgetHieght);
-            this._rootDomNode.appendChild(element);
-            state.addDisposable(disposable);
-        }
-        const shadow = $('.monaco-tree-sticky-container-shadow');
-        this._rootDomNode.appendChild(shadow);
-        state.addDisposable(toDisposable(() => shadow.remove()));
         const lastStickyNode = state.stickyNodes[state.count - 1];
+        if (this._previousState && state.animationStateChanged(this._previousState)) {
+            this._previousElements[this._previousState.count - 1].style.top = `${lastStickyNode.position}px`;
+        }
+        else {
+            this._previousStateDisposables.clear();
+            const elements = Array(state.count);
+            for (let stickyIndex = state.count - 1; stickyIndex >= 0; stickyIndex--) {
+                const stickyNode = state.stickyNodes[stickyIndex];
+                const { element, disposable } = this.createElement(stickyNode, stickyIndex, state.count);
+                elements[stickyIndex] = element;
+                this._rootDomNode.appendChild(element);
+                this._previousStateDisposables.add(disposable);
+            }
+            this.stickyScrollFocus.updateElements(elements, state);
+            this._previousElements = elements;
+        }
+        this._previousState = state;
         this._rootDomNode.style.height = `${lastStickyNode.position + lastStickyNode.height}px`;
     }
-    createElement(stickyNode, currentWidgetHeight) {
-        const nodeLocation = this.model.getNodeLocation(stickyNode.node);
-        const nodeIndex = this.model.getListIndex(nodeLocation);
+    createElement(stickyNode, stickyIndex, stickyNodesTotal) {
+        const nodeIndex = stickyNode.startIndex;
         const stickyElement = document.createElement('div');
         stickyElement.style.top = `${stickyNode.position}px`;
         stickyElement.style.height = `${stickyNode.height}px`;
@@ -1170,12 +1254,16 @@ class StickyScrollWidget {
         stickyElement.setAttribute('data-index', `${nodeIndex}`);
         stickyElement.setAttribute('data-parity', nodeIndex % 2 === 0 ? 'even' : 'odd');
         stickyElement.setAttribute('id', this.view.getElementID(nodeIndex));
+        this.setAccessibilityAttributes(stickyElement, stickyNode.node.element, stickyIndex, stickyNodesTotal);
         const nodeTemplateId = this.treeDelegate.getTemplateId(stickyNode.node);
         const renderer = this.treeRenderers.find((renderer) => renderer.templateId === nodeTemplateId);
         if (!renderer) {
             throw new Error(`No renderer found for template id ${nodeTemplateId}`);
         }
-        const nodeCopy = ( new Proxy(stickyNode.node, {}));
+        let nodeCopy = stickyNode.node;
+        if (nodeCopy === this.tree.getNode(this.tree.getNodeLocation(stickyNode.node))) {
+            nodeCopy = ( new Proxy(stickyNode.node, {}));
+        }
         const templateData = renderer.renderTemplate(stickyElement);
         renderer.renderElement(nodeCopy, stickyNode.startIndex, templateData, stickyNode.height);
         const disposable = toDisposable(() => {
@@ -1185,14 +1273,246 @@ class StickyScrollWidget {
         });
         return { element: stickyElement, disposable };
     }
+    setAccessibilityAttributes(container, element, stickyIndex, stickyNodesTotal) {
+        if (!this.accessibilityProvider) {
+            return;
+        }
+        if (this.accessibilityProvider.getSetSize) {
+            container.setAttribute('aria-setsize', String(this.accessibilityProvider.getSetSize(element, stickyIndex, stickyNodesTotal)));
+        }
+        if (this.accessibilityProvider.getPosInSet) {
+            container.setAttribute('aria-posinset', String(this.accessibilityProvider.getPosInSet(element, stickyIndex)));
+        }
+        if (this.accessibilityProvider.getRole) {
+            container.setAttribute('role', this.accessibilityProvider.getRole(element) ?? 'treeitem');
+        }
+        const ariaLabel = this.accessibilityProvider.getAriaLabel(element);
+        if (ariaLabel) {
+            container.setAttribute('aria-label', ariaLabel);
+        }
+        const ariaLevel = this.accessibilityProvider.getAriaLevel && this.accessibilityProvider.getAriaLevel(element);
+        if (typeof ariaLevel === 'number') {
+            container.setAttribute('aria-level', `${ariaLevel}`);
+        }
+        container.setAttribute('aria-selected', String(false));
+    }
     setVisible(visible) {
-        this._rootDomNode.style.display = visible ? 'block' : 'none';
+        this._rootDomNode.classList.toggle('empty', !visible);
+        if (!visible) {
+            this.stickyScrollFocus.updateElements([], undefined);
+        }
+    }
+    getFocus() {
+        return this.stickyScrollFocus.getFocus();
+    }
+    domFocus() {
+        this.stickyScrollFocus.domFocus();
+    }
+    focusedLast() {
+        return this.stickyScrollFocus.focusedLast();
     }
     dispose() {
-        this._previousState?.dispose();
+        this.stickyScrollFocus.dispose();
+        this._previousStateDisposables.dispose();
         this._rootDomNode.remove();
     }
 }
+class StickyScrollFocus extends Disposable {
+    get domHasFocus() { return this._domHasFocus; }
+    set domHasFocus(hasFocus) {
+        if (hasFocus !== this._domHasFocus) {
+            this._onDidChangeHasFocus.fire(hasFocus);
+            this._domHasFocus = hasFocus;
+        }
+    }
+    constructor(container, view) {
+        super();
+        this.container = container;
+        this.view = view;
+        this.focusedIndex = -1;
+        this.elements = [];
+        this._onDidChangeHasFocus = ( new Emitter());
+        this.onDidChangeHasFocus = this._onDidChangeHasFocus.event;
+        this._onContextMenu = ( new Emitter());
+        this.onContextMenu = this._onContextMenu.event;
+        this._domHasFocus = false;
+        this.container.addEventListener('focus', () => this.onFocus());
+        this.container.addEventListener('blur', () => this.onBlur());
+        this._register(this.view.onDidFocus(() => this.toggleStickyScrollFocused(false)));
+        this._register(this.view.onKeyDown((e) => this.onKeyDown(e)));
+        this._register(this.view.onMouseDown((e) => this.onMouseDown(e)));
+        this._register(this.view.onContextMenu((e) => this.handleContextMenu(e)));
+    }
+    handleContextMenu(e) {
+        const target = e.browserEvent.target;
+        if (!isStickyScrollContainer(target) && !isStickyScrollElement(target)) {
+            if (this.focusedLast()) {
+                this.view.domFocus();
+            }
+            return;
+        }
+        if (!isKeyboardEvent(e.browserEvent)) {
+            if (!this.state) {
+                throw new Error('Context menu should not be triggered when state is undefined');
+            }
+            const stickyIndex = this.state.stickyNodes.findIndex(stickyNode => stickyNode.node.element === e.element?.element);
+            if (stickyIndex === -1) {
+                throw new Error('Context menu should not be triggered when element is not in sticky scroll widget');
+            }
+            this.container.focus();
+            this.setFocus(stickyIndex);
+            return;
+        }
+        if (!this.state || this.focusedIndex < 0) {
+            throw new Error('Context menu key should not be triggered when focus is not in sticky scroll widget');
+        }
+        const stickyNode = this.state.stickyNodes[this.focusedIndex];
+        const element = stickyNode.node.element;
+        const anchor = this.elements[this.focusedIndex];
+        this._onContextMenu.fire({ element, anchor, browserEvent: e.browserEvent, isStickyScroll: true });
+    }
+    onKeyDown(e) {
+        if (this.domHasFocus && this.state) {
+            if (e.key === 'ArrowUp') {
+                this.setFocusedElement(Math.max(0, this.focusedIndex - 1));
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            else if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
+                if (this.focusedIndex >= this.state.count - 1) {
+                    const nodeIndexToFocus = this.state.stickyNodes[this.state.count - 1].startIndex + 1;
+                    this.view.domFocus();
+                    this.view.setFocus([nodeIndexToFocus]);
+                    this.scrollNodeUnderWidget(nodeIndexToFocus, this.state);
+                }
+                else {
+                    this.setFocusedElement(this.focusedIndex + 1);
+                }
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        }
+    }
+    onMouseDown(e) {
+        const target = e.browserEvent.target;
+        if (!isStickyScrollContainer(target) && !isStickyScrollElement(target)) {
+            return;
+        }
+        e.browserEvent.preventDefault();
+        e.browserEvent.stopPropagation();
+    }
+    updateElements(elements, state) {
+        if (state && state.count === 0) {
+            throw new Error('Sticky scroll state must be undefined when there are no sticky nodes');
+        }
+        if (state && state.count !== elements.length) {
+            throw new Error('Sticky scroll focus received illigel state');
+        }
+        const previousIndex = this.focusedIndex;
+        this.removeFocus();
+        this.elements = elements;
+        this.state = state;
+        if (state) {
+            const newFocusedIndex = clamp(previousIndex, 0, state.count - 1);
+            this.setFocus(newFocusedIndex);
+        }
+        else {
+            if (this.domHasFocus) {
+                this.view.domFocus();
+            }
+        }
+        this.container.tabIndex = state ? 0 : -1;
+    }
+    setFocusedElement(stickyIndex) {
+        const state = this.state;
+        if (!state) {
+            throw new Error('Cannot set focus when state is undefined');
+        }
+        this.setFocus(stickyIndex);
+        if (stickyIndex < state.count - 1) {
+            return;
+        }
+        if (state.lastNodePartiallyVisible()) {
+            const lastStickyNode = state.stickyNodes[stickyIndex];
+            this.scrollNodeUnderWidget(lastStickyNode.endIndex + 1, state);
+        }
+    }
+    scrollNodeUnderWidget(nodeIndex, state) {
+        const lastStickyNode = state.stickyNodes[state.count - 1];
+        const secondLastStickyNode = state.count > 1 ? state.stickyNodes[state.count - 2] : undefined;
+        const elementScrollTop = this.view.getElementTop(nodeIndex);
+        const elementTargetViewTop = secondLastStickyNode ? secondLastStickyNode.position + secondLastStickyNode.height + lastStickyNode.height : lastStickyNode.height;
+        this.view.scrollTop = elementScrollTop - elementTargetViewTop;
+    }
+    getFocus() {
+        if (!this.state || this.focusedIndex === -1) {
+            return undefined;
+        }
+        return this.state.stickyNodes[this.focusedIndex].node.element;
+    }
+    domFocus() {
+        if (!this.state) {
+            throw new Error('Cannot focus when state is undefined');
+        }
+        this.container.focus();
+    }
+    focusedLast() {
+        if (!this.state) {
+            return false;
+        }
+        return this.view.getHTMLElement().classList.contains('sticky-scroll-focused');
+    }
+    removeFocus() {
+        if (this.focusedIndex === -1) {
+            return;
+        }
+        this.toggleElementFocus(this.elements[this.focusedIndex], false);
+        this.focusedIndex = -1;
+    }
+    setFocus(newFocusIndex) {
+        if (0 > newFocusIndex) {
+            throw new Error('addFocus() can not remove focus');
+        }
+        if (!this.state && newFocusIndex >= 0) {
+            throw new Error('Cannot set focus index when state is undefined');
+        }
+        if (this.state && newFocusIndex >= this.state.count) {
+            throw new Error('Cannot set focus index to an index that does not exist');
+        }
+        const oldIndex = this.focusedIndex;
+        if (oldIndex >= 0) {
+            this.toggleElementFocus(this.elements[oldIndex], false);
+        }
+        if (newFocusIndex >= 0) {
+            this.toggleElementFocus(this.elements[newFocusIndex], true);
+        }
+        this.focusedIndex = newFocusIndex;
+    }
+    toggleElementFocus(element, focused) {
+        element.classList.toggle('focused', focused);
+    }
+    toggleStickyScrollFocused(focused) {
+        this.view.getHTMLElement().classList.toggle('sticky-scroll-focused', focused);
+    }
+    onFocus() {
+        if (!this.state || this.elements.length === 0) {
+            throw new Error('Cannot focus when state is undefined or elements are empty');
+        }
+        this.domHasFocus = true;
+        this.toggleStickyScrollFocused(true);
+        if (this.focusedIndex === -1) {
+            this.setFocus(0);
+        }
+    }
+    onBlur() {
+        this.domHasFocus = false;
+    }
+    dispose() {
+        this.toggleStickyScrollFocused(false);
+        this._onDidChangeHasFocus.fire(false);
+        super.dispose();
+    }
+}
 function asTreeMouseEvent(event) {
     let target = TreeMouseEventTarget.Unknown;
     if (hasParentWithClass(event.browserEvent.target, 'monaco-tl-twistie', 'monaco-tl-row')) {
@@ -1211,10 +1531,12 @@ function asTreeMouseEvent(event) {
     };
 }
 function asTreeContextMenuEvent(event) {
+    const isStickyScroll = isStickyScrollContainer(event.browserEvent.target);
     return {
         element: event.element ? event.element.element : null,
         browserEvent: event.browserEvent,
-        anchor: event.anchor
+        anchor: event.anchor,
+        isStickyScroll
     };
 }
 function dfs(node, fn) {
@@ -1379,6 +1701,7 @@ class TreeNodeListMouseController extends MouseController {
         const elementScrollTop = this.list.getElementTop(nodeIndex);
         const elementTargetViewTop = stickyScrollController.nodePositionTopBelowWidget(node);
         this.tree.scrollTop = elementScrollTop - elementTargetViewTop;
+        this.list.domFocus();
         this.list.setFocus([nodeIndex]);
         this.list.setSelection([nodeIndex]);
     }
@@ -1392,6 +1715,20 @@ class TreeNodeListMouseController extends MouseController {
         }
         super.onDoubleClick(e);
     }
+    onMouseDown(e) {
+        const target = e.browserEvent.target;
+        if (!isStickyScrollContainer(target) && !isStickyScrollElement(target)) {
+            super.onMouseDown(e);
+            return;
+        }
+    }
+    onContextMenu(e) {
+        const target = e.browserEvent.target;
+        if (!isStickyScrollContainer(target) && !isStickyScrollElement(target)) {
+            super.onContextMenu(e);
+            return;
+        }
+    }
 }
 class TreeNodeList extends List {
     constructor(user, container, virtualDelegate, renderers, focusTrait, selectionTrait, anchorTrait, options) {
@@ -1462,7 +1799,7 @@ class AbstractTree {
     get onDidChangeSelection() { return this.eventBufferer.wrapEvent(this.selection.onDidChange); }
     get onMouseClick() { return ( Event.map(this.view.onMouseClick, asTreeMouseEvent)); }
     get onMouseDblClick() { return Event.filter(( Event.map(this.view.onMouseDblClick, asTreeMouseEvent)), e => e.target !== TreeMouseEventTarget.Filter); }
-    get onContextMenu() { return ( Event.map(this.view.onContextMenu, asTreeContextMenuEvent)); }
+    get onContextMenu() { return Event.any(Event.filter(( Event.map(this.view.onContextMenu, asTreeContextMenuEvent)), e => !e.isStickyScroll), this.stickyScrollController?.onContextMenu ?? Event.None); }
     get onTap() { return ( Event.map(this.view.onTap, asTreeMouseEvent)); }
     get onPointer() { return ( Event.map(this.view.onPointer, asTreeMouseEvent)); }
     get onKeyDown() { return this.view.onKeyDown; }
@@ -1490,6 +1827,7 @@ class AbstractTree {
         this._options = _options;
         this.eventBufferer = ( new EventBufferer());
         this.onDidChangeFindOpenState = Event.None;
+        this.onDidChangeStickyScrollFocused = Event.None;
         this.disposables = ( new DisposableStore());
         this._onWillRefilter = ( new Emitter());
         this.onWillRefilter = this._onWillRefilter.event;
@@ -1576,6 +1914,7 @@ class AbstractTree {
         }
         if (_options.enableStickyScroll) {
             this.stickyScrollController = ( new StickyScrollController(this, this.model, this.view, this.renderers, this.treeDelegate, _options));
+            this.onDidChangeStickyScrollFocused = this.stickyScrollController.onDidChangeHasFocus;
         }
         this.styleElement = createStyleSheet(this.view.getHTMLElement());
         this.getHTMLElement().classList.toggle('always', this._options.renderIndentGuides === RenderIndentGuides.Always);
@@ -1604,8 +1943,10 @@ class AbstractTree {
                 this.treeDelegate,
                 this._options
             ));
+            this.onDidChangeStickyScrollFocused = this.stickyScrollController.onDidChangeHasFocus;
         }
         else if (this.stickyScrollController && !this._options.enableStickyScroll) {
+            this.onDidChangeStickyScrollFocused = Event.None;
             this.stickyScrollController.dispose();
             this.stickyScrollController = undefined;
         }
@@ -1677,7 +2018,12 @@ class AbstractTree {
         return this.selection.getNodes().length;
     }
     domFocus() {
-        this.view.domFocus();
+        if (this.stickyScrollController?.focusedLast()) {
+            this.stickyScrollController.domFocus();
+        }
+        else {
+            this.view.domFocus();
+        }
     }
     isDOMFocused() {
         return isActiveElement(this.getHTMLElement());
@@ -1699,6 +2045,21 @@ class AbstractTree {
             content.push(`.monaco-list${suffix} .monaco-scrollable-element .monaco-tree-sticky-container { background-color: ${styles.listBackground}; }`);
             content.push(`.monaco-list${suffix} .monaco-scrollable-element .monaco-tree-sticky-container .monaco-tree-sticky-row { background-color: ${styles.listBackground}; }`);
         }
+        if (styles.listFocusForeground) {
+            content.push(`.monaco-list${suffix}.sticky-scroll-focused .monaco-scrollable-element .monaco-tree-sticky-container:focus .monaco-list-row.focused { color: ${styles.listFocusForeground}; }`);
+            content.push(`.monaco-list${suffix}:not(.sticky-scroll-focused) .monaco-scrollable-element .monaco-tree-sticky-container .monaco-list-row.focused { color: inherit; }`);
+        }
+        const focusAndSelectionOutline = asCssValueWithDefault(styles.listFocusAndSelectionOutline, asCssValueWithDefault(styles.listSelectionOutline, styles.listFocusOutline ?? ''));
+        if (focusAndSelectionOutline) {
+            content.push(`.monaco-list${suffix}.sticky-scroll-focused .monaco-scrollable-element .monaco-tree-sticky-container:focus .monaco-list-row.focused.selected { outline: 1px solid ${focusAndSelectionOutline}; outline-offset: -1px;}`);
+            content.push(`.monaco-list${suffix}:not(.sticky-scroll-focused) .monaco-scrollable-element .monaco-tree-sticky-container .monaco-list-row.focused.selected { outline: inherit;}`);
+        }
+        if (styles.listFocusOutline) {
+            content.push(`.monaco-list${suffix}.sticky-scroll-focused .monaco-scrollable-element .monaco-tree-sticky-container:focus .monaco-list-row.focused { outline: 1px solid ${styles.listFocusOutline}; outline-offset: -1px; }`);
+            content.push(`.monaco-list${suffix}:not(.sticky-scroll-focused) .monaco-scrollable-element .monaco-tree-sticky-container .monaco-list-row.focused { outline: inherit; }`);
+            content.push(`.monaco-workbench.context-menu-visible .monaco-list${suffix}.last-focused.sticky-scroll-focused .monaco-list-rows .monaco-list-row.focused { outline: inherit; }`);
+            content.push(`.monaco-workbench.context-menu-visible .monaco-list${suffix}.last-focused:not(.sticky-scroll-focused) .monaco-tree-sticky-container .monaco-list-rows .monaco-list-row.focused { outline: inherit; }`);
+        }
         this.styleElement.textContent = content.join('\n');
         this.view.style(styles);
     }
@@ -1760,52 +2121,65 @@ class AbstractTree {
         if (typeof element === 'undefined') {
             return this.view.setAnchor(undefined);
         }
-        const node = this.model.getNode(element);
-        this.anchor.set([node]);
-        const index = this.model.getListIndex(element);
-        if (index > -1) {
-            this.view.setAnchor(index, true);
-        }
+        this.eventBufferer.bufferEvents(() => {
+            const node = this.model.getNode(element);
+            this.anchor.set([node]);
+            const index = this.model.getListIndex(element);
+            if (index > -1) {
+                this.view.setAnchor(index, true);
+            }
+        });
     }
     getAnchor() {
         return firstOrDefault(this.anchor.get(), undefined);
     }
     setSelection(elements, browserEvent) {
-        const nodes = ( elements.map(e => this.model.getNode(e)));
-        this.selection.set(nodes, browserEvent);
-        const indexes = ( elements.map(e => this.model.getListIndex(e))).filter(i => i > -1);
-        this.view.setSelection(indexes, browserEvent, true);
+        this.eventBufferer.bufferEvents(() => {
+            const nodes = ( elements.map(e => this.model.getNode(e)));
+            this.selection.set(nodes, browserEvent);
+            const indexes = ( elements.map(e => this.model.getListIndex(e))).filter(i => i > -1);
+            this.view.setSelection(indexes, browserEvent, true);
+        });
     }
     getSelection() {
         return this.selection.get();
     }
     setFocus(elements, browserEvent) {
-        const nodes = ( elements.map(e => this.model.getNode(e)));
-        this.focus.set(nodes, browserEvent);
-        const indexes = ( elements.map(e => this.model.getListIndex(e))).filter(i => i > -1);
-        this.view.setFocus(indexes, browserEvent, true);
+        this.eventBufferer.bufferEvents(() => {
+            const nodes = ( elements.map(e => this.model.getNode(e)));
+            this.focus.set(nodes, browserEvent);
+            const indexes = ( elements.map(e => this.model.getListIndex(e))).filter(i => i > -1);
+            this.view.setFocus(indexes, browserEvent, true);
+        });
     }
-    focusNext(n = 1, loop = false, browserEvent, filter = this.focusNavigationFilter) {
+    focusNext(n = 1, loop = false, browserEvent, filter = (isKeyboardEvent(browserEvent) && browserEvent.altKey) ? undefined : this.focusNavigationFilter) {
         this.view.focusNext(n, loop, browserEvent, filter);
     }
-    focusPrevious(n = 1, loop = false, browserEvent, filter = this.focusNavigationFilter) {
+    focusPrevious(n = 1, loop = false, browserEvent, filter = (isKeyboardEvent(browserEvent) && browserEvent.altKey) ? undefined : this.focusNavigationFilter) {
         this.view.focusPrevious(n, loop, browserEvent, filter);
     }
-    focusNextPage(browserEvent, filter = this.focusNavigationFilter) {
+    focusNextPage(browserEvent, filter = (isKeyboardEvent(browserEvent) && browserEvent.altKey) ? undefined : this.focusNavigationFilter) {
         return this.view.focusNextPage(browserEvent, filter);
     }
-    focusPreviousPage(browserEvent, filter = this.focusNavigationFilter) {
-        return this.view.focusPreviousPage(browserEvent, filter);
+    focusPreviousPage(browserEvent, filter = (isKeyboardEvent(browserEvent) && browserEvent.altKey) ? undefined : this.focusNavigationFilter) {
+        return this.view.focusPreviousPage(browserEvent, filter, () => this.stickyScrollController?.height ?? 0);
     }
-    focusLast(browserEvent, filter = this.focusNavigationFilter) {
+    focusLast(browserEvent, filter = (isKeyboardEvent(browserEvent) && browserEvent.altKey) ? undefined : this.focusNavigationFilter) {
         this.view.focusLast(browserEvent, filter);
     }
-    focusFirst(browserEvent, filter = this.focusNavigationFilter) {
+    focusFirst(browserEvent, filter = (isKeyboardEvent(browserEvent) && browserEvent.altKey) ? undefined : this.focusNavigationFilter) {
         this.view.focusFirst(browserEvent, filter);
     }
     getFocus() {
         return this.focus.get();
     }
+    getStickyScrollFocus() {
+        const focus = this.stickyScrollController?.getFocus();
+        return focus !== undefined ? [focus] : [];
+    }
+    getFocusedPart() {
+        return this.stickyScrollController?.focusedLast() ? 1  : 0 ;
+    }
     reveal(location, relativeTop) {
         this.model.expandTo(location);
         const index = this.model.getListIndex(location);