Fix #17540

src/vs/workbench/parts/preferences/browser/preferencesRenderers.ts

@@ -5,7 +5,6 @@
 
 import { TPromise } from 'vs/base/common/winjs.base';
 import * as nls from 'vs/nls';
-import * as DOM from 'vs/base/browser/dom';
 import { Delayer } from 'vs/base/common/async';
 import { Disposable, IDisposable, dispose } from 'vs/base/common/lifecycle';
 import { flatten, distinct } from 'vs/base/common/arrays';
@@ -645,11 +644,8 @@ class EditSettingRenderer extends Disposable {
 		this.editPreferenceWidgetForMouseMove = this._register(this.instantiationService.createInstance(EditPreferenceWidget, editor));
 		this.toggleEditPreferencesForMouseMoveDelayer = new Delayer<void>(75);
 
-		this._register(this.editPreferenceWidgetForCusorPosition.onClick(setting => this.onEditSettingClicked(this.editPreferenceWidgetForCusorPosition)));
-		this._register(this.editPreferenceWidgetForMouseMove.onClick(setting => this.onEditSettingClicked(this.editPreferenceWidgetForMouseMove)));
-
-		this._register(this.editPreferenceWidgetForCusorPosition.onMouseOver(setting => this.onMouseOver(this.editPreferenceWidgetForCusorPosition)));
-		this._register(this.editPreferenceWidgetForMouseMove.onMouseOver(setting => this.onMouseOver(this.editPreferenceWidgetForMouseMove)));
+		this._register(this.editPreferenceWidgetForCusorPosition.onClick(e => this.onEditSettingClicked(this.editPreferenceWidgetForCusorPosition, e)));
+		this._register(this.editPreferenceWidgetForMouseMove.onClick(e => this.onEditSettingClicked(this.editPreferenceWidgetForMouseMove, e)));
 
 		this._register(this.editor.onDidChangeCursorPosition(positionChangeEvent => this.onPositionChanged(positionChangeEvent)));
 		this._register(this.editor.onMouseMove(mouseMoveEvent => this.onMouseMoved(mouseMoveEvent)));
@@ -700,11 +696,14 @@ class EditSettingRenderer extends Disposable {
 	}
 
 	private getEditPreferenceWidgetUnderMouse(mouseMoveEvent: IEditorMouseEvent): EditPreferenceWidget<ISetting> {
-		if (mouseMoveEvent.event.target === this.editPreferenceWidgetForMouseMove.getDomNode()) {
-			return this.editPreferenceWidgetForMouseMove;
-		}
-		if (mouseMoveEvent.event.target === this.editPreferenceWidgetForCusorPosition.getDomNode()) {
-			return this.editPreferenceWidgetForCusorPosition;
+		if (mouseMoveEvent.target.type === editorCommon.MouseTargetType.GUTTER_GLYPH_MARGIN) {
+			const line = mouseMoveEvent.target.position.lineNumber;
+			if (this.editPreferenceWidgetForMouseMove.getLine() === line && this.editPreferenceWidgetForMouseMove.isVisible()) {
+				return this.editPreferenceWidgetForMouseMove;
+			}
+			if (this.editPreferenceWidgetForCusorPosition.getLine() === line && this.editPreferenceWidgetForCusorPosition.isVisible()) {
+				return this.editPreferenceWidgetForCusorPosition;
+			}
 		}
 		return null;
 	}
@@ -719,14 +718,26 @@ class EditSettingRenderer extends Disposable {
 	}
 
 	private showEditPreferencesWidget(editPreferencesWidget: EditPreferenceWidget<ISetting>, settings: ISetting[]) {
-		if (this.editor.getRawConfiguration().glyphMargin) {
-			editPreferencesWidget.show(settings[0].valueRange.startLineNumber, settings);
-			editPreferencesWidget.getDomNode().title = nls.localize('editTtile', "Edit");
+		const line = settings[0].valueRange.startLineNumber;
+		if (this.editor.getRawConfiguration().glyphMargin && this.marginFreeFromOtherDecorations(line)) {
+			editPreferencesWidget.show(line, nls.localize('editTtile', "Edit"), settings);
 			const editPreferenceWidgetToHide = editPreferencesWidget === this.editPreferenceWidgetForCusorPosition ? this.editPreferenceWidgetForMouseMove : this.editPreferenceWidgetForCusorPosition;
 			editPreferenceWidgetToHide.hide();
 		}
 	}
 
+	private marginFreeFromOtherDecorations(line: number): boolean {
+		const decorations = this.editor.getLineDecorations(line);
+		if (decorations) {
+			for (const {options} of decorations) {
+				if (options.glyphMarginClassName && options.glyphMarginClassName.indexOf(EditPreferenceWidget.GLYPH_MARGIN_CLASS_NAME) === -1) {
+					return false;
+				}
+			}
+		}
+		return true;
+	}
+
 	private getSettings(lineNumber: number): ISetting[] {
 		const configurationMap = this.getConfigurationsMap();
 		return this.getSettingsAtLineNumber(lineNumber).filter(setting => {
@@ -770,9 +781,8 @@ class EditSettingRenderer extends Disposable {
 		this.settingHighlighter.highlight(editPreferenceWidget.preferences[0]);
 	}
 
-	private onEditSettingClicked(editPreferenceWidget: EditPreferenceWidget<ISetting>): void {
-		const elementPosition = DOM.getDomNodePagePosition(editPreferenceWidget.getDomNode());
-		const anchor = { x: elementPosition.left + elementPosition.width, y: elementPosition.top + elementPosition.height + 10 };
+	private onEditSettingClicked(editPreferenceWidget: EditPreferenceWidget<ISetting>, e: IEditorMouseEvent): void {
+		const anchor = { x: e.event.posx + 1, y: e.event.posy + 10 };
 		const actions = this.getSettings(editPreferenceWidget.getLine()).length === 1 ? this.getActions(editPreferenceWidget.preferences[0], this.getConfigurationsMap()[editPreferenceWidget.preferences[0].key])
 			: editPreferenceWidget.preferences.map(setting => new ContextSubMenu(setting.key, this.getActions(setting, this.getConfigurationsMap()[setting.key])));
 		this.contextMenuService.showContextMenu({

src/vs/workbench/parts/preferences/browser/preferencesWidgets.ts

@@ -7,11 +7,12 @@ import { localize } from 'vs/nls';
 import { Dimension } from 'vs/base/browser/builder';
 import * as DOM from 'vs/base/browser/dom';
 import { TPromise } from 'vs/base/common/winjs.base';
+import { Disposable } from 'vs/base/common/lifecycle';
 import { Widget } from 'vs/base/browser/ui/widget';
 import Event, { Emitter } from 'vs/base/common/event';
 import { IKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { KeyCode } from 'vs/base/common/keyCodes';
-import { ICodeEditor, IOverlayWidget, IOverlayWidgetPosition, OverlayWidgetPositionPreference, IViewZone } from 'vs/editor/browser/editorBrowser';
+import { ICodeEditor, IOverlayWidget, IOverlayWidgetPosition, OverlayWidgetPositionPreference, IViewZone, IEditorMouseEvent } from 'vs/editor/browser/editorBrowser';
 import * as editorCommon from 'vs/editor/common/editorCommon';
 import { InputBox, IInputOptions } from 'vs/base/browser/ui/inputbox/inputBox';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
@@ -385,90 +386,68 @@ export class FloatingClickWidget extends Widget implements IOverlayWidget {
 	}
 }
 
-export class EditPreferenceWidget<T> extends Widget implements IOverlayWidget {
+export class EditPreferenceWidget<T> extends Disposable {
 
-	private static counter: number = 1;
+	public static GLYPH_MARGIN_CLASS_NAME = 'edit-preferences-widget';
 
-	private _domNode: HTMLElement;
-	private _visible: boolean;
 	private _line: number;
-	private _id: string;
 	private _preferences: T[];
 
-	private _onClick: Emitter<void> = new Emitter<void>();
-	public get onClick(): Event<void> { return this._onClick.event; }
+	private _editPreferenceDecoration: string[];
 
-	private _onMouseOver: Emitter<void> = new Emitter<void>();
-	public get onMouseOver(): Event<void> { return this._onMouseOver.event; }
+	private _onClick: Emitter<IEditorMouseEvent> = new Emitter<IEditorMouseEvent>();
+	public get onClick(): Event<IEditorMouseEvent> { return this._onClick.event; }
 
-	constructor(private editor: ICodeEditor,
-		@IContextMenuService contextMenuService: IContextMenuService
+	constructor(private editor: ICodeEditor
 	) {
 		super();
-		this._id = 'preferences.editPreferenceWidget' + EditPreferenceWidget.counter++;
-		this.editor.addOverlayWidget(this);
-		this._register(this.editor.onDidScrollChange(() => {
-			if (this._visible) {
-				this._layout();
+		this._editPreferenceDecoration = [];
+		this._register(this.editor.onMouseDown((e: IEditorMouseEvent) => {
+			if (e.target.type !== editorCommon.MouseTargetType.GUTTER_GLYPH_MARGIN || /* after last line */ e.target.detail || !this.isVisible()) {
+				return;
 			}
+			this._onClick.fire(e);
 		}));
 	}
 
-	public dispose(): void {
-		this.editor.removeOverlayWidget(this);
-		super.dispose();
-	}
-
-	getId(): string {
-		return this._id;
-	}
-
-	getDomNode(): HTMLElement {
-		if (!this._domNode) {
-			this._domNode = document.createElement('div');
-			this._domNode.style.width = '20px';
-			this._domNode.style.height = '20px';
-			this._domNode.className = 'edit-preferences-widget hidden';
-			this.onclick(this._domNode, e => this._onClick.fire());
-			this.onmouseover(this._domNode, e => this._onMouseOver.fire());
-		}
-		return this._domNode;
-	}
-
-	getPosition(): IOverlayWidgetPosition {
-		return null;
+	get preferences(): T[] {
+		return this._preferences;
 	}
 
 	getLine(): number {
 		return this._line;
 	}
 
-	show(line: number, preferences: T[]): void {
+	show(line: number, hoverMessage: string, preferences: T[]): void {
 		this._preferences = preferences;
-		if (!this._visible || this._line !== line) {
-			this._line = line;
-			this._visible = true;
-			this._layout();
-		}
-	}
-
-	get preferences(): T[] {
-		return this._preferences;
+		const newDecoration: editorCommon.IModelDeltaDecoration[] = [];
+		this._line = line;
+		newDecoration.push({
+			options: {
+				glyphMarginClassName: EditPreferenceWidget.GLYPH_MARGIN_CLASS_NAME,
+				glyphMarginHoverMessage: hoverMessage,
+				stickiness: editorCommon.TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges,
+			},
+			range: {
+				startLineNumber: line,
+				startColumn: 1,
+				endLineNumber: line,
+				endColumn: 1
+			}
+		});
+		this._editPreferenceDecoration = this.editor.deltaDecorations(this._editPreferenceDecoration, newDecoration);
 	}
 
 	hide(): void {
-		if (this._visible) {
-			this._visible = false;
-			this._domNode.classList.add('hidden');
-		}
+		this._editPreferenceDecoration = this.editor.deltaDecorations(this._editPreferenceDecoration, []);
 	}
 
-	private _layout(): void {
-		const topForLineNumber = this.editor.getTopForLineNumber(this._line);
-		const editorScrollTop = this.editor.getScrollTop();
+	isVisible(): boolean {
+		return this._editPreferenceDecoration.length > 0;
+	}
 
-		this._domNode.style.top = `${topForLineNumber - editorScrollTop - 2}px`;
-		this._domNode.style.left = '0px';
-		this._domNode.classList.remove('hidden');
+	dispose(): void {
+		this.hide();
+		super.dispose();
 	}
 }
\ No newline at end of file