Fixing more issues related to TS 3.7 dom typings changes

Fixes cases where styles value can no longer be null

src/vs/base/browser/ui/countBadge/countBadge.ts

@@ -85,15 +85,15 @@ export class CountBadge {
 
 	private applyStyles(): void {
 		if (this.element) {
-			const background = this.badgeBackground ? this.badgeBackground.toString() : null;
-			const foreground = this.badgeForeground ? this.badgeForeground.toString() : null;
-			const border = this.badgeBorder ? this.badgeBorder.toString() : null;
+			const background = this.badgeBackground ? this.badgeBackground.toString() : '';
+			const foreground = this.badgeForeground ? this.badgeForeground.toString() : '';
+			const border = this.badgeBorder ? this.badgeBorder.toString() : '';
 
 			this.element.style.backgroundColor = background;
 			this.element.style.color = foreground;
 
-			this.element.style.borderWidth = border ? '1px' : null;
-			this.element.style.borderStyle = border ? 'solid' : null;
+			this.element.style.borderWidth = border ? '1px' : '';
+			this.element.style.borderStyle = border ? 'solid' : '';
 			this.element.style.borderColor = border;
 		}
 	}

src/vs/base/browser/ui/dialog/dialog.ts

@@ -241,10 +241,10 @@ export class Dialog extends Disposable {
 		if (this.styles) {
 			const style = this.styles;
 
-			const fgColor = style.dialogForeground ? `${style.dialogForeground}` : null;
-			const bgColor = style.dialogBackground ? `${style.dialogBackground}` : null;
-			const shadowColor = style.dialogShadow ? `0 0px 8px ${style.dialogShadow}` : null;
-			const border = style.dialogBorder ? `1px solid ${style.dialogBorder}` : null;
+			const fgColor = style.dialogForeground ? `${style.dialogForeground}` : '';
+			const bgColor = style.dialogBackground ? `${style.dialogBackground}` : '';
+			const shadowColor = style.dialogShadow ? `0 0px 8px ${style.dialogShadow}` : '';
+			const border = style.dialogBorder ? `1px solid ${style.dialogBorder}` : '';
 
 			if (this.element) {
 				this.element.style.color = fgColor;

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

@@ -373,7 +373,7 @@ export class InputBox extends Widget {
 		dom.addClass(this.element, this.classForType(message.type));
 
 		const styles = this.stylesForType(this.message.type);
-		this.element.style.border = styles.border ? `1px solid ${styles.border}` : null;
+		this.element.style.border = styles.border ? `1px solid ${styles.border}` : '';
 
 		// ARIA Support
 		let alertText: string;
@@ -473,9 +473,9 @@ export class InputBox extends Widget {
 				dom.addClass(spanElement, this.classForType(this.message.type));
 
 				const styles = this.stylesForType(this.message.type);
-				spanElement.style.backgroundColor = styles.background ? styles.background.toString() : null;
+				spanElement.style.backgroundColor = styles.background ? styles.background.toString() : '';
 				spanElement.style.color = styles.foreground ? styles.foreground.toString() : null;
-				spanElement.style.border = styles.border ? `1px solid ${styles.border}` : null;
+				spanElement.style.border = styles.border ? `1px solid ${styles.border}` : '';
 
 				dom.append(div, spanElement);
 
@@ -552,17 +552,17 @@ export class InputBox extends Widget {
 	}
 
 	protected applyStyles(): void {
-		const background = this.inputBackground ? this.inputBackground.toString() : null;
-		const foreground = this.inputForeground ? this.inputForeground.toString() : null;
-		const border = this.inputBorder ? this.inputBorder.toString() : null;
+		const background = this.inputBackground ? this.inputBackground.toString() : '';
+		const foreground = this.inputForeground ? this.inputForeground.toString() : '';
+		const border = this.inputBorder ? this.inputBorder.toString() : '';
 
 		this.element.style.backgroundColor = background;
 		this.element.style.color = foreground;
 		this.input.style.backgroundColor = background;
 		this.input.style.color = foreground;
 
-		this.element.style.borderWidth = border ? '1px' : null;
-		this.element.style.borderStyle = border ? 'solid' : null;
+		this.element.style.borderWidth = border ? '1px' : '';
+		this.element.style.borderStyle = border ? 'solid' : '';
 		this.element.style.borderColor = border;
 	}
 

src/vs/base/browser/ui/menu/menu.ts

@@ -204,7 +204,7 @@ export class Menu extends ActionBar {
 		}));
 
 		const scrollElement = this.scrollableElement.getDomNode();
-		scrollElement.style.position = null;
+		scrollElement.style.position = '';
 
 		menuElement.style.maxHeight = `${Math.max(10, window.innerHeight - container.getBoundingClientRect().top - 30)}px`;
 
@@ -231,10 +231,10 @@ export class Menu extends ActionBar {
 	style(style: IMenuStyles): void {
 		const container = this.getContainer();
 
-		const fgColor = style.foregroundColor ? `${style.foregroundColor}` : null;
-		const bgColor = style.backgroundColor ? `${style.backgroundColor}` : null;
-		const border = style.borderColor ? `2px solid ${style.borderColor}` : null;
-		const shadow = style.shadowColor ? `0 2px 4px ${style.shadowColor}` : null;
+		const fgColor = style.foregroundColor ? `${style.foregroundColor}` : '';
+		const bgColor = style.backgroundColor ? `${style.backgroundColor}` : '';
+		const border = style.borderColor ? `2px solid ${style.borderColor}` : '';
+		const shadow = style.shadowColor ? `0 2px 4px ${style.shadowColor}` : '';
 
 		container.style.border = border;
 		this.domNode.style.color = fgColor;
@@ -575,11 +575,11 @@ class BaseMenuActionViewItem extends BaseActionViewItem {
 		const isSelected = this.element && hasClass(this.element, 'focused');
 		const fgColor = isSelected && this.menuStyle.selectionForegroundColor ? this.menuStyle.selectionForegroundColor : this.menuStyle.foregroundColor;
 		const bgColor = isSelected && this.menuStyle.selectionBackgroundColor ? this.menuStyle.selectionBackgroundColor : this.menuStyle.backgroundColor;
-		const border = isSelected && this.menuStyle.selectionBorderColor ? `thin solid ${this.menuStyle.selectionBorderColor}` : null;
+		const border = isSelected && this.menuStyle.selectionBorderColor ? `thin solid ${this.menuStyle.selectionBorderColor}` : '';
 
 		this.item.style.color = fgColor ? `${fgColor}` : null;
-		this.check.style.backgroundColor = fgColor ? `${fgColor}` : null;
-		this.item.style.backgroundColor = bgColor ? `${bgColor}` : null;
+		this.check.style.backgroundColor = fgColor ? `${fgColor}` : '';
+		this.item.style.backgroundColor = bgColor ? `${bgColor}` : '';
 		this.container.style.border = border;
 	}
 
@@ -793,7 +793,7 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem {
 		const isSelected = this.element && hasClass(this.element, 'focused');
 		const fgColor = isSelected && this.menuStyle.selectionForegroundColor ? this.menuStyle.selectionForegroundColor : this.menuStyle.foregroundColor;
 
-		this.submenuIndicator.style.backgroundColor = fgColor ? `${fgColor}` : null;
+		this.submenuIndicator.style.backgroundColor = fgColor ? `${fgColor}` : '';
 
 		if (this.parentData.submenu) {
 			this.parentData.submenu.style(this.menuStyle);
@@ -819,7 +819,7 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem {
 class MenuSeparatorActionViewItem extends ActionViewItem {
 	style(style: IMenuStyles): void {
 		if (this.label) {
-			this.label.style.borderBottomColor = style.separatorColor ? `${style.separatorColor}` : null;
+			this.label.style.borderBottomColor = style.separatorColor ? `${style.separatorColor}` : '';
 		}
 	}
 }

src/vs/base/browser/ui/selectBox/selectBoxCustom.ts

@@ -374,9 +374,9 @@ export class SelectBoxList extends Disposable implements ISelectBoxDelegate, ILi
 		// Style parent select
 
 		if (this.selectElement) {
-			const background = this.styles.selectBackground ? this.styles.selectBackground.toString() : null;
-			const foreground = this.styles.selectForeground ? this.styles.selectForeground.toString() : null;
-			const border = this.styles.selectBorder ? this.styles.selectBorder.toString() : null;
+			const background = this.styles.selectBackground ? this.styles.selectBackground.toString() : '';
+			const foreground = this.styles.selectForeground ? this.styles.selectForeground.toString() : '';
+			const border = this.styles.selectBorder ? this.styles.selectBorder.toString() : '';
 
 			this.selectElement.style.backgroundColor = background;
 			this.selectElement.style.color = foreground;
@@ -392,10 +392,10 @@ export class SelectBoxList extends Disposable implements ISelectBoxDelegate, ILi
 
 	private styleList() {
 		if (this.selectList) {
-			let background = this.styles.selectBackground ? this.styles.selectBackground.toString() : null;
+			const background = this.styles.selectBackground ? this.styles.selectBackground.toString() : '';
 			this.selectList.style({});
 
-			let listBackground = this.styles.selectListBackground ? this.styles.selectListBackground.toString() : background;
+			const listBackground = this.styles.selectListBackground ? this.styles.selectListBackground.toString() : background;
 			this.selectDropDownListContainer.style.backgroundColor = listBackground;
 			this.selectionDetailsPane.style.backgroundColor = listBackground;
 			const optionsBorder = this.styles.focusBorder ? this.styles.focusBorder.toString() : '';

src/vs/base/browser/ui/selectBox/selectBoxNative.ts

@@ -147,9 +147,9 @@ export class SelectBoxNative extends Disposable implements ISelectBoxDelegate {
 
 		// Style native select
 		if (this.selectElement) {
-			const background = this.styles.selectBackground ? this.styles.selectBackground.toString() : null;
-			const foreground = this.styles.selectForeground ? this.styles.selectForeground.toString() : null;
-			const border = this.styles.selectBorder ? this.styles.selectBorder.toString() : null;
+			const background = this.styles.selectBackground ? this.styles.selectBackground.toString() : '';
+			const foreground = this.styles.selectForeground ? this.styles.selectForeground.toString() : '';
+			const border = this.styles.selectBorder ? this.styles.selectBorder.toString() : '';
 
 			this.selectElement.style.backgroundColor = background;
 			this.selectElement.style.color = foreground;

src/vs/workbench/browser/parts/activitybar/activitybarPart.ts

@@ -247,7 +247,7 @@ export class ActivitybarPart extends Part implements IActivityBarService {
 
 		this.createGlobalActivityActionBar(globalActivities);
 
-		this.element.style.display = this.layoutService.isVisible(Parts.ACTIVITYBAR_PART) ? null : 'none';
+		this.element.style.display = this.layoutService.isVisible(Parts.ACTIVITYBAR_PART) ? '' : 'none';
 
 		return this.content;
 	}
@@ -257,18 +257,18 @@ export class ActivitybarPart extends Part implements IActivityBarService {
 
 		// Part container
 		const container = assertIsDefined(this.getContainer());
-		const background = this.getColor(ACTIVITY_BAR_BACKGROUND);
+		const background = this.getColor(ACTIVITY_BAR_BACKGROUND) || '';
 		container.style.backgroundColor = background;
 
-		const borderColor = this.getColor(ACTIVITY_BAR_BORDER) || this.getColor(contrastBorder);
+		const borderColor = this.getColor(ACTIVITY_BAR_BORDER) || this.getColor(contrastBorder) || '';
 		const isPositionLeft = this.layoutService.getSideBarPosition() === SideBarPosition.LEFT;
 		container.style.boxSizing = borderColor && isPositionLeft ? 'border-box' : '';
-		container.style.borderRightWidth = borderColor && isPositionLeft ? '1px' : null;
-		container.style.borderRightStyle = borderColor && isPositionLeft ? 'solid' : null;
-		container.style.borderRightColor = isPositionLeft ? borderColor : null;
-		container.style.borderLeftWidth = borderColor && !isPositionLeft ? '1px' : null;
-		container.style.borderLeftStyle = borderColor && !isPositionLeft ? 'solid' : null;
-		container.style.borderLeftColor = !isPositionLeft ? borderColor : null;
+		container.style.borderRightWidth = borderColor && isPositionLeft ? '1px' : '';
+		container.style.borderRightStyle = borderColor && isPositionLeft ? 'solid' : '';
+		container.style.borderRightColor = isPositionLeft ? borderColor : '';
+		container.style.borderLeftWidth = borderColor && !isPositionLeft ? '1px' : '';
+		container.style.borderLeftStyle = borderColor && !isPositionLeft ? 'solid' : '';
+		container.style.borderLeftColor = !isPositionLeft ? borderColor : '';
 	}
 
 	private getActivitybarItemColors(theme: ITheme): ICompositeBarColors {
@@ -421,7 +421,7 @@ export class ActivitybarPart extends Part implements IActivityBarService {
 
 	setVisible(visible: boolean): void {
 		if (this.element) {
-			this.element.style.display = visible ? null : 'none';
+			this.element.style.display = visible ? '' : 'none';
 		}
 	}
 

src/vs/workbench/browser/parts/editor/editorGroupView.ts

@@ -1442,9 +1442,9 @@ export class EditorGroupView extends Themable implements IEditorGroupView {
 
 		// Container
 		if (isEmpty) {
-			this.element.style.backgroundColor = this.getColor(EDITOR_GROUP_EMPTY_BACKGROUND);
+			this.element.style.backgroundColor = this.getColor(EDITOR_GROUP_EMPTY_BACKGROUND) || '';
 		} else {
-			this.element.style.backgroundColor = null;
+			this.element.style.backgroundColor = '';
 		}
 
 		// Title control
@@ -1459,10 +1459,10 @@ export class EditorGroupView extends Themable implements IEditorGroupView {
 			this.titleContainer.style.removeProperty('--title-border-bottom-color');
 		}
 
-		this.titleContainer.style.backgroundColor = this.getColor(showTabs ? EDITOR_GROUP_HEADER_TABS_BACKGROUND : EDITOR_GROUP_HEADER_NO_TABS_BACKGROUND);
+		this.titleContainer.style.backgroundColor = this.getColor(showTabs ? EDITOR_GROUP_HEADER_TABS_BACKGROUND : EDITOR_GROUP_HEADER_NO_TABS_BACKGROUND) || '';
 
 		// Editor container
-		this.editorContainer.style.backgroundColor = this.getColor(editorBackground);
+		this.editorContainer.style.backgroundColor = this.getColor(editorBackground) || '';
 	}
 
 	//#endregion