Skip to content

Commit

Permalink
Add debug toolbar
Browse files Browse the repository at this point in the history
Signed-off-by: Anatoliy Bazko <abazko@redhat.com>
  • Loading branch information
tolusha committed Sep 19, 2018
1 parent 94b3945 commit 3ea4d25
Show file tree
Hide file tree
Showing 6 changed files with 193 additions and 16 deletions.
18 changes: 12 additions & 6 deletions packages/debug/src/browser/debug-command.ts
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,8 @@ export namespace DEBUG_COMMANDS {

export const STOP = {
id: 'debug.stop',
label: 'Stop'
label: 'Stop',
iconClass: 'theia-debug-stop'
};

export const OPEN_CONFIGURATION = {
Expand All @@ -83,12 +84,14 @@ export namespace DEBUG_COMMANDS {
};
export const SUSPEND_ALL_THREADS = {
id: 'debug.thread.suspend.all',
label: 'Suspend'
label: 'Suspend',
iconClass: 'theia-debug-thread-suspend-all'
};

export const RESUME_ALL_THREADS = {
id: 'debug.thread.resume.all',
label: 'Resume'
label: 'Resume',
iconClass: 'theia-debug-thread-resume-all'
};

export const MODIFY_VARIABLE = {
Expand All @@ -103,17 +106,20 @@ export namespace DEBUG_COMMANDS {

export const STEP = {
id: 'debug.thread.next',
label: 'Step'
label: 'Step',
iconClass: 'theia-debug-step-over'
};

export const STEPIN = {
id: 'debug.thread.stepin',
label: 'Step In'
label: 'Step In',
iconClass: 'theia-debug-step-in'
};

export const STEPOUT = {
id: 'debug.thread.stepout',
label: 'Step Out'
label: 'Step Out',
iconClass: 'theia-debug-step-out'
};
}

Expand Down
2 changes: 2 additions & 0 deletions packages/debug/src/browser/debug-frontend-module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ import { BreakpointsManager } from './breakpoint/breakpoint-manager';
import { BreakpointStorage } from './breakpoint/breakpoint-marker';
import { SourceOpener } from './debug-utils';
import { BreakpointsApplier } from './breakpoint/breakpoint-applier';
import { DebugToolBar } from './view/debug-toolbar-widget';

export const DEBUG_VARIABLES_PROPS = <TreeProps>{
...defaultTreeProps,
Expand Down Expand Up @@ -125,6 +126,7 @@ function createDebugTargetContainer(context: interfaces.Context, debugSession: D
child.bind(DebugSession).toConstantValue(debugSession);
child.bind(DebugSelection).toConstantValue(selection);
child.bind(DebugThreadsWidget).toSelf();
child.bind(DebugToolBar).toSelf();
child.bind(DebugStackFramesWidget).toSelf();
child.bind(DebugBreakpointsWidget).toSelf();

Expand Down
1 change: 1 addition & 0 deletions packages/debug/src/browser/debug-session.ts
Original file line number Diff line number Diff line change
Expand Up @@ -224,6 +224,7 @@ export class DebugSessionImpl extends EventEmitter implements DebugSession {

protected proceedEvent(event: DebugProtocol.Event): void {
this.emit(event.event, event);
this.emit('*', event);
}

protected onClose(): void {
Expand Down
84 changes: 81 additions & 3 deletions packages/debug/src/browser/style/index.css

Large diffs are not rendered by default.

11 changes: 4 additions & 7 deletions packages/debug/src/browser/view/debug-frontend-contribution.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import { DebugVariablesWidget } from './debug-variables-widget';
import { ExtDebugProtocol } from '@theia/debug/src/common/debug-common';
import { Disposable } from '@theia/core';
import { DebugStyles } from './base/debug-styles';
import { DebugToolBar } from './debug-toolbar-widget';

export const DEBUG_FACTORY_ID = 'debug';

Expand All @@ -50,7 +51,8 @@ export class DebugWidget extends BaseWidget {
@inject(DebugThreadsWidget) protected readonly threads: DebugThreadsWidget,
@inject(DebugStackFramesWidget) protected readonly frames: DebugStackFramesWidget,
@inject(DebugBreakpointsWidget) protected readonly breakpoints: DebugBreakpointsWidget,
@inject(DebugVariablesWidget) protected readonly variables: DebugVariablesWidget
@inject(DebugVariablesWidget) protected readonly variables: DebugVariablesWidget,
@inject(DebugToolBar) protected readonly toolbar: DebugToolBar
) {
super();

Expand All @@ -60,7 +62,7 @@ export class DebugWidget extends BaseWidget {
this.title.closable = true;
this.title.iconClass = 'fa fa-bug';
this.addClass(DebugStyles.DEBUG_CONTAINER);
this.widgets = [this.variables, this.threads, this.frames, this.breakpoints];
this.widgets = [this.toolbar, this.variables, this.threads, this.frames, this.breakpoints];
}

@postConstruct()
Expand Down Expand Up @@ -105,11 +107,6 @@ export class DebugWidget extends BaseWidget {
super.onActivateRequest(msg);
this.widgets.forEach(w => w.activate());
}

protected onCloseRequest(msg: Message): void {
this.widgets.forEach(w => w.close());
super.onCloseRequest(msg);
}
}

@injectable()
Expand Down
93 changes: 93 additions & 0 deletions packages/debug/src/browser/view/debug-toolbar-widget.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
/********************************************************************************
* Copyright (C) 2018 Red Hat, Inc. and others.
*
* This program and the accompanying materials are made available under the
* terms of the Eclipse Public License v. 2.0 which is available at
* http://www.eclipse.org/legal/epl-2.0.
*
* This Source Code may also be made available under the following Secondary
* Licenses when the conditions for such availability set forth in the Eclipse
* Public License v. 2.0 are satisfied: GNU General Public License, version 2
* with the GNU Classpath Exception which is available at
* https://www.gnu.org/software/classpath/license.html.
*
* SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
********************************************************************************/

import { inject, postConstruct } from 'inversify';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Message } from '@phosphor/messaging';
import { CommandRegistry } from '@theia/core/lib/common';
import { DebugSession } from '../debug-model';
import { DEBUG_COMMANDS } from '../debug-command';
import { BaseWidget } from '@theia/core/lib/browser/widgets';
import { Disposable } from '@theia/core';
import { DebugSessionManager } from '../debug-session';

/**
* Debug toolbar.
*/
export class DebugToolBar extends BaseWidget {
protected toolbarContainer: HTMLElement;

constructor(
@inject(DebugSession) protected readonly debugSession: DebugSession,
@inject(DebugSessionManager) protected readonly debugSessionManager: DebugSessionManager,
@inject(CommandRegistry) protected readonly commandRegistry: CommandRegistry) {
super();

this.id = this.createId();
this.addClass('debug-toolbar');
}

@postConstruct()
protected init() {
this.toolbarContainer = document.createElement('div');
this.node.appendChild(this.toolbarContainer);

const eventListener = () => this.update();

this.debugSession.on('*', eventListener);
this.toDispose.push(Disposable.create(() => this.debugSession.removeListener('*', eventListener)));

this.toDispose.push(this.debugSessionManager.onDidDestroyDebugSession((debugSession: DebugSession) => this.onDebugSessionDestroyed(debugSession)));
}

protected onDebugSessionDestroyed(debugSession: DebugSession) {
if (debugSession.sessionId === this.debugSession.sessionId) {
this.update();
}
}

protected onUpdateRequest(msg: Message) {
super.onUpdateRequest(msg);
ReactDOM.render(<React.Fragment>{this.render()}</React.Fragment>, this.toolbarContainer);
}

protected render(): React.ReactNode {
const stopButton = this.renderButton(DEBUG_COMMANDS.STOP.id);
const resumeAllButton = this.renderButton(DEBUG_COMMANDS.RESUME_ALL_THREADS.id);
const suspendAllButton = this.renderButton(DEBUG_COMMANDS.SUSPEND_ALL_THREADS.id);
const stepOverButton = this.renderButton(DEBUG_COMMANDS.STEP.id);
const stepIntoButton = this.renderButton(DEBUG_COMMANDS.STEPIN.id);
const stepOutButton = this.renderButton(DEBUG_COMMANDS.STEPOUT.id);
return <div className='button-container'>{stopButton}{resumeAllButton}{suspendAllButton}{stepOverButton}{stepIntoButton}{stepOutButton}</div>;
}

protected renderButton(commandId: string): React.ReactNode {
const command = this.commandRegistry.getCommand(commandId);
if (!command) {
return '';
}

const enabled = this.commandRegistry.isEnabled(commandId) ? 'enabled' : '';
const clickHandler = () => this.commandRegistry.executeCommand(commandId);

return <span className={`btn ${enabled} ${command.iconClass}`} title={`${command.label}`} onClick={clickHandler}></span>;
}

private createId(): string {
return `debug-toolbar-${this.debugSession.sessionId}`;
}
}

0 comments on commit 3ea4d25

Please sign in to comment.