Changing the color of the sticky scroll so it is of the same background as editor and on hover it has the list hover color from the registry

2 files changed, 12 insertions, 5 deletions

diff --git a/src/vs/editor/contrib/stickyScroll/browser/stickyScroll.ts b/src/vs/editor/contrib/stickyScroll/browser/stickyScroll.ts
index 3a742f81246..4048a5fc9ec 100644
--- a/src/vs/editor/contrib/stickyScroll/browser/stickyScroll.ts
+++ b/src/vs/editor/contrib/stickyScroll/browser/stickyScroll.ts
@@ -125,6 +125,7 @@ class StickyScrollController implements IEditorContribution {
 		if (this._editor.hasModel()) {
 			const model = this._editor.getModel();
 			const outlineModel = await OutlineModel.create(this._languageFeaturesService.documentSymbolProvider, model, token);
+			console.log('outline model is : ', outlineModel);
 			if (token.isCancellationRequested) {
 				return;
 			}
@@ -280,20 +281,26 @@ class StickyScrollCodeLine {
 		innerLineNumberHTML.style.lineHeight = this._editor.getOption(EditorOption.lineHeight).toString() + 'px';
 		lineNumberHTMLNode.appendChild(innerLineNumberHTML);
 
-		lineHTMLNode.onclick = e => {
+		root.onclick = e => {
 			e.stopPropagation();
 			e.preventDefault();
 			this._editor.revealLine(this._lineNumber);
 		};
-		lineHTMLNode.onmouseover = e => {
+		root.onmouseover = e => {
 			innerLineNumberHTML.style.background = `var(--vscode-editorStickyScrollHover-background)`;
 			lineHTMLNode.style.backgroundColor = `var(--vscode-editorStickyScrollHover-background)`;
+			lineNumberHTMLNode.style.backgroundColor = `var(--vscode-editorStickyScrollHover-background)`;
+			root.style.backgroundColor = `var(--vscode-editorStickyScrollHover-background)`;
 			innerLineNumberHTML.style.cursor = `pointer`;
 			lineHTMLNode.style.cursor = `pointer`;
+			root.style.cursor = `pointer`;
+			lineNumberHTMLNode.style.cursor = `pointer`;
 		};
-		lineHTMLNode.onmouseleave = e => {
+		root.onmouseleave = e => {
 			innerLineNumberHTML.style.background = `var(--vscode-editorStickyScroll-background)`;
 			lineHTMLNode.style.backgroundColor = `var(--vscode-editorStickyScroll-background)`;
+			lineNumberHTMLNode.style.backgroundColor = `var(--vscode-editorStickyScroll-background)`;
+			root.style.backgroundColor = `var(--vscode-editorStickyScroll-background)`;
 		};
 
 		this._editor.applyFontInfo(lineHTMLNode);
diff --git a/src/vs/platform/theme/common/colorRegistry.ts b/src/vs/platform/theme/common/colorRegistry.ts
index 129959b9e23..c1f226c3601 100644
--- a/src/vs/platform/theme/common/colorRegistry.ts
+++ b/src/vs/platform/theme/common/colorRegistry.ts
@@ -315,8 +315,8 @@ export const editorForeground = registerColor('editor.foreground', { light: '#33
 /**
  * Sticky scroll
  */
-export const editorStickyScrollBackground = registerColor('editorStickyScroll.background', { light: darken(editorBackground, 0.2), dark: lighten(editorBackground, 0.2), hcDark: lighten(editorBackground, 0.2), hcLight: darken(editorBackground, 0.2) }, nls.localize('editorStickyScrollBackground', "Sticky scroll background color for the editor"));
-export const editorStickyScrollHoverBackground = registerColor('editorStickyScrollHover.background', { light: darken(editorBackground, 0.4), dark: lighten(editorBackground, 0.4), hcDark: lighten(editorBackground, 0.4), hcLight: darken(editorBackground, 0.4) }, nls.localize('editorStickyScrollHoverBackground', "Sticky scroll on hover background color for the editor"));
+export const editorStickyScrollBackground = registerColor('editorStickyScroll.background', { light: editorBackground, dark: editorBackground, hcDark: editorBackground, hcLight: editorBackground }, nls.localize('editorStickyScrollBackground', "Sticky scroll background color for the editor"));
+export const editorStickyScrollHoverBackground = registerColor('editorStickyScrollHover.background', { dark: '#2A2D2E', light: '#F0F0F0', hcDark: null, hcLight: Color.fromHex('#0F4A85').transparent(0.1) }, nls.localize('editorStickyScrollHoverBackground', "Sticky scroll on hover background color for the editor"));
 
 /**
  * Editor widgets