Move helper functions into DOM (#10051)

* Move helper functions into DOM

* Add tests and comments

src/sql/base/browser/dom.ts

@@ -3,6 +3,44 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
+import { endsWith } from 'vs/base/common/strings';
+import * as types from 'vs/base/common/types';
+
 export function isHidden(element: HTMLElement): boolean {
 	return element.style.display === 'none';
 }
+
+/**
+ * Converts a size value into its string representation. This will add px to the end unless
+ * it already ends with %. If the size value is undefined it will return the defaultValue as-is.
+ * @param size The size value to convert
+ * @param defaultValue The default value to use if the size is undefined
+ */
+export function convertSize(size: number | string | undefined, defaultValue?: string): string {
+	defaultValue = defaultValue || '';
+	if (types.isUndefinedOrNull(size)) {
+		return defaultValue;
+	}
+	let convertedSize: string = size ? size.toString() : defaultValue;
+	if (!endsWith(convertedSize.toLowerCase(), 'px') && !endsWith(convertedSize.toLowerCase(), '%')) {
+		convertedSize = convertedSize + 'px';
+	}
+	return convertedSize;
+}
+
+/**
+ * Converts a size value into its number representation. Supports px, em and unspecified units. 
+ * @param size The size value to convert
+ */
+export function convertSizeToNumber(size: number | string | undefined): number {
+	if (size && typeof (size) === 'string') {
+		if (endsWith(size.toLowerCase(), 'px')) {
+			return +size.replace('px', '');
+		} else if (endsWith(size.toLowerCase(), 'em')) {
+			return +size.replace('em', '') * 11;
+		}
+	} else if (!size) {
+		return 0;
+	}
+	return +size;
+}

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

@@ -0,0 +1,58 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as assert from 'assert';
+import { convertSize, convertSizeToNumber } from 'sql/base/browser/dom';
+
+suite('DOM Tests', () => {
+
+	test('Convert size should add px', () => {
+		const expected = '100px';
+		const actual = convertSize(100);
+		assert.equal(expected, actual);
+	});
+
+	test('Convert size should not add px if it already has it', () => {
+		const expected = '100px';
+		const actual = convertSize('100px');
+		assert.equal(expected, actual);
+	});
+
+	test('Convert size should not add px if it is a percent value', () => {
+		const expected = '100%';
+		const actual = convertSize('100%');
+		assert.equal(expected, actual);
+	});
+
+	test('Convert size should return the default value given undefined value', () => {
+		const expected = '200';
+		const actual = convertSize(undefined, '200');
+		assert.equal(expected, actual);
+	});
+
+	test('Convert to number should return size without px', () => {
+		const expected = 200;
+		const actual = convertSizeToNumber('200px');
+		assert.equal(expected, actual);
+	});
+
+	test('Convert to number should return same value if already plain text number', () => {
+		const expected = 200;
+		const actual = convertSizeToNumber('200');
+		assert.equal(expected, actual);
+	});
+
+	test('Convert to number should return same value if already plain number', () => {
+		const expected = 200;
+		const actual = convertSizeToNumber(200);
+		assert.equal(expected, actual);
+	});
+
+	test('Convert to number should return 0 given undefined', () => {
+		const expected = 0;
+		const actual = convertSizeToNumber(undefined);
+		assert.equal(expected, actual);
+	});
+});

src/sql/workbench/browser/modelComponents/button.component.ts

@@ -19,6 +19,7 @@ import { focusBorder, foreground } from 'vs/platform/theme/common/colorRegistry'
 import { Button } from 'sql/base/browser/ui/button/button';
 import { Color } from 'vs/base/common/color';
 import { IComponentDescriptor, IComponent, IModelStore, ComponentEventType } from 'sql/platform/dashboard/browser/interfaces';
+import { convertSize } from 'sql/base/browser/dom';
 
 @Component({
 	selector: 'modelview-button',
@@ -116,10 +117,10 @@ export default class ButtonComponent extends ComponentWithIconBase implements IC
 		}
 
 		if (this.width) {
-			this._button.setWidth(this.convertSize(this.width.toString()));
+			this._button.setWidth(convertSize(this.width.toString()));
 		}
 		if (this.height) {
-			this._button.setHeight(this.convertSize(this.height.toString()));
+			this._button.setHeight(convertSize(this.height.toString()));
 		}
 		this.updateIcon();
 		this._changeRef.detectChanges();

src/sql/workbench/browser/modelComponents/checkbox.component.ts

@@ -16,6 +16,7 @@ import { attachCheckboxStyler } from 'sql/platform/theme/common/styler';
 import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/platform/dashboard/browser/interfaces';
 import { isNumber } from 'vs/base/common/types';
+import { convertSize } from 'sql/base/browser/dom';
 
 @Component({
 	selector: 'modelview-checkbox',
@@ -84,10 +85,10 @@ export default class CheckBoxComponent extends ComponentBase implements ICompone
 			this._input.disable();
 		}
 		if (this.width || isNumber(this.width)) {
-			this._input.setWidth(this.convertSize(this.width));
+			this._input.setWidth(convertSize(this.width));
 		}
 		if (this.height || isNumber(this.height)) {
-			this._input.setHeight(this.convertSize(this.height));
+			this._input.setHeight(convertSize(this.height));
 		}
 		if (this.ariaLabel) {
 			this._input.ariaLabel = this.ariaLabel;

src/sql/workbench/browser/modelComponents/componentBase.ts

@@ -18,9 +18,9 @@ import { URI } from 'vs/base/common/uri';
 import * as nls from 'vs/nls';
 import { EventType, addDisposableListener } from 'vs/base/browser/dom';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
-import { endsWith } from 'vs/base/common/strings';
 import { firstIndex } from 'vs/base/common/arrays';
 import { IComponentDescriptor, IComponent, IModelStore, IComponentEventArgs, ComponentEventType } from 'sql/platform/dashboard/browser/interfaces';
+import { convertSize } from 'sql/base/browser/dom';
 
 export type IUserFriendlyIcon = string | URI | { light: string | URI; dark: string | URI };
 
@@ -215,37 +215,12 @@ export abstract class ComponentBase extends Disposable implements IComponent, On
 		this.setPropertyFromUI<azdata.ComponentProperties, { [key: string]: string }>((properties, CSSStyles) => { properties.CSSStyles = CSSStyles; }, newValue);
 	}
 
-	public convertSizeToNumber(size: number | string): number {
-		if (size && typeof (size) === 'string') {
-			if (endsWith(size.toLowerCase(), 'px')) {
-				return +size.replace('px', '');
-			} else if (endsWith(size.toLowerCase(), 'em')) {
-				return +size.replace('em', '') * 11;
-			}
-		} else if (!size) {
-			return 0;
-		}
-		return +size;
-	}
-
 	protected getWidth(): string {
-		return this.width ? this.convertSize(this.width) : '';
+		return this.width ? convertSize(this.width) : '';
 	}
 
 	protected getHeight(): string {
-		return this.height ? this.convertSize(this.height) : '';
+		return this.height ? convertSize(this.height) : '';
-	}
-
-	public convertSize(size: number | string, defaultValue?: string): string {
-		defaultValue = defaultValue || '';
-		if (types.isUndefinedOrNull(size)) {
-			return defaultValue;
-		}
-		let convertedSize: string = size ? size.toString() : defaultValue;
-		if (!endsWith(convertedSize.toLowerCase(), 'px') && !endsWith(convertedSize.toLowerCase(), '%')) {
-			convertedSize = convertedSize + 'px';
-		}
-		return convertedSize;
 	}
 
 	public get valid(): boolean {

src/sql/workbench/browser/modelComponents/componentWithIconBase.ts

@@ -10,6 +10,7 @@ import { createIconCssClass, IUserFriendlyIcon } from 'sql/workbench/browser/mod
 import { removeCSSRulesContainingSelector } from 'vs/base/browser/dom';
 import { URI } from 'vs/base/common/uri';
 import { IComponentDescriptor } from 'sql/platform/dashboard/browser/interfaces';
+import { convertSize } from 'sql/base/browser/dom';
 
 export class ItemDescriptor<T> {
 	constructor(public descriptor: IComponentDescriptor, public config: T) { }
@@ -40,11 +41,11 @@ export abstract class ComponentWithIconBase extends ComponentBase {
 	}
 
 	public getIconWidth(): string {
-		return this.convertSize(this.iconWidth, '40px');
+		return convertSize(this.iconWidth, '40px');
 	}
 
 	public getIconHeight(): string {
-		return this.convertSize(this.iconHeight, '40px');
+		return convertSize(this.iconHeight, '40px');
 	}
 
 	public get iconPath(): string | URI | { light: string | URI; dark: string | URI } {

src/sql/workbench/browser/modelComponents/declarativeTable.component.ts

@@ -16,6 +16,7 @@ import { ISelectData } from 'vs/base/browser/ui/selectBox/selectBox';
 import { find } from 'vs/base/common/arrays';
 import { localize } from 'vs/nls';
 import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/platform/dashboard/browser/interfaces';
+import { convertSize } from 'sql/base/browser/dom';
 
 export enum DeclarativeDataType {
 	string = 'string',
@@ -161,7 +162,7 @@ export default class DeclarativeTableComponent extends ComponentBase implements
 
 	public getColumnWidth(col: number | azdata.DeclarativeTableColumn): string {
 		let column = typeof col === 'number' ? this.columns[col] : col;
-		return this.convertSize(column.width, '30px');
+		return convertSize(column.width, '30px');
 	}
 
 	public getOptions(colIdx: number): string[] {

src/sql/workbench/browser/modelComponents/diffeditor.component.ts

@@ -26,6 +26,7 @@ import { ServiceCollection } from 'vs/platform/instantiation/common/serviceColle
 import { SimpleProgressIndicator } from 'sql/workbench/services/progress/browser/simpleProgressIndicator';
 import { IEditorProgressService } from 'vs/platform/progress/common/progress';
 import { IComponent, IComponentDescriptor, IModelStore } from 'sql/platform/dashboard/browser/interfaces';
+import { convertSizeToNumber } from 'sql/base/browser/dom';
 
 @Component({
 	template: `
@@ -119,8 +120,8 @@ export default class DiffEditorComponent extends ComponentBase implements ICompo
 	/// IComponent implementation
 
 	public layout(): void {
-		let width: number = this.convertSizeToNumber(this.width);
+		let width: number = convertSizeToNumber(this.width);
-		let height: number = this.convertSizeToNumber(this.height);
+		let height: number = convertSizeToNumber(this.height);
 		if (this._isAutoResizable) {
 			height = Math.max(this._editor.maximumHeight, this._minimumHeight ? this._minimumHeight : 0);
 		}

src/sql/workbench/browser/modelComponents/divContainer.component.ts

@@ -16,6 +16,7 @@ import { ContainerBase } from 'sql/workbench/browser/modelComponents/componentBa
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { KeyCode } from 'vs/base/common/keyCodes';
 import { IComponentDescriptor, IComponent, IModelStore, ComponentEventType } from 'sql/platform/dashboard/browser/interfaces';
+import { convertSize } from 'sql/base/browser/dom';
 
 class DivItem {
 	constructor(public descriptor: IComponentDescriptor, public config: azdata.DivItemLayout) { }
@@ -67,8 +68,8 @@ export default class DivContainer extends ContainerBase<azdata.DivItemLayout> im
 	/// IComponent implementation
 
 	public setLayout(layout: azdata.DivLayout): void {
-		this._height = this.convertSize(layout.height);
+		this._height = convertSize(layout.height);
-		this._width = this.convertSize(layout.width);
+		this._width = convertSize(layout.width);
 		this.layout();
 	}
 

src/sql/workbench/browser/modelComponents/editor.component.ts

@@ -25,6 +25,7 @@ import { IEditorProgressService } from 'vs/platform/progress/common/progress';
 import { SimpleProgressIndicator } from 'sql/workbench/services/progress/browser/simpleProgressIndicator';
 import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/platform/dashboard/browser/interfaces';
 import { IEditorService } from 'vs/workbench/services/editor/common/editorService';
+import { convertSizeToNumber } from 'sql/base/browser/dom';
 
 @Component({
 	template: '',
@@ -111,9 +112,9 @@ export default class EditorComponent extends ComponentBase implements IComponent
 	/// IComponent implementation
 
 	public layout(): void {
-		let width: number = this.convertSizeToNumber(this.width);
+		let width: number = convertSizeToNumber(this.width);
 
-		let height: number = this.convertSizeToNumber(this.height);
+		let height: number = convertSizeToNumber(this.height);
 		if (this._isAutoResizable) {
 			this._editor.setHeightToScrollHeight();
 			height = Math.max(this._editor.scrollHeight, this._minimumHeight ? this._minimumHeight : 0);

src/sql/workbench/browser/modelComponents/flexContainer.component.ts

@@ -13,6 +13,7 @@ import { FlexLayout, FlexItemLayout } from 'azdata';
 
 import { ContainerBase } from 'sql/workbench/browser/modelComponents/componentBase';
 import { IComponentDescriptor, IComponent, IModelStore } from 'sql/platform/dashboard/browser/interfaces';
+import { convertSize } from 'sql/base/browser/dom';
 
 export class FlexItem {
 	constructor(public descriptor: IComponentDescriptor, public config: FlexItemLayout) { }
@@ -69,8 +70,8 @@ export default class FlexContainer extends ContainerBase<FlexItemLayout> impleme
 		this._alignContent = layout.alignContent ? layout.alignContent : '';
 		this._textAlign = layout.textAlign ? layout.textAlign : '';
 		this._position = layout.position ? layout.position : '';
-		this._height = this.convertSize(layout.height);
+		this._height = convertSize(layout.height);
-		this._width = this.convertSize(layout.width);
+		this._width = convertSize(layout.width);
 		this._flexWrap = layout.flexWrap ? layout.flexWrap : '';
 
 		this.layout();

src/sql/workbench/browser/modelComponents/formContainer.component.ts

@@ -14,6 +14,7 @@ import { FormLayout, FormItemLayout } from 'azdata';
 import { ContainerBase } from 'sql/workbench/browser/modelComponents/componentBase';
 import { find } from 'vs/base/common/arrays';
 import { IComponentDescriptor, IComponent, IModelStore } from 'sql/platform/dashboard/browser/interfaces';
+import { convertSize } from 'sql/base/browser/dom';
 
 export interface TitledFormItemLayout {
 	title: string;
@@ -125,7 +126,7 @@ export default class FormContainer extends ContainerBase<FormItemLayout> impleme
 	}
 
 	public getFormWidth(): string {
-		return this.convertSize(this._formLayout && this._formLayout.width, '');
+		return convertSize(this._formLayout && this._formLayout.width, '');
 	}
 
 	public getFormPadding(): string {
@@ -133,17 +134,17 @@ export default class FormContainer extends ContainerBase<FormItemLayout> impleme
 	}
 
 	public getFormHeight(): string {
-		return this.convertSize(this._formLayout && this._formLayout.height, '');
+		return convertSize(this._formLayout && this._formLayout.height, '');
 	}
 
 	public getComponentWidth(item: FormItem): string {
 		let itemConfig = item.config;
-		return (itemConfig && itemConfig.componentWidth) ? this.convertSize(itemConfig.componentWidth, '') : '';
+		return (itemConfig && itemConfig.componentWidth) ? convertSize(itemConfig.componentWidth, '') : '';
 	}
 
 	public getRowHeight(item: FormItem): string {
 		let itemConfig = item.config;
-		return (itemConfig && itemConfig.componentHeight) ? this.convertSize(itemConfig.componentHeight, '') : '';
+		return (itemConfig && itemConfig.componentHeight) ? convertSize(itemConfig.componentHeight, '') : '';
 	}
 
 	public isItemRequired(item: FormItem): boolean {
@@ -177,7 +178,7 @@ export default class FormContainer extends ContainerBase<FormItemLayout> impleme
 			defaultFontSize = '12px';
 		}
 		let itemConfig = item.config;
-		return itemConfig && itemConfig.titleFontSize ? this.convertSize(itemConfig.titleFontSize, defaultFontSize) : defaultFontSize;
+		return itemConfig && itemConfig.titleFontSize ? convertSize(itemConfig.titleFontSize, defaultFontSize) : defaultFontSize;
 	}
 
 	public getActionComponents(item: FormItem): FormItem[] {

src/sql/workbench/browser/modelComponents/inputbox.component.ts

@@ -25,6 +25,7 @@ import * as DOM from 'vs/base/browser/dom';
 import { assign } from 'vs/base/common/objects';
 import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/platform/dashboard/browser/interfaces';
 import { isNumber } from 'vs/base/common/types';
+import { convertSize, convertSizeToNumber } from 'sql/base/browser/dom';
 
 @Component({
 	selector: 'modelview-inputBox',
@@ -193,10 +194,10 @@ export default class InputBoxComponent extends ComponentBase implements ICompone
 
 	private layoutInputBox(): void {
 		if (isNumber(this.width) || this.width) {
-			this.inputElement.width = this.convertSizeToNumber(this.width);
+			this.inputElement.width = convertSizeToNumber(this.width);
 		}
 		if (isNumber(this.height) || this.height) {
-			this.inputElement.setHeight(this.convertSize(this.height));
+			this.inputElement.setHeight(convertSize(this.height));
 		}
 	}
 

src/sql/workbench/browser/modelComponents/splitviewContainer.component.ts

@@ -13,6 +13,7 @@ import { Event } from 'vs/base/common/event';
 import { SplitView, Orientation, Sizing, IView } from 'vs/base/browser/ui/splitview/splitview';
 import { IComponent, IComponentDescriptor, IModelStore } from 'sql/platform/dashboard/browser/interfaces';
 import { ILogService } from 'vs/platform/log/common/log';
+import { convertSize, convertSizeToNumber } from 'sql/base/browser/dom';
 
 class SplitPane implements IView {
 	orientation: Orientation;
@@ -105,10 +106,10 @@ export default class SplitViewContainer extends ContainerBase<FlexItemLayout> im
 		this._alignContent = layout.alignContent ? layout.alignContent : '';
 		this._textAlign = layout.textAlign ? layout.textAlign : '';
 		this._position = layout.position ? layout.position : '';
-		this._height = this.convertSize(layout.height);
+		this._height = convertSize(layout.height);
-		this._width = this.convertSize(layout.width);
+		this._width = convertSize(layout.width);
 		this._orientation = layout.orientation.toLowerCase() === 'vertical' ? Orientation.VERTICAL : Orientation.HORIZONTAL;
-		this._splitViewHeight = this.convertSizeToNumber(layout.splitViewHeight);
+		this._splitViewHeight = convertSizeToNumber(layout.splitViewHeight);
 
 		if (this._componentWrappers) {
 			this._componentWrappers.forEach(item => {

src/sql/workbench/browser/modelComponents/table.component.ts

@@ -26,6 +26,7 @@ import { KeyMod, KeyCode } from 'vs/base/common/keyCodes';
 import { slickGridDataItemColumnValueWithNoData, textFormatter } from 'sql/base/browser/ui/table/formatters';
 import { isUndefinedOrNull } from 'vs/base/common/types';
 import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/platform/dashboard/browser/interfaces';
+import { convertSizeToNumber } from 'sql/base/browser/dom';
 
 export enum ColumnSizingMode {
 	ForceFit = 0,	// all columns will be sized to fit in viewable space, no horiz scroll bar
@@ -182,8 +183,8 @@ export default class TableComponent extends ComponentBase implements IComponent,
 	}
 
 	private layoutTable(): void {
-		let width: number = this.convertSizeToNumber(this.width);
+		let width: number = convertSizeToNumber(this.width);
-		let height: number = this.convertSizeToNumber(this.height);
+		let height: number = convertSizeToNumber(this.height);
 		let forceFit: boolean = true;
 
 		// convert the tri-state viewmodel columnSizingMode to be either true or false for SlickGrid

src/sql/workbench/browser/modelComponents/tree.component.ts

@@ -26,6 +26,7 @@ import { KeyCode } from 'vs/base/common/keyCodes';
 import { values } from 'vs/base/common/collections';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { IComponentDescriptor, IComponent, IModelStore } from 'sql/platform/dashboard/browser/interfaces';
+import { convertSizeToNumber } from 'sql/base/browser/dom';
 
 class Root implements ITreeComponentItem {
 	label = {
@@ -143,8 +144,8 @@ export default class TreeComponent extends ComponentBase implements IComponent,
 	}
 
 	private layoutTree(): void {
-		let width: number = this.convertSizeToNumber(this.width);
+		let width: number = convertSizeToNumber(this.width);
-		let height: number = this.convertSizeToNumber(this.height);
+		let height: number = convertSizeToNumber(this.height);
 		this._tree.layout(
 			height && height > 0 ? height : DOM.getContentHeight(this._inputContainer.nativeElement),
 			width && width > 0 ? width : DOM.getContentWidth(this._inputContainer.nativeElement));

src/sql/workbench/test/electron-browser/modalComponents/componentBase.test.ts

@@ -172,54 +172,4 @@ suite('ComponentBase Tests', () => {
 		testContainer.addToContainer(testComponent.descriptor, 0);
 		assert.equal(testContainer.TestItems.length, 1, `Unexpected number of items. Expected 1 got ${testContainer.TestItems.length} : ${JSON.stringify(testContainer.TestItems)}`);
 	});
-
-
-	test('Component convert size should add px', () => {
-		const expected = '100px';
-		const actual = testComponent.convertSize(100);
-		assert.equal(expected, actual);
-	});
-
-	test('Component convert size should not add px if it already has it', () => {
-		const expected = '100px';
-		const actual = testComponent.convertSize('100px');
-		assert.equal(expected, actual);
-	});
-
-	test('Component convert size should not add px if it is a percent value', () => {
-		const expected = '100%';
-		const actual = testComponent.convertSize('100%');
-		assert.equal(expected, actual);
-	});
-
-	test('Component convert size should keep value if ends with %', () => {
-		const expected = '100%';
-		const actual = testComponent.convertSize('100%');
-		assert.equal(expected, actual);
-	});
-
-	test('Component convert size should return the default value given undefined value %', () => {
-		const expected = '200';
-		const actual = testComponent.convertSize(undefined, '200');
-		assert.equal(expected, actual);
-	});
-
-	test('Component convert to number should return size without px', () => {
-		const expected = 200;
-		const actual = testComponent.convertSizeToNumber('200px');
-		assert.equal(expected, actual);
-	});
-
-	test('Component convert to number should return same value if already plain number', () => {
-		const expected = 200;
-		const actual = testComponent.convertSizeToNumber('200');
-		assert.equal(expected, actual);
-	});
-
-	test('Component convert to number should return 0 given undefined', () => {
-		const expected = 0;
-		const actual = testComponent.convertSizeToNumber(undefined);
-		assert.equal(expected, actual);
-	});
-
 });