#22289 Show messages with actions

src/vs/workbench/parts/markers/electron-browser/markersPanel.ts

@@ -32,6 +32,7 @@ import { IMarkersWorkbenchService } from 'vs/workbench/parts/markers/electron-br
 import { SimpleFileResourceDragAndDrop } from 'vs/workbench/browser/dnd';
 import { IStorageService } from 'vs/platform/storage/common/storage';
 import { Scope } from 'vs/workbench/common/memento';
+import { localize } from 'vs/nls';
 
 export class MarkersPanel extends Panel {
 
@@ -51,7 +52,6 @@ export class MarkersPanel extends Panel {
 
 	private treeContainer: HTMLElement;
 	private messageBoxContainer: HTMLElement;
-	private messageBox: HTMLElement;
 	private panelSettings: any;
 
 	private currentResourceGotAddedToMarkersData: boolean = false;
@@ -116,7 +116,7 @@ export class MarkersPanel extends Panel {
 			this.highlightCurrentSelectedMarkerRange();
 			this.autoReveal(true);
 		} else {
-			this.messageBox.focus();
+			this.messageBoxContainer.focus();
 		}
 	}
 
@@ -188,8 +188,6 @@ export class MarkersPanel extends Panel {
 
 	private createMessageBox(parent: HTMLElement): void {
 		this.messageBoxContainer = dom.append(parent, dom.$('.message-box-container'));
-		this.messageBox = dom.append(this.messageBoxContainer, dom.$('span'));
-		this.messageBox.setAttribute('tabindex', '0');
 	}
 
 	private createTree(parent: HTMLElement): void {
@@ -231,7 +229,7 @@ export class MarkersPanel extends Panel {
 	private createActions(): void {
 		this.collapseAllAction = this.instantiationService.createInstance(CollapseAllAction, this.tree, true);
 		const filterAction = this.instantiationService.createInstance(FilterAction);
-		this.filterInputActionItem = this.instantiationService.createInstance(FilterInputActionItem, this.panelSettings['filter'], this.panelSettings['filterHistory'] || [], filterAction);
+		this.filterInputActionItem = this.instantiationService.createInstance(FilterInputActionItem, this.panelSettings['filter'] || '', this.panelSettings['filterHistory'] || [], filterAction);
 		this.filterByFilesExcludeAction = new FilterByFilesExcludeAction(this.panelSettings['useFilesExclude']);
 		this.actions = [filterAction, this.filterByFilesExcludeAction, this.collapseAllAction];
 	}
@@ -300,21 +298,44 @@ export class MarkersPanel extends Panel {
 	}
 
 	private renderMessage(): void {
-		this.messageBox.textContent = this.getMessage();
-		dom.toggleClass(this.messageBoxContainer, 'hidden', this.markersWorkbenchService.markersModel.hasFilteredResources());
-	}
-
-	private getMessage(): string {
-		if (this.markersWorkbenchService.markersModel.hasFilteredResources()) {
-			return '';
-		}
-		if (this.markersWorkbenchService.markersModel.hasResources()) {
-			if (!this.markersWorkbenchService.markersModel.filterOptions.filter) {
-				return Messages.MARKERS_PANEL_NO_PROBLEMS_FILE_EXCLUSIONS_FILTER;
+		const markersModel = this.markersWorkbenchService.markersModel;
+		const hasFilteredResources = markersModel.hasFilteredResources();
+		dom.clearNode(this.messageBoxContainer);
+		dom.toggleClass(this.messageBoxContainer, 'hidden', hasFilteredResources);
+		if (!hasFilteredResources) {
+			if (markersModel.hasResources()) {
+				if (markersModel.filterOptions.filter) {
+					this.renderFilteredByFilterMessage(this.messageBoxContainer);
+				} else {
+					this.renderFilteredByFilesExcludeMessage(this.messageBoxContainer);
+				}
+			} else {
+				this.renderNoProblemsMessage(this.messageBoxContainer);
 			}
-			return Messages.MARKERS_PANEL_NO_PROBLEMS_FILTERS;
 		}
-		return Messages.MARKERS_PANEL_NO_PROBLEMS_BUILT;
+	}
+
+	private renderFilteredByFilesExcludeMessage(container: HTMLElement) {
+		const span1 = dom.append(container, dom.$('span'));
+		span1.textContent = Messages.MARKERS_PANEL_NO_PROBLEMS_FILE_EXCLUSIONS_FILTER;
+		const link = dom.append(container, dom.$('a.messageAction'));
+		link.textContent = localize('disableFilesExclude', "Disable Files Exclude.");
+		link.setAttribute('tabIndex', '0');
+		dom.addDisposableListener(link, dom.EventType.CLICK, () => this.filterByFilesExcludeAction.checked = false);
+	}
+
+	private renderFilteredByFilterMessage(container: HTMLElement) {
+		const span1 = dom.append(container, dom.$('span'));
+		span1.textContent = Messages.MARKERS_PANEL_NO_PROBLEMS_FILTERS;
+		const link = dom.append(container, dom.$('a.messageAction'));
+		link.textContent = localize('clearFilter', "Clear Filter.");
+		link.setAttribute('tabIndex', '0');
+		dom.addDisposableListener(link, dom.EventType.CLICK, () => this.filterInputActionItem.clear());
+	}
+
+	private renderNoProblemsMessage(container: HTMLElement) {
+		const span = dom.append(container, dom.$('span'));
+		span.textContent = Messages.MARKERS_PANEL_NO_PROBLEMS_BUILT;
 	}
 
 	private autoExpand(): void {

src/vs/workbench/parts/markers/electron-browser/markersPanelActions.ts

@@ -27,7 +27,8 @@ import { IDisposable, dispose } from 'vs/base/common/lifecycle';
 import { HistoryNavigator } from 'vs/base/common/history';
 import { BaseActionItem } from 'vs/base/browser/ui/actionbar/actionbar';
 import { badgeBackground, contrastBorder } from 'vs/platform/theme/common/colorRegistry';
-import { localize } from '../../../../nls';
+import { localize } from 'vs/nls';
+import { isUndefined } from 'vs/base/common/types';
 
 export class ToggleMarkersPanelAction extends TogglePanelAction {
 
@@ -80,12 +81,16 @@ export class FilterByFilesExcludeAction extends Action {
 		super(FilterByFilesExcludeAction.ID, checked ? Messages.MARKERS_PANEL_ACTION_TOOLTIP_DO_NOT_USE_FILES_EXCLUDE : Messages.MARKERS_PANEL_ACTION_TOOLTIP_USE_FILES_EXCLUDE, 'markers-panel-action-files-exclude', true);
 		this.toDispose.push(this._onDidCheck);
 		this.checked = checked;
+		this.toDispose.push(this.onDidChange(e => {
+			if (e && !isUndefined(e.checked)) {
+				this._onDidCheck.fire(this.checked);
+			}
+		}));
 	}
 
 	public run(): TPromise<any> {
 		this.checked = !this.checked;
 		this.tooltip = this.checked ? Messages.MARKERS_PANEL_ACTION_TOOLTIP_DO_NOT_USE_FILES_EXCLUDE : Messages.MARKERS_PANEL_ACTION_TOOLTIP_USE_FILES_EXCLUDE;
-		this._onDidCheck.fire(this.checked);
 		return TPromise.as(null);
 	}
 
@@ -140,6 +145,10 @@ export class FilterInputActionItem extends BaseActionItem {
 		this.createBadge(this.container);
 	}
 
+	clear(): void {
+		this.filterInputBox.value = '';
+	}
+
 	getFilterText(): string {
 		return this.filterText;
 	}
@@ -194,7 +203,7 @@ export class FilterInputActionItem extends BaseActionItem {
 
 	private updateBadge(): void {
 		const { total, filtered } = this.markersWorkbenchService.markersModel.stats();
-		DOM.toggleClass(this.filterBadge, 'hidden', total === filtered);
+		DOM.toggleClass(this.filterBadge, 'hidden', total === filtered || filtered === 0);
 		this.filterBadge.textContent = localize('showing filtered problems', "Showing {0} of {1}", filtered, total);
 		this.filterInputBox.inputElement.style.paddingRight = DOM.getTotalWidth(this.filterBadge) + 'px';
 	}

src/vs/workbench/parts/markers/electron-browser/media/markers.css

@@ -36,6 +36,7 @@
 	right: 4px;
 }
 
+.markers-panel-action-filter > .markers-panel-filter-badge.hidden,
 .markers-panel-action-filter > .markers-panel-filter-badge.small {
 	display: none;
 }
@@ -49,8 +50,10 @@
 	padding-left: 20px;
 }
 
-.markers-panel .markers-panel-container .message-box-container span:focus {
-	outline: none;
+.markers-panel .markers-panel-container .message-box-container .messageAction {
+	margin-left: 4px;
+	cursor: pointer;
+	text-decoration: underline;
 }
 
 .markers-panel  .markers-panel-container .hidden {

src/vs/workbench/parts/markers/electron-browser/messages.ts

@@ -23,7 +23,7 @@ export default class Messages {
 
 	public static MARKERS_PANEL_NO_PROBLEMS_BUILT: string = nls.localize('markers.panel.no.problems.build', "No problems have been detected in the workspace so far.");
 	public static MARKERS_PANEL_NO_PROBLEMS_FILTERS: string = nls.localize('markers.panel.no.problems.filters', "No results found with provided filter criteria.");
-	public static MARKERS_PANEL_NO_PROBLEMS_FILE_EXCLUSIONS_FILTER: string = nls.localize('markers.panel.no.problems.file.exclusions', "No results found. Review your files exclusion setting.");
+	public static MARKERS_PANEL_NO_PROBLEMS_FILE_EXCLUSIONS_FILTER: string = nls.localize('markers.panel.no.problems.file.exclusions', "All problems are hidden because files exculde filter is enabled.");
 
 	public static MARKERS_PANEL_ACTION_TOOLTIP_USE_FILES_EXCLUDE: string = nls.localize('markers.panel.action.useFilesExclude', "Filter using Files Exclude Setting");
 	public static MARKERS_PANEL_ACTION_TOOLTIP_DO_NOT_USE_FILES_EXCLUDE: string = nls.localize('markers.panel.action.donotUseFilesExclude', "Do not use Files Exclude Setting");