Fix input boxes with borders (microsoft#167252)

Fix input boxes with borders (Fixes microsoft#167209)

Author: aeschli

src/vs/base/browser/dom.ts

@@ -1206,6 +1206,21 @@ export function asCSSPropertyValue(value: string) {
 	return `'${value.replace(/'/g, '%27')}'`;
 }
 
+export function asCssValueWithDefault(cssPropertyValue: string | undefined, dflt: string): string {
+	if (cssPropertyValue !== undefined) {
+		const variableMatch = cssPropertyValue.match(/^\s*var\((.+)\)$/);
+		if (variableMatch) {
+			const varArguments = variableMatch[1].split(',', 2);
+			if (varArguments.length === 2) {
+				dflt = asCssValueWithDefault(varArguments[1].trim(), dflt);
+			}
+			return `var(${varArguments[0]}, ${dflt})`;
+		}
+		return cssPropertyValue;
+	}
+	return dflt;
+}
+
 export function triggerDownload(dataOrUri: Uint8Array | URI, name: string): void {
 
 	// If the data is provided as Buffer, we create a

src/vs/base/browser/ui/inputbox/inputBox.ts

@@ -377,7 +377,7 @@ export class InputBox extends Widget {
 		this.element.classList.add(this.classForType(message.type));
 
 		const styles = this.stylesForType(this.message.type);
-		this.element.style.borderColor = styles.border || 'transparent';
+		this.element.style.border = `1px solid ${dom.asCssValueWithDefault(styles.border, 'transparent')}`;
 
 		if (this.message.content && (this.hasFocus() || force)) {
 			this._showMessage();
@@ -552,9 +552,7 @@ export class InputBox extends Widget {
 		this.input.style.color = foreground;
 
 		// there's always a border, even if the color is not set.
-		this.element.style.borderColor = border || 'transparent';
-		this.element.style.borderWidth = '1px';
-		this.element.style.borderStyle = 'solid';
+		this.element.style.border = `1px solid ${dom.asCssValueWithDefault(border, 'transparent')}`;
 	}
 
 	public layout(): void {

src/vs/base/test/browser/dom.test.ts

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import * as assert from 'assert';
-import { $, h, multibyteAwareBtoa } from 'vs/base/browser/dom';
+import { $, asCssValueWithDefault, h, multibyteAwareBtoa } from 'vs/base/browser/dom';
 
 suite('dom', () => {
 	test('hasClass', () => {
@@ -276,4 +276,14 @@ suite('dom', () => {
 		assert.strictEqual(result.editor.className, '');
 		assert.strictEqual(result.editor.childElementCount, 0);
 	});
+
+	test('cssValueWithDefault', () => {
+		assert.strictEqual(asCssValueWithDefault('red', 'blue'), 'red');
+		assert.strictEqual(asCssValueWithDefault(undefined, 'blue'), 'blue');
+		assert.strictEqual(asCssValueWithDefault('var(--my-var)', 'blue'), 'var(--my-var, blue)');
+		assert.strictEqual(asCssValueWithDefault('var(--my-var, red)', 'blue'), 'var(--my-var, red)');
+		assert.strictEqual(asCssValueWithDefault('var(--my-var, var(--my-var2))', 'blue'), 'var(--my-var, var(--my-var2, blue))');
+	});
+
+
 });