Skip to content

Commit a56c48e

Browse files
committed
Disable breakpoint hover hint on Safari on touch screen.
1 parent 8bbe315 commit a56c48e

1 file changed

Lines changed: 24 additions & 14 deletions

File tree

src/vs/workbench/contrib/debug/browser/breakpointEditorContribution.ts

Lines changed: 24 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@ import { distinct } from 'vs/base/common/arrays';
3232
import { RunOnceScheduler } from 'vs/base/common/async';
3333
import { EditorOption } from 'vs/editor/common/config/editorOptions';
3434
import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
35+
import { BrowserFeatures } from 'vs/base/browser/canIUse';
36+
import { isSafari } from 'vs/base/browser/browser';
3537

3638
const $ = dom.$;
3739

@@ -227,21 +229,29 @@ class BreakpointEditorContribution implements IBreakpointEditorContribution {
227229
}
228230
}));
229231

230-
this.toDispose.push(this.editor.onMouseMove((e: IEditorMouseEvent) => {
231-
let showBreakpointHintAtLineNumber = -1;
232-
const model = this.editor.getModel();
233-
if (model && e.target.position && (e.target.type === MouseTargetType.GUTTER_GLYPH_MARGIN || e.target.type === MouseTargetType.GUTTER_LINE_NUMBERS) && this.debugService.getConfigurationManager().canSetBreakpointsIn(model) &&
234-
this.marginFreeFromNonDebugDecorations(e.target.position.lineNumber)) {
235-
const data = e.target.detail as IMarginData;
236-
if (!data.isAfterLines) {
237-
showBreakpointHintAtLineNumber = e.target.position.lineNumber;
232+
if (!(BrowserFeatures.pointerEvents && isSafari)) {
233+
/**
234+
* We disable the hover feature for Safari on iOS as
235+
* 1. Browser hover events are handled specially by the system (it treats first click as hover if there is `:hover` css registered). Below hover behavior will confuse users with inconsistent expeirence.
236+
* 2. When users click on line numbers, the breakpoint hint displays immediately, however it doesn't create the breakpoint unless users click on the left gutter. On a touch screen, it's hard to click on that small area.
237+
*/
238+
this.toDispose.push(this.editor.onMouseMove((e: IEditorMouseEvent) => {
239+
let showBreakpointHintAtLineNumber = -1;
240+
const model = this.editor.getModel();
241+
if (model && e.target.position && (e.target.type === MouseTargetType.GUTTER_GLYPH_MARGIN || e.target.type === MouseTargetType.GUTTER_LINE_NUMBERS) && this.debugService.getConfigurationManager().canSetBreakpointsIn(model) &&
242+
this.marginFreeFromNonDebugDecorations(e.target.position.lineNumber)) {
243+
const data = e.target.detail as IMarginData;
244+
if (!data.isAfterLines) {
245+
showBreakpointHintAtLineNumber = e.target.position.lineNumber;
246+
}
238247
}
239-
}
240-
this.ensureBreakpointHintDecoration(showBreakpointHintAtLineNumber);
241-
}));
242-
this.toDispose.push(this.editor.onMouseLeave(() => {
243-
this.ensureBreakpointHintDecoration(-1);
244-
}));
248+
this.ensureBreakpointHintDecoration(showBreakpointHintAtLineNumber);
249+
}));
250+
this.toDispose.push(this.editor.onMouseLeave(() => {
251+
this.ensureBreakpointHintDecoration(-1);
252+
}));
253+
}
254+
245255

246256
this.toDispose.push(this.editor.onDidChangeModel(async () => {
247257
this.closeBreakpointWidget();

0 commit comments

Comments
 (0)