Clean up from microsoft#68977 and microsoft#68467 - size all findInputs with css width instead of code

roblourens · roblourens · commit bbff11633c7e · 2019-02-19T23:27:08.000Z
diff --git a/src/vs/base/browser/ui/findinput/findInput.css b/src/vs/base/browser/ui/findinput/findInput.css
@@ -13,10 +13,6 @@
 	width: 100%;
 }
 
-.monaco-findInput .monaco-inputbox > .wrapper > .input {
-	width: 100% !important;
-}
-
 .monaco-findInput > .controls {
 	position: absolute;
 	top: 3px;
diff --git a/src/vs/base/browser/ui/findinput/findInput.ts b/src/vs/base/browser/ui/findinput/findInput.ts
@@ -42,7 +42,6 @@ export class FindInput extends Widget {
 	static readonly OPTION_CHANGE: string = 'optionChange';
 
 	private contextViewProvider: IContextViewProvider;
-	private width: number;
 	private placeholder: string;
 	private validation?: IInputValidator;
 	private label: string;
@@ -93,7 +92,6 @@ export class FindInput extends Widget {
 	constructor(parent: HTMLElement | null, contextViewProvider: IContextViewProvider, private readonly _showOptionButtons: boolean, options: IFindInputOptions) {
 		super();
 		this.contextViewProvider = contextViewProvider;
-		this.width = options.width || 100;
 		this.placeholder = options.placeholder || '';
 		this.validation = options.validation;
 		this.label = options.label || NLS_DEFAULT_LABEL;
@@ -159,13 +157,6 @@ export class FindInput extends Widget {
 		this.focus();
 	}
 
-	public setWidth(newWidth: number): void {
-		this.width = newWidth;
-		this.domNode.style.width = this.width + 'px';
-		this.contextViewProvider.layout();
-		this.setInputWidth();
-	}
-
 	public getValue(): string {
 		return this.inputBox.value;
 	}
@@ -240,7 +231,6 @@ export class FindInput extends Widget {
 
 	public setCaseSensitive(value: boolean): void {
 		this.caseSensitive.checked = value;
-		this.setInputWidth();
 	}
 
 	public getWholeWords(): boolean {
@@ -249,7 +239,6 @@ export class FindInput extends Widget {
 
 	public setWholeWords(value: boolean): void {
 		this.wholeWords.checked = value;
-		this.setInputWidth();
 	}
 
 	public getRegex(): boolean {
@@ -258,7 +247,6 @@ export class FindInput extends Widget {
 
 	public setRegex(value: boolean): void {
 		this.regex.checked = value;
-		this.setInputWidth();
 		this.validate();
 	}
 
@@ -277,15 +265,8 @@ export class FindInput extends Widget {
 		dom.addClass(this.domNode, 'highlight-' + (this._lastHighlightFindOptions));
 	}
 
-	private setInputWidth(): void {
-		let w = this.width - this.caseSensitive.width() - this.wholeWords.width() - this.regex.width();
-		this.inputBox.width = w;
-		this.inputBox.layout();
-	}
-
 	private buildDomNode(appendCaseSensitiveLabel: string, appendWholeWordsLabel: string, appendRegexLabel: string, history: string[], flexibleHeight: boolean): void {
 		this.domNode = document.createElement('div');
-		this.domNode.style.width = this.width + 'px';
 		dom.addClass(this.domNode, 'monaco-findInput');
 
 		this.inputBox = this._register(new HistoryInputBox(this.domNode, this.contextViewProvider, {
@@ -320,7 +301,6 @@ export class FindInput extends Widget {
 			if (!viaKeyboard && this.fixFocusOnOptionClickEnabled) {
 				this.inputBox.focus();
 			}
-			this.setInputWidth();
 			this.validate();
 		}));
 		this._register(this.regex.onKeyDown(e => {
@@ -337,7 +317,6 @@ export class FindInput extends Widget {
 			if (!viaKeyboard && this.fixFocusOnOptionClickEnabled) {
 				this.inputBox.focus();
 			}
-			this.setInputWidth();
 			this.validate();
 		}));
 
@@ -351,7 +330,6 @@ export class FindInput extends Widget {
 			if (!viaKeyboard && this.fixFocusOnOptionClickEnabled) {
 				this.inputBox.focus();
 			}
-			this.setInputWidth();
 			this.validate();
 		}));
 		this._register(this.caseSensitive.onKeyDown(e => {
@@ -390,7 +368,6 @@ export class FindInput extends Widget {
 			}
 		});
 
-		this.setInputWidth();
 
 		let controls = document.createElement('div');
 		controls.className = 'controls';
diff --git a/src/vs/workbench/contrib/search/browser/media/searchview.css b/src/vs/workbench/contrib/search/browser/media/searchview.css
@@ -51,6 +51,7 @@
 .search-view .search-widget .monaco-findInput {
 	display: inline-block;
 	vertical-align: middle;
+	width: 100%;
 }
 
 .search-view .search-widget .replace-container {
diff --git a/src/vs/workbench/contrib/search/browser/searchWidget.ts b/src/vs/workbench/contrib/search/browser/searchWidget.ts
@@ -169,7 +169,6 @@ export class SearchWidget extends Widget {
 	}
 
 	setWidth(width: number) {
-		this.searchInput.setWidth(width);
 		this.replaceInput.width = width - 28;
 		this.replaceInput.layout();
 	}

Original file line number	Diff line number	Diff line change
`@@ -51,6 +51,7 @@`
`51`	`51`	`.search-view .search-widget .monaco-findInput {`
`52`	`52`	`display: inline-block;`
`53`	`53`	`vertical-align: middle;`
	`54`	`+ width: 100%;`
`54`	`55`	`}`
`55`	`56`
`56`	`57`	`.search-view .search-widget .replace-container {`
Original file line number	Diff line number	Diff line change
`@@ -169,7 +169,6 @@ export class SearchWidget extends Widget {`
`169`	`169`	`}`
`170`	`170`
`171`	`171`	`setWidth(width: number) {`
`172`		`- this.searchInput.setWidth(width);`
`173`	`172`	`this.replaceInput.width = width - 28;`
`174`	`173`	`this.replaceInput.layout();`
`175`	`174`	`}`