From 2ff811dc9803d94075a5662810725fbdabb83a40 Mon Sep 17 00:00:00 2001 From: Simon Siefke Date: Sun, 26 May 2024 11:06:07 +0200 Subject: [PATCH 1/7] feature: make find decoration foreground color configurable --- src/vs/editor/contrib/find/browser/findDecorations.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/vs/editor/contrib/find/browser/findDecorations.ts b/src/vs/editor/contrib/find/browser/findDecorations.ts index 62bfb58fb9ced..80e7e77397a03 100644 --- a/src/vs/editor/contrib/find/browser/findDecorations.ts +++ b/src/vs/editor/contrib/find/browser/findDecorations.ts @@ -303,7 +303,7 @@ export class FindDecorations implements IDisposable { description: 'find-match', stickiness: TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges, zIndex: 10, - className: 'findMatch', + inlineClassName: 'findMatch', showIfCollapsed: true, overviewRuler: { color: themeColorFromId(overviewRulerFindMatchForeground), From 4d98766d9ad206893e8b7f7c60640e59728756cf Mon Sep 17 00:00:00 2001 From: Simon Siefke Date: Sun, 26 May 2024 11:09:14 +0200 Subject: [PATCH 2/7] register color --- src/vs/platform/theme/common/colors/editorColors.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/vs/platform/theme/common/colors/editorColors.ts b/src/vs/platform/theme/common/colors/editorColors.ts index 4116f5ec1410e..17c423c0d1df6 100644 --- a/src/vs/platform/theme/common/colors/editorColors.ts +++ b/src/vs/platform/theme/common/colors/editorColors.ts @@ -139,7 +139,11 @@ export const editorSelectionHighlightBorder = registerColor('editor.selectionHig export const editorFindMatch = registerColor('editor.findMatchBackground', { light: '#A8AC94', dark: '#515C6A', hcDark: null, hcLight: null }, - nls.localize('editorFindMatch', "Color of the current search match.")); + nls.localize('editorFindMatch', "Background color of the current search match.")); + +export const editorFindMatchForeground = registerColor('editor.findMatchForeground', + { light: null, dark: null, hcDark: null, hcLight: null }, + nls.localize('editorFindMatchForeground', "Text color of the current search match.")); export const editorFindMatchHighlight = registerColor('editor.findMatchHighlightBackground', { light: '#EA5C0055', dark: '#EA5C0055', hcDark: null, hcLight: null }, From 9751786b4330124afe09115974ba842d3abd0074 Mon Sep 17 00:00:00 2001 From: Simon Siefke Date: Sun, 26 May 2024 11:19:48 +0200 Subject: [PATCH 3/7] add css colors --- .../contrib/find/browser/findDecorations.ts | 2 +- .../contrib/find/browser/findWidget.css | 56 +++++++++++++++---- .../theme/common/colors/editorColors.ts | 6 +- 3 files changed, 50 insertions(+), 14 deletions(-) diff --git a/src/vs/editor/contrib/find/browser/findDecorations.ts b/src/vs/editor/contrib/find/browser/findDecorations.ts index 80e7e77397a03..42cacdf2c9598 100644 --- a/src/vs/editor/contrib/find/browser/findDecorations.ts +++ b/src/vs/editor/contrib/find/browser/findDecorations.ts @@ -287,7 +287,7 @@ export class FindDecorations implements IDisposable { description: 'current-find-match', stickiness: TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges, zIndex: 13, - className: 'currentFindMatch', + inlineClassName: 'currentFindMatch', showIfCollapsed: true, overviewRuler: { color: themeColorFromId(overviewRulerFindMatchForeground), diff --git a/src/vs/editor/contrib/find/browser/findWidget.css b/src/vs/editor/contrib/find/browser/findWidget.css index 5d3ef3277d799..f142c50583d27 100644 --- a/src/vs/editor/contrib/find/browser/findWidget.css +++ b/src/vs/editor/contrib/find/browser/findWidget.css @@ -41,7 +41,7 @@ display: flex; } -.monaco-editor .find-widget.visible { +.monaco-editor .find-widget.visible { transform: translateY(0); } @@ -73,15 +73,34 @@ min-height: 25px; } - -.monaco-editor .find-widget > .replace-part .monaco-inputbox > .ibwrapper > .mirror { +.monaco-editor + .find-widget + > .replace-part + .monaco-inputbox + > .ibwrapper + > .mirror { padding-right: 22px; } .monaco-editor .find-widget > .find-part .monaco-inputbox > .ibwrapper > .input, -.monaco-editor .find-widget > .find-part .monaco-inputbox > .ibwrapper > .mirror, -.monaco-editor .find-widget > .replace-part .monaco-inputbox > .ibwrapper > .input, -.monaco-editor .find-widget > .replace-part .monaco-inputbox > .ibwrapper > .mirror { +.monaco-editor + .find-widget + > .find-part + .monaco-inputbox + > .ibwrapper + > .mirror, +.monaco-editor + .find-widget + > .replace-part + .monaco-inputbox + > .ibwrapper + > .input, +.monaco-editor + .find-widget + > .replace-part + .monaco-inputbox + > .ibwrapper + > .mirror { padding-top: 2px; padding-bottom: 2px; } @@ -101,7 +120,7 @@ .monaco-editor .find-widget .monaco-findInput { vertical-align: middle; display: flex; - flex:1; + flex: 1; } .monaco-editor .find-widget .monaco-findInput .monaco-scrollable-element { @@ -109,7 +128,11 @@ width: 100%; } -.monaco-editor .find-widget .monaco-findInput .monaco-scrollable-element .scrollbar.vertical { +.monaco-editor + .find-widget + .monaco-findInput + .monaco-scrollable-element + .scrollbar.vertical { /* Hide vertical scrollbar */ opacity: 0; } @@ -201,7 +224,7 @@ /* REDUCED */ .monaco-editor .find-widget.reduced-find-widget .matchesCount { - display:none; + display: none; } /* NARROW (SMALLER THAN REDUCED) */ @@ -218,8 +241,12 @@ .monaco-editor .find-widget.collapsed-find-widget .button.next, .monaco-editor .find-widget.collapsed-find-widget .button.replace, .monaco-editor .find-widget.collapsed-find-widget .button.replace-all, -.monaco-editor .find-widget.collapsed-find-widget > .find-part .monaco-findInput .controls { - display:none; +.monaco-editor + .find-widget.collapsed-find-widget + > .find-part + .monaco-findInput + .controls { + display: none; } .monaco-editor .find-widget.no-results .matchesCount { @@ -230,10 +257,12 @@ animation-duration: 0; animation-name: inherit !important; background-color: var(--vscode-editor-findMatchHighlightBackground); + color: var(--vscode-editor-findMatchHighlightForeground); } .monaco-editor .currentFindMatch { background-color: var(--vscode-editor-findMatchBackground); + color: var(--vscode-editor-findMatchForeground); border: 2px solid var(--vscode-editor-findMatchBorder); padding: 1px; box-sizing: border-box; @@ -245,7 +274,10 @@ .monaco-editor .find-widget .monaco-sash { left: 0 !important; - background-color: var(--vscode-editorWidget-resizeBorder, var(--vscode-editorWidget-border)); + background-color: var( + --vscode-editorWidget-resizeBorder, + var(--vscode-editorWidget-border) + ); } .monaco-editor.hc-black .find-widget .button:before { diff --git a/src/vs/platform/theme/common/colors/editorColors.ts b/src/vs/platform/theme/common/colors/editorColors.ts index 17c423c0d1df6..6e4740c564b33 100644 --- a/src/vs/platform/theme/common/colors/editorColors.ts +++ b/src/vs/platform/theme/common/colors/editorColors.ts @@ -139,7 +139,7 @@ export const editorSelectionHighlightBorder = registerColor('editor.selectionHig export const editorFindMatch = registerColor('editor.findMatchBackground', { light: '#A8AC94', dark: '#515C6A', hcDark: null, hcLight: null }, - nls.localize('editorFindMatch', "Background color of the current search match.")); + nls.localize('editorFindMatch', "Color of the current search match.")); export const editorFindMatchForeground = registerColor('editor.findMatchForeground', { light: null, dark: null, hcDark: null, hcLight: null }, @@ -149,6 +149,10 @@ export const editorFindMatchHighlight = registerColor('editor.findMatchHighlight { light: '#EA5C0055', dark: '#EA5C0055', hcDark: null, hcLight: null }, nls.localize('findMatchHighlight', "Color of the other search matches. The color must not be opaque so as not to hide underlying decorations."), true); +export const editorFindMatchHighlightForeground = registerColor('editor.findMatchHighlightForeground', + { light: '#EA5C0055', dark: '#EA5C0055', hcDark: null, hcLight: null }, + nls.localize('findMatchHighlightForeground', "Foreground color of the other search matches."), true); + export const editorFindRangeHighlight = registerColor('editor.findRangeHighlightBackground', { dark: '#3a3d4166', light: '#b4b4b44d', hcDark: null, hcLight: null }, nls.localize('findRangeHighlight', "Color of the range limiting the search. The color must not be opaque so as not to hide underlying decorations."), true); From 1465fc5302e3a041efcfb231db9e3c8bb901e532 Mon Sep 17 00:00:00 2001 From: Simon Siefke Date: Sun, 26 May 2024 11:22:03 +0200 Subject: [PATCH 4/7] fix colors --- src/vs/platform/theme/common/colors/editorColors.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/vs/platform/theme/common/colors/editorColors.ts b/src/vs/platform/theme/common/colors/editorColors.ts index 6e4740c564b33..a57b85e2c29ca 100644 --- a/src/vs/platform/theme/common/colors/editorColors.ts +++ b/src/vs/platform/theme/common/colors/editorColors.ts @@ -150,7 +150,7 @@ export const editorFindMatchHighlight = registerColor('editor.findMatchHighlight nls.localize('findMatchHighlight', "Color of the other search matches. The color must not be opaque so as not to hide underlying decorations."), true); export const editorFindMatchHighlightForeground = registerColor('editor.findMatchHighlightForeground', - { light: '#EA5C0055', dark: '#EA5C0055', hcDark: null, hcLight: null }, + { light: null, dark: null, hcDark: null, hcLight: null }, nls.localize('findMatchHighlightForeground', "Foreground color of the other search matches."), true); export const editorFindRangeHighlight = registerColor('editor.findRangeHighlightBackground', From 8378ff48416ca5b5d06cf4cdf4506f685ec15250 Mon Sep 17 00:00:00 2001 From: Simon Siefke Date: Sun, 26 May 2024 11:39:55 +0200 Subject: [PATCH 5/7] fix colors --- .../lib/stylelint/vscode-known-variables.json | 2 ++ .../contrib/find/browser/findDecorations.ts | 22 +++++++++++++++++-- .../contrib/find/browser/findWidget.css | 9 +++++++- 3 files changed, 30 insertions(+), 3 deletions(-) diff --git a/build/lib/stylelint/vscode-known-variables.json b/build/lib/stylelint/vscode-known-variables.json index e6291132d5698..d8b28e0dd2481 100644 --- a/build/lib/stylelint/vscode-known-variables.json +++ b/build/lib/stylelint/vscode-known-variables.json @@ -128,8 +128,10 @@ "--vscode-dropdown-listBackground", "--vscode-editor-background", "--vscode-editor-findMatchBackground", + "--vscode-editor-findMatchForeground", "--vscode-editor-findMatchBorder", "--vscode-editor-findMatchHighlightBackground", + "--vscode-editor-findMatchHighlightForeground", "--vscode-editor-findMatchHighlightBorder", "--vscode-editor-findRangeHighlightBackground", "--vscode-editor-findRangeHighlightBorder", diff --git a/src/vs/editor/contrib/find/browser/findDecorations.ts b/src/vs/editor/contrib/find/browser/findDecorations.ts index 42cacdf2c9598..5fe98301c3b01 100644 --- a/src/vs/editor/contrib/find/browser/findDecorations.ts +++ b/src/vs/editor/contrib/find/browser/findDecorations.ts @@ -287,7 +287,8 @@ export class FindDecorations implements IDisposable { description: 'current-find-match', stickiness: TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges, zIndex: 13, - inlineClassName: 'currentFindMatch', + className: 'currentFindMatch', + inlineClassName: 'currentFindMatchInline', showIfCollapsed: true, overviewRuler: { color: themeColorFromId(overviewRulerFindMatchForeground), @@ -299,11 +300,20 @@ export class FindDecorations implements IDisposable { } }); + // public static readonly _CURRENT_FIND_MATCH_DECORATION_INLINE = ModelDecorationOptions.register({ + // description: 'current-find-match-inline', + // stickiness: TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges, + // zIndex: 13, + // inlineClassName: 'currentFindMatchInline', + // showIfCollapsed: true, + // }); + public static readonly _FIND_MATCH_DECORATION = ModelDecorationOptions.register({ description: 'find-match', stickiness: TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges, zIndex: 10, - inlineClassName: 'findMatch', + className: 'findMatch', + inlineClassName: 'findMatchInline', showIfCollapsed: true, overviewRuler: { color: themeColorFromId(overviewRulerFindMatchForeground), @@ -315,6 +325,14 @@ export class FindDecorations implements IDisposable { } }); + // public static readonly _FIND_MATCH_DECORATION_INLINE = ModelDecorationOptions.register({ + // description: 'find-match-inline', + // stickiness: TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges, + // zIndex: 10, + // inlineClassName: 'findMatchInline', + // showIfCollapsed: true, + // }); + public static readonly _FIND_MATCH_NO_OVERVIEW_DECORATION = ModelDecorationOptions.register({ description: 'find-match-no-overview', stickiness: TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges, diff --git a/src/vs/editor/contrib/find/browser/findWidget.css b/src/vs/editor/contrib/find/browser/findWidget.css index f142c50583d27..69c27547c17f9 100644 --- a/src/vs/editor/contrib/find/browser/findWidget.css +++ b/src/vs/editor/contrib/find/browser/findWidget.css @@ -260,14 +260,21 @@ color: var(--vscode-editor-findMatchHighlightForeground); } +.monaco-editor .findMatchInline { + color: var(--vscode-editor-findMatchHighlightForeground); +} + .monaco-editor .currentFindMatch { background-color: var(--vscode-editor-findMatchBackground); - color: var(--vscode-editor-findMatchForeground); border: 2px solid var(--vscode-editor-findMatchBorder); padding: 1px; box-sizing: border-box; } +.monaco-editor .currentFindMatchInline { + color: var(--vscode-editor-findMatchForeground); +} + .monaco-editor .findScope { background-color: var(--vscode-editor-findRangeHighlightBackground); } From 9024f4652088478136155d35b5b00d4bd38fe5f6 Mon Sep 17 00:00:00 2001 From: Simon Siefke Date: Sun, 26 May 2024 11:40:23 +0200 Subject: [PATCH 6/7] remove unused code --- .../contrib/find/browser/findDecorations.ts | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/src/vs/editor/contrib/find/browser/findDecorations.ts b/src/vs/editor/contrib/find/browser/findDecorations.ts index 5fe98301c3b01..e5e9018464a56 100644 --- a/src/vs/editor/contrib/find/browser/findDecorations.ts +++ b/src/vs/editor/contrib/find/browser/findDecorations.ts @@ -300,14 +300,6 @@ export class FindDecorations implements IDisposable { } }); - // public static readonly _CURRENT_FIND_MATCH_DECORATION_INLINE = ModelDecorationOptions.register({ - // description: 'current-find-match-inline', - // stickiness: TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges, - // zIndex: 13, - // inlineClassName: 'currentFindMatchInline', - // showIfCollapsed: true, - // }); - public static readonly _FIND_MATCH_DECORATION = ModelDecorationOptions.register({ description: 'find-match', stickiness: TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges, @@ -325,14 +317,6 @@ export class FindDecorations implements IDisposable { } }); - // public static readonly _FIND_MATCH_DECORATION_INLINE = ModelDecorationOptions.register({ - // description: 'find-match-inline', - // stickiness: TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges, - // zIndex: 10, - // inlineClassName: 'findMatchInline', - // showIfCollapsed: true, - // }); - public static readonly _FIND_MATCH_NO_OVERVIEW_DECORATION = ModelDecorationOptions.register({ description: 'find-match-no-overview', stickiness: TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges, From 64afd4facc90737ef8b89fffdb9887bfaf8bedf7 Mon Sep 17 00:00:00 2001 From: Simon Siefke Date: Sun, 26 May 2024 11:41:59 +0200 Subject: [PATCH 7/7] fix css formatting --- .../contrib/find/browser/findWidget.css | 55 ++++--------------- 1 file changed, 12 insertions(+), 43 deletions(-) diff --git a/src/vs/editor/contrib/find/browser/findWidget.css b/src/vs/editor/contrib/find/browser/findWidget.css index 69c27547c17f9..d8c479cf1b77b 100644 --- a/src/vs/editor/contrib/find/browser/findWidget.css +++ b/src/vs/editor/contrib/find/browser/findWidget.css @@ -41,7 +41,7 @@ display: flex; } -.monaco-editor .find-widget.visible { +.monaco-editor .find-widget.visible { transform: translateY(0); } @@ -73,34 +73,15 @@ min-height: 25px; } -.monaco-editor - .find-widget - > .replace-part - .monaco-inputbox - > .ibwrapper - > .mirror { + +.monaco-editor .find-widget > .replace-part .monaco-inputbox > .ibwrapper > .mirror { padding-right: 22px; } .monaco-editor .find-widget > .find-part .monaco-inputbox > .ibwrapper > .input, -.monaco-editor - .find-widget - > .find-part - .monaco-inputbox - > .ibwrapper - > .mirror, -.monaco-editor - .find-widget - > .replace-part - .monaco-inputbox - > .ibwrapper - > .input, -.monaco-editor - .find-widget - > .replace-part - .monaco-inputbox - > .ibwrapper - > .mirror { +.monaco-editor .find-widget > .find-part .monaco-inputbox > .ibwrapper > .mirror, +.monaco-editor .find-widget > .replace-part .monaco-inputbox > .ibwrapper > .input, +.monaco-editor .find-widget > .replace-part .monaco-inputbox > .ibwrapper > .mirror { padding-top: 2px; padding-bottom: 2px; } @@ -120,7 +101,7 @@ .monaco-editor .find-widget .monaco-findInput { vertical-align: middle; display: flex; - flex: 1; + flex:1; } .monaco-editor .find-widget .monaco-findInput .monaco-scrollable-element { @@ -128,11 +109,7 @@ width: 100%; } -.monaco-editor - .find-widget - .monaco-findInput - .monaco-scrollable-element - .scrollbar.vertical { +.monaco-editor .find-widget .monaco-findInput .monaco-scrollable-element .scrollbar.vertical { /* Hide vertical scrollbar */ opacity: 0; } @@ -224,7 +201,7 @@ /* REDUCED */ .monaco-editor .find-widget.reduced-find-widget .matchesCount { - display: none; + display:none; } /* NARROW (SMALLER THAN REDUCED) */ @@ -241,12 +218,8 @@ .monaco-editor .find-widget.collapsed-find-widget .button.next, .monaco-editor .find-widget.collapsed-find-widget .button.replace, .monaco-editor .find-widget.collapsed-find-widget .button.replace-all, -.monaco-editor - .find-widget.collapsed-find-widget - > .find-part - .monaco-findInput - .controls { - display: none; +.monaco-editor .find-widget.collapsed-find-widget > .find-part .monaco-findInput .controls { + display:none; } .monaco-editor .find-widget.no-results .matchesCount { @@ -257,7 +230,6 @@ animation-duration: 0; animation-name: inherit !important; background-color: var(--vscode-editor-findMatchHighlightBackground); - color: var(--vscode-editor-findMatchHighlightForeground); } .monaco-editor .findMatchInline { @@ -281,10 +253,7 @@ .monaco-editor .find-widget .monaco-sash { left: 0 !important; - background-color: var( - --vscode-editorWidget-resizeBorder, - var(--vscode-editorWidget-border) - ); + background-color: var(--vscode-editorWidget-resizeBorder, var(--vscode-editorWidget-border)); } .monaco-editor.hc-black .find-widget .button:before {