Introduce custom select component

packages/core/src/browser/browser.ts

@@ -156,3 +156,65 @@ export function preventNavigation(event: WheelEvent): void {
     event.preventDefault();
     event.stopPropagation();
 }
+
+export type PartialCSSStyle = Omit<Partial<CSSStyleDeclaration>,
+    'visibility' |
+    'display' |
+    'parentRule' |
+    'getPropertyPriority' |
+    'getPropertyValue' |
+    'item' |
+    'removeProperty' |
+    'setProperty'>;
+
+export function measureTextWidth(text: string | string[], style?: PartialCSSStyle): number {
+    const measureElement = getMeasurementElement(style);
+    text = Array.isArray(text) ? text : [text];
+    let width = 0;
+    for (const item of text) {
+        measureElement.textContent = item;
+        width = Math.max(measureElement.getBoundingClientRect().width, width);
+    }
+    return width;
+}
+
+export function measureTextHeight(text: string | string[], style?: PartialCSSStyle): number {
+    const measureElement = getMeasurementElement(style);
+    text = Array.isArray(text) ? text : [text];
+    let height = 0;
+    for (const item of text) {
+        measureElement.textContent = item;
+        height = Math.max(measureElement.getBoundingClientRect().height, height);
+    }
+    return height;
+}
+
+const defaultStyle = document.createElement('div').style;
+defaultStyle.fontFamily = 'var(--theia-ui-font-family)';
+defaultStyle.fontSize = 'var(--theia-ui-font-size1)';
+defaultStyle.visibility = 'hidden';
+
+function getMeasurementElement(style?: PartialCSSStyle): HTMLElement {
+    let measureElement = document.getElementById('measure');
+    if (!measureElement) {
+        measureElement = document.createElement('span');
+        measureElement.id = 'measure';
+        measureElement.style.fontFamily = defaultStyle.fontFamily;
+        measureElement.style.fontSize = defaultStyle.fontSize;
+        measureElement.style.visibility = defaultStyle.visibility;
+        document.body.appendChild(measureElement);
+    }
+    const measureStyle = measureElement.style;
+    // Reset styling first
+    for (let i = 0; i < measureStyle.length; i++) {
+        const property = measureStyle[i];
+        measureStyle.setProperty(property, defaultStyle.getPropertyValue(property));
+    }
+    // Apply new styling
+    if (style) {
+        for (const [key, value] of Object.entries(style)) {
+            measureStyle.setProperty(key, value as string);
+        }
+    }
+    return measureElement;
+}

packages/core/src/browser/common-frontend-contribution.ts

@@ -1765,6 +1765,34 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
             { id: 'welcomePage.buttonHoverBackground', defaults: { dark: Color.rgba(200, 235, 255, .072), light: Color.rgba(0, 0, 0, .10) }, description: 'Hover background color for the buttons on the Welcome page.' },
             { id: 'walkThrough.embeddedEditorBackground', defaults: { dark: Color.rgba(0, 0, 0, .4), light: '#f4f4f4' }, description: 'Background color for the embedded editors on the Interactive Playground.' },
 
+            // Dropdown colors should be aligned with https://code.visualstudio.com/api/references/theme-color#dropdown-control
+
+            {
+                id: 'dropdown.background', defaults: {
+                    light: Color.white,
+                    dark: '#3C3C3C',
+                    hc: Color.black
+                }, description: 'Dropdown background.'
+            },
+            {
+                id: 'dropdown.listBackground', defaults: {
+                    hc: Color.black
+                }, description: 'Dropdown list background.'
+            },
+            {
+                id: 'dropdown.foreground', defaults: {
+                    dark: '#F0F0F0',
+                    hc: Color.white
+                }, description: 'Dropdown foreground.'
+            },
+            {
+                id: 'dropdown.border', defaults: {
+                    light: '#CECECE',
+                    dark: 'dropdown.background',
+                    hc: '#6FC3DF'
+                }, description: 'Dropdown border.'
+            },
+
             // Settings Editor colors should be aligned with https://code.visualstudio.com/api/references/theme-color#settings-editor-colors
             {
                 id: 'settings.headerForeground', defaults: {

packages/core/src/browser/style/select-component.css

@@ -0,0 +1,96 @@
+/********************************************************************************
+ * Copyright (C) 2022 TypeFox 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
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+.theia-select-component {
+    background-color: var(--theia-dropdown-background);
+    outline: var(--theia-dropdown-border) solid 1px;
+    outline-offset: -1px;
+    min-height: 23px;
+    min-width: 90px;
+    padding: 0px 8px;
+    display: flex;
+    align-items: center;
+    user-select: none;
+}
+
+.theia-select-component .theia-select-component-label {
+    width: 100%;
+    color: var(--theia-dropdown-foreground);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.theia-select-component:focus {
+    outline-color: var(--theia-focusBorder);
+}
+
+.theia-select-component-dropdown {
+    font-family: var(--theia-ui-font-family);
+    font-size: var(--theia-ui-font-size1);
+    color: var(--theia-foreground);
+    background-color: var(--theia-settings-dropdownBackground);
+    outline: var(--theia-focusBorder) solid 1px;
+    outline-offset: -1px;
+    user-select: none;
+}
+
+.theia-select-component-dropdown .theia-select-component-option {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: flex;
+    padding: 2px 5px;
+}
+
+.theia-select-component-dropdown .theia-select-component-description {
+    padding: 6px 5px;
+}
+
+.theia-select-component-dropdown .theia-select-component-description:first-child {
+    border-bottom: 1px solid var(--theia-editorWidget-border);
+    margin-bottom: 2px;
+}
+
+.theia-select-component-dropdown .theia-select-component-description:last-child {
+    border-top: 1px solid var(--theia-editorWidget-border);
+    margin-top: 2px;
+}
+
+.theia-select-component-dropdown .theia-select-component-option .theia-select-component-option-value {
+    width: 100%;
+}
+
+.theia-select-component-dropdown .theia-select-component-option .theia-select-component-option-detail {
+    padding-left: 4px;
+}
+
+.theia-select-component-dropdown .theia-select-component-option:not(.selected) .theia-select-component-option-detail {
+    color: var(--theia-textLink-foreground);
+}
+
+.theia-select-component-dropdown .theia-select-component-option.selected {
+    color: var(--theia-list-activeSelectionForeground);
+    background: var(--theia-list-activeSelectionBackground);
+    outline: var(--theia-focusBorder) solid 1px;
+    outline-offset: -1px;
+}
+
+.theia-select-component-dropdown .theia-select-component-separator {
+    width: 84px;
+    height: 1px;
+    margin: 3px 3px;
+    background: var(--theia-foreground);
+}