Support multiline find widget in monaco.

rebornix · rebornix · commit e558dc6ea73a · 2019-08-21T18:25:03.000-07:00
diff --git a/src/vs/base/browser/ui/inputbox/inputBox.css b/src/vs/base/browser/ui/inputbox/inputBox.css
@@ -60,6 +60,8 @@
 	display: block;
 	-ms-overflow-style: none; /* IE 10+ */
 	overflow: -moz-scrollbars-none; /* Firefox */
+	scrollbar-width: none; /* Firefox ^64 */
+	outline: none;
 }
 
 .monaco-inputbox > .wrapper > textarea.input::-webkit-scrollbar {
diff --git a/src/vs/editor/contrib/find/findWidget.css b/src/vs/editor/contrib/find/findWidget.css
@@ -71,6 +71,11 @@
 	bottom: unset;
 }
 
+.monaco-editor .find-widget .monaco-inputbox.synthetic-focus {
+	outline: 1px solid -webkit-focus-ring-color;
+	outline-offset: -1px;
+}
+
 .monaco-editor .find-widget .monaco-inputbox .input {
 	background-color: transparent;
 	/* Style to compensate for //winjs */
diff --git a/src/vs/editor/contrib/find/findWidget.ts b/src/vs/editor/contrib/find/findWidget.ts
@@ -29,7 +29,7 @@ import { CONTEXT_FIND_INPUT_FOCUSED, CONTEXT_REPLACE_INPUT_FOCUSED, FIND_IDS, MA
 import { FindReplaceState, FindReplaceStateChangedEvent } from 'vs/editor/contrib/find/findState';
 import { IContextKey, IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
 import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
-import { contrastBorder, editorFindMatch, editorFindMatchBorder, editorFindMatchHighlight, editorFindMatchHighlightBorder, editorFindRangeHighlight, editorFindRangeHighlightBorder, editorWidgetBackground, editorWidgetBorder, editorWidgetResizeBorder, errorForeground, inputActiveOptionBorder, inputActiveOptionBackground, inputBackground, inputBorder, inputForeground, inputValidationErrorBackground, inputValidationErrorBorder, inputValidationErrorForeground, inputValidationInfoBackground, inputValidationInfoBorder, inputValidationInfoForeground, inputValidationWarningBackground, inputValidationWarningBorder, inputValidationWarningForeground, widgetShadow, editorWidgetForeground } from 'vs/platform/theme/common/colorRegistry';
+import { contrastBorder, editorFindMatch, editorFindMatchBorder, editorFindMatchHighlight, editorFindMatchHighlightBorder, editorFindRangeHighlight, editorFindRangeHighlightBorder, editorWidgetBackground, editorWidgetBorder, editorWidgetResizeBorder, errorForeground, inputActiveOptionBorder, inputActiveOptionBackground, inputBackground, inputBorder, inputForeground, inputValidationErrorBackground, inputValidationErrorBorder, inputValidationErrorForeground, inputValidationInfoBackground, inputValidationInfoBorder, inputValidationInfoForeground, inputValidationWarningBackground, inputValidationWarningBorder, inputValidationWarningForeground, widgetShadow, editorWidgetForeground, focusBorder } from 'vs/platform/theme/common/colorRegistry';
 import { ITheme, IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
 import { ContextScopedFindInput, ContextScopedReplaceInput } from 'vs/platform/browser/contextScopedHistoryWidget';
 import { AccessibilitySupport } from 'vs/platform/accessibility/common/accessibility';
@@ -894,8 +894,8 @@ export class FindWidget extends Widget implements IOverlayWidget, IHorizontalSas
 	}
 
 	private _buildDomNode(): void {
-		const flexibleHeight = platform.isNative;
-		const flexibleWidth = platform.isNative;
+		const flexibleHeight = true;
+		const flexibleWidth = true;
 		// Find input
 		this._findInput = this._register(new ContextScopedFindInput(null, this._contextViewProvider, {
 			width: FIND_INPUT_AREA_WIDTH,
@@ -1402,4 +1402,11 @@ registerThemingParticipant((theme, collector) => {
 	if (inputActiveBackground) {
 		collector.addRule(`.monaco-editor .find-widget .monaco-checkbox .checkbox:checked + .label { background-color: ${inputActiveBackground.toString()}; }`);
 	}
+
+	// This rule is used to override the outline color for synthetic-focus find input.
+	const focusOutline = theme.getColor(focusBorder);
+	if (focusOutline) {
+		collector.addRule(`.monaco-workbench .monaco-editor .find-widget .monaco-inputbox.synthetic-focus { outline-color: ${focusOutline}; }`);
+
+	}
 });

Original file line number	Diff line number	Diff line change
`@@ -60,6 +60,8 @@`
`60`	`60`	`display: block;`
`61`	`61`	`-ms-overflow-style: none; /* IE 10+ */`
`62`	`62`	`overflow: -moz-scrollbars-none; /* Firefox */`
	`63`	`+ scrollbar-width: none; /* Firefox ^64 */`
	`64`	`+ outline: none;`
`63`	`65`	`}`
`64`	`66`
`65`	`67`	`.monaco-inputbox > .wrapper > textarea.input::-webkit-scrollbar {`