Do not use filter icon, but elipses and move clear action up

fixes #8386

src/vs/workbench/parts/extensions/electron-browser/extensionsActions.ts

@@ -238,17 +238,18 @@ export class InstallExtensionsAction extends OpenExtensionsViewletAction {
 	static LABEL = localize('installExtensions', "Install Extensions");
 }
 
-export class ShowInstalledExtensionsAction extends Action {
+export class ClearExtensionsInputAction extends Action {
 
-	static ID = 'workbench.extensions.action.showInstalledExtensions';
-	static LABEL = localize('showInstalledExtensions', "Show Installed Extensions");
+	static ID = 'workbench.extensions.action.clearExtensionsInput';
+	static LABEL = localize('clearExtensionsInput', "Clear Extensions Input");
 
 	constructor(
 		id: string,
 		label: string,
-		@IViewletService private viewletService: IViewletService
+		@IViewletService private viewletService: IViewletService,
+		@IExtensionsWorkbenchService private extensionsWorkbenchService: IExtensionsWorkbenchService
 	) {
-		super(id, label, null, true);
+		super(id, label, 'clear-extensions', true);
 	}
 
 	run(): TPromise<void> {
@@ -260,9 +261,6 @@ export class ShowInstalledExtensionsAction extends Action {
 			});
 	}
 
-	protected isEnabled(): boolean {
-		return true;
-	}
 }
 
 export class ListOutdatedExtensionsAction extends Action {
@@ -347,24 +345,7 @@ export class ShowExtensionRecommendationsAction extends Action {
 	}
 }
 
