Open Source Development: Release 0.2: How I fixed my issue

After the battle with my antivirus for a right to run locally compiled version of Visual Studio Code the most fun part started: fixing the issue.

It is always hard to start working in a new area of code or on something you have not done before. So it all starts with the research. My issue contained a few code pointers, but it was also about 1 year old, so those code pointers where only partly useful.

I took a look at the one of them, but that line didn't even exist at this point. God bless people who write comments! It was easy to identify that part of the code that was originally pointed out was this one:

	// Collapse All action
	export class CollapseAction extends Action {

	constructor(viewer: ITree, enabled: boolean, clazz: string) {
	super('workbench.action.collapse', nls.localize('collapse', "Collapse All"), clazz, enabled, (context: any) => {
	if (viewer.getHighlight()) {
	return TPromise.as(null); // Global action disabled if user is in edit mode from another action
	}

	viewer.collapseAll();
	viewer.clearSelection();
	viewer.clearFocus();
	viewer.DOMFocus();
	viewer.focusFirst();

	return TPromise.as(null);
	});
	}
	}

view raw viewlet.ts hosted with ❤ by GitHub

It's an actual "Collapse All" functionality, I will be using in future. To find another code pointer I had to use good old git blame, but as I found out where it was pointing, I could not figure out why that piece of code was important (and I still can't, so maybe that is a reason why my pull request is Work In Progress and is not merged).

It is crazy how much code I got familiar with in "debug/debug console" while trying to find where the issue was supposed to get fixed. The first piece of code that popped-up was located here and looked like the place where the "neighbor" button "Clear All" was initialized:

	public getSecondaryActions(tree: ITree, element: any): TPromise<IAction[]> {
	const actions: IAction[] = [];
	actions.push(new CopyAction(CopyAction.ID, CopyAction.LABEL));
	actions.push(new CopyAllAction(CopyAllAction.ID, CopyAllAction.LABEL, tree));
	actions.push(this.instantiationService.createInstance(ClearReplAction, ClearReplAction.ID, ClearReplAction.LABEL));

	return TPromise.as(actions);
	}

view raw replViewer.ts hosted with ❤ by GitHub

Spoiler: wrong place... As I was trying to mimic "Clear All" button initialization, I got a better idea: why not to mimic the actual class, since those two are different. That's exactly what I did:

	export class CollapseAllReplAction extends Action {
	static readonly ID = 'workbench.debug.panel.action.collapseReplAction';
	static LABEL = nls.localize('collapseRepl', "Collaps All");

	constructor(id: string, label: string, private tree: ITree){
	super(id, label, 'debug-action collapse-repl collapse-all');
	}
	public run(): TPromise<void>{
	let collapseAction = new CollapseAction(this.tree, false, 'explore-action collapse-all');
	collapseAction.run();
	return null;
	}
	}

view raw debugActions.ts hosted with ❤ by GitHub

It was a good idea, as I found out later.

Still... Something was missing button did not magically appear on the screen. So I found another place where "Clear All" button was added to the Debug Console. I decided to try to add my button:

	if (!this.actions) {
	this.actions = [
	this.instantiationService.createInstance(ClearReplAction, ClearReplAction.ID, ClearReplAction.LABEL),
	this.instantiationService.createInstance(CollapseAllReplAction, CollapseAllReplAction.ID, CollapseAllReplAction.LABEL, this.tree)
	];

view raw repl.ts hosted with ❤ by GitHub

And after that I finally saw my "button", it was an empty placeholder without an icon! It felt like a real miracle. So it was just a matter of finding the right icon and CSS classes at this point.

	.monaco-workbench .debug-action.collapse-repl {
	background: url('collapse-all.svg') center center no-repeat;
	}

	.vs-dark .monaco-workbench .debug-action.collapse-repl,
	.hc-black .monaco-workbench .debug-action.collapse-repl {
	background: url('collapse-inverse.svg') center center no-repeat;
	}

view raw repl.css hosted with ❤ by GitHub

And finally I got exactly what I wanted:

Even in both light and dark color schemes:

It took quite a long time to get exactly to the place of a change, but as soon as I found out where I need to make changes, fixing this issue become a pleasure.

UPDATE:
I have got a response in my pull request asking to remove button from the title area and add it to context menu. So after all I had to go with the original idea I had:

	public getSecondaryActions(tree: ITree, element: any): TPromise<IAction[]> {
	const actions: IAction[] = [];
	actions.push(new CopyAction(CopyAction.ID, CopyAction.LABEL));
	actions.push(new CopyAllAction(CopyAllAction.ID, CopyAllAction.LABEL, tree));
	actions.push(this.instantiationService.createInstance(ClearReplAction, ClearReplAction.ID, ClearReplAction.LABEL));
	actions.push(this.instantiationService.createInstance(CollapseAllReplAction, CollapseAllReplAction.ID, CollapseAllReplAction.LABEL, tree));

	return TPromise.as(actions);
	}