Refresh master with initial release/0.24 snapshot (#332)

* Initial port of release/0.24 source code

* Fix additional headers

* Fix a typo in launch.json

src/sql/base/browser/ui/modal/dialogHelper.ts

@@ -4,14 +4,14 @@
  *--------------------------------------------------------------------------------------------*/
 
 'use strict';
+import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
+import { Button } from 'sql/base/browser/ui/button/button';
 
 import { Builder } from 'vs/base/browser/builder';
-import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
-import { Button } from 'vs/base/browser/ui/button/button';
-import { Checkbox } from 'sql/base/browser/ui/checkbox/checkbox';
-import * as data from 'data';
 import * as types from 'vs/base/common/types';
 
+import * as data from 'data';
+
 export function appendRow(container: Builder, label: string, labelClass: string, cellContainerClass: string): Builder {
 	let cellContainer: Builder;
 	container.element('tr', {}, (rowContainer) => {
@@ -47,35 +47,11 @@ export function appendRowLink(container: Builder, label: string, labelClass: str
 	return new Builder(rowButton.getElement());
 }
 
-export function createCheckBox(container: Builder, label: string, checkboxClass: string, isChecked: boolean, onCheck?: (viaKeyboard: boolean) => void): Checkbox {
-	let checkbox = new Checkbox({
-		actionClassName: checkboxClass,
-		title: label,
-		isChecked: isChecked,
-		onChange: (viaKeyboard) => {
-			if (onCheck) {
-				onCheck(viaKeyboard);
-			}
-		}
-	});
-	container.getHTMLElement().appendChild(checkbox.domNode);
-	container.div({}, (labelContainer) => {
-		labelContainer.innerHtml(label);
-	});
-
-	return checkbox;
-}
-
 export function appendInputSelectBox(container: Builder, selectBox: SelectBox): SelectBox {
 	selectBox.render(container.getHTMLElement());
 	return selectBox;
 }
 
-export function isNullOrWhiteSpace(value: string): boolean {
-	// returns true if the string is null or contains white space/tab chars only
-	return !value || value.trim().length === 0;
-}
-
 export function getBooleanValueFromStringOrBoolean(value: any): boolean {
 	if (types.isBoolean(value)) {
 		return value;

src/sql/base/browser/ui/modal/media/modal.css

@@ -154,11 +154,7 @@
 	width: 100px;
 }
 
-.vs-dark.monaco-shell .modal.flyout-dialog .footer-button a.monaco-button.monaco-text-button {
-	outline-color: #8e8c8c;
-}
-
-.modal.flyout-dialog .footer-button a.monaco-button.monaco-text-button:focus {
+.vs .monaco-text-button:focus {
 	outline-width: 1px;
 }
 

src/sql/base/browser/ui/modal/modal.ts

@@ -7,17 +7,17 @@ import 'vs/css!./media/modal';
 import { IThemable } from 'vs/platform/theme/common/styler';
 import { Color } from 'vs/base/common/color';
 import { IPartService } from 'vs/workbench/services/part/common/partService';
-import { KeyCode } from 'vs/base/common/keyCodes';
+import { KeyCode, KeyMod } from 'vs/base/common/keyCodes';
 import { mixin } from 'vs/base/common/objects';
 import { Disposable, IDisposable } from 'vs/base/common/lifecycle';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { Builder, $, withElementById } from 'vs/base/browser/builder';
-import { Button } from 'vs/base/browser/ui/button/button';
 import * as DOM from 'vs/base/browser/dom';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { generateUuid } from 'vs/base/common/uuid';
 import { IContextKeyService, RawContextKey, IContextKey } from 'vs/platform/contextkey/common/contextkey';
 
+import { Button } from 'sql/base/browser/ui/button/button';
 import * as TelemetryUtils from 'sql/common/telemetryUtilities';
 import * as TelemetryKeys from 'sql/common/telemetryKeys';
 
@@ -64,6 +64,12 @@ export abstract class Modal extends Disposable implements IThemable {
 	private _errorMessage: Builder;
 	private _spinnerElement: HTMLElement;
 	private _errorIconElement: HTMLElement;
+
+	private _focusableElements: NodeListOf<Element>;
+	private _firstFocusableElement: HTMLElement;
+	private _lastFocusableElement: HTMLElement;
+	private _focusedElementBeforeOpen: HTMLElement;
+
 	private _dialogForeground: Color;
 	private _dialogBorder: Color;
 	private _dialogHeaderAndFooterBackground: Color;
@@ -102,6 +108,7 @@ export abstract class Modal extends Disposable implements IThemable {
 	 * Set the dialog to have wide layout dynamically.
 	 * Temporary solution to render file browser as wide or narrow layout.
 	 * This will be removed once backup dialog is changed to wide layout.
+	 * (hyoshi - 10/2/2017 tracked by https://github.com/Microsoft/carbon/issues/1836)
 	 */
 	public setWide(isWide: boolean): void {
 		if (this._builder.hasClass('wide') && isWide === false) {
@@ -244,12 +251,42 @@ export abstract class Modal extends Disposable implements IThemable {
 		this.hide();
 	}
 
+	private handleBackwardTab(e: KeyboardEvent) {
+		if (this._firstFocusableElement && this._lastFocusableElement && document.activeElement === this._firstFocusableElement) {
+			e.preventDefault();
+			this._lastFocusableElement.focus();
+		}
+	}
+
+	private handleForwardTab(e: KeyboardEvent) {
+		if (this._firstFocusableElement && this._lastFocusableElement && document.activeElement === this._lastFocusableElement) {
+			e.preventDefault();
+			this._firstFocusableElement.focus();
+		}
+	}
+
+	/**
+	 * Set focusable elements in the modal dialog
+	 */
+	public setFocusableElements() {
+		this._focusableElements = this._builder.getHTMLElement().querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex="0"]');
+		if (this._focusableElements && this._focusableElements.length > 0) {
+			this._firstFocusableElement = <HTMLElement>this._focusableElements[0];
+			this._lastFocusableElement = <HTMLElement>this._focusableElements[this._focusableElements.length - 1];
+		}
+
+		this._focusedElementBeforeOpen = <HTMLElement>document.activeElement;
+	}
+
 	/**
 	 * Shows the modal and attaches key listeners
 	 */
 	protected show() {
 		this._modalShowingContext.get().push(this._staticKey);
 		this._builder.appendTo(withElementById(this._partService.getWorkbenchElementId()).getHTMLElement().parentElement);
+
+		this.setFocusableElements();
+
 		this._keydownListener = DOM.addDisposableListener(document, DOM.EventType.KEY_DOWN, (e: KeyboardEvent) => {
 			let context = this._modalShowingContext.get();
 			if (context[context.length - 1] === this._staticKey) {
@@ -258,6 +295,10 @@ export abstract class Modal extends Disposable implements IThemable {
 					this.onAccept(event);
 				} else if (event.equals(KeyCode.Escape)) {
 					this.onClose(event);
+				} else if (event.equals(KeyMod.Shift | KeyCode.Tab)) {
+					this.handleBackwardTab(e);
+				} else if (event.equals(KeyCode.Tab)) {
+					this.handleForwardTab(e);
 				}
 			}
 		});
@@ -281,6 +322,9 @@ export abstract class Modal extends Disposable implements IThemable {
 		this._footerButtons.forEach(button => button.applyStyles());
 		this._modalShowingContext.get().pop();
 		this._builder.offDOM();
+		if (this._focusedElementBeforeOpen) {
+			this._focusedElementBeforeOpen.focus();
+		}
 		this._keydownListener.dispose();
 		this._resizeListener.dispose();
 		TelemetryUtils.addTelemetry(this._telemetryService, TelemetryKeys.ModalDialogClosed, { name: this._name });

src/sql/base/browser/ui/modal/optionsDialog.ts

@@ -6,16 +6,15 @@
 'use strict';
 
 import 'vs/css!./media/optionsDialog';
-
+import { Button } from 'sql/base/browser/ui/button/button';
 import { FixedCollapsibleView } from 'sql/platform/views/fixedCollapsibleView';
 import * as DialogHelper from './dialogHelper';
 import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
 import { IModalOptions, Modal } from './modal';
 import * as OptionsDialogHelper from './optionsDialogHelper';
-import { attachModalDialogStyler } from 'sql/common/theme/styler';
+import { attachButtonStyler, attachModalDialogStyler } from 'sql/common/theme/styler';
 
 import * as data from 'data';
-
 import { IPartService } from 'vs/workbench/services/part/common/partService';
 import Event, { Emitter } from 'vs/base/common/event';
 import { SIDE_BAR_BACKGROUND } from 'vs/workbench/common/theme';
@@ -27,13 +26,14 @@ import { IWorkbenchThemeService, IColorTheme } from 'vs/workbench/services/theme
 import { contrastBorder } from 'vs/platform/theme/common/colorRegistry';
 import * as styler from 'vs/platform/theme/common/styler';
 import { InputBox } from 'vs/base/browser/ui/inputbox/inputBox';
-import { SplitView, CollapsibleState } from 'vs/base/browser/ui/splitview/splitview';
+import { SplitView, CollapsibleState } from 'sql/base/browser/ui/splitview/splitview';
 import { Builder, $ } from 'vs/base/browser/builder';
-import { Button } from 'vs/base/browser/ui/button/button';
 import { Widget } from 'vs/base/browser/ui/widget';
 
-class CategoryView extends FixedCollapsibleView {
+export class CategoryView extends FixedCollapsibleView {
 	private _treecontainer: HTMLElement;
+	private _collapsed: CollapsibleState;
+
 	constructor(private viewTitle: string, private _bodyContainer: HTMLElement, collapsed: boolean, initialBodySize: number, headerSize: number) {
 		super(
 			initialBodySize,
@@ -43,6 +43,7 @@ class CategoryView extends FixedCollapsibleView {
 				initialState: collapsed ? CollapsibleState.COLLAPSED : CollapsibleState.EXPANDED,
 				ariaHeaderLabel: viewTitle
 			});
+		this._collapsed = collapsed ? CollapsibleState.COLLAPSED : CollapsibleState.EXPANDED;
 	}
 
 	public renderHeader(container: HTMLElement): void {
@@ -54,6 +55,7 @@ class CategoryView extends FixedCollapsibleView {
 		this._treecontainer = document.createElement('div');
 		container.appendChild(this._treecontainer);
 		this._treecontainer.appendChild(this._bodyContainer);
+		this.changeState(this._collapsed);
 	}
 
 	public layoutBody(size: number): void {
@@ -102,13 +104,13 @@ export class OptionsDialog extends Modal {
 		attachModalDialogStyler(this, this._themeService);
 		if (this.backButton) {
 			this.backButton.addListener('click', () => this.cancel());
-			styler.attachButtonStyler(this.backButton, this._themeService, { buttonBackground: SIDE_BAR_BACKGROUND, buttonHoverBackground: SIDE_BAR_BACKGROUND });
+			attachButtonStyler(this.backButton, this._themeService, { buttonBackground: SIDE_BAR_BACKGROUND, buttonHoverBackground: SIDE_BAR_BACKGROUND });
 		}
 		this._okButton = this.addFooterButton(this.okLabel, () => this.ok());
 		this._closeButton = this.addFooterButton(this.cancelLabel, () => this.cancel());
 		// Theme styler
-		styler.attachButtonStyler(this._okButton, this._themeService);
-		styler.attachButtonStyler(this._closeButton, this._themeService);
+		attachButtonStyler(this._okButton, this._themeService);
+		attachButtonStyler(this._closeButton, this._themeService);
 		let self = this;
 		this._register(self._themeService.onDidColorThemeChange(e => self.updateTheme(e)));
 		self.updateTheme(self._themeService.getColorTheme());