-export class FilterExtensionsAction extends Action {
-
-	static ID = 'workbench.extensions.action.filterExtensions';
-	static LABEL = localize('filterExtensions', "Filter Extensions");
-
-	constructor(
-		id: string,
-		label: string,
-		@IViewletService private viewletService: IViewletService
-	) {
-		super(id, label, null, true);
-	}
-
-	run(): TPromise<void> {
-		return TPromise.as(null);
-	}
-
-	protected isEnabled(): boolean {
-		return true;
-	}
+export class ShowInstalledExtensionsAction extends ClearExtensionsInputAction {
+	static ID = 'workbench.extensions.action.showInstalledExtensions';
+	static LABEL = localize('showInstalledExtensions', "Show Installed Extensions");
 }
\ No newline at end of file

src/vs/workbench/parts/extensions/electron-browser/extensionsViewlet.ts

@@ -13,8 +13,7 @@ import { IDisposable, dispose } from 'vs/base/common/lifecycle';
 import { Builder, Dimension } from 'vs/base/browser/builder';
 import { onUnexpectedError } from 'vs/base/common/errors';
 import { mapEvent, filterEvent } from 'vs/base/common/event';
-import { IAction, IActionItem } from 'vs/base/common/actions';
-import { DropdownMenuActionItem } from 'vs/base/browser/ui/toolbar/toolbar';
+import { IAction } from 'vs/base/common/actions';
 import { domEvent } from 'vs/base/browser/event';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { KeyCode } from 'vs/base/common/keyCodes';
@@ -26,11 +25,10 @@ import { PagedList } from 'vs/base/browser/ui/list/listPaging';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { Delegate, Renderer } from './extensionsList';
 import { IExtensionsWorkbenchService, IExtension, IExtensionsViewlet, VIEWLET_ID } from './extensions';
-import { ShowExtensionRecommendationsAction, ShowPopularExtensionsAction, ShowInstalledExtensionsAction, ListOutdatedExtensionsAction, FilterExtensionsAction } from './extensionsActions';
+import { ShowExtensionRecommendationsAction, ShowPopularExtensionsAction, ShowInstalledExtensionsAction, ListOutdatedExtensionsAction, ClearExtensionsInputAction } from './extensionsActions';
 import { IExtensionManagementService, IExtensionGalleryService, SortBy } from 'vs/platform/extensionManagement/common/extensionManagement';
 import { ExtensionsInput } from './extensionsInput';
 import { IProgressService } from 'vs/platform/progress/common/progress';
-import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
 import { IWorkbenchEditorService } from 'vs/workbench/services/editor/common/editorService';
 
 export class ExtensionsViewlet extends Viewlet implements IExtensionsViewlet {
@@ -42,6 +40,7 @@ export class ExtensionsViewlet extends Viewlet implements IExtensionsViewlet {
 	private list: PagedList<IExtension>;
 	private disposables: IDisposable[] = [];
 	private focusInvokedByTab: boolean;
+	private clearAction: ClearExtensionsInputAction;
 
 	constructor(
 		@ITelemetryService telemetryService: ITelemetryService,
@@ -50,8 +49,7 @@ export class ExtensionsViewlet extends Viewlet implements IExtensionsViewlet {
 		@IProgressService private progressService: IProgressService,
 		@IInstantiationService private instantiationService: IInstantiationService,
 		@IWorkbenchEditorService private editorService: IWorkbenchEditorService,
-		@IExtensionsWorkbenchService private extensionsWorkbenchService: IExtensionsWorkbenchService,
-		@IContextMenuService private contextMenuService: IContextMenuService
+		@IExtensionsWorkbenchService private extensionsWorkbenchService: IExtensionsWorkbenchService
 	) {
 		super(VIEWLET_ID, telemetryService);
 		this.searchDelayer = new ThrottledDelayer(500);
@@ -65,7 +63,6 @@ export class ExtensionsViewlet extends Viewlet implements IExtensionsViewlet {
 		const header = append(this.root, $('.header'));
 
 		this.searchBox = append(header, $<HTMLInputElement>('input.search-box'));
-		this.searchBox.type = 'search';
 		this.searchBox.placeholder = localize('searchExtensions', "Search Extensions in Marketplace");
 		this.extensionsBox = append(this.root, $('.extensions'));
 
@@ -125,22 +122,22 @@ export class ExtensionsViewlet extends Viewlet implements IExtensionsViewlet {
 	}
 
 	getActions(): IAction[] {
+		if (!this.clearAction) {
+			this.clearAction = this.instantiationService.createInstance(ClearExtensionsInputAction, ClearExtensionsInputAction.ID, ClearExtensionsInputAction.LABEL);
+		}
+
 		return [
-			this.instantiationService.createInstance(FilterExtensionsAction, FilterExtensionsAction.ID, FilterExtensionsAction.LABEL)
+			this.clearAction
 		];
 	}
 
-	getActionItem(action: IAction): IActionItem {
-		if (action.id === FilterExtensionsAction.ID) {
-			return new DropdownMenuActionItem(action, [
-				this.instantiationService.createInstance(ShowInstalledExtensionsAction, ShowInstalledExtensionsAction.ID, ShowInstalledExtensionsAction.LABEL),
-				this.instantiationService.createInstance(ListOutdatedExtensionsAction, ListOutdatedExtensionsAction.ID, ListOutdatedExtensionsAction.LABEL),
-				this.instantiationService.createInstance(ShowExtensionRecommendationsAction, ShowExtensionRecommendationsAction.ID, ShowExtensionRecommendationsAction.LABEL),
-				this.instantiationService.createInstance(ShowPopularExtensionsAction, ShowPopularExtensionsAction.ID, ShowPopularExtensionsAction.LABEL)
-			], this.contextMenuService, (action: IAction) => this.getActionItem(action), this.actionRunner, null, 'filter-extensions');
-		}
-
-		return null;
+	getSecondaryActions(): IAction[] {
+		return [
+			this.instantiationService.createInstance(ShowInstalledExtensionsAction, ShowInstalledExtensionsAction.ID, ShowInstalledExtensionsAction.LABEL),
+			this.instantiationService.createInstance(ListOutdatedExtensionsAction, ListOutdatedExtensionsAction.ID, ListOutdatedExtensionsAction.LABEL),
+			this.instantiationService.createInstance(ShowExtensionRecommendationsAction, ShowExtensionRecommendationsAction.ID, ShowExtensionRecommendationsAction.LABEL),
+			this.instantiationService.createInstance(ShowPopularExtensionsAction, ShowPopularExtensionsAction.ID, ShowPopularExtensionsAction.LABEL)
+		];
 	}
 
 	search(text: string, immediate = false): void {
@@ -150,6 +147,8 @@ export class ExtensionsViewlet extends Viewlet implements IExtensionsViewlet {
 
 	private triggerSearch(immediate = false, suggestPopular = false): void {
 		const text = this.searchBox.value;
+		// Joao do not kill me for this hack -isidor
+		this.clearAction.enabled = !!text;
 		this.searchDelayer.trigger(() => this.doSearch(text, suggestPopular), immediate || !text ? 0 : 500);
 	}
 

src/vs/workbench/parts/extensions/electron-browser/media/clear-inverse.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#1E1E1E" d="M4.222 0h-2.222v.479c-.526.648-.557 1.57-.043 2.269l.043.059v3.203l-.4.296-.053.053c-.353.352-.547.822-.547 1.321s.194.967.549 1.32c.134.134.288.236.451.322v6.678h14v-16h-11.778z"/><path fill="#E8E8E8" d="M10.798 7l-1.83-2h6.032v2h-4.202zm-2.292-6h-3.207l1.337 1.52 1.87-1.52zm-5.506 8.531v1.469h12v-2h-10.813l-.024.021c-.3.299-.716.479-1.163.51zm0 5.469h12v-2h-12v2zm3.323-8h.631l-.347-.266-.284.266zm8.677-4v-2h-3.289l-1.743 2h5.032z"/><path fill="#F48771" d="M7.246 4.6l2.856-3.277-.405-.002-3.176 2.581-2.607-2.962c-.336-.221-.786-.2-1.082.096-.308.306-.319.779-.069 1.12l2.83 2.444-3.339 2.466c-.339.338-.339.887 0 1.225.339.337.888.337 1.226 0l3.063-2.867 3.33 2.555h.466l-3.093-3.379z"/></svg>
\ No newline at end of file

src/vs/workbench/parts/extensions/electron-browser/media/clear.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#fff" d="M4.222 0h-2.222v.479c-.526.648-.557 1.57-.043 2.269l.043.059v3.203l-.4.296-.053.053c-.353.352-.547.822-.547 1.321s.194.967.549 1.32c.134.134.288.236.451.322v6.678h14v-16h-11.778z"/><path fill="#424242" d="M10.798 7l-1.83-2h6.032v2h-4.202zm-2.292-6h-3.207l1.337 1.52 1.87-1.52zm-5.506 8.531v1.469h12v-2h-10.813l-.024.021c-.3.299-.716.479-1.163.51zm0 5.469h12v-2h-12v2zm3.323-8h.631l-.347-.266-.284.266zm8.677-4v-2h-3.289l-1.743 2h5.032z"/><path fill="#A1260D" d="M7.246 4.6l2.856-3.277-.405-.002-3.176 2.581-2.607-2.962c-.336-.221-.786-.2-1.082.096-.308.306-.319.779-.069 1.12l2.83 2.444-3.339 2.466c-.339.338-.339.887 0 1.225.339.337.888.337 1.226 0l3.063-2.867 3.33 2.555h.466l-3.093-3.379z"/></svg>
\ No newline at end of file

src/vs/workbench/parts/extensions/electron-browser/media/extensionActions.css

@@ -58,12 +58,12 @@
 
 }
 
-.monaco-action-bar .action-item .action-label.filter-extensions {
-	background: url('filter-extensions.svg') center center no-repeat;
+.monaco-action-bar .action-item .action-label.clear-extensions {
+	background: url('clear.svg') center center no-repeat;
 }
 
-.vs-dark .monaco-action-bar .action-item .action-label.filter-extensions {
-	background: url('filter-extensions-inverse.svg') center center no-repeat;
+.vs-dark .monaco-action-bar .action-item .action-label.clear-extensions {
+	background: url('clear-inverse.svg') center center no-repeat;
 }
 
 .monaco-action-bar .action-item:not(.disabled):hover .action-label.extension-action.enable {
@@ -79,6 +79,6 @@
 	display: none;
 }
 
-.hc-black .monaco-action-bar .action-item .action-label.filter-extensions {
-	background: url('filter-extensions-inverse.svg') center center no-repeat;
+.hc-black .monaco-action-bar .action-item .action-label.clear-extensions {
+	background: url('clear-inverse.svg') center center no-repeat;
 }
\ No newline at end of file

src/vs/workbench/parts/extensions/electron-browser/media/filter-extensions-inverse.svg

-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#C5C5C5;}
-</style>
-<path id="iconBg" class="st0" d="M14,3L9,9.7V15H7V9.7L2,3C2,3,14,3,14,3z"/>
-</svg>

src/vs/workbench/parts/extensions/electron-browser/media/filter-extensions.svg

-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#424242;}
-</style>
-<path id="iconBg" class="st0" d="M14,3L9,9.7V15H7V9.7L2,3C2,3,14,3,14,3z"/>
-</svg>