@codingame/monaco-vscode-api 20.4.1 → 21.0.0

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

@@ -144,20 +144,56 @@ function sanitizeHtml(untrusted, config) {
                 resolvedConfig.ALLOWED_TAGS = [...(resolvedConfig.ALLOWED_TAGS ?? []), ...config.allowedTags.augment];
             }
         }
+        let resolvedAttributes = [...defaultAllowedAttrs];
         if (config?.allowedAttributes) {
             if (config.allowedAttributes.override) {
-                resolvedConfig.ALLOWED_ATTR = [...config.allowedAttributes.override];
+                resolvedAttributes = [...config.allowedAttributes.override];
             }
             if (config.allowedAttributes.augment) {
-                resolvedConfig.ALLOWED_ATTR = [...(resolvedConfig.ALLOWED_ATTR ?? []), ...config.allowedAttributes.augment];
+                resolvedAttributes = [...resolvedAttributes, ...config.allowedAttributes.augment];
             }
         }
+        resolvedAttributes = ( resolvedAttributes.map((attr) => {
+            if (typeof attr === 'string') {
+                return attr.toLowerCase();
+            }
+            return {
+                attributeName: attr.attributeName.toLowerCase(),
+                shouldKeep: attr.shouldKeep,
+            };
+        }));
+        const allowedAttrNames = ( new Set(( resolvedAttributes.map(attr => typeof attr === 'string' ? attr : attr.attributeName))));
+        const allowedAttrPredicates = ( new Map());
+        for (const attr of resolvedAttributes) {
+            if (typeof attr === 'string') {
+                allowedAttrPredicates.delete(attr);
+            }
+            else {
+                allowedAttrPredicates.set(attr.attributeName, attr);
+            }
+        }
+        resolvedConfig.ALLOWED_ATTR = Array.from(allowedAttrNames);
         store.add(hookDomPurifyHrefAndSrcSanitizer(config?.allowedLinkProtocols?.override ?? [Schemas.http, Schemas.https], config?.allowedMediaProtocols?.override ?? [Schemas.http, Schemas.https]));
