diff --git a/src/renderer/components/QueryEditor.vue b/src/renderer/components/QueryEditor.vue
index 84ba1cab..cfe5a0f3 100644
--- a/src/renderer/components/QueryEditor.vue
+++ b/src/renderer/components/QueryEditor.vue
@@ -241,6 +241,24 @@ export default {
this.$emit('update:value', content);
});
+ this.editor.on('guttermousedown', e => {
+ const target = e.domEvent.target;
+ if (target.className.indexOf('ace_gutter-cell') === -1)
+ return;
+ if (!this.editor.isFocused())
+ return;
+ if (e.clientX > 25 + target.getBoundingClientRect().left)
+ return;
+
+ const row = e.getDocumentPosition().row;
+ const breakpoints = e.editor.session.getBreakpoints(row, 0);
+ if (typeof breakpoints[row] === typeof undefined)
+ e.editor.session.setBreakpoint(row);
+ else
+ e.editor.session.clearBreakpoint(row);
+ e.stop();
+ });
+
if (this.autoFocus) {
setTimeout(() => {
this.editor.focus();
@@ -308,4 +326,21 @@ export default {
.ace_dark.ace_editor.ace_autocomplete .ace_completion-highlight {
color: #e0d00c;
}
+
+.ace_gutter-cell.ace_breakpoint {
+ &::before {
+ content: '\F0403';
+ position: absolute;
+ left: 3px;
+ top: 2px;
+ color: $primary-color;
+ display: inline-block;
+ font: normal normal normal 24px/1 "Material Design Icons", sans-serif;
+ font-size: inherit;
+ text-rendering: auto;
+ line-height: inherit;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ }
+}
diff --git a/src/renderer/components/WorkspacePropsTabRoutine.vue b/src/renderer/components/WorkspacePropsTabRoutine.vue
index 83511e36..81966ab8 100644
--- a/src/renderer/components/WorkspacePropsTabRoutine.vue
+++ b/src/renderer/components/WorkspacePropsTabRoutine.vue
@@ -47,7 +47,8 @@