development/vscode
development/vscode
1
0
Fork 0
mirror of https://github.com/Microsoft/vscode synced 2024-09-13 13:46:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

breakpoint icons (include function breakpoint icons)

Browse source 
fixes #43763
This commit is contained in:
isidor 2018-02-26 16:11:37 +01:00
parent 635f82fa7e
commit a90be3e1ab
14 changed files with 90 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/vs/workbench/parts/debug/browser/breakpointsView.ts
View file

@ -539,7 +539,7 @@ export function getBreakpointMessageAndClassName(debugService: IDebugService, te
if (!breakpoint.enabled || !debugService.getModel().areBreakpointsActivated()) {
return {
className: 'debug-breakpoint-disabled-glyph',
className: breakpoint instanceof FunctionBreakpoint ? 'debug-function-breakpoint-disabled' : 'debug-breakpoint-disabled',
message: nls.localize('breakpointDisabledHover', "Disabled breakpoint"),
};
}
@ -549,7 +549,7 @@ export function getBreakpointMessageAndClassName(debugService: IDebugService, te
};
if (debugActive && !breakpoint.verified) {
return {
className: 'debug-breakpoint-unverified-glyph',
className: breakpoint instanceof FunctionBreakpoint ? 'debug-function-breakpoint-unverified' : 'debug-breakpoint-unverified',
message: appendMessage(nls.localize('breakpointUnverifieddHover', "Unverified breakpoint")),
};
}
@ -558,19 +558,19 @@ export function getBreakpointMessageAndClassName(debugService: IDebugService, te
if (breakpoint instanceof FunctionBreakpoint) {
if (process && !process.session.capabilities.supportsFunctionBreakpoints) {
return {
className: 'debug-breakpoint-unsupported-glyph',
className: 'debug-breakpoint-unsupported',
message: nls.localize('functionBreakpointUnsupported', "Function breakpoints not supported by this debug type"),
};
}
return {
className: 'debug-breakpoint-glyph',
className: 'debug-function-breakpoint',
};
}
if (debugActive && textFileService.isDirty(breakpoint.uri)) {
return {
className: 'debug-breakpoint-unverified-glyph',
className: 'debug-breakpoint-unverified',
message: appendMessage(nls.localize('breakpointDirtydHover', "Unverified breakpoint. File is modified, please restart debug session.")),
};
}
@ -578,32 +578,32 @@ export function getBreakpointMessageAndClassName(debugService: IDebugService, te
if (breakpoint.condition || breakpoint.hitCondition) {
if (process && breakpoint.condition && !process.session.capabilities.supportsConditionalBreakpoints) {
return {
className: 'debug-breakpoint-unsupported-glyph',
className: 'debug-breakpoint-unsupported',
message: nls.localize('conditionalBreakpointUnsupported', "Conditional breakpoints not supported by this debug type"),
};
}
if (process && breakpoint.hitCondition && !process.session.capabilities.supportsHitConditionalBreakpoints) {
return {
className: 'debug-breakpoint-unsupported-glyph',
className: 'debug-breakpoint-unsupported',
message: nls.localize('hitBreakpointUnsupported', "Hit conditional breakpoints not supported by this debug type"),
};
}
if (breakpoint.condition && breakpoint.hitCondition) {
return {
className: 'debug-breakpoint-conditional-glyph',
className: 'debug-breakpoint-conditional',
message: appendMessage(`Expression: ${breakpoint.condition}\nHitCount: ${breakpoint.hitCondition}`)
};
}
return {
className: 'debug-breakpoint-conditional-glyph',
className: 'debug-breakpoint-conditional',
message: appendMessage(breakpoint.condition ? breakpoint.condition : breakpoint.hitCondition)
};
}
return {
className: 'debug-breakpoint-glyph',
className: 'debug-breakpoint',
message: breakpoint.message
};
}

2
src/vs/workbench/parts/debug/browser/media/breakpoint-disabled-dark.svg Normal file → Executable file
View file

@ -1 +1 @@
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" fill-opacity="0.8"><g fill="#5A5A5A"><circle cx="8" cy="8" r="5"/></g></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.icon-canvas-transparent,.icon-vs-out{fill:#252526;}.icon-canvas-transparent{opacity:0;}.icon-disabled-grey{fill:#8a8a8a;}</style></defs><title>Breakpoint_disabled_16xMD</title><g id="canvas"><path class="icon-canvas-transparent" d="M16,0V16H0V0Z"/></g><g id="outline" style="display: none;"><path class="icon-vs-out" d="M14,8A6,6,0,1,1,8,2,6.007,6.007,0,0,1,14,8Z"/></g><g id="iconBg"><path class="icon-disabled-grey" d="M13,8A5,5,0,1,1,8,3,5,5,0,0,1,13,8Z"/></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 198 B

After

Width:  |  Height:  |  Size: 543 B

2
src/vs/workbench/parts/debug/browser/media/breakpoint-disabled.svg Normal file → Executable file
View file

@ -1 +1 @@
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" fill-opacity="0.6"><g fill="#6C6C6C"><circle cx="8" cy="8" r="5"/></g></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.icon-canvas-transparent,.icon-vs-out{fill:#f6f6f6;}.icon-canvas-transparent{opacity:0;}.icon-disabled-grey{fill:#848484;}</style></defs><title>Breakpoint_disabled_16xMD</title><g id="canvas"><path class="icon-canvas-transparent" d="M16,0V16H0V0Z"/></g><g id="outline" style="display: none;"><path class="icon-vs-out" d="M14,8A6,6,0,1,1,8,2,6.007,6.007,0,0,1,14,8Z"/></g><g id="iconBg"><path class="icon-disabled-grey" d="M13,8A5,5,0,1,1,8,3,5,5,0,0,1,13,8Z"/></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 198 B

After

Width:  |  Height:  |  Size: 543 B

1
src/vs/workbench/parts/debug/browser/media/breakpoint-function-dark.svg Executable file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.icon-canvas-transparent,.icon-vs-out{fill:#252526;}.icon-canvas-transparent{opacity:0;}.icon-vs-red{fill:#c10;}</style></defs><title>BreakpointFunction_16xMD</title><g id="canvas"><path class="icon-canvas-transparent" d="M16,0V16H0V0Z"/></g><g id="outline" style="display: none;"><path class="icon-vs-out" d="M14.7,14H1.3L8,1.941Z"/></g><g id="iconBg"><path class="icon-vs-red" d="M13,13H3L8,4Z"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 482 B

1
src/vs/workbench/parts/debug/browser/media/breakpoint-function-disabled-dark.svg Executable file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.icon-canvas-transparent,.icon-vs-out{fill:#252526;}.icon-canvas-transparent{opacity:0;}.icon-disabled-grey{fill:#848484;}</style></defs><title>BreakpointFunction_disabled_16xMD</title><g id="canvas"><path class="icon-canvas-transparent" d="M16,0V16H0V0Z"/></g><g id="outline" style="display: none;"><path class="icon-vs-out" d="M14.7,14H1.3L8,1.941Z"/></g><g id="iconBg"><path class="icon-disabled-grey" d="M13,13H3L8,4Z"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 508 B

1
src/vs/workbench/parts/debug/browser/media/breakpoint-function-disabled.svg Executable file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.icon-canvas-transparent,.icon-vs-out{fill:#f6f6f6;}.icon-canvas-transparent{opacity:0;}.icon-disabled-grey{fill:#848484;}</style></defs><title>BreakpointFunction_disabled_16xMD</title><g id="canvas"><path class="icon-canvas-transparent" d="M16,0V16H0V0Z"/></g><g id="outline" style="display: none;"><path class="icon-vs-out" d="M14.7,14H1.3L8,1.941Z"/></g><g id="iconBg"><path class="icon-disabled-grey" d="M13,13H3L8,4Z"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 508 B

1
src/vs/workbench/parts/debug/browser/media/breakpoint-function-unverified-dark.svg Executable file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.icon-canvas-transparent,.icon-vs-out{fill:#252526;}.icon-canvas-transparent{opacity:0;}.icon-vs-red{fill:#f6f6f6;}</style></defs><title>BreakpointFunctionUnverified_16xMD</title><g id="canvas"><path class="icon-canvas-transparent" d="M16,0V16H0V0Z"/></g><g id="outline" style="display: none;"><path class="icon-vs-out" d="M14.7,14H1.3L8,1.941Z"/></g><g id="iconBg"><path class="icon-vs-red" d="M8,4,3,13H13ZM8,6.059,11.3,12H4.7Z"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 516 B

1
src/vs/workbench/parts/debug/browser/media/breakpoint-function-unverified.svg Executable file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.icon-canvas-transparent,.icon-vs-out{fill:#f6f6f6;}.icon-canvas-transparent{opacity:0;}.icon-vs-red{fill:#f6f6f6;}</style></defs><title>BreakpointFunctionUnverified_16xMD</title><g id="canvas"><path class="icon-canvas-transparent" d="M16,0V16H0V0Z"/></g><g id="outline" style="display: none;"><path class="icon-vs-out" d="M14.7,14H1.3L8,1.941Z"/></g><g id="iconBg"><path class="icon-vs-red" d="M8,4,3,13H13ZM8,6.059,11.3,12H4.7Z"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 516 B

1
src/vs/workbench/parts/debug/browser/media/breakpoint-function.svg Executable file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.icon-canvas-transparent,.icon-vs-out{fill:#f6f6f6;}.icon-canvas-transparent{opacity:0;}.icon-vs-red{fill:#e51400;}</style></defs><title>BreakpointFunction_16xMD</title><g id="canvas"><path class="icon-canvas-transparent" d="M16,0V16H0V0Z"/></g><g id="outline" style="display: none;"><path class="icon-vs-out" d="M14.7,14H1.3L8,1.941Z"/></g><g id="iconBg"><path class="icon-vs-red" d="M13,13H3L8,4Z"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 484 B

2
src/vs/workbench/parts/debug/browser/media/breakpoint-unverified-dark.svg Normal file → Executable file
View file

@ -1 +1 @@
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g stroke="#5A5A5A" stroke-width="3" stroke-opacity="0.8"><circle cx="8" cy="8" r="4"/></g></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.icon-canvas-transparent,.icon-vs-out{fill:#252526;}.icon-canvas-transparent{opacity:0;}.icon-vs-red{fill:#8a8a8a;}</style></defs><title>BreakpointUnverified_16xMD</title><g id="canvas"><path class="icon-canvas-transparent" d="M16,0V16H0V0Z"/></g><g id="outline" style="display: none;"><path class="icon-vs-out" d="M14,8A6,6,0,1,1,8,2,6.007,6.007,0,0,1,14,8Z"/></g><g id="iconBg"><path class="icon-vs-red" d="M8,3a5,5,0,1,0,5,5A5,5,0,0,0,8,3Zm0,9a4,4,0,1,1,4-4A4,4,0,0,1,8,12Z"/></g></svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 219 B

After

Width:  |  Height:  |  Size: 563 B

2
src/vs/workbench/parts/debug/browser/media/breakpoint-unverified.svg Normal file → Executable file
View file

@ -1 +1 @@
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g stroke="#6C6C6C" stroke-width="3" stroke-opacity="0.6"><circle cx="8" cy="8" r="4"/></g></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.icon-canvas-transparent,.icon-vs-out{fill:#f6f6f6;}.icon-canvas-transparent{opacity:0;}.icon-vs-red{fill:#848484;}</style></defs><title>BreakpointUnverified_16xMD</title><g id="canvas"><path class="icon-canvas-transparent" d="M16,0V16H0V0Z"/></g><g id="outline" style="display: none;"><path class="icon-vs-out" d="M14,8A6,6,0,1,1,8,2,6.007,6.007,0,0,1,14,8Z"/></g><g id="iconBg"><path class="icon-vs-red" d="M8,3a5,5,0,1,0,5,5A5,5,0,0,0,8,3Zm0,9a4,4,0,1,1,4-4A4,4,0,0,1,8,12Z"/></g></svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 219 B

After

Width:  |  Height:  |  Size: 563 B

102
src/vs/workbench/parts/debug/browser/media/debug.contribution.css
View file

@ -29,30 +29,30 @@
background: rgba(206, 231, 206, 1);
}
.debug-breakpoint-hint-glyph {
.debug-breakpoint-hint {
background: url('breakpoint-hint.svg') center center no-repeat;
}
.debug-breakpoint-disabled-glyph,
.monaco-editor .debug-breakpoint-column.debug-breakpoint-disabled-glyph-column::before {
.debug-breakpoint-disabled,
.monaco-editor .debug-breakpoint-column.debug-breakpoint-disabled-column::before {
background: url('breakpoint-disabled.svg') center center no-repeat;
}
.debug-breakpoint-unverified-glyph,
.monaco-editor .debug-breakpoint-column.debug-breakpoint-unverified-glyph-column::before {
.debug-breakpoint-unverified,
.monaco-editor .debug-breakpoint-column.debug-breakpoint-unverified-column::before {
background: url('breakpoint-unverified.svg') center center no-repeat;
}
.monaco-editor .debug-top-stack-frame-glyph {
.monaco-editor .debug-top-stack-frame {
background: url('current-arrow.svg') center center no-repeat;
}
.monaco-editor .debug-focused-stack-frame-glyph {
.monaco-editor .debug-focused-stack-frame {
background: url('stackframe-arrow.svg') center center no-repeat;
}
.debug-breakpoint-glyph,
.monaco-editor .debug-breakpoint-column.debug-breakpoint-glyph-column::before {
.debug-breakpoint,
.monaco-editor .debug-breakpoint-column.debug-breakpoint-column::before {
background: url('breakpoint.svg') center center no-repeat;
}
@ -68,27 +68,40 @@
background-position: initial !important;
}
.debug-breakpoint-conditional-glyph,
.monaco-editor .debug-breakpoint-column.debug-breakpoint-conditional-glyph-column::before {
.debug-function-breakpoint {
background: url('breakpoint-function.svg') center center no-repeat;
}
.debug-function-breakpoint-unverified {
background: url('breakpoint-function-unverified.svg') center center no-repeat;
}
.debug-function-breakpoint-disabled {
background: url('breakpoint-function-disabled.svg') center center no-repeat;
}
.debug-breakpoint-conditional,
.monaco-editor .debug-breakpoint-column.debug-breakpoint-conditional-column::before {
background: url('breakpoint-conditional.svg') center center no-repeat;
}
.debug-breakpoint-unsupported-glyph,
.monaco-editor .debug-breakpoint-column.debug-breakpoint-unsupported-glyph-column::before {
.debug-breakpoint-unsupported,
.monaco-editor .debug-breakpoint-column.debug-breakpoint-unsupported-column::before {
background: url('breakpoint-unsupported.svg') center center no-repeat;
}
.monaco-editor .debug-top-stack-frame-glyph.debug-breakpoint-glyph,
.monaco-editor .debug-top-stack-frame-glyph.debug-breakpoint-conditional-glyph,
.monaco-editor .debug-breakpoint-column.debug-breakpoint-glyph-column.debug-top-stack-frame-column::before,
.monaco-editor.vs-dark .debug-top-stack-frame-glyph.debug-breakpoint-glyph,
.monaco-editor.vs-dark .debug-top-stack-frame-glyph.debug-breakpoint-conditional-glyph,
.monaco-editor.vs-dark .debug-breakpoint-column.debug-breakpoint-glyph-column.debug-top-stack-frame-column::before {
.monaco-editor .debug-top-stack-frame.debug-breakpoint,
.monaco-editor .debug-top-stack-frame.debug-breakpoint-conditional,
.monaco-editor .debug-breakpoint-column.debug-breakpoint-column.debug-top-stack-frame-column::before,
.monaco-editor.vs-dark .debug-top-stack-frame.debug-breakpoint,
.monaco-editor.vs-dark .debug-top-stack-frame.debug-breakpoint-conditional,
.monaco-editor.vs-dark .debug-breakpoint-column.debug-breakpoint-column.debug-top-stack-frame-column::before {
background: url('current-and-breakpoint.svg') center center no-repeat;
}
.monaco-editor .debug-focused-stack-frame-glyph.debug-breakpoint-glyph,
.monaco-editor .debug-focused-stack-frame-glyph.debug-breakpoint-conditional-glyph {
.monaco-editor .debug-focused-stack-frame.debug-breakpoint,
.monaco-editor .debug-focused-stack-frame.debug-breakpoint-conditional {
background: url('stackframe-and-breakpoint.svg') center center no-repeat;
}
@ -233,40 +246,61 @@
background-color: rgba(255, 255, 0, 0.3)
}
.vs-dark .debug-breakpoint-glyph,
.monaco-editor.vs-dark .debug-breakpoint-column.debug-breakpoint-glyph-column::before {
.vs-dark .debug-breakpoint,
.hc-black .debug-breakpoint,
.monaco-editor.vs-dark .debug-breakpoint-column.debug-breakpoint-column::before {
background: url('breakpoint-dark.svg') center center no-repeat;
}
.vs-dark .debug-breakpoint-conditional-glyph,
.monaco-editor.vs-dark .debug-breakpoint-column.debug-breakpoint-conditional-glyph-column::before {
.vs-dark .debug-breakpoint-conditional,
.hc-black .debug-breakpoint-conditional,
.monaco-editor.vs-dark .debug-breakpoint-column.debug-breakpoint-conditional-column::before {
background: url('breakpoint-conditional-dark.svg') center center no-repeat;
}
.vs-dark .debug-breakpoint-unsupported-glyph,
.monaco-editor.vs-dark .debug-breakpoint-column.debug-breakpoint-unsupported-glyph-column::before {
.vs-dark .debug-breakpoint-unsupported,
.hc-black .debug-breakpoint-unsupported,
.monaco-editor.vs-dark .debug-breakpoint-column.debug-breakpoint-unsupported-column::before {
background: url('breakpoint-unsupported-dark.svg') center center no-repeat;
}
.vs-dark .debug-breakpoint-disabled-glyph,
.monaco-editor.vs-dark .debug-breakpoint-column.debug-breakpoint-disabled-glyph-column::before {
.vs-dark .debug-breakpoint-disabled,
.hc-black .debug-breakpoint-disabled,
.monaco-editor.vs-dark .debug-breakpoint-column.debug-breakpoint-disabled-column::before {
background: url('breakpoint-disabled-dark.svg') center center no-repeat;
}
.vs-dark .debug-breakpoint-unverified-glyph,
.monaco-editor.vs-dark .debug-breakpoint-column.debug-breakpoint-unverified-glyph-column::before {
.vs-dark .debug-breakpoint-unverified,
.hc-black .debug-breakpoint-unverified,
.monaco-editor.vs-dark .debug-breakpoint-column.debug-breakpoint-unverified-column::before {
background: url('breakpoint-unverified-dark.svg') center center no-repeat;
}
.monaco-editor.vs-dark .debug-focused-stack-frame-glyph {
.monaco-editor.vs-dark .debug-focused-stack-frame {
background: url('stackframe-arrow-dark.svg') center center no-repeat;
}
.monaco-editor.vs-dark .debug-focused-stack-frame-glyph.debug-breakpoint-glyph,
.monaco-editor.vs-dark .debug-focused-stack-frame-glyph.debug-breakpoint-conditional-glyph {
.monaco-editor.vs-dark .debug-focused-stack-frame.debug-breakpoint,
.monaco-editor.vs-dark .debug-focused-stack-frame.debug-breakpoint-conditional {
background: url('stackframe-and-breakpoint-dark.svg') center center no-repeat;
}
.vs-dark .debug-function-breakpoint,
.hc-black .debug-function-breakpoint {
background: url('breakpoint-function-dark.svg') center center no-repeat;
}
.vs-dark .debug-function-breakpoint-unverified,
.hc-black .debug-function-breakpoint-unverified {
background: url('breakpoint-function-unverified.svg') center center no-repeat;
}
.vs-dark .debug-function-breakpoint-disabled,
.hc-black .debug-function-breakpoint-disabled {
background: url('breakpoint-function-disabled.svg') center center no-repeat;
}
/* High Contrast Theming */
.monaco-editor.hc-black .debug-focused-stack-frame-line {

2
src/vs/workbench/parts/debug/electron-browser/debugEditorContribution.ts
View file

@ -469,7 +469,7 @@ export class DebugEditorContribution implements IDebugEditorContribution {
}
private static BREAKPOINT_HELPER_DECORATION: IModelDecorationOptions = {
glyphMarginClassName: 'debug-breakpoint-hint-glyph',
glyphMarginClassName: 'debug-breakpoint-hint',
stickiness: TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges
};

2
test/smoke/src/areas/debug/debug.ts
View file

@ -16,7 +16,7 @@ const STEP_IN = `.debug-actions-widget .debug-action.step-into`;
const STEP_OUT = `.debug-actions-widget .debug-action.step-out`;
const CONTINUE = `.debug-actions-widget .debug-action.continue`;
const GLYPH_AREA = '.margin-view-overlays>:nth-child';
const BREAKPOINT_GLYPH = '.debug-breakpoint-glyph';
const BREAKPOINT_GLYPH = '.debug-breakpoint';
const PAUSE = `.debug-actions-widget .debug-action.pause`;
const DEBUG_STATUS_BAR = `.statusbar.debugging`;
const NOT_DEBUG_STATUS_BAR = `.statusbar:not(debugging)`;