feat: support themeable decorations (light vs. dark styles)

Decorations may now specify different styles for light vs. dark themes. The light/dark styles override the base styles when there is overlap.

Author: sqs

src/client/providers/decoration.test.ts

@@ -3,7 +3,12 @@ import { of } from 'rxjs'
 import { TestScheduler } from 'rxjs/testing'
 import { TextDocumentIdentifier } from '../../client/types/textDocument'
 import { TextDocumentDecoration } from '../../protocol/plainTypes'
-import { getDecorations, ProvideTextDocumentDecorationSignature } from './decoration'
+import {
+    decorationAttachmentStyleForTheme,
+    decorationStyleForTheme,
+    getDecorations,
+    ProvideTextDocumentDecorationSignature,
+} from './decoration'
 import { FIXTURE as COMMON_FIXTURE } from './registry.test'
 
 const FIXTURE = {
@@ -125,3 +130,61 @@ describe('getDecorations', () => {
             ))
     })
 })
+
+describe('decorationStyleForTheme', () => {
+    const FIXTURE_RANGE = { start: { line: 1, character: 2 }, end: { line: 3, character: 4 } }
+
+    it('supports no theme overrides', () =>
+        assert.deepStrictEqual(decorationStyleForTheme({ range: FIXTURE_RANGE, backgroundColor: 'red' }, true), {
+            range: FIXTURE_RANGE, // it's not necessary that range is included, but it saves an object allocation
+            backgroundColor: 'red',
+        }))
+
+    it('applies light theme overrides', () =>
+        assert.deepStrictEqual(
+            decorationStyleForTheme(
+                { range: FIXTURE_RANGE, backgroundColor: 'red', light: { backgroundColor: 'blue' } },
+                true
+            ),
+            {
+                backgroundColor: 'blue',
+            }
+        ))
+
+    it('applies dark theme overrides', () =>
+        assert.deepStrictEqual(
+            decorationStyleForTheme(
+                {
+                    range: FIXTURE_RANGE,
+                    backgroundColor: 'red',
+                    light: { backgroundColor: 'blue' },
+                    dark: { backgroundColor: 'green' },
+                },
+                false
+            ),
+            {
+                backgroundColor: 'green',
+            }
+        ))
+})
+
+describe('decorationAttachmentStyleForTheme', () => {
+    it('supports no theme overrides', () =>
+        assert.deepStrictEqual(decorationAttachmentStyleForTheme({ color: 'red' }, true), { color: 'red' }))
+
+    it('applies light theme overrides', () =>
+        assert.deepStrictEqual(decorationAttachmentStyleForTheme({ color: 'red', light: { color: 'blue' } }, true), {
+            color: 'blue',
+        }))
+
+    it('applies dark theme overrides', () =>
+        assert.deepStrictEqual(
+            decorationAttachmentStyleForTheme(
+                { color: 'red', light: { color: 'blue' }, dark: { color: 'green' } },
+                false
+            ),
+            {
+                color: 'green',
+            }
+        ))
+})

src/client/providers/decoration.ts

@@ -1,5 +1,10 @@
 import { combineLatest, Observable } from 'rxjs'
 import { map, switchMap } from 'rxjs/operators'
+import {
+    DecorationAttachmentRenderOptions,
+    ThemableDecorationAttachmentStyle,
+    ThemableDecorationStyle,
+} from 'sourcegraph'
 import { TextDocumentIdentifier } from '../../client/types/textDocument'
 import { TextDocumentDecoration } from '../../protocol/plainTypes'
 import { FeatureProviderRegistry } from './registry'
@@ -40,3 +45,35 @@ export function getDecorations(
         )
         .pipe(map(flattenAndCompact))
 }
+
+/**
+ * Resolves the actual styles to use for the attachment based on the current theme.
+ */
+export function decorationStyleForTheme(
+    attachment: TextDocumentDecoration,
+    isLightTheme: boolean
+): ThemableDecorationStyle {
+    const overrides = isLightTheme ? attachment.light : attachment.dark
+    if (!overrides) {
+        return attachment
+    }
+    // Discard non-ThemableDecorationStyle properties so they aren't included in result.
+    const { range, isWholeLine, after, light, dark, ...base } = attachment
+    return { ...base, ...overrides }
+}
+
+/**
+ * Resolves the actual styles to use for the attachment based on the current theme.
+ */
+export function decorationAttachmentStyleForTheme(
+    attachment: DecorationAttachmentRenderOptions,
+    isLightTheme: boolean
+): ThemableDecorationAttachmentStyle {
+    const overrides = isLightTheme ? attachment.light : attachment.dark
+    if (!overrides) {
+        return attachment
+    }
+    // Discard non-ThemableDecorationAttachmentStyle properties so they aren't included in result.
+    const { contentText, hoverMessage, linkURL, light, dark, ...base } = attachment
+    return { ...base, ...overrides }
+}

src/sourcegraph.d.ts

@@ -409,11 +409,28 @@ declare module 'sourcegraph' {
      */
     export type ViewComponent = CodeEditor
 
+    /**
+     * A style for a {@link TextDocumentDecoration}.
+     */
+    export interface ThemableDecorationStyle {
+        /** The CSS background-color property value for the line. */
+        backgroundColor?: string
+
+        /** The CSS border property value for the line. */
+        border?: string
+
+        /** The CSS border-color property value for the line. */
+        borderColor?: string
+
+        /** The CSS border-width property value for the line. */
+        borderWidth?: string
+    }
+
     /**
      * A text document decoration changes the appearance of a range in the document and/or adds other content to
      * it.
      */
-    export interface TextDocumentDecoration {
+    export interface TextDocumentDecoration extends ThemableDecorationStyle {
         /**
          * The range that the decoration applies to. Currently, decorations are
          * only applied only on the start line, and the entire line. Multiline
@@ -430,27 +447,26 @@ declare module 'sourcegraph' {
         /** Content to display after the range. */
         after?: DecorationAttachmentRenderOptions
 
-        /** The CSS background-color property value for the line. */
-        backgroundColor?: string
-
-        /** The CSS border property value for the line. */
-        border?: string
-
-        /** The CSS border-color property value for the line. */
-        borderColor?: string
+        /** Overwrite style for light themes. */
+        light?: ThemableDecorationStyle
 
-        /** The CSS border-width property value for the line. */
-        borderWidth?: string
+        /** Overwrite style for dark themes. */
+        dark?: ThemableDecorationStyle
     }
 
-    /** A decoration attachment adds content after a {@link TextDocumentDecoration}. */
-    export interface DecorationAttachmentRenderOptions {
+    /**
+     * A style for {@link DecorationAttachmentRenderOptions}.
+     */
+    export interface ThemableDecorationAttachmentStyle {
         /** The CSS background-color property value for the attachment. */
         backgroundColor?: string
 
         /** The CSS color property value for the attachment. */
         color?: string
+    }
 
+    /** A decoration attachment adds content after a {@link TextDocumentDecoration}. */
+    export interface DecorationAttachmentRenderOptions extends ThemableDecorationAttachmentStyle {
         /** Text to display in the attachment. */
         contentText?: string
 
@@ -459,6 +475,12 @@ declare module 'sourcegraph' {
 
         /** If set, the attachment becomes a link with this destination URL. */
         linkURL?: string
+
+        /** Overwrite style for light themes. */
+        light?: ThemableDecorationAttachmentStyle
+
+        /** Overwrite style for dark themes. */
+        dark?: ThemableDecorationAttachmentStyle
     }
 
     /**