Skip to content

Commit

Permalink
Add icon classes to debug tooldbar contributions
Browse files Browse the repository at this point in the history
  • Loading branch information
Miguel Solorio committed Nov 14, 2019
1 parent 3091f55 commit c9f9081
Show file tree
Hide file tree
Showing 7 changed files with 69 additions and 28 deletions.
3 changes: 2 additions & 1 deletion src/vs/base/browser/ui/codiconLabel/codicon/codicon.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

@font-face {
font-family: "codicon";
src: url("./codicon.ttf?d02baa177e0c5b865597b4e28fca9e07") format("truetype");
src: url("./codicon.ttf?ffbbbd998c09cc4af5af9e181bb08a70") format("truetype");
}

.codicon[class*='codicon-'] {
Expand Down Expand Up @@ -399,3 +399,4 @@
.codicon-debug-breakpoint-stackframe:before { content: "\eb8b" }
.codicon-debug-breakpoint-stackframe-focused:before { content: "\eb8b" }
.codicon-debug-breakpoint-unsupported:before { content: "\eb8c" }
.codicon-debug-step-back:before { content: "\f101" }
Binary file modified src/vs/base/browser/ui/codiconLabel/codicon/codicon.ttf
View file
Binary file not shown.
54 changes: 39 additions & 15 deletions src/vs/platform/actions/browser/menuEntryActionViewItem.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -236,28 +236,52 @@ export class MenuEntryActionViewItem extends ActionViewItem {
_updateItemClass(item: ICommandAction): void {
this._itemClassDispose.value = undefined;

if (item.iconLocation) {
let iconClass: string;

const iconPathMapKey = item.iconLocation.dark.toString();

if (MenuEntryActionViewItem.ICON_PATH_TO_CSS_RULES.has(iconPathMapKey)) {
iconClass = MenuEntryActionViewItem.ICON_PATH_TO_CSS_RULES.get(iconPathMapKey)!;
} else {
iconClass = ids.nextId();
createCSSRule(`.icon.${iconClass}`, `background-image: ${asCSSUrl(item.iconLocation.light || item.iconLocation.dark)}`);
createCSSRule(`.vs-dark .icon.${iconClass}, .hc-black .icon.${iconClass}`, `background-image: ${asCSSUrl(item.iconLocation.dark)}`);
MenuEntryActionViewItem.ICON_PATH_TO_CSS_RULES.set(iconPathMapKey, iconClass);
}
// icon class
if (item.iconClassName) {
let iconClass = item.iconClassName;

if (this.label) {
addClasses(this.label, 'icon', iconClass);
addClasses(this.label, 'codicon', iconClass);
this._itemClassDispose.value = toDisposable(() => {
if (this.label) {
removeClasses(this.label, 'icon', iconClass);
removeClasses(this.label, 'codicon', iconClass);
}
});
}

}

// icon path
else if (item.iconLocation) {
let iconClass: string;

if (typeof item.iconLocation?.dark !== 'undefined') {

const iconPathMapKey = item.iconLocation.dark.toString();

if (MenuEntryActionViewItem.ICON_PATH_TO_CSS_RULES.has(iconPathMapKey)) {
iconClass = MenuEntryActionViewItem.ICON_PATH_TO_CSS_RULES.get(iconPathMapKey)!;
} else {
iconClass = ids.nextId();
createCSSRule(`.icon.${iconClass}`, `background-image: ${asCSSUrl(item.iconLocation.light || item.iconLocation.dark)}`);
createCSSRule(`.vs-dark .icon.${iconClass}, .hc-black .icon.${iconClass}`, `background-image: ${asCSSUrl(item.iconLocation.dark)}`);
MenuEntryActionViewItem.ICON_PATH_TO_CSS_RULES.set(iconPathMapKey, iconClass);
}

if (this.label) {

addClasses(this.label, 'icon', iconClass);
this._itemClassDispose.value = toDisposable(() => {
if (this.label) {
removeClasses(this.label, 'icon', iconClass);
}
});
}

}



}
}
}
Expand Down
3 changes: 2 additions & 1 deletion src/vs/platform/actions/common/actions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@ export interface ICommandAction {
id: string;
title: string | ILocalizedString;
category?: string | ILocalizedString;
iconLocation?: { dark: URI; light?: URI; };
iconClassName?: string;
iconLocation?: { dark?: URI; light?: URI; };
precondition?: ContextKeyExpr;
toggled?: ContextKeyExpr;
}
Expand Down
23 changes: 12 additions & 11 deletions src/vs/workbench/contrib/debug/browser/debug.contribution.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -278,14 +278,15 @@ Registry.as<IWorkbenchContributionsRegistry>(WorkbenchExtensions.Workbench).regi

// Debug toolbar

const registerDebugToolBarItem = (id: string, title: string, iconLightUri: URI, iconDarkUri: URI, order: number, when?: ContextKeyExpr, precondition?: ContextKeyExpr) => {
const registerDebugToolBarItem = (id: string, title: string, order: number, iconClassName?: string, iconLightUri?: URI, iconDarkUri?: URI, when?: ContextKeyExpr, precondition?: ContextKeyExpr) => {
MenuRegistry.appendMenuItem(MenuId.DebugToolBar, {
group: 'navigation',
when,
order,
command: {
id,
title,
iconClassName,
iconLocation: {
light: iconLightUri,
dark: iconDarkUri
Expand All @@ -295,16 +296,16 @@ const registerDebugToolBarItem = (id: string, title: string, iconLightUri: URI,
});
};

registerDebugToolBarItem(CONTINUE_ID, CONTINUE_LABEL, URI.parse(registerAndGetAmdImageURL('vs/workbench/contrib/debug/browser/media/continue-light.svg')), URI.parse(registerAndGetAmdImageURL('vs/workbench/contrib/debug/browser/media/continue-dark.svg')), 10, CONTEXT_DEBUG_STATE.isEqualTo('stopped'));
registerDebugToolBarItem(PAUSE_ID, PAUSE_LABEL, URI.parse(registerAndGetAmdImageURL('vs/workbench/contrib/debug/browser/media/pause-light.svg')), URI.parse(registerAndGetAmdImageURL('vs/workbench/contrib/debug/browser/media/pause-dark.svg')), 10, CONTEXT_DEBUG_STATE.notEqualsTo('stopped'));
registerDebugToolBarItem(STOP_ID, STOP_LABEL, URI.parse(registerAndGetAmdImageURL('vs/workbench/contrib/debug/browser/media/stop-light.svg')), URI.parse(registerAndGetAmdImageURL('vs/workbench/contrib/debug/browser/media/stop-dark.svg')), 70, CONTEXT_FOCUSED_SESSION_IS_ATTACH.toNegated());
registerDebugToolBarItem(DISCONNECT_ID, DISCONNECT_LABEL, URI.parse(registerAndGetAmdImageURL('vs/workbench/contrib/debug/browser/media/disconnect-light.svg')), URI.parse(registerAndGetAmdImageURL('vs/workbench/contrib/debug/browser/media/disconnect-dark.svg')), 70, CONTEXT_FOCUSED_SESSION_IS_ATTACH);
registerDebugToolBarItem(STEP_OVER_ID, STEP_OVER_LABEL, URI.parse(registerAndGetAmdImageURL('vs/workbench/contrib/debug/browser/media/step-over-light.svg')), URI.parse(registerAndGetAmdImageURL('vs/workbench/contrib/debug/browser/media/step-over-dark.svg')), 20, undefined, CONTEXT_DEBUG_STATE.isEqualTo('stopped'));
registerDebugToolBarItem(STEP_INTO_ID, STEP_INTO_LABEL, URI.parse(registerAndGetAmdImageURL('vs/workbench/contrib/debug/browser/media/step-into-light.svg')), URI.parse(registerAndGetAmdImageURL('vs/workbench/contrib/debug/browser/media/step-into-dark.svg')), 30, undefined, CONTEXT_DEBUG_STATE.isEqualTo('stopped'));
registerDebugToolBarItem(STEP_OUT_ID, STEP_OUT_LABEL, URI.parse(registerAndGetAmdImageURL('vs/workbench/contrib/debug/browser/media/step-out-light.svg')), URI.parse(registerAndGetAmdImageURL('vs/workbench/contrib/debug/browser/media/step-out-dark.svg')), 40, undefined, CONTEXT_DEBUG_STATE.isEqualTo('stopped'));
registerDebugToolBarItem(RESTART_SESSION_ID, RESTART_LABEL, URI.parse(registerAndGetAmdImageURL('vs/workbench/contrib/debug/browser/media/restart-light.svg')), URI.parse(registerAndGetAmdImageURL('vs/workbench/contrib/debug/browser/media/restart-dark.svg')), 60);
registerDebugToolBarItem(STEP_BACK_ID, nls.localize('stepBackDebug', "Step Back"), URI.parse(registerAndGetAmdImageURL('vs/workbench/contrib/debug/browser/media/step-back-light.svg')), URI.parse(registerAndGetAmdImageURL('vs/workbench/contrib/debug/browser/media/step-back-dark.svg')), 50, CONTEXT_STEP_BACK_SUPPORTED, CONTEXT_DEBUG_STATE.isEqualTo('stopped'));
registerDebugToolBarItem(REVERSE_CONTINUE_ID, nls.localize('reverseContinue', "Reverse"), URI.parse(registerAndGetAmdImageURL('vs/workbench/contrib/debug/browser/media/reverse-continue-light.svg')), URI.parse(registerAndGetAmdImageURL('vs/workbench/contrib/debug/browser/media/reverse-continue-dark.svg')), 60, CONTEXT_STEP_BACK_SUPPORTED, CONTEXT_DEBUG_STATE.isEqualTo('stopped'));
registerDebugToolBarItem(CONTINUE_ID, CONTINUE_LABEL, 10, 'codicon-debug-continue', undefined, undefined, CONTEXT_DEBUG_STATE.isEqualTo('stopped'));
registerDebugToolBarItem(PAUSE_ID, PAUSE_LABEL, 10, 'codicon-debug-pause', undefined, undefined, CONTEXT_DEBUG_STATE.notEqualsTo('stopped'));
registerDebugToolBarItem(STOP_ID, STOP_LABEL, 70, 'codicon-debug-stop', undefined, undefined, CONTEXT_FOCUSED_SESSION_IS_ATTACH.toNegated());
registerDebugToolBarItem(DISCONNECT_ID, DISCONNECT_LABEL, 70, 'codicon-debug-disconnect', undefined, undefined, CONTEXT_FOCUSED_SESSION_IS_ATTACH);
registerDebugToolBarItem(STEP_OVER_ID, STEP_OVER_LABEL, 20, 'codicon-debug-step-over', undefined, undefined, undefined, CONTEXT_DEBUG_STATE.isEqualTo('stopped'));
registerDebugToolBarItem(STEP_INTO_ID, STEP_INTO_LABEL, 30, 'codicon-debug-step-into', undefined, undefined, undefined, CONTEXT_DEBUG_STATE.isEqualTo('stopped'));
registerDebugToolBarItem(STEP_OUT_ID, STEP_OUT_LABEL, 40, 'codicon-debug-step-out', undefined, undefined, undefined, CONTEXT_DEBUG_STATE.isEqualTo('stopped'));
registerDebugToolBarItem(RESTART_SESSION_ID, RESTART_LABEL, 60, 'codicon-debug-restart', undefined, undefined);
registerDebugToolBarItem(STEP_BACK_ID, nls.localize('stepBackDebug', "Step Back"), 50, 'codicon-debug-step-back', undefined, undefined, CONTEXT_STEP_BACK_SUPPORTED, CONTEXT_DEBUG_STATE.isEqualTo('stopped'));
registerDebugToolBarItem(REVERSE_CONTINUE_ID, nls.localize('reverseContinue', "Reverse"), 60, 'codicon-debug-continue', undefined, undefined, CONTEXT_STEP_BACK_SUPPORTED, CONTEXT_DEBUG_STATE.isEqualTo('stopped'));

// Debug callstack context menu
const registerDebugCallstackItem = (id: string, title: string, order: number, when?: ContextKeyExpr, precondition?: ContextKeyExpr, group = 'navigation') => {
Expand Down
11 changes: 11 additions & 0 deletions src/vs/workbench/contrib/debug/browser/debugToolBar.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,12 @@ export const debugIconContinueForeground = registerColor('debugIcon.continueFore
hc: '#75BEFF'
}, localize('debugIcon.continueForeground', "Debug toolbar icon for continue."));

export const debugIconStepBackForeground = registerColor('debugIcon.stepBackForeground', {
dark: '#75BEFF',
light: '#007ACC',
hc: '#75BEFF'
}, localize('debugIcon.stepBackForeground', "Debug toolbar icon for step back."));

export class DebugToolBar extends Themable implements IWorkbenchContribution {

private $el: HTMLElement;
Expand Down Expand Up @@ -391,4 +397,9 @@ registerThemingParticipant((theme, collector) => {
if (debugIconContinueColor) {
collector.addRule(`.monaco-workbench .codicon-debug-continue { color: ${debugIconContinueColor} !important; }`);
}

const debugIconStepBackColor = theme.getColor(debugIconStepBackForeground);
if (debugIconStepBackColor) {
collector.addRule(`.monaco-workbench .codicon-debug-step-back { color: ${debugIconStepBackColor} !important; }`);
}
});
3 changes: 3 additions & 0 deletions src/vs/workbench/contrib/debug/browser/media/debugToolBar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,4 +43,7 @@
background-size: 16px;
background-position: center center;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
}

0 comments on commit c9f9081

Please sign in to comment.