Merge pull request microsoft#191440 from microsoft/aiday/simplifyingCode

Simplifying sticky widget folding icon code

Author: aiday-mar

build/lib/stylelint/vscode-known-variables.json

@@ -757,6 +757,7 @@
 		"--vscode-sash-hover-size",
 		"--vscode-sash-size",
 		"--vscode-editorStickyScroll-scrollableWidth",
+		"--vscode-editorStickyScroll-foldingOpacityTransition",
 		"--window-border-color",
 		"--workspace-trust-check-color",
 		"--workspace-trust-selected-color",
@@ -779,4 +780,4 @@
 		"--z-index-notebook-sticky-scroll",
 		"--zoom-factor"
 	]
-}
+}

src/vs/editor/contrib/stickyScroll/browser/stickyScroll.css

@@ -35,6 +35,7 @@
 
 .monaco-editor .sticky-line-number .codicon {
 	float: right;
+	transition: var(--vscode-editorStickyScroll-foldingOpacityTransition);
 }
 
 .monaco-editor .sticky-line-content {

src/vs/editor/contrib/stickyScroll/browser/stickyScrollWidget.ts

@@ -45,6 +45,7 @@ export class StickyScrollWidget extends Disposable implements IOverlayWidget {
 	private _lineNumbers: number[] = [];
 	private _lastLineRelativePosition: number = 0;
 	private _minContentWidthInPx: number = 0;
+	private _isOnGlyphMargin: boolean = false;
 
 	constructor(
 		private readonly _editor: ICodeEditor
@@ -147,6 +148,20 @@ export class StickyScrollWidget extends Disposable implements IOverlayWidget {
 		this._rootDomNode.style.display = 'none';
 	}
 
+	private _useFoldingOpacityTransition(requireTransitions: boolean) {
+		this._lineNumbersDomNode.style.setProperty('--vscode-editorStickyScroll-foldingOpacityTransition', `opacity ${requireTransitions ? 0.5 : 0}s`);
+	}
+
+	private _setFoldingIconsVisibility(allVisible: boolean) {
+		for (const line of this._stickyLines) {
+			const foldingIcon = line.foldingIcon;
+			if (!foldingIcon) {
+				continue;
+			}
+			foldingIcon.setVisible(allVisible ? true : foldingIcon.isCollapsed);
+		}
+	}
+
 	private async _renderRootNode(): Promise<void> {
 
 		const foldingModel = await FoldingController.get(this._editor)?.getFoldingModel();
@@ -159,6 +174,7 @@ export class StickyScrollWidget extends Disposable implements IOverlayWidget {
 		}
 		if (foldingModel) {
 			this._setFoldingHoverListeners();
+			this._useFoldingOpacityTransition(!this._isOnGlyphMargin);
 		}
 
 		const widgetHeight: number = this._lineNumbers.length * this._lineHeight + this._lastLineRelativePosition;
@@ -187,30 +203,14 @@ export class StickyScrollWidget extends Disposable implements IOverlayWidget {
 			return;
 		}
 		this._foldingIconStore.add(dom.addDisposableListener(this._lineNumbersDomNode, dom.EventType.MOUSE_ENTER, (e) => {
-			const mouseEventTriggerredByClick =
-				'fromElement' in e
-				&& e.fromElement instanceof HTMLElement
-				&& e.fromElement.classList.contains('codicon');
-
-			for (const line of this._stickyLines) {
-				const foldingIcon = line.foldingIcon;
-				if (!foldingIcon) {
-					continue;
-				}
-				if (mouseEventTriggerredByClick) {
-					foldingIcon.setTransitionRequired(false);
-					foldingIcon.setVisible(true);
-					setTimeout(() => { foldingIcon.setTransitionRequired(true); }, 300);
-				} else {
-					foldingIcon.setVisible(true);
-				}
-			}
+			this._isOnGlyphMargin = true;
+			this._setFoldingIconsVisibility(true);
 		}));
 		this._foldingIconStore.add(dom.addDisposableListener(this._lineNumbersDomNode, dom.EventType.MOUSE_LEAVE, () => {
-			for (const line of this._stickyLines) {
-				const foldingIcon = line.foldingIcon;
-				foldingIcon?.setVisible(foldingIcon.isCollapsed);
-			}
+			this._isOnGlyphMargin = false;
+			this._useFoldingOpacityTransition(true);
+			this._setFoldingIconsVisibility(false);
+
 		}));
 	}
 
@@ -318,8 +318,7 @@ export class StickyScrollWidget extends Disposable implements IOverlayWidget {
 		const isCollapsed = foldingRegions.isCollapsed(indexOfFoldingRegion);
 		const foldingIcon = new StickyFoldingIcon(isCollapsed, this._lineHeight);
 		container.append(foldingIcon.domNode);
-		foldingIcon.setVisible(isCollapsed || showFoldingControls === 'always');
-		foldingIcon.setTransitionRequired(true);
+		foldingIcon.setVisible(this._isOnGlyphMargin ? true : (isCollapsed || showFoldingControls === 'always'));
 
 		this._foldingIconStore.add(dom.addDisposableListener(foldingIcon.domNode, dom.EventType.CLICK, () => {
 			toggleCollapseState(foldingModel, Number.MAX_VALUE, [line]);
@@ -440,8 +439,4 @@ class StickyFoldingIcon {
 		this.domNode.style.cursor = visible ? 'pointer' : 'default';
 		this.domNode.style.opacity = visible ? '1' : '0';
 	}
-
-	public setTransitionRequired(transitionRequired: boolean) {
-		this.domNode.style.transition = `opacity ${transitionRequired ? 0.5 : 0}s`;
-	}
 }