@codingame/monaco-vscode-api 32.0.0 → 32.0.2

package/vscode/src/vs/workbench/contrib/extensions/browser/extensionFeaturesTab.js

@@ -0,0 +1,728 @@
+
+import { __decorate, __param } from '../../../../../../../external/tslib/tslib.es6.js';
+import { Disposable, DisposableStore, MutableDisposable } from '../../../../base/common/lifecycle.js';
+import { $, append, addDisposableListener, EventType, clearNode } from '../../../../base/browser/dom.js';
+import { Emitter, Event } from '../../../../base/common/event.js';
+import { ExtensionIdentifier } from '../../../../platform/extensions/common/extensions.js';
+import { SplitView, Sizing } from '../../../../base/browser/ui/splitview/splitview.js';
+import { Extensions } from '../../../services/extensionManagement/common/extensionFeatures.js';
+import { IExtensionFeaturesManagementService } from '../../../services/extensionManagement/common/extensionFeatures.service.js';
+import { Registry } from '../../../../platform/registry/common/platform.js';
+import { IInstantiationService } from '../../../../platform/instantiation/common/instantiation.js';
+import { localize } from '../../../../nls.js';
+import { WorkbenchList } from '../../../../platform/list/browser/listService.js';
+import { getExtensionId } from '../../../../platform/extensionManagement/common/extensionManagementUtil.js';
+import { Button } from '../../../../base/browser/ui/button/button.js';
+import { defaultButtonStyles, defaultKeybindingLabelStyles } from '../../../../platform/theme/browser/defaultStyles.js';
+import { getErrorMessage } from '../../../../base/common/errors.js';
+import { PANEL_SECTION_BORDER } from '../../../common/theme.js';
+import { Themable } from '../../../../platform/theme/common/themeService.js';
+import { IThemeService } from '../../../../platform/theme/common/themeService.service.js';
+import { DomScrollableElement } from '../../../../base/browser/ui/scrollbar/scrollableElement.js';
+import { IDialogService } from '../../../../platform/dialogs/common/dialogs.service.js';
+import { ThemeIcon } from '../../../../base/common/themables.js';
+import Severity$1 from '../../../../base/common/severity.js';
+import { errorIcon, warningIcon, infoIcon } from './extensionsIcons.js';
+import { SeverityIcon } from '../../../../base/browser/ui/severityIcon/severityIcon.js';
+import { KeybindingLabel } from '../../../../base/browser/ui/keybindingLabel/keybindingLabel.js';
+import { OS } from '../../../../base/common/platform.js';
+import { MarkdownString, isMarkdownString } from '../../../../base/common/htmlContent.js';
+import { Color } from '../../../../base/common/color.js';
+import { IExtensionService } from '../../../services/extensions/common/extensions.service.js';
+import { Codicon } from '../../../../base/common/codicons.js';
+import { SyncDescriptor } from '../../../../platform/instantiation/common/descriptors.js';
+import { ResolvedKeybinding } from '../../../../base/common/keybindings.js';
+import { asCssVariable } from '../../../../platform/theme/common/colorUtils.js';
+import { foreground } from '../../../../platform/theme/common/colors/baseColors.js';
+import '../../../../platform/theme/common/colors/chartsColors.js';
+import '../../../../platform/theme/common/colors/editorColors.js';
+import '../../../../platform/theme/common/colors/inputColors.js';
+import '../../../../platform/theme/common/colors/listColors.js';
+import '../../../../platform/theme/common/colors/menuColors.js';
+import '../../../../platform/theme/common/colors/minimapColors.js';
+import { chartAxis, chartGuide, chartLine } from '../../../../platform/theme/common/colors/miscColors.js';
+import '../../../../platform/theme/common/colors/quickpickColors.js';
+import '../../../../platform/theme/common/colors/searchColors.js';
+import { IHoverService } from '../../../../platform/hover/browser/hover.service.js';
+import { IMarkdownRendererService } from '../../../../platform/markdown/browser/markdownRenderer.service.js';
+import { Orientation } from '../../../../base/browser/ui/sash/sash.js';
+
+let RuntimeStatusMarkdownRenderer = class RuntimeStatusMarkdownRenderer extends Disposable {
+    static {
+        this.ID = "runtimeStatus";
+    }
+    constructor(
+        extensionService,
+        hoverService,
+        extensionFeaturesManagementService,
+        markdownRendererService
+    ) {
+        super();
+        this.extensionService = extensionService;
+        this.hoverService = hoverService;
+        this.extensionFeaturesManagementService = extensionFeaturesManagementService;
+        this.markdownRendererService = markdownRendererService;
+        this.type = "element";
+    }
+    shouldRender(manifest) {
+        const extensionId = ( new ExtensionIdentifier(getExtensionId(manifest.publisher, manifest.name)));
+        if (!( this.extensionService.extensions.some(e => ExtensionIdentifier.equals(e.identifier, extensionId)))) {
+            return false;
+        }
+        return !!manifest.main || !!manifest.browser;
+    }
+    render(manifest) {
+        const disposables = ( new DisposableStore());
+        const extensionId = ( new ExtensionIdentifier(getExtensionId(manifest.publisher, manifest.name)));
+        const emitter = disposables.add(( new Emitter()));
+        disposables.add(this.extensionService.onDidChangeExtensionsStatus(e => {
+            if (( e.some(extension => ExtensionIdentifier.equals(extension, extensionId)))) {
+                emitter.fire(this.createElement(manifest, disposables));
+            }
+        }));
+        disposables.add(
+            this.extensionFeaturesManagementService.onDidChangeAccessData(e => emitter.fire(this.createElement(manifest, disposables)))
+        );
+        return {
+            onDidChange: emitter.event,
+            data: this.createElement(manifest, disposables),
+            dispose: () => disposables.dispose()
+        };
+    }
+    createElement(manifest, disposables) {
+        const container = $(".runtime-status");
+        const extensionId = ( new ExtensionIdentifier(getExtensionId(manifest.publisher, manifest.name)));
+        const status = this.extensionService.getExtensionsStatus()[extensionId.value];
+        if (( this.extensionService.extensions.some(extension => ExtensionIdentifier.equals(extension.identifier, extensionId)))) {
+            const data = ( new MarkdownString());
+            data.appendMarkdown(`### ${( localize(9418, "Activation"))}\n\n`);
+            if (status.activationTimes) {
+                if (status.activationTimes.activationReason.startup) {
+                    data.appendMarkdown(`Activated on Startup: \`${status.activationTimes.activateCallTime}ms\``);
+                } else {
+                    data.appendMarkdown(
+                        `Activated by \`${status.activationTimes.activationReason.activationEvent}\` event: \`${status.activationTimes.activateCallTime}ms\``
+                    );
+                }
+            } else {
+                data.appendMarkdown("Not yet activated");
+            }
+            this.renderMarkdown(data, container, disposables);
+        }
+        const features = ( Registry.as(Extensions.ExtensionFeaturesRegistry)).getExtensionFeatures();
+        for (const feature of features) {
+            const accessData = this.extensionFeaturesManagementService.getAccessData(extensionId, feature.id);
+            if (accessData) {
+                this.renderMarkdown(( new MarkdownString(`\n ### ${( localize(9419, "{0} Usage", feature.label))}\n\n`)), container, disposables);
+                if (accessData.accessTimes.length) {
+                    const description = append(container, $(".feature-chart-description", undefined, ( localize(
+                        9420,
+                        "There were {0} {1} requests from this extension in the last 30 days.",
+                        accessData?.accessTimes.length,
+                        feature.accessDataLabel ?? feature.label
+                    ))));
+                    description.style.marginBottom = "8px";
+                    this.renderRequestsChart(container, accessData.accessTimes, disposables);
+                }
+                const status = accessData?.current?.status;
+                if (status) {
+                    const data = ( new MarkdownString());
+                    if (status?.severity === Severity$1.Error) {
+                        data.appendMarkdown(`$(${errorIcon.id}) ${status.message}\n\n`);
+                    }
+                    if (status?.severity === Severity$1.Warning) {
+                        data.appendMarkdown(`$(${warningIcon.id}) ${status.message}\n\n`);
+                    }
+                    if (data.value) {
+                        this.renderMarkdown(data, container, disposables);
+                    }
+                }
+            }
+        }
+        if (status.runtimeErrors.length || status.messages.length) {
+            const data = ( new MarkdownString());
+            if (status.runtimeErrors.length) {
+                data.appendMarkdown(`\n ### ${( localize(9421, "Uncaught Errors ({0})", status.runtimeErrors.length))}\n`);
+                for (const error of status.runtimeErrors) {
+                    data.appendMarkdown(`$(${Codicon.error.id}) ${getErrorMessage(error)}\n\n`);
+                }
+            }
+            if (status.messages.length) {
+                data.appendMarkdown(`\n ### ${( localize(9422, "Messages ({0})", status.messages.length))}\n`);
+                for (const message of status.messages) {
+                    data.appendMarkdown(
+                        `$(${(message.type === Severity$1.Error ? Codicon.error : message.type === Severity$1.Warning ? Codicon.warning : Codicon.info).id}) ${message.message}\n\n`
+                    );
+                }
+            }
+            if (data.value) {
+                this.renderMarkdown(data, container, disposables);
+            }
+        }
+        return container;
+    }
+    renderMarkdown(markdown, container, disposables) {
+        const {
+            element
+        } = disposables.add(this.markdownRendererService.render({
+            value: markdown.value,
+            isTrusted: markdown.isTrusted,
+            supportThemeIcons: true
+        }));
+        append(container, element);
+    }
+    renderRequestsChart(container, accessTimes, disposables) {
+        const width = 450;
+        const height = 250;
+        const margin = {
+            top: 0,
+            right: 4,
+            bottom: 20,
+            left: 4
+        };
+        const innerWidth = width - margin.left - margin.right;
+        const innerHeight = height - margin.top - margin.bottom;
+        const chartContainer = append(container, $(".feature-chart-container"));
+        chartContainer.style.position = "relative";
+        const tooltip = append(chartContainer, $(".feature-chart-tooltip"));
+        tooltip.style.position = "absolute";
+        tooltip.style.width = "0px";
+        tooltip.style.height = "0px";
+        let maxCount = 100;
+        const map = ( new Map());
+        for (const accessTime of accessTimes) {
+            const day = `${accessTime.getDate()} ${accessTime.toLocaleString("default", {
+    month: "short"
+})}`;
+            map.set(day, (map.get(day) ?? 0) + 1);
+            maxCount = Math.max(maxCount, map.get(day));
+        }
+        const now = ( new Date());
+        const points = [];
+        for (let i = 0; i <= 30; i++) {
+            const date = ( new Date(now));
+            date.setDate(now.getDate() - (30 - i));
+            const dateString = `${date.getDate()} ${date.toLocaleString("default", {
+    month: "short"
+})}`;
+            const count = map.get(dateString) ?? 0;
+            const x = (i / 30) * innerWidth;
+            const y = innerHeight - (count / maxCount) * innerHeight;
+            points.push({
+                x,
+                y,
+                date: dateString,
+                count
+            });
+        }
+        const chart = append(chartContainer, $(".feature-chart"));
+        const svg = append(chart, $.SVG("svg"));
+        svg.setAttribute("width", `${width}px`);
+        svg.setAttribute("height", `${height}px`);
+        svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+        const g = $.SVG("g");
+        g.setAttribute("transform", `translate(${margin.left},${margin.top})`);
+        svg.appendChild(g);
+        const xAxisLine = $.SVG("line");
+        xAxisLine.setAttribute("x1", "0");
+        xAxisLine.setAttribute("y1", `${innerHeight}`);
+        xAxisLine.setAttribute("x2", `${innerWidth}`);
+        xAxisLine.setAttribute("y2", `${innerHeight}`);
+        xAxisLine.setAttribute("stroke", asCssVariable(chartAxis));
+        xAxisLine.setAttribute("stroke-width", "1px");
+        g.appendChild(xAxisLine);
+        for (let i = 1; i <= 30; i += 7) {
+            const date = ( new Date(now));
+            date.setDate(now.getDate() - (30 - i));
+            const dateString = `${date.getDate()} ${date.toLocaleString("default", {
+    month: "short"
+})}`;
+            const x = (i / 30) * innerWidth;
+            const tick = $.SVG("line");
+            tick.setAttribute("x1", `${x}`);
+            tick.setAttribute("y1", `${innerHeight}`);
+            tick.setAttribute("x2", `${x}`);
+            tick.setAttribute("y2", `${innerHeight + 10}`);
+            tick.setAttribute("stroke", asCssVariable(chartAxis));
+            tick.setAttribute("stroke-width", "1px");
+            g.appendChild(tick);
+            const ruler = $.SVG("line");
+            ruler.setAttribute("x1", `${x}`);
+            ruler.setAttribute("y1", `0`);
+            ruler.setAttribute("x2", `${x}`);
+            ruler.setAttribute("y2", `${innerHeight}`);
+            ruler.setAttribute("stroke", asCssVariable(chartGuide));
+            ruler.setAttribute("stroke-width", "1px");
+            g.appendChild(ruler);
+            const xAxisDate = $.SVG("text");
+            xAxisDate.setAttribute("x", `${x}`);
+            xAxisDate.setAttribute("y", `${height}`);
+            xAxisDate.setAttribute("text-anchor", "middle");
+            xAxisDate.setAttribute("fill", asCssVariable(foreground));
+            xAxisDate.setAttribute("font-size", "10px");
+            xAxisDate.textContent = dateString;
+            g.appendChild(xAxisDate);
+        }
+        const line = $.SVG("polyline");
+        line.setAttribute("fill", "none");
+        line.setAttribute("stroke", asCssVariable(chartLine));
+        line.setAttribute("stroke-width", `2px`);
+        line.setAttribute("points", ( points.map(p => `${p.x},${p.y}`)).join(" "));
+        g.appendChild(line);
+        const highlightCircle = $.SVG("circle");
+        highlightCircle.setAttribute("r", `4px`);
+        highlightCircle.style.display = "none";
+        g.appendChild(highlightCircle);
+        const hoverDisposable = disposables.add(( new MutableDisposable()));
+        const mouseMoveListener = event => {
+            const rect = svg.getBoundingClientRect();
+            const mouseX = event.clientX - rect.left - margin.left;
+            let closestPoint;
+            let minDistance = Infinity;
+            points.forEach(point => {
+                const distance = Math.abs(point.x - mouseX);
+                if (distance < minDistance) {
+                    minDistance = distance;
+                    closestPoint = point;
+                }
+            });
+            if (closestPoint) {
+                highlightCircle.setAttribute("cx", `${closestPoint.x}`);
+                highlightCircle.setAttribute("cy", `${closestPoint.y}`);
+                highlightCircle.style.display = "block";
+                tooltip.style.left = `${closestPoint.x + 24}px`;
+                tooltip.style.top = `${closestPoint.y + 14}px`;
+                hoverDisposable.value = this.hoverService.showInstantHover({
+                    content: ( new MarkdownString(`${closestPoint.date}: ${closestPoint.count} requests`)),
+                    target: tooltip,
+                    appearance: {
+                        showPointer: true,
+                        skipFadeInAnimation: true
+                    }
+                });
+            } else {
+                hoverDisposable.value = undefined;
+            }
+        };
+        disposables.add(addDisposableListener(svg, EventType.MOUSE_MOVE, mouseMoveListener));
+        const mouseLeaveListener = () => {
+            highlightCircle.style.display = "none";
+            hoverDisposable.value = undefined;
+        };
+        disposables.add(addDisposableListener(svg, EventType.MOUSE_LEAVE, mouseLeaveListener));
+    }
+};
+RuntimeStatusMarkdownRenderer = ( __decorate([( __param(0, IExtensionService)), ( __param(1, IHoverService)), ( __param(2, IExtensionFeaturesManagementService)), ( __param(3, IMarkdownRendererService))], RuntimeStatusMarkdownRenderer));
+const runtimeStatusFeature = {
+    id: RuntimeStatusMarkdownRenderer.ID,
+    label: ( localize(9423, "Runtime Status")),
+    access: {
+        canToggle: false
+    },
+    renderer: ( new SyncDescriptor(RuntimeStatusMarkdownRenderer))
+};
+let ExtensionFeaturesTab = class ExtensionFeaturesTab extends Themable {
+    constructor(manifest, feature, themeService, instantiationService) {
+        super(themeService);
+        this.manifest = manifest;
+        this.feature = feature;
+        this.instantiationService = instantiationService;
+        this.featureView = this._register(( new MutableDisposable()));
+        this.layoutParticipants = [];
+        this.extensionId = ( new ExtensionIdentifier(getExtensionId(manifest.publisher, manifest.name)));
+        this.domNode = $("div.subcontent.feature-contributions");
+        this.create();
+    }
+    layout(height, width) {
+        this.layoutParticipants.forEach(participant => participant.layout(height, width));
+    }
+    create() {
+        const features = this.getFeatures();
+        if (features.length === 0) {
+            append($(".no-features"), this.domNode).textContent = ( localize(9424, "No features contributed."));
+            return;
+        }
+        const splitView = this._register(( new SplitView(this.domNode, {
+            orientation: Orientation.HORIZONTAL,
+            proportionalLayout: true
+        })));
+        this.layoutParticipants.push({
+            layout: (height, width) => {
+                splitView.el.style.height = `${height - 14}px`;
+                splitView.layout(width);
+            }
+        });
+        const featuresListContainer = $(".features-list-container");
+        const list = this._register(this.createFeaturesList(featuresListContainer));
+        list.splice(0, list.length, features);
+        const featureViewContainer = $(".feature-view-container");
+        this._register(list.onDidChangeSelection(e => {
+            const feature = e.elements[0];
+            if (feature) {
+                this.showFeatureView(feature, featureViewContainer);
+            }
+        }));
+        const index = this.feature ? features.findIndex(f => f.id === this.feature) : 0;
+        list.setSelection([index === -1 ? 0 : index]);
+        splitView.addView({
+            onDidChange: Event.None,
+            element: featuresListContainer,
+            minimumSize: 100,
+            maximumSize: Number.POSITIVE_INFINITY,
+            layout: (width, _, height) => {
+                featuresListContainer.style.width = `${width}px`;
+                list.layout(height, width);
+            }
+        }, 200, undefined, true);
+        splitView.addView({
+            onDidChange: Event.None,
+            element: featureViewContainer,
+            minimumSize: 500,
+            maximumSize: Number.POSITIVE_INFINITY,
+            layout: (width, _, height) => {
+                featureViewContainer.style.width = `${width}px`;
+                this.featureViewDimension = {
+                    height,
+                    width
+                };
+                this.layoutFeatureView();
+            }
+        }, Sizing.Distribute, undefined, true);
+        splitView.style({
+            separatorBorder: this.theme.getColor(PANEL_SECTION_BORDER)
+        });
+    }
+    createFeaturesList(container) {
+        const renderer = this.instantiationService.createInstance(ExtensionFeatureItemRenderer, this.extensionId);
+        const delegate = ( new ExtensionFeatureItemDelegate());
+        const list = this.instantiationService.createInstance(
+            WorkbenchList,
+            "ExtensionFeaturesList",
+            append(container, $(".features-list-wrapper")),
+            delegate,
+            [renderer],
+            {
+                multipleSelectionSupport: false,
+                setRowLineHeight: false,
+                horizontalScrolling: false,
+                accessibilityProvider: {
+                    getAriaLabel(extensionFeature) {
+                        return extensionFeature?.label ?? "";
+                    },
+                    getWidgetAriaLabel() {
+                        return localize(9425, "Extension Features");
+                    }
+                },
+                openOnSingleClick: true
+            }
+        );
+        return list;
+    }
+    layoutFeatureView() {
+        this.featureView.value?.layout(this.featureViewDimension?.height, this.featureViewDimension?.width);
+    }
+    showFeatureView(feature, container) {
+        if (this.featureView.value?.feature.id === feature.id) {
+            return;
+        }
+        clearNode(container);
+        this.featureView.value = this.instantiationService.createInstance(ExtensionFeatureView, this.extensionId, this.manifest, feature);
+        container.appendChild(this.featureView.value.domNode);
+        this.layoutFeatureView();
+    }
+    getFeatures() {
+        const features = ( Registry.as(Extensions.ExtensionFeaturesRegistry)).getExtensionFeatures().filter(feature => {
+            const renderer = this.getRenderer(feature);
+            const shouldRender = renderer?.shouldRender(this.manifest);
+            renderer?.dispose();
+            return shouldRender;
+        }).sort((a, b) => a.label.localeCompare(b.label));
+        const renderer = this.getRenderer(runtimeStatusFeature);
+        if (renderer?.shouldRender(this.manifest)) {
+            features.splice(0, 0, runtimeStatusFeature);
+        }
+        renderer?.dispose();
+        return features;
+    }
+    getRenderer(feature) {
+        return feature.renderer ? this.instantiationService.createInstance(feature.renderer) : undefined;
+    }
+};
+ExtensionFeaturesTab = ( __decorate([( __param(2, IThemeService)), ( __param(3, IInstantiationService))], ExtensionFeaturesTab));
+class ExtensionFeatureItemDelegate {
+    getHeight() {
+        return 22;
+    }
+    getTemplateId() {
+        return "extensionFeatureDescriptor";
+    }
+}
+let ExtensionFeatureItemRenderer = class ExtensionFeatureItemRenderer {
+    constructor(extensionId, extensionFeaturesManagementService) {
+        this.extensionId = extensionId;
+        this.extensionFeaturesManagementService = extensionFeaturesManagementService;
+        this.templateId = "extensionFeatureDescriptor";
+    }
+    renderTemplate(container) {
+        container.classList.add("extension-feature-list-item");
+        const label = append(container, $(".extension-feature-label"));
+        const disabledElement = append(container, $(".extension-feature-disabled-label"));
+        disabledElement.textContent = ( localize(9426, "No Access"));
+        const statusElement = append(container, $(".extension-feature-status"));
+        return {
+            label,
+            disabledElement,
+            statusElement,
+            disposables: ( new DisposableStore())
+        };
+    }
+    renderElement(element, index, templateData) {
+        templateData.disposables.clear();
+        templateData.label.textContent = element.label;
+        templateData.disabledElement.style.display = element.id === runtimeStatusFeature.id || this.extensionFeaturesManagementService.isEnabled(this.extensionId, element.id) ? "none" : "inherit";
+        templateData.disposables.add(this.extensionFeaturesManagementService.onDidChangeEnablement((
+            {
+                extension,
+                featureId,
+                enabled
+            }
+        ) => {
+            if (ExtensionIdentifier.equals(extension, this.extensionId) && featureId === element.id) {
+                templateData.disabledElement.style.display = enabled ? "none" : "inherit";
+            }
+        }));
+        const statusElementClassName = templateData.statusElement.className;
+        const updateStatus = () => {
+            const accessData = this.extensionFeaturesManagementService.getAccessData(this.extensionId, element.id);
+            if (accessData?.current?.status) {
+                templateData.statusElement.style.display = "inherit";
+                templateData.statusElement.className = `${statusElementClassName} ${SeverityIcon.className(accessData.current.status.severity)}`;
+            } else {
+                templateData.statusElement.style.display = "none";
+            }
+        };
+        updateStatus();
+        templateData.disposables.add(this.extensionFeaturesManagementService.onDidChangeAccessData((
+            {
+                extension,
+                featureId
+            }
+        ) => {
+            if (ExtensionIdentifier.equals(extension, this.extensionId) && featureId === element.id) {
+                updateStatus();
+            }
+        }));
+    }
+    disposeElement(element, index, templateData) {
+        templateData.disposables.dispose();
+    }
+    disposeTemplate(templateData) {
+        templateData.disposables.dispose();
+    }
+};
+ExtensionFeatureItemRenderer = ( __decorate([( __param(1, IExtensionFeaturesManagementService))], ExtensionFeatureItemRenderer));
+let ExtensionFeatureView = class ExtensionFeatureView extends Disposable {
+    constructor(
+        extensionId,
+        manifest,
+        feature,
+        instantiationService,
+        extensionFeaturesManagementService,
+        dialogService,
+        markdownRendererService
+    ) {
+        super();
+        this.extensionId = extensionId;
+        this.manifest = manifest;
+        this.feature = feature;
+        this.instantiationService = instantiationService;
+        this.extensionFeaturesManagementService = extensionFeaturesManagementService;
+        this.dialogService = dialogService;
+        this.markdownRendererService = markdownRendererService;
+        this.layoutParticipants = [];
+        this.domNode = $(".extension-feature-content");
+        this.create(this.domNode);
+    }
+    create(content) {
+        const header = append(content, $(".feature-header"));
+        const title = append(header, $(".feature-title"));
+        title.textContent = this.feature.label;
+        if (this.feature.access.canToggle) {
+            const actionsContainer = append(header, $(".feature-actions"));
+            const button = ( new Button(actionsContainer, defaultButtonStyles));
+            this.updateButtonLabel(button);
+            this._register(this.extensionFeaturesManagementService.onDidChangeEnablement((
+                {
+                    extension,
+                    featureId
+                }
+            ) => {
+                if (ExtensionIdentifier.equals(extension, this.extensionId) && featureId === this.feature.id) {
+                    this.updateButtonLabel(button);
+                }
+            }));
+            this._register(button.onDidClick(async () => {
+                const enabled = this.extensionFeaturesManagementService.isEnabled(this.extensionId, this.feature.id);
+                const confirmationResult = await this.dialogService.confirm({
+                    title: ( localize(9427, "Enable '{0}' Feature", this.feature.label)),
+                    message: enabled ? ( localize(
+                        9428,
+                        "Would you like to revoke '{0}' extension to access '{1}' feature?",
+                        this.manifest.displayName ?? this.extensionId.value,
+                        this.feature.label
+                    )) : ( localize(
+                        9429,
+                        "Would you like to allow '{0}' extension to access '{1}' feature?",
+                        this.manifest.displayName ?? this.extensionId.value,
+                        this.feature.label
+                    )),
+                    custom: true,
+                    primaryButton: enabled ? ( localize(9430, "Revoke Access")) : ( localize(9431, "Allow Access")),
+                    cancelButton: ( localize(9432, "Cancel"))
+                });
+                if (confirmationResult.confirmed) {
+                    this.extensionFeaturesManagementService.setEnablement(this.extensionId, this.feature.id, !enabled);
+                }
+            }));
+        }
+        const body = append(content, $(".feature-body"));
+        const bodyContent = $(".feature-body-content");
+        const scrollableContent = this._register(( new DomScrollableElement(bodyContent, {})));
+        append(body, scrollableContent.getDomNode());
+        this.layoutParticipants.push({
+            layout: () => scrollableContent.scanDomNode()
+        });
+        scrollableContent.scanDomNode();
+        if (this.feature.description) {
+            const description = append(bodyContent, $(".feature-description"));
+            description.textContent = this.feature.description;
+        }
+        const accessData = this.extensionFeaturesManagementService.getAccessData(this.extensionId, this.feature.id);
+        if (accessData?.current?.status) {
+            append(
+                bodyContent,
+                $(".feature-status", undefined, $(`span${ThemeIcon.asCSSSelector(
+    accessData.current.status.severity === Severity$1.Error ? errorIcon : accessData.current.status.severity === Severity$1.Warning ? warningIcon : infoIcon
+)}`, undefined), $("span", undefined, accessData.current.status.message))
+            );
+        }
+        const featureContentElement = append(bodyContent, $(".feature-content"));
+        if (this.feature.renderer) {
+            const renderer = this.instantiationService.createInstance(this.feature.renderer);
+            if (renderer.type === "table") {
+                this.renderTableData(featureContentElement, renderer);
+            } else if (renderer.type === "markdown") {
+                this.renderMarkdownData(featureContentElement, renderer);
+            } else if (renderer.type === "markdown+table") {
+                this.renderMarkdownAndTableData(featureContentElement, renderer);
+            } else if (renderer.type === "element") {
+                this.renderElementData(featureContentElement, renderer);
+            }
+        }
+    }
+    updateButtonLabel(button) {
+        button.label = this.extensionFeaturesManagementService.isEnabled(this.extensionId, this.feature.id) ? ( localize(9430, "Revoke Access")) : ( localize(9433, "Allow Access"));
+    }
+    renderTableData(container, renderer) {
+        const tableData = this._register(renderer.render(this.manifest));
+        const tableDisposable = this._register(( new MutableDisposable()));
+        if (tableData.onDidChange) {
+            this._register(tableData.onDidChange(data => {
+                clearNode(container);
+                tableDisposable.value = this.renderTable(data, container);
+            }));
+        }
+        tableDisposable.value = this.renderTable(tableData.data, container);
+    }
+    renderTable(tableData, container) {
+        const disposables = ( new DisposableStore());
+        append(container, $("table", undefined, $("tr", undefined, ...( tableData.headers.map(header => $("th", undefined, header)))), ...( tableData.rows.map(row => {
+            return $("tr", undefined, ...( row.map(rowData => {
+                if (typeof rowData === "string") {
+                    return $("td", undefined, $("p", undefined, rowData));
+                }
+                const data = Array.isArray(rowData) ? rowData : [rowData];
+                return $("td", undefined, ...( data.map(item => {
+                    const result = [];
+                    if (isMarkdownString(rowData)) {
+                        const element = $("", undefined);
+                        this.renderMarkdown(rowData, element);
+                        result.push(element);
+                    } else if (item instanceof ResolvedKeybinding) {
+                        const element = $("");
+                        const kbl = disposables.add(( new KeybindingLabel(element, OS, defaultKeybindingLabelStyles)));
+                        kbl.set(item);
+                        result.push(element);
+                    } else if (item instanceof Color) {
+                        result.push($("span", {
+                            class: "colorBox",
+                            style: "background-color: " + Color.Format.CSS.format(item)
+                        }, ""));
+                        result.push($("code", undefined, Color.Format.CSS.formatHex(item)));
+                    }
+                    return result;
+                })).flat());
+            })));
+        }))));
+        return disposables;
+    }
+    renderMarkdownAndTableData(container, renderer) {
+        const markdownAndTableData = this._register(renderer.render(this.manifest));
+        if (markdownAndTableData.onDidChange) {
+            this._register(markdownAndTableData.onDidChange(data => {
+                clearNode(container);
+                this.renderMarkdownAndTable(data, container);
+            }));
+        }
+        this.renderMarkdownAndTable(markdownAndTableData.data, container);
+    }
+    renderMarkdownData(container, renderer) {
+        container.classList.add("markdown");
+        const markdownData = this._register(renderer.render(this.manifest));
+        if (markdownData.onDidChange) {
+            this._register(markdownData.onDidChange(data => {
+                clearNode(container);
+                this.renderMarkdown(data, container);
+            }));
+        }
+        this.renderMarkdown(markdownData.data, container);
+    }
+    renderMarkdown(markdown, container) {
+        const {
+            element
+        } = this._register(this.markdownRendererService.render({
+            value: markdown.value,
+            isTrusted: markdown.isTrusted,
+            supportThemeIcons: true
+        }));
+        append(container, element);
+    }
+    renderMarkdownAndTable(data, container) {
+        for (const markdownOrTable of data) {
+            if (isMarkdownString(markdownOrTable)) {
+                const element = $("", undefined);
+                this.renderMarkdown(markdownOrTable, element);
+                append(container, element);
+            } else {
+                const tableElement = append(container, $("table"));
+                this.renderTable(markdownOrTable, tableElement);
+            }
+        }
+    }
+    renderElementData(container, renderer) {
+        const elementData = this._register(renderer.render(this.manifest));
+        if (elementData.onDidChange) {
+            this._register(elementData.onDidChange(data => {
+                clearNode(container);
+                container.appendChild(data);
+            }));
+        }
+        container.appendChild(elementData.data);
+    }
+    layout(height, width) {
+        this.layoutParticipants.forEach(p => p.layout(height, width));
+    }
+};
+ExtensionFeatureView = ( __decorate([( __param(3, IInstantiationService)), ( __param(4, IExtensionFeaturesManagementService)), ( __param(5, IDialogService)), ( __param(6, IMarkdownRendererService))], ExtensionFeatureView));
+
+export { ExtensionFeaturesTab };