-        if (config?._do_not_use_hooks?.uponSanitizeElement) {
-            store.add(addDompurifyHook('uponSanitizeElement', config?._do_not_use_hooks.uponSanitizeElement));
+        if (config?.replaceWithPlaintext) {
+            store.add(addDompurifyHook('uponSanitizeElement', replaceWithPlainTextHook));
         }
-        if (config?._do_not_use_hooks?.uponSanitizeAttribute) {
-            store.add(addDompurifyHook('uponSanitizeAttribute', config._do_not_use_hooks.uponSanitizeAttribute));
+        if (allowedAttrPredicates.size) {
+            store.add(addDompurifyHook('uponSanitizeAttribute', (node, e) => {
+                const predicate = allowedAttrPredicates.get(e.attrName);
+                if (predicate) {
+                    const result = predicate.shouldKeep(node, e);
+                    if (typeof result === 'string') {
+                        e.keepAttr = true;
+                        e.attrValue = result;
+                    }
+                    else {
+                        e.keepAttr = result;
+                    }
+                }
+                else {
+                    e.keepAttr = ( allowedAttrNames.has(e.attrName));
+                }
+            }));
         }
         return dompurify.sanitize(untrusted, {
             ...resolvedConfig,
@@ -168,8 +204,51 @@ function sanitizeHtml(untrusted, config) {
         store.dispose();
     }
 }
+const selfClosingTags = ['area', 'base', 'br', 'col', 'command', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr'];
+function replaceWithPlainTextHook(element, data, _config) {
+    if (!data.allowedTags[data.tagName] && data.tagName !== 'body') {
+        const replacement = convertTagToPlaintext(element);
+        if (element.nodeType === Node.COMMENT_NODE) {
+            element.parentElement?.insertBefore(replacement, element);
+        }
+        else {
+            element.parentElement?.replaceChild(replacement, element);
+        }
+    }
+}
+function convertTagToPlaintext(element) {
+    let startTagText;
+    let endTagText;
+    if (element.nodeType === Node.COMMENT_NODE) {
+        startTagText = `<!--${element.textContent}-->`;
+    }
+    else {
+        const tagName = element.tagName.toLowerCase();
+        const isSelfClosing = selfClosingTags.includes(tagName);
+        const attrString = element.attributes.length ?
+            ' ' + ( Array.from(element.attributes)
+                .map(attr => `${attr.name}="${attr.value}"`))
+                .join(' ')
+            : '';
+        startTagText = `<${tagName}${attrString}>`;
+        if (!isSelfClosing) {
+            endTagText = `</${tagName}>`;
+        }
+    }
+    const fragment = document.createDocumentFragment();
+    const textNode = element.ownerDocument.createTextNode(startTagText);
+    fragment.appendChild(textNode);
+    while (element.firstChild) {
+        fragment.appendChild(element.firstChild);
+    }
+    const endTagTextNode = endTagText ? element.ownerDocument.createTextNode(endTagText) : undefined;
+    if (endTagTextNode) {
+        fragment.appendChild(endTagTextNode);
+    }
+    return fragment;
+}
 function safeSetInnerHtml(node, untrusted, config) {
     node.innerHTML = sanitizeHtml(untrusted, config);
 }
 
-export { basicMarkupHtmlTags, defaultAllowedAttrs, safeSetInnerHtml, sanitizeHtml };
+export { basicMarkupHtmlTags, convertTagToPlaintext, defaultAllowedAttrs, safeSetInnerHtml, sanitizeHtml };

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

@@ -24,10 +24,10 @@ class WrappedStyleElement {
         }
         this._currentCssStyle = cssStyle;
         if (!this._styleSheet) {
-            this._styleSheet = createStyleSheet(mainWindow.document.head, (s) => s.innerText = cssStyle);
+            this._styleSheet = createStyleSheet(mainWindow.document.head, (s) => s.textContent = cssStyle);
         }
         else {
-            this._styleSheet.innerText = cssStyle;
+            this._styleSheet.textContent = cssStyle;
         }
     }
     dispose() {

package/vscode/src/vs/base/browser/event.d.ts

@@ -17,7 +17,7 @@ export interface DOMEventMap extends HTMLElementEventMap, DocumentEventMap, Wind
     "compositionend": CompositionEvent;
 }
 export declare class DomEmitter<K extends keyof DOMEventMap> implements IDisposable {
-    private emitter;
+    private readonly emitter;
     get event(): BaseEvent<DOMEventMap[K]>;
     constructor(element: Window & typeof globalThis, type: WindowEventMap, useCapture?: boolean);
     constructor(element: Document, type: DocumentEventMap, useCapture?: boolean);

package/vscode/src/vs/base/browser/markdownRenderer.d.ts

@@ -1,14 +1,16 @@
 import { IMarkdownString } from "../common/htmlContent.js";
 import * as marked from "../common/marked/marked.js";
 import { URI } from "../common/uri.js";
-import { FormattedTextRenderOptions } from "./formattedTextRenderer.js";
+import * as domSanitize from "./domSanitize.js";
+export type MarkdownActionHandler = (linkContent: string, mdStr: IMarkdownString) => void;
 /**
  * Options for the rendering of markdown with {@link renderMarkdown}.
  */
-export interface MarkdownRenderOptions extends FormattedTextRenderOptions {
+export interface MarkdownRenderOptions {
     readonly codeBlockRenderer?: (languageId: string, value: string) => Promise<HTMLElement>;
     readonly codeBlockRendererSync?: (languageId: string, value: string, raw?: string) => HTMLElement;
     readonly asyncRenderCallback?: () => void;
+    readonly actionHandler?: MarkdownActionHandler;
     readonly fillInIncompleteTokens?: boolean;
     readonly sanitizerConfig?: MarkdownSanitizerConfig;
     readonly markedOptions?: MarkdownRendererMarkedOptions;
@@ -26,7 +28,9 @@ export interface MarkdownSanitizerConfig {
     readonly allowedTags?: {
         readonly override: readonly string[];
     };
-    readonly customAttrSanitizer?: (attrName: string, attrValue: string) => boolean | string;
+    readonly allowedAttributes?: {
+        readonly override: ReadonlyArray<string | domSanitize.SanitizeAttributeRule>;
+    };
     readonly allowedLinkSchemes?: {
         readonly augment: readonly string[];
     };
@@ -43,7 +47,7 @@ export declare function renderMarkdown(markdown: IMarkdownString, options?: Mark
     dispose: () => void;
 };
 export declare const allowedMarkdownHtmlTags: readonly string[];
-export declare const allowedMarkdownHtmlAttributes: string[];
+export declare const allowedMarkdownHtmlAttributes: readonly (string | domSanitize.SanitizeAttributeRule)[];
 /**
  * Renders `str` as plaintext, stripping out Markdown syntax if it's a {@link IMarkdownString}.
  *

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

@@ -1,6 +1,5 @@
 
 import { onUnexpectedError } from '../common/errors.js';
-import { Event } from '../common/event.js';
 import { removeMarkdownEscapes, escapeDoubleQuotes, parseHrefAndDimensions } from '../common/htmlContent.js';
 import { markdownEscapeEscapedIcons } from '../common/iconLabels.js';
 import { defaultGenerator } from '../common/idGenerator.js';
@@ -15,8 +14,7 @@ import { resolvePath, dirname } from '../common/resources.js';
 import { escape } from '../common/strings.js';
 import { URI } from '../common/uri.js';
 import { createElement, reset, addDisposableListener, getWindow, $, isHTMLElement } from './dom.js';
-import { sanitizeHtml, basicMarkupHtmlTags } from './domSanitize.js';
-import { DomEmitter } from './event.js';
+import { safeSetInnerHtml, convertTagToPlaintext, sanitizeHtml, basicMarkupHtmlTags } from './domSanitize.js';
 import { StandardKeyboardEvent } from './keyboardEvent.js';
 import { StandardMouseEvent } from './mouseEvent.js';
 import { renderLabelWithIcons } from './ui/iconLabel/iconLabels.js';
@@ -85,18 +83,25 @@ function renderMarkdown(markdown, options = {}, target) {
         const elements = renderLabelWithIcons(renderedMarkdown);
         renderedMarkdown = ( elements.map(e => typeof e === 'string' ? e : e.outerHTML)).join('');
     }
-    const htmlParser = ( new DOMParser());
-    const markdownHtmlDoc = htmlParser.parseFromString(sanitizeRenderedMarkdown(renderedMarkdown, markdown.isTrusted ?? false, options.sanitizerConfig), 'text/html');
-    rewriteRenderedLinks(markdown, options, markdownHtmlDoc.body);
-    const element = target ?? createElement('div');
-    element.innerHTML = sanitizeRenderedMarkdown(markdownHtmlDoc.body.innerHTML, markdown.isTrusted ?? false, options.sanitizerConfig);
+    const renderedContent = createElement('div');
+    const sanitizerConfig = getDomSanitizerConfig(markdown.isTrusted ?? false, options.sanitizerConfig ?? {});
+    safeSetInnerHtml(renderedContent, renderedMarkdown, sanitizerConfig);
+    rewriteRenderedLinks(markdown, options, renderedContent);
+    let outElement;
+    if (target) {
+        outElement = target;
+        reset(target, ...renderedContent.children);
+    }
+    else {
+        outElement = renderedContent;
+    }
     if (codeBlocks.length > 0) {
         Promise.all(codeBlocks).then((tuples) => {
             if (isDisposed) {
                 return;
             }
             const renderedElements = ( new Map(tuples));
-            const placeholderElements = element.querySelectorAll(`div[data-code]`);
+            const placeholderElements = outElement.querySelectorAll(`div[data-code]`);
             for (const placeholderElement of placeholderElements) {
                 const renderedElement = renderedElements.get(placeholderElement.dataset['code'] ?? '');
                 if (renderedElement) {
@@ -108,7 +113,7 @@ function renderMarkdown(markdown, options = {}, target) {
     }
     else if (syncCodeBlocks.length > 0) {
         const renderedElements = ( new Map(syncCodeBlocks));
-        const placeholderElements = element.querySelectorAll(`div[data-code]`);
+        const placeholderElements = outElement.querySelectorAll(`div[data-code]`);
         for (const placeholderElement of placeholderElements) {
             const renderedElement = renderedElements.get(placeholderElement.dataset['code'] ?? '');
             if (renderedElement) {
@@ -117,7 +122,7 @@ function renderMarkdown(markdown, options = {}, target) {
         }
     }
     if (options.asyncRenderCallback) {
-        for (const img of element.getElementsByTagName('img')) {
+        for (const img of outElement.getElementsByTagName('img')) {
             const listener = disposables.add(addDisposableListener(img, 'load', () => {
                 listener.dispose();
                 options.asyncRenderCallback();
@@ -125,16 +130,16 @@ function renderMarkdown(markdown, options = {}, target) {
         }
     }
     if (options.actionHandler) {
-        const onClick = options.actionHandler.disposables.add(( new DomEmitter(element, 'click')));
-        const onAuxClick = options.actionHandler.disposables.add(( new DomEmitter(element, 'auxclick')));
-        options.actionHandler.disposables.add(Event.any(onClick.event, onAuxClick.event)(e => {
-            const mouseEvent = ( new StandardMouseEvent(getWindow(element), e));
+        const clickCb = (e) => {
+            const mouseEvent = ( new StandardMouseEvent(getWindow(outElement), e));
             if (!mouseEvent.leftButton && !mouseEvent.middleButton) {
                 return;
             }
             activateLink(markdown, options, mouseEvent);
-        }));
-        options.actionHandler.disposables.add(addDisposableListener(element, 'keydown', (e) => {
+        };
+        disposables.add(addDisposableListener(outElement, 'click', clickCb));
+        disposables.add(addDisposableListener(outElement, 'auxclick', clickCb));
+        disposables.add(addDisposableListener(outElement, 'keydown', (e) => {
             const keyboardEvent = ( new StandardKeyboardEvent(e));
             if (!keyboardEvent.equals(KeyCode.Space) && !keyboardEvent.equals(KeyCode.Enter)) {
                 return;
@@ -142,8 +147,22 @@ function renderMarkdown(markdown, options = {}, target) {
             activateLink(markdown, options, keyboardEvent);
         }));
     }
+    for (const input of [...outElement.getElementsByTagName('input')]) {
+        if (input.attributes.getNamedItem('type')?.value === 'checkbox') {
+            input.setAttribute('disabled', '');
+        }
+        else {
+            if (options.sanitizerConfig?.replaceWithPlaintext) {
+                const replacement = convertTagToPlaintext(input);
+                input.parentElement?.replaceChild(replacement, input);
+            }
+            else {
+                input.remove();
+            }
+        }
+    }
     return {
-        element,
+        element: outElement,
         dispose: () => {
             isDisposed = true;
             disposables.dispose();
@@ -232,7 +251,7 @@ function preprocessMarkdownString(markdown) {
     }
     return value;
 }
-function activateLink(markdown, options, event) {
+function activateLink(mdStr, options, event) {
     const target = event.target.closest('a[data-href]');
     if (!isHTMLElement(target)) {
         return;
@@ -240,10 +259,10 @@ function activateLink(markdown, options, event) {
     try {
         let href = target.dataset['href'];
         if (href) {
-            if (markdown.baseUri) {
-                href = resolveWithBaseUri(( URI.from(markdown.baseUri)), href);
+            if (mdStr.baseUri) {
+                href = resolveWithBaseUri(( URI.from(mdStr.baseUri)), href);
             }
-            options.actionHandler.callback(href, event);
+            options.actionHandler?.(href, mdStr);
         }
     }
     catch (err) {
@@ -318,24 +337,20 @@ function resolveWithBaseUri(baseUri, href) {
         return ( resolvePath(dirname(baseUri), href).toString());
     }
 }
-const selfClosingTags = ['area', 'base', 'br', 'col', 'command', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr'];
 function sanitizeRenderedMarkdown(renderedMarkdown, isTrusted, options = {}) {
-    const sanitizerConfig = getSanitizerOptions(isTrusted, options);
+    const sanitizerConfig = getDomSanitizerConfig(isTrusted, options);
     return sanitizeHtml(renderedMarkdown, sanitizerConfig);
 }
 const allowedMarkdownHtmlTags = ( Object.freeze([
     ...basicMarkupHtmlTags,
     'input',
 ]));
-const allowedMarkdownHtmlAttributes = [
+const allowedMarkdownHtmlAttributes = ( Object.freeze([
     'align',
     'autoplay',
     'alt',
-    'checked',
-    'class',
     'colspan',
     'controls',
-    'disabled',
     'draggable',
     'height',
     'href',
@@ -350,12 +365,35 @@ const allowedMarkdownHtmlAttributes = [
     'type',
     'width',
     'start',
+    'checked',
+    'disabled',
+    'value',
     'data-code',
     'data-href',
-    'style',
-    'class',
-];
-function getSanitizerOptions(isTrusted, options) {
+    {
+        attributeName: 'style',
+        shouldKeep: (element, data) => {
+            if (element.tagName === 'SPAN') {
+                if (data.attrName === 'style') {
+                    return /^(color\:(#[0-9a-fA-F]+|var\(--vscode(-[a-zA-Z0-9]+)+\));)?(background-color\:(#[0-9a-fA-F]+|var\(--vscode(-[a-zA-Z0-9]+)+\));)?(border-radius:[0-9]+px;)?$/.test(data.attrValue);
+                }
+            }
+            return false;
+        }
+    },
+    {
+        attributeName: 'class',
+        shouldKeep: (element, data) => {
+            if (element.tagName === 'SPAN') {
+                if (data.attrName === 'class') {
+                    return /^codicon codicon-[a-z\-]+( codicon-modifier-[a-z\-]+)?$/.test(data.attrValue);
+                }
+            }
+            return false;
+        },
+    },
+]));
+function getDomSanitizerConfig(isTrusted, options) {
     const allowedLinkSchemes = [
         Schemas.http,
         Schemas.https,
@@ -377,7 +415,7 @@ function getSanitizerOptions(isTrusted, options) {
             override: options.allowedTags?.override ?? allowedMarkdownHtmlTags
         },
         allowedAttributes: {
-            override: allowedMarkdownHtmlAttributes,
+            override: options.allowedAttributes?.override ?? allowedMarkdownHtmlAttributes,
         },
         allowedLinkProtocols: {
             override: allowedLinkSchemes,
@@ -393,99 +431,7 @@ function getSanitizerOptions(isTrusted, options) {
                 Schemas.vscodeRemoteResource,
             ]
         },
-        _do_not_use_hooks: {
-            uponSanitizeAttribute: (element, e) => {
-                if (options.customAttrSanitizer) {
-                    const result = options.customAttrSanitizer(e.attrName, e.attrValue);
-                    if (typeof result === 'string') {
-                        if (result) {
-                            e.attrValue = result;
-                            e.keepAttr = true;
-                        }
-                        else {
-                            e.keepAttr = false;
-                        }
-                    }
-                    else {
-                        e.keepAttr = result;
-                    }
-                    return;
-                }
-                if (e.attrName === 'style' || e.attrName === 'class') {
-                    if (element.tagName === 'SPAN') {
-                        if (e.attrName === 'style') {
-                            e.keepAttr = /^(color\:(#[0-9a-fA-F]+|var\(--vscode(-[a-zA-Z0-9]+)+\));)?(background-color\:(#[0-9a-fA-F]+|var\(--vscode(-[a-zA-Z0-9]+)+\));)?(border-radius:[0-9]+px;)?$/.test(e.attrValue);
-                            return;
-                        }
-                        else if (e.attrName === 'class') {
-                            e.keepAttr = /^codicon codicon-[a-z\-]+( codicon-modifier-[a-z\-]+)?$/.test(e.attrValue);
-                            return;
-                        }
-                    }
-                    e.keepAttr = false;
-                    return;
-                }
-                else if (element.tagName === 'INPUT' && element.attributes.getNamedItem('type')?.value === 'checkbox') {
-                    if ((e.attrName === 'type' && e.attrValue === 'checkbox') || e.attrName === 'disabled' || e.attrName === 'checked') {
-                        e.keepAttr = true;
-                        return;
-                    }
-                    e.keepAttr = false;
-                }
-            },
-            uponSanitizeElement: (element, e) => {
-                let wantsReplaceWithPlaintext = false;
-                if (e.tagName === 'input') {
-                    if (element.attributes.getNamedItem('type')?.value === 'checkbox') {
-                        element.setAttribute('disabled', '');
-                    }
-                    else if (options.replaceWithPlaintext) {
-                        wantsReplaceWithPlaintext = true;
-                    }
-                    else {
-                        element.remove();
-                        return;
-                    }
-                }
-                if (options.replaceWithPlaintext && (wantsReplaceWithPlaintext || (!e.allowedTags[e.tagName] && e.tagName !== 'body'))) {
-                    if (element.parentElement) {
-                        let startTagText;
-                        let endTagText;
-                        if (e.tagName === '#comment') {
-                            startTagText = `<!--${element.textContent}-->`;
-                        }
-                        else {
-                            const isSelfClosing = selfClosingTags.includes(e.tagName);
-                            const attrString = element.attributes.length ?
-                                ' ' + ( Array.from(element.attributes)
-                                    .map(attr => `${attr.name}="${attr.value}"`))
-                                    .join(' ')
-                                : '';
-                            startTagText = `<${e.tagName}${attrString}>`;
-                            if (!isSelfClosing) {
-                                endTagText = `</${e.tagName}>`;
-                            }
-                        }
-                        const fragment = document.createDocumentFragment();
-                        const textNode = element.parentElement.ownerDocument.createTextNode(startTagText);
-                        fragment.appendChild(textNode);
-                        const endTagTextNode = endTagText ? element.parentElement.ownerDocument.createTextNode(endTagText) : undefined;
-                        while (element.firstChild) {
-                            fragment.appendChild(element.firstChild);
-                        }
-                        if (endTagTextNode) {
-                            fragment.appendChild(endTagTextNode);
-                        }
-                        if (element.nodeType === Node.COMMENT_NODE) {
-                            element.parentElement.insertBefore(fragment, element);
-                        }
-                        else {
-                            element.parentElement.replaceChild(fragment, element);
-                        }
-                    }
-                }
-            }
-        }
+        replaceWithPlaintext: options.replaceWithPlaintext,
     };
 }
 function renderAsPlaintext(str, options) {

package/vscode/src/vs/base/browser/ui/actionbar/actionViewItems.d.ts

@@ -8,14 +8,14 @@ import { IAction, IActionRunner } from "../../../common/actions.js";
 import { Disposable } from "../../../common/lifecycle.js";
 import type { IManagedHoverContent } from "../hover/hover.js";
 export interface IBaseActionViewItemOptions {
-    draggable?: boolean;
-    isMenu?: boolean;
-    isTabList?: boolean;
-    useEventAsContext?: boolean;
-    hoverDelegate?: IHoverDelegate;
+    readonly draggable?: boolean;
+    readonly isMenu?: boolean;
+    readonly isTabList?: boolean;
+    readonly useEventAsContext?: boolean;
+    readonly hoverDelegate?: IHoverDelegate;
 }
 export declare class BaseActionViewItem extends Disposable implements IActionViewItem {
-    protected options: IBaseActionViewItemOptions;
+    protected readonly options: IBaseActionViewItemOptions;
     element: HTMLElement | undefined;
     _context: unknown;
     readonly _action: IAction;
@@ -49,13 +49,13 @@ export declare class BaseActionViewItem extends Disposable implements IActionVie
 export interface IActionViewItemOptions extends IBaseActionViewItemOptions {
     icon?: boolean;
     label?: boolean;
-    keybinding?: string | null;
-    keybindingNotRenderedWithLabel?: boolean;
-    toggleStyles?: IToggleStyles;
+    readonly keybinding?: string | null;
+    readonly keybindingNotRenderedWithLabel?: boolean;
+    readonly toggleStyles?: IToggleStyles;
 }
 export declare class ActionViewItem extends BaseActionViewItem {
     protected label: HTMLElement | undefined;
-    protected options: IActionViewItemOptions;
+    protected readonly options: IActionViewItemOptions;
     private cssClass?;
     constructor(context: unknown, action: IAction, options: IActionViewItemOptions);
     render(container: HTMLElement): void;

package/vscode/src/vs/base/browser/ui/actionbar/actionViewItems.js

@@ -186,10 +186,13 @@ class BaseActionViewItem extends Disposable {
 }
 class ActionViewItem extends BaseActionViewItem {
     constructor(context, action, options) {
+        options = {
+            ...options,
+            icon: options.icon !== undefined ? options.icon : false,
+            label: options.label !== undefined ? options.label : true,
+        };
         super(context, action, options);
         this.options = options;
-        this.options.icon = options.icon !== undefined ? options.icon : false;
-        this.options.label = options.label !== undefined ? options.label : true;
         this.cssClass = '';
     }
     render(container) {

package/vscode/src/vs/base/browser/ui/actionbar/actionbar.css

@@ -77,7 +77,7 @@
 
 .monaco-action-bar.vertical .action-label.separator {
 	display: block;
-	border-bottom: 1px solid #bbb;
+	border-bottom: 1px solid var(--vscode-disabledForeground);
 	padding-top: 1px;
 	margin-left: .8em;
 	margin-right: .8em;
@@ -90,7 +90,7 @@
 	cursor: default;
 	min-width: 1px;
 	padding: 0;
-	background-color: #bbb;
+	background-color: var(--vscode-disabledForeground);
 }
 
 .secondary-actions .monaco-action-bar .action-label {

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

@@ -64,14 +64,14 @@ export declare class ActionBar extends Disposable implements IActionRunner {
     domNode: HTMLElement;
     protected readonly actionsList: HTMLElement;
     private readonly _onDidBlur;
-    readonly onDidBlur: import("../../../common/event.js").Event<void>;
+    get onDidBlur(): import("../../../common/event.js").Event<void>;
     private readonly _onDidCancel;
-    readonly onDidCancel: import("../../../common/event.js").Event<void>;
+    get onDidCancel(): import("../../../common/event.js").Event<void>;
     private cancelHasListener;
     private readonly _onDidRun;
-    readonly onDidRun: import("../../../common/event.js").Event<IRunEvent>;
+    get onDidRun(): import("../../../common/event.js").Event<IRunEvent>;
     private readonly _onWillRun;
-    readonly onWillRun: import("../../../common/event.js").Event<IRunEvent>;
+    get onWillRun(): import("../../../common/event.js").Event<IRunEvent>;
     constructor(container: HTMLElement, options?: IActionBarOptions);
     private refreshRole;
     setAriaLabel(label: string): void;

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

@@ -18,6 +18,10 @@ var ActionsOrientation;
     ActionsOrientation[ActionsOrientation["VERTICAL"] = 1] = "VERTICAL";
 })(ActionsOrientation || (ActionsOrientation = {}));
 class ActionBar extends Disposable {
+    get onDidBlur() { return this._onDidBlur.event; }
+    get onDidCancel() { return this._onDidCancel.event; }
+    get onDidRun() { return this._onDidRun.event; }
+    get onWillRun() { return this._onWillRun.event; }
     constructor(container, options = {}) {
         super();
         this._actionRunnerDisposables = this._register(( new DisposableStore()));
@@ -25,14 +29,10 @@ class ActionBar extends Disposable {
         this.triggerKeyDown = false;
         this.focusable = true;
         this._onDidBlur = this._register(( new Emitter()));
-        this.onDidBlur = this._onDidBlur.event;
         this._onDidCancel = this._register(( new Emitter({ onWillAddFirstListener: () => this.cancelHasListener = true })));
-        this.onDidCancel = this._onDidCancel.event;
         this.cancelHasListener = false;
         this._onDidRun = this._register(( new Emitter()));
-        this.onDidRun = this._onDidRun.event;
         this._onWillRun = this._register(( new Emitter()));
-        this.onWillRun = this._onWillRun.event;
         this.options = options;
         this._context = options.context ?? null;
         this._orientation = this.options.orientation ?? ActionsOrientation.HORIZONTAL;
@@ -255,9 +255,6 @@ class ActionBar extends Disposable {
             item.actionRunner = this._actionRunner;
             item.setActionContext(this.context);
             item.render(actionViewItemElement);
-            if (this.focusable && item instanceof BaseActionViewItem && this.viewItems.length === 0) {
-                item.setFocusable(true);
-            }
             if (index === null || index < 0 || index >= this.actionsList.children.length) {
                 this.actionsList.appendChild(actionViewItemElement);
                 this.viewItems.push(item);
@@ -268,6 +265,34 @@ class ActionBar extends Disposable {
                 index++;
             }
         });
+        if (this.focusable) {
+            let didFocus = false;
+            for (const item of this.viewItems) {
+                if (!(item instanceof BaseActionViewItem)) {
+                    continue;
+                }
+                let focus;
+                if (didFocus) {
+                    focus = false;
+                }
+                else if (item.action.id === Separator.ID) {
+                    focus = false;
+                }
+                else if (!item.isEnabled() && this.options.focusOnlyEnabledItems) {
+                    focus = false;
+                }
+                else {
+                    focus = true;
+                }
+                if (focus) {
+                    item.setFocusable(true);
+                    didFocus = true;
+                }
+                else {
+                    item.setFocusable(false);
+                }
+            }
+        }
         if (typeof this.focusedItem === 'number') {
             this.focus(this.focusedItem);
         }

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

@@ -145,8 +145,8 @@ export declare class ButtonBar {
  * This is a Button that supports an icon to the left, and markdown to the right, with proper separation and wrapping the markdown label, which Button doesn't do.
  */
 export declare class ButtonWithIcon extends Button {
-    private _iconElement;
-    private _mdlabelElement;
+    private readonly _iconElement;
+    private readonly _mdlabelElement;
     get labelElement(): HTMLElement;
     constructor(container: HTMLElement, options: IButtonOptions);
     get label(): IMarkdownString | string;