SQL Operations Studio Public Preview 1 (0.23) release source code

src/vs/editor/contrib/find/browser/find.ts

@@ -0,0 +1,55 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+'use strict';
+
+import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
+import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
+import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
+import { ICodeEditor } from 'vs/editor/browser/editorBrowser';
+import { editorContribution } from 'vs/editor/browser/editorBrowserExtensions';
+import { FindWidget, IFindController } from 'vs/editor/contrib/find/browser/findWidget';
+import { FindOptionsWidget } from 'vs/editor/contrib/find/browser/findOptionsWidget';
+import { CommonFindController, FindStartFocusAction, IFindStartOptions } from 'vs/editor/contrib/find/common/findController';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
+import { IStorageService } from 'vs/platform/storage/common/storage';
+
+@editorContribution
+export class FindController extends CommonFindController implements IFindController {
+
+	private _widget: FindWidget;
+	private _findOptionsWidget: FindOptionsWidget;
+
+	constructor(
+		editor: ICodeEditor,
+		@IContextViewService contextViewService: IContextViewService,
+		@IContextKeyService contextKeyService: IContextKeyService,
+		@IKeybindingService keybindingService: IKeybindingService,
+		@IThemeService themeService: IThemeService,
+		@IStorageService storageService: IStorageService
+	) {
+		super(editor, contextKeyService, storageService);
+
+		this._widget = this._register(new FindWidget(editor, this, this._state, contextViewService, keybindingService, contextKeyService, themeService));
+		this._findOptionsWidget = this._register(new FindOptionsWidget(editor, this._state, keybindingService, themeService));
+	}
+
+	protected _start(opts: IFindStartOptions): void {
+		super._start(opts);
+
+		if (opts.shouldFocus === FindStartFocusAction.FocusReplaceInput) {
+			this._widget.focusReplaceInput();
+		} else if (opts.shouldFocus === FindStartFocusAction.FocusFindInput) {
+			this._widget.focusFindInput();
+		}
+	}
+
+	public highlightFindOptions(): void {
+		if (this._state.isRevealed) {
+			this._widget.highlightFindOptions();
+		} else {
+			this._findOptionsWidget.highlightFindOptions();
+		}
+	}
+}

src/vs/editor/contrib/find/browser/findOptionsWidget.ts

