@eclipse-glsp/client 0.9.0-next.6d10f92e → 0.9.0-next.75608185

package/lib/features/tool-palette/tool-palette.js

@@ -1,17 +1,4 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -21,41 +8,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
-var __values = (this && this.__values) || function(o) {
-    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-    if (m) return m.call(o);
-    if (o && typeof o.length === "number") return {
-        next: function () {
-            if (o && i >= o.length) o = void 0;
-            return { value: o && o[i++], done: !o };
-        }
-    };
-    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-};
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __spread = (this && this.__spread) || function () {
-    for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
-    return ar;
-};
+var EnableToolPaletteAction_1, ToolPalette_1;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.changeCSSClass = exports.createToolGroup = exports.createIcon = exports.compare = exports.ToolPalette = exports.EnableToolPaletteAction = void 0;
+exports.changeCodiconClass = exports.changeCSSClass = exports.createToolGroup = exports.createIcon = exports.compare = exports.ToolPalette = exports.EnableToolPaletteAction = void 0;
 /********************************************************************************
- * Copyright (c) 2019 EclipseSource and others.
+ * Copyright (c) 2019-2021 EclipseSource and others.
  *
  * This program and the accompanying materials are made available under the
  * terms of the Eclipse Public License v. 2.0 which is available at
@@ -69,118 +26,111 @@ exports.changeCSSClass = exports.createToolGroup = exports.createIcon = exports.
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-var inversify_1 = require("inversify");
-var sprotty_1 = require("sprotty");
-var keyboard_1 = require("sprotty/lib/utils/keyboard");
-var action_dispatcher_1 = require("../../base/action-dispatcher");
-var context_actions_1 = require("../../base/actions/context-actions");
-var editor_context_1 = require("../../base/editor-context");
-var marquee_mouse_tool_1 = require("../tools/marquee-mouse-tool");
-var delete_tool_1 = require("../tools/delete-tool");
-var validate_1 = require("../validation/validate");
-var CLICKED_CSS_CLASS = "clicked";
-var SEARCH_ICON = "fa-search";
-var PALETTE_ICON = "fa-palette";
-var CHEVRON_DOWN = "fa-chevron-down";
-var PALETTE_HEIGHT = "500px";
-var EnableToolPaletteAction = /** @class */ (function () {
-    function EnableToolPaletteAction() {
+const protocol_1 = require("@eclipse-glsp/protocol");
+const inversify_1 = require("inversify");
+const sprotty_1 = require("sprotty");
+const codicon_1 = require("sprotty/lib/utils/codicon");
+const keyboard_1 = require("sprotty/lib/utils/keyboard");
+const action_dispatcher_1 = require("../../base/action-dispatcher");
+const editor_context_service_1 = require("../../base/editor-context-service");
+const delete_tool_1 = require("../tools/delete-tool");
+const marquee_mouse_tool_1 = require("../tools/marquee-mouse-tool");
+const CLICKED_CSS_CLASS = 'clicked';
+const SEARCH_ICON_ID = 'search';
+const PALETTE_ICON_ID = 'symbol-color';
+const CHEVRON_DOWN_ICON_ID = 'chevron-right';
+const PALETTE_HEIGHT = '500px';
+let EnableToolPaletteAction = EnableToolPaletteAction_1 = class EnableToolPaletteAction {
+    constructor() {
         this.kind = EnableToolPaletteAction_1.KIND;
     }
-    EnableToolPaletteAction_1 = EnableToolPaletteAction;
-    var EnableToolPaletteAction_1;
-    EnableToolPaletteAction.KIND = "enableToolPalette";
-    EnableToolPaletteAction = EnableToolPaletteAction_1 = __decorate([
-        inversify_1.injectable()
-    ], EnableToolPaletteAction);
-    return EnableToolPaletteAction;
-}());
+};
+EnableToolPaletteAction.KIND = 'enableToolPalette';
+EnableToolPaletteAction = EnableToolPaletteAction_1 = __decorate([
+    inversify_1.injectable()
+], EnableToolPaletteAction);
 exports.EnableToolPaletteAction = EnableToolPaletteAction;
-var ToolPalette = /** @class */ (function (_super) {
-    __extends(ToolPalette, _super);
-    function ToolPalette() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.paletteItemsCopy = [];
-        return _this;
-    }
-    ToolPalette_1 = ToolPalette;
-    ToolPalette.prototype.id = function () { return ToolPalette_1.ID; };
-    ToolPalette.prototype.containerClass = function () { return ToolPalette_1.ID; };
-    ToolPalette.prototype.postConstruct = function () {
+let ToolPalette = ToolPalette_1 = class ToolPalette extends sprotty_1.AbstractUIExtension {
+    constructor() {
+        super(...arguments);
+        this.paletteItemsCopy = [];
+    }
+    id() {
+        return ToolPalette_1.ID;
+    }
+    containerClass() {
+        return ToolPalette_1.ID;
+    }
+    postConstruct() {
         this.editorContext.register(this);
-    };
-    ToolPalette.prototype.initialize = function () {
+    }
+    initialize() {
         if (!this.paletteItems) {
             return false;
         }
-        return _super.prototype.initialize.call(this);
-    };
-    ToolPalette.prototype.initializeContents = function (_containerElement) {
+        return super.initialize();
+    }
+    initializeContents(_containerElement) {
         this.createHeader();
         this.createBody();
         this.lastActivebutton = this.defaultToolsButton;
-    };
-    ToolPalette.prototype.onBeforeShow = function (_containerElement, root) {
+    }
+    onBeforeShow(_containerElement, root) {
         this.modelRootId = root.id;
         this.containerElement.style.maxHeight = PALETTE_HEIGHT;
-    };
-    ToolPalette.prototype.addMinimizePaletteButton = function () {
-        var _this = this;
-        var baseDiv = document.getElementById(this.options.baseDiv);
-        var minPaletteDiv = document.createElement("div");
-        minPaletteDiv.classList.add("minimize-palette-button");
-        this.containerElement.classList.add("collapsible-palette");
+    }
+    addMinimizePaletteButton() {
+        const baseDiv = document.getElementById(this.options.baseDiv);
+        const minPaletteDiv = document.createElement('div');
+        minPaletteDiv.classList.add('minimize-palette-button');
+        this.containerElement.classList.add('collapsible-palette');
         if (baseDiv) {
-            var insertedDiv = baseDiv.insertBefore(minPaletteDiv, baseDiv.firstChild);
-            var minimizeIcon_1 = createIcon(["fas", CHEVRON_DOWN]);
+            const insertedDiv = baseDiv.insertBefore(minPaletteDiv, baseDiv.firstChild);
+            const minimizeIcon = createIcon(CHEVRON_DOWN_ICON_ID);
             this.updateMinimizePaletteButtonTooltip(minPaletteDiv);
-            minimizeIcon_1.onclick = function (_event) {
-                if (_this.isPaletteMaximized()) {
-                    _this.containerElement.style.maxHeight = "0px";
+            minimizeIcon.onclick = _event => {
+                if (this.isPaletteMaximized()) {
+                    this.containerElement.style.maxHeight = '0px';
                 }
                 else {
-                    _this.containerElement.style.maxHeight = PALETTE_HEIGHT;
+                    this.containerElement.style.maxHeight = PALETTE_HEIGHT;
                 }
-                _this.updateMinimizePaletteButtonTooltip(minPaletteDiv);
-                changeCSSClass(minimizeIcon_1, PALETTE_ICON);
-                changeCSSClass(minimizeIcon_1, "fa");
-                changeCSSClass(minimizeIcon_1, "fas");
-                changeCSSClass(minimizeIcon_1, CHEVRON_DOWN);
+                this.updateMinimizePaletteButtonTooltip(minPaletteDiv);
+                changeCodiconClass(minimizeIcon, PALETTE_ICON_ID);
+                changeCodiconClass(minimizeIcon, CHEVRON_DOWN_ICON_ID);
             };
-            insertedDiv.appendChild(minimizeIcon_1);
+            insertedDiv.appendChild(minimizeIcon);
         }
-    };
-    ToolPalette.prototype.updateMinimizePaletteButtonTooltip = function (button) {
+    }
+    updateMinimizePaletteButtonTooltip(button) {
         if (this.isPaletteMaximized()) {
             button.title = 'Minimize palette';
         }
         else {
             button.title = 'Maximize palette';
         }
-    };
-    ToolPalette.prototype.isPaletteMaximized = function () {
-        return this.containerElement && this.containerElement.style.maxHeight !== "0px";
-    };
-    ToolPalette.prototype.createBody = function () {
-        var _this = this;
-        var bodyDiv = document.createElement("div");
-        bodyDiv.classList.add("palette-body");
-        var tabIndex = 0;
-        this.paletteItems.sort(compare)
-            .forEach(function (item) {
+    }
+    isPaletteMaximized() {
+        return this.containerElement && this.containerElement.style.maxHeight !== '0px';
+    }
+    createBody() {
+        const bodyDiv = document.createElement('div');
+        bodyDiv.classList.add('palette-body');
+        let tabIndex = 0;
+        this.paletteItems.sort(compare).forEach(item => {
             if (item.children) {
-                var group_1 = createToolGroup(item);
-                item.children.sort(compare).forEach(function (child) { return group_1.appendChild(_this.createToolButton(child, tabIndex++)); });
-                bodyDiv.appendChild(group_1);
+                const group = createToolGroup(item);
+                item.children.sort(compare).forEach(child => group.appendChild(this.createToolButton(child, tabIndex++)));
+                bodyDiv.appendChild(group);
             }
             else {
-                bodyDiv.appendChild(_this.createToolButton(item, tabIndex++));
+                bodyDiv.appendChild(this.createToolButton(item, tabIndex++));
             }
         });
         if (this.paletteItems.length === 0) {
-            var noResultsDiv = document.createElement("div");
-            noResultsDiv.innerText = "No results found.";
-            noResultsDiv.classList.add("tool-button");
+            const noResultsDiv = document.createElement('div');
+            noResultsDiv.innerText = 'No results found.';
+            noResultsDiv.classList.add('tool-button');
             bodyDiv.appendChild(noResultsDiv);
         }
         // Remove existing body to refresh filtered entries
@@ -189,131 +139,128 @@ var ToolPalette = /** @class */ (function (_super) {
         }
         this.containerElement.appendChild(bodyDiv);
         this.bodyDiv = bodyDiv;
-    };
-    ToolPalette.prototype.createHeader = function () {
+    }
+    createHeader() {
         this.addMinimizePaletteButton();
-        var headerCompartment = document.createElement("div");
-        headerCompartment.classList.add("palette-header");
+        const headerCompartment = document.createElement('div');
+        headerCompartment.classList.add('palette-header');
         headerCompartment.append(this.createHeaderTitle());
         headerCompartment.appendChild(this.createHeaderTools());
-        headerCompartment.appendChild(this.searchField = this.createHeaderSearchField());
+        headerCompartment.appendChild((this.searchField = this.createHeaderSearchField()));
         this.containerElement.appendChild(headerCompartment);
-    };
-    ToolPalette.prototype.createHeaderTools = function () {
-        var headerTools = document.createElement("div");
-        headerTools.classList.add("header-tools");
+    }
+    createHeaderTools() {
+        const headerTools = document.createElement('div');
+        headerTools.classList.add('header-tools');
         this.defaultToolsButton = this.createDefaultToolButton();
         headerTools.appendChild(this.defaultToolsButton);
-        var deleteToolButton = this.createMouseDeleteToolButton();
+        const deleteToolButton = this.createMouseDeleteToolButton();
         headerTools.appendChild(deleteToolButton);
-        var marqueeToolButton = this.createMarqueeToolButton();
+        const marqueeToolButton = this.createMarqueeToolButton();
         headerTools.appendChild(marqueeToolButton);
-        var validateActionButton = this.createValidateButton();
+        const validateActionButton = this.createValidateButton();
         headerTools.appendChild(validateActionButton);
         // Create button for Search
-        var searchIcon = this.createSearchButton();
+        const searchIcon = this.createSearchButton();
         headerTools.appendChild(searchIcon);
         return headerTools;
-    };
-    ToolPalette.prototype.createDefaultToolButton = function () {
-        var button = createIcon(["fas", "fa-mouse-pointer", "fa-xs", "clicked"]);
-        button.id = "btn_default_tools";
+    }
+    createDefaultToolButton() {
+        const button = createIcon('inspect');
+        button.id = 'btn_default_tools';
         button.title = 'Enable selection tool';
         button.onclick = this.onClickStaticToolButton(this.defaultToolsButton);
         return button;
-    };
-    ToolPalette.prototype.createMouseDeleteToolButton = function () {
-        var deleteToolButton = createIcon(["fas", "fa-eraser", "fa-xs"]);
+    }
+    createMouseDeleteToolButton() {
+        const deleteToolButton = createIcon('chrome-close');
         deleteToolButton.title = 'Enable deletion tool';
         deleteToolButton.onclick = this.onClickStaticToolButton(deleteToolButton, delete_tool_1.MouseDeleteTool.ID);
         return deleteToolButton;
-    };
-    ToolPalette.prototype.createMarqueeToolButton = function () {
-        var marqueeToolButton = createIcon(["far", "fa-object-group", "fa-xs"]);
+    }
+    createMarqueeToolButton() {
+        const marqueeToolButton = createIcon('screen-full');
         marqueeToolButton.title = 'Enable marquee tool';
         marqueeToolButton.onclick = this.onClickStaticToolButton(marqueeToolButton, marquee_mouse_tool_1.MarqueeMouseTool.ID);
         return marqueeToolButton;
-    };
-    ToolPalette.prototype.createValidateButton = function () {
-        var _this = this;
-        var validateActionButton = createIcon(["fas", "fa-check-square", "fa-xs"]);
+    }
+    createValidateButton() {
+        const validateActionButton = createIcon('pass');
         validateActionButton.title = 'Validate model';
-        validateActionButton.onclick = function (_event) {
-            var modelIds = [_this.modelRootId];
-            _this.actionDispatcher.dispatch(new validate_1.RequestMarkersAction(modelIds));
+        validateActionButton.onclick = _event => {
+            const modelIds = [this.modelRootId];
+            this.actionDispatcher.dispatch(new protocol_1.RequestMarkersAction(modelIds));
         };
         return validateActionButton;
-    };
-    ToolPalette.prototype.createSearchButton = function () {
-        var _this = this;
-        var searchIcon = createIcon(["fas", SEARCH_ICON, "state-icon", "fa-xs"]);
-        searchIcon.onclick = function (_ev) {
-            var searchField = document.getElementById(_this.containerElement.id + "_search_field");
+    }
+    createSearchButton() {
+        const searchIcon = createIcon(SEARCH_ICON_ID);
+        searchIcon.onclick = _ev => {
+            const searchField = document.getElementById(this.containerElement.id + '_search_field');
             if (searchField) {
-                if (searchField.style.display === "inline") {
-                    searchField.style.display = "none";
+                if (searchField.style.display === 'none') {
+                    searchField.style.display = '';
+                    searchField.focus();
                 }
                 else {
-                    searchField.style.display = "inline";
-                    searchField.focus();
+                    searchField.style.display = 'none';
                 }
             }
         };
-        searchIcon.classList.add("search-icon");
+        searchIcon.classList.add('search-icon');
         searchIcon.title = 'Filter palette entries';
         return searchIcon;
-    };
-    ToolPalette.prototype.createHeaderSearchField = function () {
-        var _this = this;
-        var searchField = document.createElement("input");
-        searchField.classList.add("search-input");
-        searchField.id = this.containerElement.id + "_search_field";
-        searchField.type = "text";
-        searchField.placeholder = " Search...";
-        searchField.style.display = "none";
-        searchField.onkeyup = function () { return _this.requestFilterUpdate(_this.searchField.value); };
-        searchField.onkeydown = function (ev) { return _this.clearOnEscape(ev); };
+    }
+    createHeaderSearchField() {
+        const searchField = document.createElement('input');
+        searchField.classList.add('search-input');
+        searchField.id = this.containerElement.id + '_search_field';
+        searchField.type = 'text';
+        searchField.placeholder = ' Search...';
+        searchField.style.display = 'none';
+        searchField.onkeyup = () => this.requestFilterUpdate(this.searchField.value);
+        searchField.onkeydown = ev => this.clearOnEscape(ev);
         return searchField;
-    };
-    ToolPalette.prototype.createHeaderTitle = function () {
-        var header = document.createElement("div");
-        header.classList.add("header-icon");
-        header.appendChild(createIcon(["fa", "fa-palette"]));
-        header.insertAdjacentText("beforeend", "Palette");
+    }
+    createHeaderTitle() {
+        const header = document.createElement('div');
+        header.classList.add('header-icon');
+        header.appendChild(createIcon(PALETTE_ICON_ID));
+        header.insertAdjacentText('beforeend', 'Palette');
         return header;
-    };
-    ToolPalette.prototype.createToolButton = function (item, index) {
-        var _this = this;
-        var button = document.createElement("div");
+    }
+    createToolButton(item, index) {
+        const button = document.createElement('div');
         button.tabIndex = index;
-        button.classList.add("tool-button");
-        button.innerHTML = item.label;
+        button.classList.add('tool-button');
+        if (item.icon) {
+            button.appendChild(createIcon(item.icon));
+        }
+        button.insertAdjacentText('beforeend', item.label);
         button.onclick = this.onClickCreateToolButton(button, item);
-        button.onkeydown = function (ev) { return _this.clearToolOnEscape(ev); };
+        button.onkeydown = ev => this.clearToolOnEscape(ev);
         return button;
-    };
-    ToolPalette.prototype.onClickCreateToolButton = function (button, item) {
-        var _this = this;
-        return function (_ev) {
-            if (!_this.editorContext.isReadonly) {
-                _this.actionDispatcher.dispatchAll(item.actions);
-                _this.changeActiveButton(button);
+    }
+    onClickCreateToolButton(button, item) {
+        return (_ev) => {
+            if (!this.editorContext.isReadonly) {
+                this.actionDispatcher.dispatchAll(item.actions);
+                this.changeActiveButton(button);
                 button.focus();
             }
         };
-    };
-    ToolPalette.prototype.onClickStaticToolButton = function (button, toolId) {
-        var _this = this;
-        return function (_ev) {
-            if (!_this.editorContext.isReadonly) {
-                var action = toolId ? new sprotty_1.EnableToolsAction([toolId]) : new sprotty_1.EnableDefaultToolsAction();
-                _this.actionDispatcher.dispatch(action);
-                _this.changeActiveButton(button);
+    }
+    onClickStaticToolButton(button, toolId) {
+        return (_ev) => {
+            if (!this.editorContext.isReadonly) {
+                const action = toolId ? new sprotty_1.EnableToolsAction([toolId]) : new sprotty_1.EnableDefaultToolsAction();
+                this.actionDispatcher.dispatch(action);
+                this.changeActiveButton(button);
                 button.focus();
             }
         };
-    };
-    ToolPalette.prototype.changeActiveButton = function (button) {
+    }
+    changeActiveButton(button) {
         if (this.lastActivebutton) {
             this.lastActivebutton.classList.remove(CLICKED_CSS_CLASS);
         }
@@ -325,17 +272,16 @@ var ToolPalette = /** @class */ (function (_super) {
             this.defaultToolsButton.classList.add(CLICKED_CSS_CLASS);
             this.lastActivebutton = this.defaultToolsButton;
         }
-    };
-    ToolPalette.prototype.handle = function (action) {
-        var _this = this;
+    }
+    handle(action) {
         if (action.kind === EnableToolPaletteAction.KIND) {
-            var requestAction = new context_actions_1.RequestContextActions(ToolPalette_1.ID, {
+            const requestAction = new protocol_1.RequestContextActions(ToolPalette_1.ID, {
                 selectedElementIds: []
             });
-            this.actionDispatcher.requestUntil(requestAction).then(function (response) {
-                if (context_actions_1.isSetContextActionsAction(response)) {
-                    _this.paletteItems = response.actions.map(function (e) { return e; });
-                    _this.actionDispatcher.dispatch(new sprotty_1.SetUIExtensionVisibilityAction(ToolPalette_1.ID, !_this.editorContext.isReadonly));
+            this.actionDispatcher.requestUntil(requestAction).then(response => {
+                if (protocol_1.isSetContextActionsAction(response)) {
+                    this.paletteItems = response.actions.map(e => e);
+                    this.actionDispatcher.dispatch(new sprotty_1.SetUIExtensionVisibilityAction(ToolPalette_1.ID, !this.editorContext.isReadonly));
                 }
             });
         }
@@ -343,27 +289,26 @@ var ToolPalette = /** @class */ (function (_super) {
             this.changeActiveButton();
             this.restoreFocus();
         }
-    };
-    ToolPalette.prototype.editModeChanged = function (_oldValue, _newValue) {
+    }
+    editModeChanged(_oldValue, _newValue) {
         this.actionDispatcher.dispatch(new sprotty_1.SetUIExtensionVisibilityAction(ToolPalette_1.ID, !this.editorContext.isReadonly));
-    };
-    ToolPalette.prototype.clearOnEscape = function (event) {
-        if (keyboard_1.matchesKeystroke(event, "Escape")) {
-            this.searchField.value = "";
-            this.requestFilterUpdate("");
+    }
+    clearOnEscape(event) {
+        if (keyboard_1.matchesKeystroke(event, 'Escape')) {
+            this.searchField.value = '';
+            this.requestFilterUpdate('');
         }
-    };
-    ToolPalette.prototype.clearToolOnEscape = function (event) {
-        if (keyboard_1.matchesKeystroke(event, "Escape")) {
+    }
+    clearToolOnEscape(event) {
+        if (keyboard_1.matchesKeystroke(event, 'Escape')) {
             this.actionDispatcher.dispatch(new sprotty_1.EnableDefaultToolsAction());
         }
-    };
-    ToolPalette.prototype.handleSetContextActions = function (action) {
-        this.paletteItems = action.actions.map(function (e) { return e; });
+    }
+    handleSetContextActions(action) {
+        this.paletteItems = action.actions.map(e => e);
         this.createBody();
-    };
-    ToolPalette.prototype.requestFilterUpdate = function (filter) {
-        var e_1, _a;
+    }
+    requestFilterUpdate(filter) {
         // Initialize the copy if it's empty
         if (this.paletteItemsCopy.length === 0) {
             // Creating deep copy
@@ -372,92 +317,76 @@ var ToolPalette = /** @class */ (function (_super) {
         // Reset the paletteItems before searching
         this.paletteItems = JSON.parse(JSON.stringify(this.paletteItemsCopy));
         // Filter the entries
-        var filteredPaletteItems = [];
-        var _loop_1 = function (itemGroup) {
+        const filteredPaletteItems = [];
+        for (const itemGroup of this.paletteItems) {
             if (itemGroup.children) {
                 // Fetch the labels according to the filter
-                var matchingChildren = itemGroup.children.filter(function (child) { return child.label.toLowerCase().includes(filter.toLowerCase()); });
+                const matchingChildren = itemGroup.children.filter(child => child.label.toLowerCase().includes(filter.toLowerCase()));
                 // Add the itemgroup containing the correct entries
                 if (matchingChildren.length > 0) {
                     // Clear existing children
                     itemGroup.children.splice(0, itemGroup.children.length);
                     // Push the matching children
-                    matchingChildren.forEach(function (child) { return itemGroup.children.push(child); });
+                    matchingChildren.forEach(child => itemGroup.children.push(child));
                     filteredPaletteItems.push(itemGroup);
                 }
             }
-        };
-        try {
-            for (var _b = __values(this.paletteItems), _c = _b.next(); !_c.done; _c = _b.next()) {
-                var itemGroup = _c.value;
-                _loop_1(itemGroup);
-            }
-        }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
-        finally {
-            try {
-                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-            }
-            finally { if (e_1) throw e_1.error; }
         }
         this.paletteItems = filteredPaletteItems;
         this.createBody();
-    };
-    var ToolPalette_1;
-    ToolPalette.ID = "tool-palette";
-    __decorate([
-        inversify_1.inject(sprotty_1.TYPES.IActionDispatcher),
-        __metadata("design:type", action_dispatcher_1.GLSPActionDispatcher)
-    ], ToolPalette.prototype, "actionDispatcher", void 0);
-    __decorate([
-        inversify_1.inject(sprotty_1.TYPES.IToolManager),
-        __metadata("design:type", Object)
-    ], ToolPalette.prototype, "toolManager", void 0);
-    __decorate([
-        inversify_1.inject(editor_context_1.EditorContextService),
-        __metadata("design:type", editor_context_1.EditorContextService)
-    ], ToolPalette.prototype, "editorContext", void 0);
-    __decorate([
-        inversify_1.postConstruct(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", []),
-        __metadata("design:returntype", void 0)
-    ], ToolPalette.prototype, "postConstruct", null);
-    ToolPalette = ToolPalette_1 = __decorate([
-        inversify_1.injectable()
-    ], ToolPalette);
-    return ToolPalette;
-}(sprotty_1.AbstractUIExtension));
+    }
+};
+ToolPalette.ID = 'tool-palette';
+__decorate([
+    inversify_1.inject(sprotty_1.TYPES.IActionDispatcher),
+    __metadata("design:type", action_dispatcher_1.GLSPActionDispatcher)
+], ToolPalette.prototype, "actionDispatcher", void 0);
+__decorate([
+    inversify_1.inject(sprotty_1.TYPES.IToolManager),
+    __metadata("design:type", Object)
+], ToolPalette.prototype, "toolManager", void 0);
+__decorate([
+    inversify_1.inject(editor_context_service_1.EditorContextService),
+    __metadata("design:type", editor_context_service_1.EditorContextService)
+], ToolPalette.prototype, "editorContext", void 0);
+__decorate([
+    inversify_1.postConstruct(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], ToolPalette.prototype, "postConstruct", null);
+ToolPalette = ToolPalette_1 = __decorate([
+    inversify_1.injectable()
+], ToolPalette);
 exports.ToolPalette = ToolPalette;
 function compare(a, b) {
-    var sortStringBased = a.sortString.localeCompare(b.sortString);
+    const sortStringBased = a.sortString.localeCompare(b.sortString);
     if (sortStringBased !== 0) {
         return sortStringBased;
     }
     return a.label.localeCompare(b.label);
 }
 exports.compare = compare;
-function createIcon(cssClasses) {
-    var _a;
-    var icon = document.createElement("i");
-    (_a = icon.classList).add.apply(_a, __spread(cssClasses));
+function createIcon(codiconId) {
+    const icon = document.createElement('i');
+    icon.classList.add(...codicon_1.codiconCSSClasses(codiconId));
     return icon;
 }
 exports.createIcon = createIcon;
 function createToolGroup(item) {
-    var group = document.createElement("div");
-    group.classList.add("tool-group");
+    const group = document.createElement('div');
+    group.classList.add('tool-group');
     group.id = item.id;
-    var header = document.createElement("div");
-    header.classList.add("group-header");
+    const header = document.createElement('div');
+    header.classList.add('group-header');
     if (item.icon) {
-        header.appendChild(createIcon(["fas", item.icon]));
+        header.appendChild(createIcon(item.icon));
     }
     header.insertAdjacentText('beforeend', item.label);
-    header.ondblclick = function (_ev) {
-        var css = "collapsed";
+    header.ondblclick = _ev => {
+        const css = 'collapsed';
         changeCSSClass(group, css);
-        Array.from(group.children).forEach(function (child) { return changeCSSClass(child, css); });
+        Array.from(group.children).forEach(child => changeCSSClass(child, css));
         window.getSelection().removeAllRanges();
     };
     group.appendChild(header);
@@ -465,8 +394,13 @@ function createToolGroup(item) {
 }
 exports.createToolGroup = createToolGroup;
 function changeCSSClass(element, css) {
-    element.classList.contains(css) ? element.classList.remove(css) :
-        element.classList.add(css);
+    element.classList.contains(css) ? element.classList.remove(css) : element.classList.add(css);
 }
 exports.changeCSSClass = changeCSSClass;
+function changeCodiconClass(element, codiconId) {
+    element.classList.contains(codicon_1.codiconCSSClasses(codiconId)[1])
+        ? element.classList.remove(codicon_1.codiconCSSClasses(codiconId)[1])
+        : element.classList.add(codicon_1.codiconCSSClasses(codiconId)[1]);
+}
+exports.changeCodiconClass = changeCodiconClass;
 //# sourceMappingURL=tool-palette.js.map