Fixes #2338: Adaptive layout for the find widget

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

@@ -247,6 +247,35 @@
 	width: 100%;
 }
 
+/* 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 > .find-part .monaco-findInput,
+.monaco-editor .find-widget.narrow-find-widget > .replace-part .replace-input {
+	width: 171px !important;
+}
+.monaco-editor .find-widget.narrow-find-widget > .find-part .monaco-inputbox > .wrapper > .input {
+	width: 105px !important;
+}
+
+/* COLLAPSED (SMALLER THAN NARROW) */
+.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-findInput,
+.monaco-editor .find-widget.collapsed-find-widget > .replace-part .replace-input,
+.monaco-editor .find-widget.collapsed-find-widget > .find-part .monaco-inputbox > .wrapper > .input {
+	width: 71px !important;
+}
+
 .monaco-editor .findMatch {
 	background-color: rgba(234, 92, 0, 0.3);
 	-webkit-animation-duration: 0;

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

@@ -46,6 +46,7 @@ const NLS_MATCHES_LOCATION = nls.localize('label.matchesLocation', "{0} of {1}")
 const NLS_NO_RESULTS = nls.localize('label.noResults', "No results");
 
 let MAX_MATCHES_COUNT_WIDTH = 69;
+const WIDGET_FIXED_WIDTH = 411 - 69;
 
 export class FindWidget extends Widget implements IOverlayWidget {
 
@@ -102,6 +103,26 @@ export class FindWidget extends Widget implements IOverlayWidget {
 		this._buildDomNode();
 		this._updateButtons();
 
+		let checkEditorWidth = () => {
+			let editorWidth = this._codeEditor.getConfiguration().layoutInfo.width;
+			let collapsedFindWidget = false;
+			let reducedFindWidget = false;
+			let narrowFindWidget = false;
+			if (WIDGET_FIXED_WIDTH + 28 >= editorWidth + 50) {
+				collapsedFindWidget = true;
+			}
+			if (WIDGET_FIXED_WIDTH + 28 >= editorWidth) {
+				narrowFindWidget = true;
+			}
+			if (WIDGET_FIXED_WIDTH + MAX_MATCHES_COUNT_WIDTH + 28 >= editorWidth) {
+				reducedFindWidget = true;
+			}
+			dom.toggleClass(this._domNode, 'collapsed-find-widget', collapsedFindWidget);
+			dom.toggleClass(this._domNode, 'reduced-find-widget', reducedFindWidget);
+			dom.toggleClass(this._domNode, 'narrow-find-widget', narrowFindWidget);
+		};
+		checkEditorWidth();
+
 		this._register(this._codeEditor.onDidChangeConfiguration((e:IConfigurationChangedEvent) => {
 			if (e.readOnly) {
 				if (this._codeEditor.getConfiguration().readOnly) {
@@ -110,6 +131,9 @@ export class FindWidget extends Widget implements IOverlayWidget {
 				}
 				this._updateButtons();
 			}
+			if (e.layoutInfo) {
+				checkEditorWidth();
+			}
 		}));
 		this._register(this._codeEditor.onDidChangeCursorSelection(() => {
 			if (this._isVisible) {