@@ -0,0 +1,207 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+'use strict';
+
+import * as dom from 'vs/base/browser/dom';
+import { Widget } from 'vs/base/browser/ui/widget';
+import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
+import { ICodeEditor, IOverlayWidget, IOverlayWidgetPosition, OverlayWidgetPositionPreference } from 'vs/editor/browser/editorBrowser';
+import { FIND_IDS } from 'vs/editor/contrib/find/common/findModel';
+import { FindReplaceState } from 'vs/editor/contrib/find/common/findState';
+import { CaseSensitiveCheckbox, WholeWordsCheckbox, RegexCheckbox } from 'vs/base/browser/ui/findinput/findInputCheckboxes';
+import { RunOnceScheduler } from 'vs/base/common/async';
+import { IThemeService, ITheme, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
+import { inputActiveOptionBorder, editorWidgetBackground, contrastBorder, widgetShadow } from 'vs/platform/theme/common/colorRegistry';
+
+export class FindOptionsWidget extends Widget implements IOverlayWidget {
+
+	private static ID = 'editor.contrib.findOptionsWidget';
+
+	private _editor: ICodeEditor;
+	private _state: FindReplaceState;
+	private _keybindingService: IKeybindingService;
+
+	private _domNode: HTMLElement;
+	private regex: RegexCheckbox;
+	private wholeWords: WholeWordsCheckbox;
+	private caseSensitive: CaseSensitiveCheckbox;
+
+	constructor(
+		editor: ICodeEditor,
+		state: FindReplaceState,
+		keybindingService: IKeybindingService,
+		themeService: IThemeService
+	) {
+		super();
+
+		this._editor = editor;
+		this._state = state;
+		this._keybindingService = keybindingService;
+
+		this._domNode = document.createElement('div');
+		this._domNode.className = 'findOptionsWidget';
+		this._domNode.style.display = 'none';
+		this._domNode.style.top = '10px';
+		this._domNode.setAttribute('role', 'presentation');
+		this._domNode.setAttribute('aria-hidden', 'true');
+
+		let inputActiveOptionBorderColor = themeService.getTheme().getColor(inputActiveOptionBorder);
+
+		this.caseSensitive = this._register(new CaseSensitiveCheckbox({
+			appendTitle: this._keybindingLabelFor(FIND_IDS.ToggleCaseSensitiveCommand),
+			isChecked: this._state.matchCase,
+			onChange: (viaKeyboard) => {
+				this._state.change({
+					matchCase: this.caseSensitive.checked
+				}, false);
+			},
+			inputActiveOptionBorder: inputActiveOptionBorderColor
+		}));
+		this._domNode.appendChild(this.caseSensitive.domNode);
+
+		this.wholeWords = this._register(new WholeWordsCheckbox({
+			appendTitle: this._keybindingLabelFor(FIND_IDS.ToggleWholeWordCommand),
+			isChecked: this._state.wholeWord,
+			onChange: (viaKeyboard) => {
+				this._state.change({
+					wholeWord: this.wholeWords.checked
+				}, false);
+			},
+			inputActiveOptionBorder: inputActiveOptionBorderColor
+		}));
+		this._domNode.appendChild(this.wholeWords.domNode);
+
+		this.regex = this._register(new RegexCheckbox({
+			appendTitle: this._keybindingLabelFor(FIND_IDS.ToggleRegexCommand),
+			isChecked: this._state.isRegex,
+			onChange: (viaKeyboard) => {
+				this._state.change({
+					isRegex: this.regex.checked
+				}, false);
+			},
+			inputActiveOptionBorder: inputActiveOptionBorderColor
+		}));
+		this._domNode.appendChild(this.regex.domNode);
+
+		this._editor.addOverlayWidget(this);
+
+		this._register(this._state.addChangeListener((e) => {
+			let somethingChanged = false;
+			if (e.isRegex) {
+				this.regex.checked = this._state.isRegex;
+				somethingChanged = true;
+			}
+			if (e.wholeWord) {
+				this.wholeWords.checked = this._state.wholeWord;
+				somethingChanged = true;
+			}
+			if (e.matchCase) {
+				this.caseSensitive.checked = this._state.matchCase;
+				somethingChanged = true;
+			}
+			if (!this._state.isRevealed && somethingChanged) {
+				this._revealTemporarily();
+			}
+		}));
+
+		this._register(dom.addDisposableNonBubblingMouseOutListener(this._domNode, (e) => this._onMouseOut()));
+		this._register(dom.addDisposableListener(this._domNode, 'mouseover', (e) => this._onMouseOver()));
+
+		this._applyTheme(themeService.getTheme());
+		this._register(themeService.onThemeChange(this._applyTheme.bind(this)));
+	}
+
+	private _keybindingLabelFor(actionId: string): string {
+		let kb = this._keybindingService.lookupKeybinding(actionId);
+		if (!kb) {
+			return '';
+		}
+		return ` (${kb.getLabel()})`;
+	}
+
+	public dispose(): void {
+		this._editor.removeOverlayWidget(this);
+		super.dispose();
+	}
+
+	// ----- IOverlayWidget API
+
+	public getId(): string {
+		return FindOptionsWidget.ID;
+	}
+
+	public getDomNode(): HTMLElement {
+		return this._domNode;
+	}
+
+	public getPosition(): IOverlayWidgetPosition {
+		return {
+			preference: OverlayWidgetPositionPreference.TOP_RIGHT_CORNER
+		};
+	}
+
+	public highlightFindOptions(): void {
+		this._revealTemporarily();
+	}
+
+	private _hideSoon = this._register(new RunOnceScheduler(() => this._hide(), 1000));
+
+	private _revealTemporarily(): void {
+		this._show();
+		this._hideSoon.schedule();
+	}
+
+	private _onMouseOut(): void {
+		this._hideSoon.schedule();
+	}
+
+	private _onMouseOver(): void {
+		this._hideSoon.cancel();
+	}
+
+	private _isVisible: boolean = false;
+
+	private _show(): void {
+		if (this._isVisible) {
+			return;
+		}
+		this._isVisible = true;
+		this._domNode.style.display = 'block';
+	}
+
+	private _hide(): void {
+		if (!this._isVisible) {
+			return;
+		}
+		this._isVisible = false;
+		this._domNode.style.display = 'none';
+	}
+
+	private _applyTheme(theme: ITheme) {
+		let inputStyles = { inputActiveOptionBorder: theme.getColor(inputActiveOptionBorder) };
+		this.caseSensitive.style(inputStyles);
+		this.wholeWords.style(inputStyles);
+		this.regex.style(inputStyles);
+	}
+}
+
+
+registerThemingParticipant((theme, collector) => {
+	let widgetBackground = theme.getColor(editorWidgetBackground);
+	if (widgetBackground) {
+		collector.addRule(`.monaco-editor .findOptionsWidget { background-color: ${widgetBackground}; }`);
+	}
+
+	let widgetShadowColor = theme.getColor(widgetShadow);
+	if (widgetShadowColor) {
+		collector.addRule(`.monaco-editor .findOptionsWidget { box-shadow: 0 2px 8px ${widgetShadowColor}; }`);
+	}
+
+	let hcBorder = theme.getColor(contrastBorder);
+	if (hcBorder) {
+		collector.addRule(`.monaco-editor .findOptionsWidget { border: 2px solid ${hcBorder}; }`);
+	}
+});

src/vs/editor/contrib/find/browser/findWidget.css

@@ -0,0 +1,356 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+/* Checkbox */
+
+.monaco-checkbox .label {
+	width: 12px;
+	height: 12px;
+	border: 1px solid black;
+	background-color: transparent;
+	display: inline-block;
+}
+
+.monaco-checkbox .checkbox {
+	position: absolute;
+	overflow: hidden;
+	clip: rect(0 0 0 0);
+	height: 1px;
+	width: 1px;
+	margin: -1px;
+	padding: 0;
+	border: 0;
+}
+
+.monaco-checkbox .checkbox:checked + .label {
+	background-color: black;
+}
+
+/* Find widget */
+.monaco-editor .find-widget {
+	position: absolute;
+	z-index: 10;
+	top: -44px; /* find input height + shadow (10px) */
+	height: 34px; /* find input height */
+	overflow: hidden;
+	line-height: 19px;
+
+	-webkit-transition: top 200ms linear;
+	-o-transition: top 200ms linear;
+	-moz-transition: top 200ms linear;
+	-ms-transition: top 200ms linear;
+	transition: top 200ms linear;
+
+	padding: 0 4px;
+}
+/* Find widget when replace is toggled on */
+.monaco-editor .find-widget.replaceToggled {
+	top: -74px; /* find input height + replace input height + shadow (10px) */
+	height: 64px; /* find input height + replace input height */
+}
+.monaco-editor .find-widget.replaceToggled > .replace-part {
+	display: flex;
+	display: -webkit-flex;
+	align-items: center;
+}
+
+.monaco-editor .find-widget.visible,
+.monaco-editor .find-widget.replaceToggled.visible {
+	top: 0;
+}
+
+.monaco-editor .find-widget .monaco-inputbox .input {
+	background-color: transparent;
+	/* Style to compensate for //winjs */
+	min-height: 0;
+}
+
+.monaco-editor .find-widget .replace-input .input {
+	font-size: 13px;
+}
+
+.monaco-editor .find-widget.visible.noanimation {
+	-webkit-transition: none;
+	-o-transition: none;
+	-moz-transition: none;
+	-ms-transition: none;
+	transition: none;
+}
+
+.monaco-editor .find-widget > .find-part,
+.monaco-editor .find-widget > .replace-part {
+	margin: 4px 0 0 17px;
+	font-size: 12px;
+	display: flex;
+	display: -webkit-flex;
+	align-items: center;
+}
+
+.monaco-editor .find-widget > .find-part .monaco-inputbox,
+.monaco-editor .find-widget > .replace-part .monaco-inputbox {
+	height: 25px;
+}
+
+.monaco-editor .find-widget > .find-part .monaco-inputbox > .wrapper > .input {
+	width: 100% !important;
+	padding-right: 66px;
+}
+.monaco-editor .find-widget > .find-part .monaco-inputbox > .wrapper > .input,
+.monaco-editor .find-widget > .replace-part .monaco-inputbox > .wrapper > .input {
+	padding-top: 2px;
+	padding-bottom: 2px;
+}
+
+.monaco-editor .find-widget .monaco-findInput {
+	vertical-align: middle;
+	display: flex;
+	display: -webkit-flex;
+	flex:1;
+}
+
+.monaco-editor .find-widget .matchesCount {
+	display: flex;
+	display: -webkit-flex;
+	flex: initial;
+	margin: 0 1px 0 3px;
+	padding: 2px 2px 0 2px;
+	height: 25px;
+	vertical-align: middle;
+	box-sizing: border-box;
+	text-align: center;
+	line-height: 23px;
+}
+
+.monaco-editor .find-widget .button {
+	min-width: 20px;
+	width: 20px;
+	height: 20px;
+	display: flex;
+	display: -webkit-flex;
+	flex: initial;
+	margin-left: 3px;
+	background-position: center center;
+	background-repeat: no-repeat;
+	cursor: pointer;
+}
+
+.monaco-editor .find-widget .button:not(.disabled):hover {
+	background-color: rgba(0, 0, 0, 0.1);
+}
+
+.monaco-editor .find-widget .button.left {
+	margin-left: 0;
+	margin-right: 3px;
+}
+
+.monaco-editor .find-widget .button.wide {
+	width: auto;
+	padding: 1px 6px;
+	top: -1px;
+}
+
+.monaco-editor .find-widget .button.toggle {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 18px;
+	height: 100%;
+	-webkit-box-sizing:	border-box;
+	-o-box-sizing:		border-box;
+	-moz-box-sizing:	border-box;
+	-ms-box-sizing:		border-box;
+	box-sizing:			border-box;
+}
+
+.monaco-editor .find-widget .button.toggle.disabled {
+	display: none;
+}
+
+.monaco-editor .find-widget .previous {
+	background-image: url('images/previous.svg');
+}
+
+.monaco-editor .find-widget .next {
+	background-image: url('images/next.svg');
+}
+
+.monaco-editor .find-widget .disabled {
+	opacity: 0.3;
+	cursor: default;
+}
+
+.monaco-editor .find-widget .monaco-checkbox {
+	width: 20px;
+	height: 20px;
+	display: inline-block;
+	vertical-align: middle;
+	margin-left: 3px;
+}
+
+.monaco-editor .find-widget .monaco-checkbox .label {
+	content: '';
+	display: inline-block;
+	background-repeat: no-repeat;
+	background-position: 0 0;
+	background-image: url('images/cancelSelectionFind.svg');
+	width: 20px;
+	height: 20px;
+	border: none;
+}
+
+.monaco-editor .find-widget .monaco-checkbox .checkbox:disabled + .label {
+	opacity: 0.3;
+	cursor: default;
+}
+
+.monaco-editor .find-widget .monaco-checkbox .checkbox:not(:disabled) + .label {
+	cursor: pointer;
+}
+
+.monaco-editor .find-widget .monaco-checkbox .checkbox:not(:disabled):hover:before + .label {
+	background-color: #DDD;
+}
+
+.monaco-editor .find-widget .monaco-checkbox .checkbox:checked + .label {
+	background-color: rgba(100, 100, 100, 0.2);
+}
+
+.monaco-editor .find-widget .close-fw {
+	background-image: url('images/close.svg');
+}
+
+.monaco-editor .find-widget .expand {
+	background-image: url('images/expando-expanded.svg');
+}
+
+.monaco-editor .find-widget .collapse {
+	background-image: url('images/expando-collapsed.svg');
+}
+
+.monaco-editor .find-widget .replace {
+	background-image: url('images/replace.svg');
+}
+
+.monaco-editor .find-widget .replace-all {
+	background-image: url('images/replace-all.svg');
+}
+
+.monaco-editor .find-widget > .replace-part {
+	display: none;
+}
+
+.monaco-editor .find-widget > .replace-part > .replace-input {
+	display: flex;
+	display: -webkit-flex;
+	vertical-align: middle;
+	width: auto !important;
+}
+
+/* REDUCED */
+.monaco-editor .find-widget.reduced-find-widget .matchesCount,
+.monaco-editor .find-widget.reduced-find-widget .monaco-checkbox {
+	display:none;
+}
+
+/* NARROW (SMALLER THAN REDUCED) */
+.monaco-editor .find-widget.narrow-find-widget {
+	max-width: 257px !important;
+}
+
+/* COLLAPSED (SMALLER THAN NARROW) */
+.monaco-editor .find-widget.collapsed-find-widget {
+	max-width: 111px !important;
+}
+
+.monaco-editor .find-widget.collapsed-find-widget .button.previous,
+.monaco-editor .find-widget.collapsed-find-widget .button.next,
+.monaco-editor .find-widget.collapsed-find-widget .button.replace,
+.monaco-editor .find-widget.collapsed-find-widget .button.replace-all,
+.monaco-editor .find-widget.collapsed-find-widget > .find-part .monaco-findInput .controls {
+	display:none;
+}
+
+.monaco-editor .find-widget.collapsed-find-widget > .find-part .monaco-inputbox > .wrapper > .input {
+	padding-right: 0px;
+}
+
+.monaco-editor .findMatch {
+	-webkit-animation-duration: 0;
+	-webkit-animation-name: inherit !important;
+	-moz-animation-duration: 0;
+	-moz-animation-name: inherit !important;
+	-ms-animation-duration: 0;
+	-ms-animation-name: inherit !important;
+	animation-duration: 0;
+	animation-name: inherit !important;
+}
+
+.monaco-editor .find-widget .monaco-sash {
+	width: 2px !important;
+	margin-left: -4px;
+}
+
+.monaco-editor.hc-black .find-widget .previous,
+.monaco-editor.vs-dark .find-widget .previous {
+	background-image: url('images/previous-inverse.svg');
+}
+
+.monaco-editor.hc-black .find-widget .next,
+.monaco-editor.vs-dark .find-widget .next {
+	background-image: url('images/next-inverse.svg');
+}
+
+.monaco-editor.hc-black .find-widget .monaco-checkbox .label,
+.monaco-editor.vs-dark .find-widget .monaco-checkbox .label {
+	background-image: url('images/cancelSelectionFind-inverse.svg');
+}
+
+.monaco-editor.vs-dark .find-widget .monaco-checkbox .checkbox:not(:disabled):hover:before + .label {
+	background-color: rgba(255, 255, 255, 0.1);
+}
+
+.monaco-editor.vs-dark .find-widget .monaco-checkbox .checkbox:checked + .label {
+	background-color: rgba(255, 255, 255, 0.1);
+}
+
+.monaco-editor.hc-black .find-widget .close-fw,
+.monaco-editor.vs-dark .find-widget .close-fw {
+	background-image: url('images/close-dark.svg');
+}
+
+.monaco-editor.hc-black .find-widget .replace,
+.monaco-editor.vs-dark .find-widget .replace {
+	background-image: url('images/replace-inverse.svg');
+}
+
+.monaco-editor.hc-black .find-widget .replace-all,
+.monaco-editor.vs-dark .find-widget .replace-all {
+	background-image: url('images/replace-all-inverse.svg');
+}
+
+.monaco-editor.hc-black .find-widget .expand,
+.monaco-editor.vs-dark .find-widget .expand {
+	background-image: url('images/expando-expanded-dark.svg');
+}
+
+.monaco-editor.hc-black .find-widget .collapse,
+.monaco-editor.vs-dark .find-widget .collapse {
+	background-image: url('images/expando-collapsed-dark.svg');
+}
+
+.monaco-editor.hc-black .find-widget .button:not(.disabled):hover,
+.monaco-editor.vs-dark .find-widget .button:not(.disabled):hover {
+	background-color: rgba(255, 255, 255, 0.1);
+}
+
+.monaco-editor.hc-black .find-widget .button:before {
+	position: relative;
+	top: 1px;
+	left: 2px;
+}
+
+.monaco-editor.hc-black .find-widget .monaco-checkbox .checkbox:checked + .label {
+	background-color: rgba(255, 255, 255, 0.1);
+}

src/vs/editor/contrib/find/browser/images/cancelSelectionFind-inverse.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
+<g transform="translate(0,-1032.3622)">
+  <rect width="9" height="2" x="2" y="1046.3622" style="fill:#C5C5C5;fill-opacity:1;stroke:none" />
+  <rect width="13" height="2" x="2" y="1043.3622" style="fill:#C5C5C5;fill-opacity:1;stroke:none" />
+  <rect width="6" height="2" x="2" y="1040.3622" style="fill:#C5C5C5;fill-opacity:1;stroke:none" />
+  <rect width="12" height="2" x="2" y="1037.3622" style="fill:#C5C5C5;fill-opacity:1;stroke:none" />
+</g>
+</svg>

src/vs/editor/contrib/find/browser/images/cancelSelectionFind.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
+<g transform="translate(0,-1032.3622)">
+  <rect width="9" height="2" x="2" y="1046.3622" style="fill:#424242;fill-opacity:1;stroke:none" />
+  <rect width="13" height="2" x="2" y="1043.3622" style="fill:#424242;fill-opacity:1;stroke:none" />
+  <rect width="6" height="2" x="2" y="1040.3622" style="fill:#424242;fill-opacity:1;stroke:none" />
+  <rect width="12" height="2" x="2" y="1037.3622" style="fill:#424242;fill-opacity:1;stroke:none" />
+</g>
+</svg>

src/vs/editor/contrib/find/browser/images/close-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="3 3 16 16" enable-background="new 3 3 16 16"><polygon fill="#e8e8e8" points="12.597,11.042 15.4,13.845 13.844,15.4 11.042,12.598 8.239,15.4 6.683,13.845 9.485,11.042 6.683,8.239 8.238,6.683 11.042,9.486 13.845,6.683 15.4,8.239"/></svg>

src/vs/editor/contrib/find/browser/images/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="3 3 16 16" enable-background="new 3 3 16 16"><polygon fill="#424242" points="12.597,11.042 15.4,13.845 13.844,15.4 11.042,12.598 8.239,15.4 6.683,13.845 9.485,11.042 6.683,8.239 8.238,6.683 11.042,9.486 13.845,6.683 15.4,8.239"/></svg>

src/vs/editor/contrib/find/browser/images/expando-collapsed-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#e8e8e8" d="M6 4v8l4-4-4-4zm1 2.414l1.586 1.586-1.586 1.586v-3.172z"/></svg>

src/vs/editor/contrib/find/browser/images/expando-collapsed.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#646465" d="M6 4v8l4-4-4-4zm1 2.414l1.586 1.586-1.586 1.586v-3.172z"/></svg>

src/vs/editor/contrib/find/browser/images/expando-expanded-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#e8e8e8" d="M11 10.07h-5.656l5.656-5.656v5.656z"/></svg>

src/vs/editor/contrib/find/browser/images/expando-expanded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#646465" d="M11 10.07h-5.656l5.656-5.656v5.656z"/></svg>

src/vs/editor/contrib/find/browser/images/next-inverse.svg

@@ -0,0 +1,5 @@
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" width="16px" height="16px" viewBox="-1 -3 16 16" enable-background="new -1 -3 16 16" xml:space="preserve">
+<path fill="#C5C5C5" d="M1,4h7L5,1h3l4,4L8,9H5l3-3H1V4z"/>
+</svg>

src/vs/editor/contrib/find/browser/images/next.svg

@@ -0,0 +1,5 @@
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" width="16px" height="16px" viewBox="-1 -3 16 16" enable-background="new -1 -3 16 16" xml:space="preserve">
+<path fill="#424242" d="M1,4h7L5,1h3l4,4L8,9H5l3-3H1V4z"/>
+</svg>

src/vs/editor/contrib/find/browser/images/previous-inverse.svg

@@ -0,0 +1,5 @@
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" width="16px" height="16px" viewBox="-1 -3 16 16" enable-background="new -1 -3 16 16" xml:space="preserve">
+<polygon fill="#C5C5C5" points="13,4 6,4 9,1 6,1 2,5 6,9 9,9 6,6 13,6 "/>
+</svg>

src/vs/editor/contrib/find/browser/images/previous.svg

@@ -0,0 +1,5 @@
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" width="16px" height="16px" viewBox="-1 -3 16 16" enable-background="new -1 -3 16 16" xml:space="preserve">
+<polygon fill="#424242" points="13,4 6,4 9,1 6,1 2,5 6,9 9,9 6,6 13,6 "/>
+</svg>

src/vs/editor/contrib/find/browser/images/replace-all-inverse.svg

@@ -0,0 +1,11 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px"
+	 height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
+<g id="icon_x5F_bg">
+	<path fill="#C5C5C5" d="M11,15V9H1v6H11z M2,14v-2h1v-1H2v-1h3v4H2z M10,11H8v2h2v1H7v-4h3V11z M3,13v-1h1v1H3z M13,7v6h-1V8H5V7
+		H13z M13,2V1h-1v5h3V2H13z M14,5h-1V3h1V5z M11,2v4H8V4h1v1h1V4H9V3H8V2H11z"/>
+</g>
+<g id="color_x5F_action">
+	<path fill="#75BEFF" d="M1.979,3.5L2,6L1,5v1.5L2.5,8L4,6.5V5L3,6L2.979,3.5c0-0.275,0.225-0.5,0.5-0.5H7V2H3.479
+		C2.651,2,1.979,2.673,1.979,3.5z"/>
+</g>
+</svg>

src/vs/editor/contrib/find/browser/images/replace-all.svg

@@ -0,0 +1,11 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px"
+	 height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
+<g id="icon_x5F_bg">
+	<path fill="#424242" d="M11,15V9H1v6H11z M2,14v-2h1v-1H2v-1h3v4H2z M10,11H8v2h2v1H7v-4h3V11z M3,13v-1h1v1H3z M13,7v6h-1V8H5V7
+		H13z M13,2V1h-1v5h3V2H13z M14,5h-1V3h1V5z M11,2v4H8V4h1v1h1V4H9V3H8V2H11z"/>
+</g>
+<g id="color_x5F_action">
+	<path fill="#00539C" d="M1.979,3.5L2,6L1,5v1.5L2.5,8L4,6.5V5L3,6L2.979,3.5c0-0.275,0.225-0.5,0.5-0.5H7V2H3.479
+		C2.651,2,1.979,2.673,1.979,3.5z"/>
+</g>
+</svg>

src/vs/editor/contrib/find/browser/images/replace-inverse.svg

@@ -0,0 +1,13 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px"
+	 height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
+<g id="icon_x5F_bg">
+	<g>
+		<path fill="#C5C5C5" d="M11,3V1h-1v5v1h1h2h1V4V3H11z M13,6h-2V4h2V6z"/>
+		<path fill="#C5C5C5" d="M2,15h7V9H2V15z M4,10h3v1H5v2h2v1H4V10z"/>
+	</g>
+</g>
+<g id="color_x5F_importance">
+	<path fill="#75BEFF" d="M3.979,3.5L4,6L3,5v1.5L4.5,8L6,6.5V5L5,6L4.979,3.5c0-0.275,0.225-0.5,0.5-0.5H9V2H5.479
+		C4.651,2,3.979,2.673,3.979,3.5z"/>
+</g>
+</svg>

src/vs/editor/contrib/find/browser/images/replace.svg

@@ -0,0 +1,13 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px"
+	 height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
+<g id="icon_x5F_bg">
+	<g>
+		<path fill="#424242" d="M11,3V1h-1v5v1h1h2h1V4V3H11z M13,6h-2V4h2V6z"/>
+		<path fill="#424242" d="M2,15h7V9H2V15z M4,10h3v1H5v2h2v1H4V10z"/>
+	</g>
+</g>
+<g id="color_x5F_importance">
+	<path fill="#00539C" d="M3.979,3.5L4,6L3,5v1.5L4.5,8L6,6.5V5L5,6L4.979,3.5c0-0.275,0.225-0.5,0.5-0.5H9V2H5.479
+		C4.651,2,3.979,2.673,3.979,3.5z"/>
+</g>
+</svg>

src/vs/editor/contrib/find/browser/simpleFindWidget.css

@@ -0,0 +1,82 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+.monaco-workbench .simple-find-part {
+	z-index: 10;
+	position: absolute;
+	top: -40px;
+	right: 28px;
+	display: flex;
+	padding: 4px;
+	align-items: center;
+	width: 220px;
+	max-width: calc(100% - 28px - 28px - 8px);
+
+	-webkit-transition: top 200ms linear;
+	-o-transition: top 200ms linear;
+	-moz-transition: top 200ms linear;
+	-ms-transition: top 200ms linear;
+	transition: top 200ms linear;
+}
+
+.monaco-workbench .simple-find-part.visible {
+	top: 0;
+}
+
+.monaco-workbench .simple-find-part .monaco-findInput {
+	flex: 1;
+}
+
+/* Temporarily we don't show match numbers */
+.monaco-workbench .simple-find-part .monaco-findInput .controls {
+	display: none;
+}
+.monaco-workbench .simple-find-part .monaco-findInput .monaco-inputbox .wrapper .input {
+	width: 100% !important;
+}
+
+.monaco-workbench .simple-find-part .button {
+	min-width: 20px;
+	width: 20px;
+	height: 20px;
+	display: flex;
+	flex: initial;
+	margin-left: 3px;
+	background-position: center center;
+	background-repeat: no-repeat;
+	cursor: pointer;
+}
+
+.monaco-workbench .simple-find-part .button.previous {
+	background-image: url('images/previous.svg');
+}
+
+.monaco-workbench .simple-find-part .button.next {
+	background-image: url('images/next.svg');
+}
+
+.monaco-workbench .simple-find-part .button.close-fw {
+	background-image: url('images/close.svg');
+}
+
+.hc-black .monaco-workbench .simple-find-part .button.previous,
+.vs-dark .monaco-workbench .simple-find-part .button.previous {
+	background-image: url('images/previous-inverse.svg');
+}
+
+.hc-black .monaco-workbench .simple-find-part .button.next,
+.vs-dark .monaco-workbench .simple-find-part .button.next {
+	background-image: url('images/next-inverse.svg');
+}
+
+.hc-black .monaco-workbench .simple-find-part .button.close-fw,
+.vs-dark .monaco-workbench .simple-find-part .button.close-fw {
+	background-image: url('images/close-dark.svg');
+}
+
+monaco-workbench .simple-find-part .button.disabled {
+	opacity: 0.3;
+	cursor: default;
+}

src/vs/editor/contrib/find/browser/simpleFindWidget.ts

@@ -0,0 +1,223 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import 'vs/css!./simpleFindWidget';
+import * as nls from 'vs/nls';
+import { Widget } from 'vs/base/browser/ui/widget';
+import { Delayer } from 'vs/base/common/async';
+import { HistoryNavigator } from 'vs/base/common/history';
+import { KeyCode, KeyMod } from 'vs/base/common/keyCodes';
+import * as dom from 'vs/base/browser/dom';
+import { FindInput } from 'vs/base/browser/ui/findinput/findInput';
+import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
+import { registerThemingParticipant, ITheme } from 'vs/platform/theme/common/themeService';
+import { inputBackground, inputActiveOptionBorder, inputForeground, inputBorder, inputValidationInfoBackground, inputValidationInfoBorder, inputValidationWarningBackground, inputValidationWarningBorder, inputValidationErrorBackground, inputValidationErrorBorder, editorWidgetBackground, widgetShadow } from 'vs/platform/theme/common/colorRegistry';
+import { SimpleButton } from './findWidget';
+
+const NLS_FIND_INPUT_LABEL = nls.localize('label.find', "Find");
+const NLS_FIND_INPUT_PLACEHOLDER = nls.localize('placeholder.find', "Find");
+const NLS_PREVIOUS_MATCH_BTN_LABEL = nls.localize('label.previousMatchButton', "Previous match");
+const NLS_NEXT_MATCH_BTN_LABEL = nls.localize('label.nextMatchButton', "Next match");
+const NLS_CLOSE_BTN_LABEL = nls.localize('label.closeButton', "Close");
+
+export abstract class SimpleFindWidget extends Widget {
+	protected _findInput: FindInput;
+	protected _domNode: HTMLElement;
+	protected _isVisible: boolean;
+	protected _focusTracker: dom.IFocusTracker;
+	protected _findInputFocusTracker: dom.IFocusTracker;
+	protected _findHistory: HistoryNavigator<string>;
+	protected _updateHistoryDelayer: Delayer<void>;
+
+	constructor(
+		@IContextViewService private _contextViewService: IContextViewService,
+		private animate: boolean = true
+	) {
+		super();
+		this._findInput = this._register(new FindInput(null, this._contextViewService, {
+			label: NLS_FIND_INPUT_LABEL,
+			placeholder: NLS_FIND_INPUT_PLACEHOLDER,
+		}));
+
+		// Find History with update delayer
+		this._findHistory = new HistoryNavigator<string>();
+		this._updateHistoryDelayer = new Delayer<void>(500);
+
+		this.oninput(this._findInput.domNode, (e) => {
+			this.onInputChanged();
+			this._delayedUpdateHistory();
+		});
+
+		this._register(this._findInput.onKeyDown((e) => {
+			if (e.equals(KeyCode.Enter)) {
+				this.find(false);
+				e.preventDefault();
+				return;
+			}
+
+			if (e.equals(KeyMod.Shift | KeyCode.Enter)) {
+				this.find(true);
+				e.preventDefault();
+				return;
+			}
+		}));
+
+		let prevBtn = new SimpleButton({
+			label: NLS_PREVIOUS_MATCH_BTN_LABEL,
+			className: 'previous',
+			onTrigger: () => {
+				this.find(true);
+			},
+			onKeyDown: (e) => { }
+		});
+
+		let nextBtn = new SimpleButton({
+			label: NLS_NEXT_MATCH_BTN_LABEL,
+			className: 'next',
+			onTrigger: () => {
+				this.find(false);
+			},
+			onKeyDown: (e) => { }
+		});
+
+		let closeBtn = new SimpleButton({
+			label: NLS_CLOSE_BTN_LABEL,
+			className: 'close-fw',
+			onTrigger: () => {
+				this.hide();
+			},
+			onKeyDown: (e) => { }
+		});
+
+		this._domNode = document.createElement('div');
+		this._domNode.classList.add('simple-find-part');
+		this._domNode.appendChild(this._findInput.domNode);
+		this._domNode.appendChild(prevBtn.domNode);
+		this._domNode.appendChild(nextBtn.domNode);
+		this._domNode.appendChild(closeBtn.domNode);
+
+		this.onkeyup(this._domNode, e => {
+			if (e.equals(KeyCode.Escape)) {
+				this.hide();
+				e.preventDefault();
+				return;
+			}
+		});
+
+		this._focusTracker = this._register(dom.trackFocus(this._domNode));
+		this._register(this._focusTracker.addFocusListener(this.onFocusTrackerFocus.bind(this)));
+		this._register(this._focusTracker.addBlurListener(this.onFocusTrackerBlur.bind(this)));
+
+		this._findInputFocusTracker = this._register(dom.trackFocus(this._findInput.domNode));
+		this._register(this._findInputFocusTracker.addFocusListener(this.onFindInputFocusTrackerFocus.bind(this)));
+		this._register(this._findInputFocusTracker.addBlurListener(this.onFindInputFocusTrackerBlur.bind(this)));
+
+		this._register(dom.addDisposableListener(this._domNode, 'click', (event) => {
+			event.stopPropagation();
+		}));
+	}
+
+	protected abstract onInputChanged();
+	protected abstract find(previous: boolean);
+	protected abstract onFocusTrackerFocus();
+	protected abstract onFocusTrackerBlur();
+	protected abstract onFindInputFocusTrackerFocus();
+	protected abstract onFindInputFocusTrackerBlur();
+
+	protected get inputValue() {
+		return this._findInput.getValue();
+	}
+
+	public updateTheme(theme?: ITheme): void {
+		let inputStyles = {
+			inputActiveOptionBorder: theme.getColor(inputActiveOptionBorder),
+			inputBackground: theme.getColor(inputBackground),
+			inputForeground: theme.getColor(inputForeground),
+			inputBorder: theme.getColor(inputBorder),
+			inputValidationInfoBackground: theme.getColor(inputValidationInfoBackground),
+			inputValidationInfoBorder: theme.getColor(inputValidationInfoBorder),
+			inputValidationWarningBackground: theme.getColor(inputValidationWarningBackground),
+			inputValidationWarningBorder: theme.getColor(inputValidationWarningBorder),
+			inputValidationErrorBackground: theme.getColor(inputValidationErrorBackground),
+			inputValidationErrorBorder: theme.getColor(inputValidationErrorBorder)
+		};
+		this._findInput.style(inputStyles);
+	}
+
+	public getDomNode(): HTMLElement {
+		return this._domNode;
+	}
+
+	public reveal(initialInput?: string): void {
+		if (initialInput) {
+			this._findInput.setValue(initialInput);
+		}
+
+		if (this._isVisible) {
+			this._findInput.select();
+			return;
+		}
+
+		this._isVisible = true;
+
+		setTimeout(() => {
+			dom.addClass(this._domNode, 'visible');
+			this._domNode.setAttribute('aria-hidden', 'false');
+			if (!this.animate) {
+				dom.addClass(this._domNode, 'noanimation');
+			}
+			setTimeout(() => {
+				dom.removeClass(this._domNode, 'noanimation');
+				this._findInput.select();
+			}, 200);
+		}, 0);
+	}
+
+	public hide(): void {
+		if (this._isVisible) {
+			this._isVisible = false;
+
+			dom.removeClass(this._domNode, 'visible');
+			this._domNode.setAttribute('aria-hidden', 'true');
+		}
+	}
+
+	protected _delayedUpdateHistory() {
+		this._updateHistoryDelayer.trigger(this._updateHistory.bind(this));
+	}
+
+	protected _updateHistory() {
+		if (this.inputValue) {
+			this._findHistory.add(this._findInput.getValue());
+		}
+	}
+
+	public showNextFindTerm() {
+		let next = this._findHistory.next();
+		if (next) {
+			this._findInput.setValue(next);
+		}
+	}
+
+	public showPreviousFindTerm() {
+		let previous = this._findHistory.previous();
+		if (previous) {
+			this._findInput.setValue(previous);
+		}
+	}
+}
+
+// theming
+registerThemingParticipant((theme, collector) => {
+	const findWidgetBGColor = theme.getColor(editorWidgetBackground);
+	if (findWidgetBGColor) {
+		collector.addRule(`.monaco-workbench .simple-find-part { background-color: ${findWidgetBGColor} !important; }`);
+	}
+
+	let widgetShadowColor = theme.getColor(widgetShadow);
+	if (widgetShadowColor) {
+		collector.addRule(`.monaco-workbench .simple-find-part { box-shadow: 0 2px 8px ${widgetShadowColor}; }`);
+	}
+});