From 183a4d6aa43626aa95f309c27132da1654f59c83 Mon Sep 17 00:00:00 2001 From: Sandeep Somavarapu Date: Wed, 1 Jun 2016 16:48:06 +0200 Subject: [PATCH] Implementation finishing first cut --- .../parts/markers/browser/MarkersPanel.ts | 50 +++++++++++++----- .../browser/markersWorkbenchContributions.ts | 2 +- .../browser/media/action-remove-dark.svg | 1 - .../markers/browser/media/action-remove.svg | 1 - .../browser/media/ellipsis-inverse.svg | 1 - .../parts/markers/browser/media/ellipsis.svg | 1 - .../browser/media/error-toggle-inverse.svg | 1 - .../parts/markers/browser/media/filter.svg | 1 + .../parts/markers/browser/media/markers.css | 52 ++++++++----------- .../parts/markers/common/MarkersModel.ts | 18 +++++-- .../parts/markers/common/Messages.ts | 10 +++- 11 files changed, 81 insertions(+), 57 deletions(-) delete mode 100644 src/vs/workbench/parts/markers/browser/media/action-remove-dark.svg delete mode 100644 src/vs/workbench/parts/markers/browser/media/action-remove.svg delete mode 100644 src/vs/workbench/parts/markers/browser/media/ellipsis-inverse.svg delete mode 100644 src/vs/workbench/parts/markers/browser/media/ellipsis.svg delete mode 100644 src/vs/workbench/parts/markers/browser/media/error-toggle-inverse.svg create mode 100644 src/vs/workbench/parts/markers/browser/media/filter.svg diff --git a/src/vs/workbench/parts/markers/browser/MarkersPanel.ts b/src/vs/workbench/parts/markers/browser/MarkersPanel.ts index a3829411fdd..ca1c2df2207 100644 --- a/src/vs/workbench/parts/markers/browser/MarkersPanel.ts +++ b/src/vs/workbench/parts/markers/browser/MarkersPanel.ts @@ -5,7 +5,6 @@ import 'vs/css!./media/markers'; -import nls = require('vs/nls'); import * as errors from 'vs/base/common/errors'; import * as Set from 'vs/base/common/set'; import URI from 'vs/base/common/uri'; @@ -16,6 +15,10 @@ import builder = require('vs/base/browser/builder'); import {Action} from 'vs/base/common/actions'; import { IMarkerService } from 'vs/platform/markers/common/markers'; import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry'; +import { IEventService } from 'vs/platform/event/common/event'; +import { EventType } from 'vs/workbench/common/events'; +import { CommonKeybindings } from 'vs/base/common/keyCodes'; +import {IKeyboardEvent} from 'vs/base/browser/keyboardEvent'; import { Panel } from 'vs/workbench/browser/panel'; import {IAction} from 'vs/base/common/actions'; import { IWorkbenchEditorService } from 'vs/workbench/services/editor/common/editorService'; @@ -41,7 +44,7 @@ export class MarkersPanel extends Panel { private actions: IAction[]; private showFilterInputAction: IAction; - private showOnlyErrorsAction: IAction; + private toggleErrorsAction: IAction; private collapseAllAction: IAction; private messageBoxContainer: HTMLElement; @@ -54,6 +57,7 @@ export class MarkersPanel extends Panel { @IMarkerService private markerService: IMarkerService, @IWorkbenchEditorService private editorService: IWorkbenchEditorService, @IContextViewService private contextViewService: IContextViewService, + @IEventService private eventService: IEventService, @ITelemetryService telemetryService: ITelemetryService ) { super(Constants.MARKERS_PANEL_ID, telemetryService); @@ -68,12 +72,12 @@ export class MarkersPanel extends Panel { let container= dom.append(parent.getHTMLElement(), dom.emmet('.markers-panel-container')); - this.createMessageBox(container); + this.createActions(); this.createFilterInputBox(container); + this.createMessageBox(container); this.createTree(container); - this.createActions(); - this.toDispose.push(this.markerService.onMarkerChanged(this.onMarkerChanged.bind(this))); + this.createListeners(); this.render(); @@ -91,13 +95,12 @@ export class MarkersPanel extends Panel { public focus(): void { if (this.markersModel.hasFilteredResources()) { - this.tree.DOMFocus(); this.tree.focusFirst(); } } public getActions(): IAction[] { - this.showOnlyErrorsAction.enabled= this.markersModel.hasResources(); + this.toggleErrorsAction.enabled= this.markersModel.hasResources(); if (this.markersModel.hasFilteredResources()) { this.showFilterInputAction.enabled= true; this.collapseAllAction.enabled= true; @@ -114,10 +117,18 @@ export class MarkersPanel extends Panel { } private createFilterInputBox(parent: HTMLElement): void { - this.filterInputBoxContainer= dom.append(parent, dom.emmet('.filter-box-container')); + var filterBoxContainer= dom.append(parent, dom.emmet('.filter-box-container')); + this.filterInputBoxContainer= dom.append(filterBoxContainer, dom.emmet('.input-box-container')); this.filterInputBox= new InputBox(this.filterInputBoxContainer, this.contextViewService, { placeholder: Messages.MARKERS_PANEL_FILTER_PLACEHOLDER }); + this.toDispose.push(dom.addStandardDisposableListener(this.filterInputBox.inputElement, 'keyup', (e: IKeyboardEvent) => { + if (e.equals(CommonKeybindings.ESCAPE)) { + dom.removeClass(this.filterInputBoxContainer, 'visible'); + e.preventDefault(); + e.stopPropagation(); + } + })); this.toDispose.push(this.filterInputBox.onDidChange((filter:string) => { this.markersModel.filter= filter; this.refreshPanel(); @@ -140,11 +151,11 @@ export class MarkersPanel extends Panel { private createActions():void { this.collapseAllAction= this.instantiationService.createInstance(CollapseAllAction, this.tree, true); - this.showOnlyErrorsAction= new Action('workbench.markers.panel.action.toggle.errors', nls.localize('toggle.errors', "Show only errors"), 'markers-panel-action-toggle-errors', true, this.toggleShowOnlyErrors.bind(this)); - this.showFilterInputAction= new Action('workbench.markers.panel.action.filter', nls.localize('filter.markers', "Filter"), 'markers-panel-action-filter', true, this.toggleFilter.bind(this)); + this.toggleErrorsAction= new Action('workbench.markers.panel.action.toggle.errors', Messages.MARKERS_PANEL_ACTION_TOOLTIP_ONLY_ERRORS, 'markers-panel-action-toggle-errors-on', true, this.toggleShowOnlyErrors.bind(this)); + this.showFilterInputAction= new Action('workbench.markers.panel.action.filter', Messages.MARKERS_PANEL_ACTION_TOOLTIP_FILTER, 'markers-panel-action-filter', true, this.toggleFilter.bind(this)); this.actions= [ this.showFilterInputAction, - this.showOnlyErrorsAction, + this.toggleErrorsAction, this.collapseAllAction ]; this.actions.forEach(a => { @@ -152,11 +163,22 @@ export class MarkersPanel extends Panel { }); } + private createListeners(): void { + this.toDispose.push(this.markerService.onMarkerChanged(this.onMarkerChanged.bind(this))); + this.toDispose.push(this.eventService.addListener2(EventType.COMPOSITE_OPENED, this.onPanelOpened.bind(this))); + } + private onMarkerChanged(changedResources: URI[]) { this.updateResources(changedResources); this.refreshPanel(); } + private onPanelOpened():void { + if (this.markersModel.filter) { + dom.addClass(this.filterInputBoxContainer, 'visible'); + } + } + private updateResources(resources: URI[]) { resources.forEach((resource) => { let markers= this.markerService.read({resource: resource}).slice(0); @@ -208,9 +230,9 @@ export class MarkersPanel extends Panel { } private toggleShowOnlyErrors(): any { - this.markersModel.showOnlyErrors= !this.markersModel.showOnlyErrors; - this.actions[1].label= this.markersModel.showOnlyErrors ? nls.localize('toggle.all', "Show all") : nls.localize('toggle.errors', "Show only errors"); - this.actions[1].class= this.markersModel.showOnlyErrors ? 'markers-panel-action-toggle-all' : 'markers-panel-action-toggle-errors'; + this.markersModel.filterErrors= !this.markersModel.filterErrors; + this.actions[1].label= this.markersModel.filterErrors ? Messages.MARKERS_PANEL_ACTION_TOOLTIP_ONLY_ERRORS_OFF : Messages.MARKERS_PANEL_ACTION_TOOLTIP_ONLY_ERRORS; + this.actions[1].class= this.markersModel.filterErrors ? 'markers-panel-action-toggle-errors-off' : 'markers-panel-action-toggle-errors-on'; this.refreshPanel(true); } diff --git a/src/vs/workbench/parts/markers/browser/markersWorkbenchContributions.ts b/src/vs/workbench/parts/markers/browser/markersWorkbenchContributions.ts index 93ef72608d6..6c5890f404a 100644 --- a/src/vs/workbench/parts/markers/browser/markersWorkbenchContributions.ts +++ b/src/vs/workbench/parts/markers/browser/markersWorkbenchContributions.ts @@ -44,7 +44,7 @@ export function registerContributions(): void { 'vs/workbench/parts/markers/browser/MarkersPanel', 'MarkersPanel', Constants.MARKERS_PANEL_ID, - Messages.MARKERS_PANEL_NO_PROBLEMS, + Messages.MARKERS_PANEL_TITLE_NO_PROBLEMS, 'markersPanel' )); diff --git a/src/vs/workbench/parts/markers/browser/media/action-remove-dark.svg b/src/vs/workbench/parts/markers/browser/media/action-remove-dark.svg deleted file mode 100644 index 751e89b3b02..00000000000 --- a/src/vs/workbench/parts/markers/browser/media/action-remove-dark.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/vs/workbench/parts/markers/browser/media/action-remove.svg b/src/vs/workbench/parts/markers/browser/media/action-remove.svg deleted file mode 100644 index fde34404d4e..00000000000 --- a/src/vs/workbench/parts/markers/browser/media/action-remove.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/vs/workbench/parts/markers/browser/media/ellipsis-inverse.svg b/src/vs/workbench/parts/markers/browser/media/ellipsis-inverse.svg deleted file mode 100644 index 1140c11ecc8..00000000000 --- a/src/vs/workbench/parts/markers/browser/media/ellipsis-inverse.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/vs/workbench/parts/markers/browser/media/ellipsis.svg b/src/vs/workbench/parts/markers/browser/media/ellipsis.svg deleted file mode 100644 index b61e2d0c750..00000000000 --- a/src/vs/workbench/parts/markers/browser/media/ellipsis.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/vs/workbench/parts/markers/browser/media/error-toggle-inverse.svg b/src/vs/workbench/parts/markers/browser/media/error-toggle-inverse.svg deleted file mode 100644 index ae12d73517c..00000000000 --- a/src/vs/workbench/parts/markers/browser/media/error-toggle-inverse.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/vs/workbench/parts/markers/browser/media/filter.svg b/src/vs/workbench/parts/markers/browser/media/filter.svg new file mode 100644 index 00000000000..c033c51966c --- /dev/null +++ b/src/vs/workbench/parts/markers/browser/media/filter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/vs/workbench/parts/markers/browser/media/markers.css b/src/vs/workbench/parts/markers/browser/media/markers.css index 503a9e91352..d16d8be9e5f 100644 --- a/src/vs/workbench/parts/markers/browser/media/markers.css +++ b/src/vs/workbench/parts/markers/browser/media/markers.css @@ -5,42 +5,32 @@ .markers-panel .markers-panel-container { height: 100%; - width: 100%; - overflow: hidden; - position: relative; + margin: 0 10px; } -.message-box-container { - padding: 0 20px 0 20px; +.markers-panel .markers-panel-container .message-box-container { + padding-left: 10px; display: none; } -.markers-panel .message-box-container.visible { +.markers-panel .markers-panel-container .message-box-container.visible { display: block; } .markers-panel .markers-panel-container .filter-box-container { - position: absolute; - right: 10px; - top: -40px; - width: 250px; - z-index: 10; - border: 1px solid #EFEFF2; - border-radius: 3px; - - -webkit-transition: top 200ms linear; - -o-transition: top 200ms linear; - -moz-transition: top 200ms linear; - -ms-transition: top 200ms linear; - transition: top 200ms linear; + display: flex; + justify-content: flex-end; } -.vs-dark .markers-panel .markers-panel-container .filter-box-container { +.markers-panel .markers-panel-container .input-box-container { + width: 250px; + border: 1px solid #DDD; + border-radius: 3px; border-color: #2D2D30; + display: none; } - -.markers-panel .markers-panel-container .filter-box-container.visible { - top: 0; +.markers-panel .markers-panel-container .input-box-container.visible { + display: inline-block; } .markers-panel .markers-panel-container .monaco-tree .monaco-tree-row .content .marker-stats { @@ -55,19 +45,19 @@ } .markers-panel-action-filter { - background: url('ellipsis.svg') top center no-repeat; + background: url('filter.svg') top center no-repeat; } .hc-black .markers-panel-action-filter { - background: url('ellipsis-inverse.svg') top center no-repeat; + background: url('filter.svg') top center no-repeat; } .vs-dark .markers-panel-action-filter { - background: url('ellipsis-inverse.svg') top center no-repeat; + background: url('filter.svg') top center no-repeat; } .vs .markers-panel-action-filter { - background: url('ellipsis.svg') top center no-repeat; + background: url('filter.svg') top center no-repeat; } .markers-panel .icon { @@ -83,8 +73,8 @@ background: url('status-warning.svg') center center no-repeat; } -.markers-panel-action-toggle-errors, -.markers-panel-action-toggle-all, +.markers-panel-action-toggle-errors-on, +.markers-panel-action-toggle-errors-off, .markers-panel .icon.error { background: url('status-error.svg') center center no-repeat; } @@ -97,8 +87,8 @@ background: url('status-warning-inverse.svg') center center no-repeat; } -.vs-dark .markers-panel-action-toggle-errors, -.vs-dark .markers-panel-action-toggle-all, +.vs-dark .markers-panel-action-toggle-errors-on, +.vs-dark .markers-panel-action-toggle-errors-off, .vs-dark .markers-panel .icon.error { background: url('status-error-inverse.svg') center center no-repeat; } diff --git a/src/vs/workbench/parts/markers/common/MarkersModel.ts b/src/vs/workbench/parts/markers/common/MarkersModel.ts index 0a08e5cd1b5..09e3e975d3b 100644 --- a/src/vs/workbench/parts/markers/common/MarkersModel.ts +++ b/src/vs/workbench/parts/markers/common/MarkersModel.ts @@ -21,9 +21,8 @@ export class Marker { } export class MarkersModel { - private markersByResource: Map.SimpleMap; - public showOnlyErrors:boolean= false; + public filterErrors:boolean= false; public filter:string= ''; constructor(markers: IMarker[]= []) { @@ -82,7 +81,7 @@ export class MarkersModel { } private filterMarker(marker: IMarker):boolean { - if (this.showOnlyErrors && Severity.Error !== marker.severity) { + if (this.filterErrors && Severity.Error !== marker.severity) { return false; } if (this.filter) { @@ -116,7 +115,16 @@ export class MarkersModel { public getTitle(markerStatistics: MarkerStatistics):string { let title= MarkersModel.getStatisticsLabel(markerStatistics); - return title ? title : Messages.MARKERS_PANEL_NO_PROBLEMS; + if (!title) { + return Messages.MARKERS_PANEL_TITLE_NO_PROBLEMS; + } + if (this.filter) { + return title + ' ' + Messages.MARKERS_PANEL_TITLE_SHOWING_FILTERED; + } + if (this.filterErrors) { + return title + ' ' + Messages.MARKERS_PANEL_TITLE_SHOWING_ONLY_ERRORS; + } + return title; } public getMessage():string { @@ -127,7 +135,7 @@ export class MarkersModel { if (this.filter) { return Messages.MARKERS_PANEL_NO_PROBLEMS_FILTERS; } - if (this.showOnlyErrors) { + if (this.filterErrors) { return Messages.MARKERS_PANEL_NO_ERRORS; } } diff --git a/src/vs/workbench/parts/markers/common/Messages.ts b/src/vs/workbench/parts/markers/common/Messages.ts index 348a654b71f..c49ca44d84d 100644 --- a/src/vs/workbench/parts/markers/common/Messages.ts +++ b/src/vs/workbench/parts/markers/common/Messages.ts @@ -9,10 +9,18 @@ import nls = require('vs/nls'); export default class Messages { public static MARKERS_PANEL_TOGGLE_LABEL:string= nls.localize('markers.panel.toggle.label', "Toggle Problems"); - public static MARKERS_PANEL_NO_PROBLEMS:string= nls.localize('markers.panel.no.problems', "No problems"); + + public static MARKERS_PANEL_TITLE_NO_PROBLEMS:string= nls.localize('markers.panel.title.no.problems', "No problems"); + public static MARKERS_PANEL_TITLE_SHOWING_ONLY_ERRORS:string= nls.localize('markers.panel.title.showing.errors', "(Showing only Errors)"); + public static MARKERS_PANEL_TITLE_SHOWING_FILTERED:string= nls.localize('markers.panel.title.showing.filtered', "(Showing Filtered)"); + public static MARKERS_PANEL_NO_PROBLEMS_BUILT:string= nls.localize('markers.panel.no.problems.build', "This workspace is clear or not yet built"); 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_ERRORS:string= nls.localize('markers.panel.no.errors', "This workspace has no errors"); + + public static MARKERS_PANEL_ACTION_TOOLTIP_ONLY_ERRORS:string= nls.localize('markers.panel.action.only.errors', "Show only errors"); + public static MARKERS_PANEL_ACTION_TOOLTIP_ONLY_ERRORS_OFF:string= nls.localize('markers.panel.action.only.errors.off', "Show all"); + public static MARKERS_PANEL_ACTION_TOOLTIP_FILTER:string= nls.localize('markers.panel.action.filter', "Filter..."); public static MARKERS_PANEL_FILTER_PLACEHOLDER:string= nls.localize('markers.panel.filter.placeholder', "Type to Filter"); public static MARKERS_PANEL_SINGLE_ERROR_LABEL:string= nls.localize('markers.panel.single.error.label', "1 Error"); -- GitLab