Add fuzzy toggle button and correctly hide ranges for most relevant section

src/vs/workbench/parts/preferences/browser/media/preferences.css

@@ -73,18 +73,34 @@
 	padding-right: 32px;
 }
 
-.settings-header-widget > .settings-count-widget {
+.settings-header-widget > .settings-search-controls > .settings-count-widget {
 	margin: 6px 0px;
 	padding: 0px 8px;
+	border-radius: 2px;
+	float: left;
+}
+
+.settings-header-widget > .settings-search-controls {
 	position: absolute;
 	right: 10px;
-	border-radius: 2px;
 }
 
-.settings-header-widget > .settings-count-widget.hide {
+.settings-header-widget > .settings-search-controls > .settings-count-widget.hide {
 	display: none;
 }
 
+.settings-header-widget>.settings-search-controls>.prefs-fuzzy-search-toggle {
+	margin: 5px 3px 5px 0px;
+}
+
+.vs .settings-header-widget > .settings-search-controls > .prefs-fuzzy-search-toggle {
+	background: url('regex.svg') center center no-repeat;
+}
+
+.vs-dark .settings-header-widget > .settings-search-controls > .prefs-fuzzy-search-toggle {
+	background: url('regex-dark.svg') center center no-repeat;
+}
+
 .settings-header-widget > .settings-search-container {
 	flex: 1;
 }

src/vs/workbench/parts/preferences/browser/media/regex-dark.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><polygon fill="#2d2d30" points="13.64,7.396 12.169,2.898 10.706,3.761 11.087,2 6.557,2 6.936,3.762 5.473,2.898 4,7.396 5.682,7.554 4.513,8.561 5.013,9 2,9 2,14 7,14 7,10.747 7.978,11.606 8.82,9.725 9.661,11.602 13.144,8.562 11.968,7.554"/><g fill="#C5C5C5"><path d="M12.301 6.518l-2.772.262 2.086 1.788-1.594 1.392-1.201-2.682-1.201 2.682-1.583-1.392 2.075-1.788-2.771-.262.696-2.126 2.358 1.392-.599-2.784h2.053l-.602 2.783 2.359-1.392.696 2.127z"/><rect x="3" y="10" width="3" height="3"/></g></svg>
\ No newline at end of file

src/vs/workbench/parts/preferences/browser/media/regex.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><polygon fill="#F6F6F6" points="13.64,7.396 12.169,2.898 10.706,3.761 11.087,2 6.557,2 6.936,3.762 5.473,2.898 4,7.396 5.682,7.554 4.513,8.561 5.013,9 2,9 2,14 7,14 7,10.747 7.978,11.606 8.82,9.725 9.661,11.602 13.144,8.562 11.968,7.554"/><g fill="#424242"><path d="M12.301 6.518l-2.772.262 2.086 1.788-1.594 1.392-1.201-2.682-1.201 2.682-1.583-1.392 2.075-1.788-2.771-.262.696-2.126 2.358 1.392-.599-2.784h2.053l-.602 2.783 2.359-1.392.696 2.127z"/><rect x="3" y="10" width="3" height="3"/></g></svg>
\ No newline at end of file

src/vs/workbench/parts/preferences/browser/preferencesEditor.ts

@@ -247,7 +247,7 @@ export class PreferencesEditor extends BaseEditor {
 	}
 
 	private onInputChanged(): void {
-		if (this.searchProvider.remoteSearchEnabled) {
+		if (this.searchWidget.fuzzyEnabled) {
 			this.onInput.fire();
 		} else {
 			this.filterPreferences();
@@ -319,7 +319,7 @@ export class PreferencesEditor extends BaseEditor {
 
 	private filterPreferences() {
 		const filter = this.searchWidget.getValue().trim();
-		this.preferencesRenderers.filterPreferences(filter, this.searchProvider).then(count => {
+		this.preferencesRenderers.filterPreferences(filter, this.searchProvider, this.searchWidget.fuzzyEnabled).then(count => {
 			const message = filter ? this.showSearchResultsMessage(count) : nls.localize('totalSettingsMessage', "Total {0} Settings", count);
 			this.searchWidget.showMessage(message, count);
 			if (count === 0) {
@@ -426,14 +426,14 @@ class PreferencesRenderers extends Disposable {
 		this._editablePreferencesRenderer = editableSettingsRenderer;
 	}
 
-	public filterPreferences(filter: string, searchProvider: PreferencesSearchProvider): TPromise<number> {
+	public filterPreferences(filter: string, searchProvider: PreferencesSearchProvider, fuzzy: boolean): TPromise<number> {
 		if (this._filtersInProgress) {
 			// Resolved/rejected promises have no .cancel()
 			this._filtersInProgress.forEach(p => p.cancel && p.cancel());
 		}
 
 		if (filter) {
-			const searchModel = searchProvider.startSearch(filter);
+			const searchModel = searchProvider.startSearch(filter, fuzzy);
 			this._filtersInProgress = [
 				this._filterPreferences(filter, searchModel, this._defaultPreferencesRenderer),
 				this._filterPreferences(filter, searchModel, this._editablePreferencesRenderer)];

src/vs/workbench/parts/preferences/browser/preferencesRenderers.ts

@@ -563,7 +563,10 @@ export class MostRelevantMatchesRenderer extends Disposable implements HiddenAre
 
 	public render(result: IFilterResult): void {
 		if (result && result.metadata) {
-			// TODO - Hide unused portion of most relevant results section
+			const lineCount = this.editor.getModel().getLineCount();
+			this.hiddenAreas = [new Range(DefaultSettingsEditorModel.MOST_RELEVANT_END_LINE, 1, lineCount - 1, 1)];
+		} else {
+			this.hiddenAreas = [new Range(DefaultSettingsEditorModel.MOST_RELEVANT_START_LINE, 1, DefaultSettingsEditorModel.MOST_RELEVANT_END_LINE, 1)];
 		}
 	}
 }

src/vs/workbench/parts/preferences/browser/preferencesSearch.ts

@@ -23,8 +23,8 @@ export class PreferencesSearchProvider {
 		return !!this.configurationService.getConfiguration<IWorkbenchSettingsConfiguration>().workbench.settings.useExperimentalRemoteSearch;
 	}
 
-	startSearch(filter: string): PreferencesSearchModel {
-		return new PreferencesSearchModel(this, filter);
+	startSearch(filter: string, remote: boolean): PreferencesSearchModel {
+		return new PreferencesSearchModel(this, filter, remote);
 	}
 }
 
@@ -32,10 +32,10 @@ export class PreferencesSearchModel {
 	private _localProvider: LocalSearchProvider;
 	private _remoteProvider: RemoteSearchProvider;
 
-	constructor(private provider: PreferencesSearchProvider, filter: string) {
+	constructor(private provider: PreferencesSearchProvider, filter: string, remote: boolean) {
 		this._localProvider = new LocalSearchProvider(filter);
 
-		if (this.provider.remoteSearchEnabled) {
+		if (remote) {
 			this._remoteProvider = new RemoteSearchProvider(filter);
 		}
 	}

src/vs/workbench/parts/preferences/browser/preferencesWidgets.ts

@@ -10,6 +10,7 @@ import * as DOM from 'vs/base/browser/dom';
 import { TPromise } from 'vs/base/common/winjs.base';
 import { Disposable } from 'vs/base/common/lifecycle';
 import { Widget } from 'vs/base/browser/ui/widget';
+import { Checkbox } from 'vs/base/browser/ui/checkbox/checkbox';
 import Event, { Emitter } from 'vs/base/common/event';
 import { IKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { KeyCode } from 'vs/base/common/keyCodes';
@@ -399,6 +400,8 @@ export class SearchWidget extends Widget {
 	private countElement: HTMLElement;
 	private searchContainer: HTMLElement;
 	private inputBox: InputBox;
+	private fuzzyToggle: Checkbox;
+	private controlsDiv: HTMLElement;
 
 	private _onDidChange: Emitter<string> = this._register(new Emitter<string>());
 	public readonly onDidChange: Event<string> = this._onDidChange.event;
@@ -416,10 +419,25 @@ export class SearchWidget extends Widget {
 		this.create(parent);
 	}
 
+	public get fuzzyEnabled(): boolean {
+		return this.fuzzyToggle.checked;
+	}
+
 	private create(parent: HTMLElement) {
 		this.domNode = DOM.append(parent, DOM.$('div.settings-header-widget'));
 		this.createSearchContainer(DOM.append(this.domNode, DOM.$('div.settings-search-container')));
-		this.countElement = DOM.append(this.domNode, DOM.$('.settings-count-widget'));
+		this.controlsDiv = DOM.append(this.domNode, DOM.$('div.settings-search-controls'));
+		this.fuzzyToggle = this._register(new Checkbox({
+			actionClassName: 'prefs-fuzzy-search-toggle',
+			isChecked: false,
+			onChange: () => {
+				console.log(`onChange`);
+			},
+			title: 'Enable experimental fuzzy search'
+		}));
+		DOM.append(this.controlsDiv, this.fuzzyToggle.domNode);
+
+		this.countElement = DOM.append(this.controlsDiv, DOM.$('.settings-count-widget'));
 		this._register(attachStylerCallback(this.themeService, { badgeBackground, contrastBorder }, colors => {
 			const background = colors.badgeBackground ? colors.badgeBackground.toString() : null;
 			const border = colors.contrastBorder ? colors.contrastBorder.toString() : null;
@@ -461,7 +479,7 @@ export class SearchWidget extends Widget {
 		this.countElement.textContent = message;
 		this.inputBox.inputElement.setAttribute('aria-label', message);
 		DOM.toggleClass(this.countElement, 'no-results', count === 0);
-		this.inputBox.inputElement.style.paddingRight = DOM.getTotalWidth(this.countElement) + 20 + 'px';
+		this.inputBox.inputElement.style.paddingRight = this.getControlsWidth() + 'px';
 		this.styleCountElementForeground();
 	}
 
@@ -477,10 +495,14 @@ export class SearchWidget extends Widget {
 			this.inputBox.inputElement.style.paddingRight = '0px';
 		} else {
 			DOM.removeClass(this.countElement, 'hide');
-			this.inputBox.inputElement.style.paddingRight = DOM.getTotalWidth(this.countElement) + 20 + 'px';
+			this.inputBox.inputElement.style.paddingRight = this.getControlsWidth() + 'px';
 		}
 	}
 
+	private getControlsWidth(): number {
+		return DOM.getTotalWidth(this.countElement) + DOM.getTotalWidth(this.fuzzyToggle.domNode) + 20;
+	}
+
 	public focus() {
 		this.inputBox.focus();
 		if (this.getValue()) {