Add a system for theming, use it to implement dark mode

src/gl/canvas-context.ts

@@ -4,6 +4,8 @@ import {TextureRenderer} from './texture-renderer'
 import {Rect, Vec2} from '../lib/math'
 import {ViewportRectangleRenderer} from './overlay-rectangle-renderer'
 import {FlamechartColorPassRenderer} from './flamechart-color-pass-renderer'
+import {Color} from '../lib/color'
+import {Theme} from '../views/themes/theme'
 
 type FrameCallback = () => void
 
@@ -13,13 +15,19 @@ export class CanvasContext {
   public readonly textureRenderer: TextureRenderer
   public readonly viewportRectangleRenderer: ViewportRectangleRenderer
   public readonly flamechartColorPassRenderer: FlamechartColorPassRenderer
+  public readonly theme: Theme
 
-  constructor(canvas: HTMLCanvasElement) {
+  constructor(canvas: HTMLCanvasElement, theme: Theme) {
     this.gl = new WebGL.Context(canvas)
     this.rectangleBatchRenderer = new RectangleBatchRenderer(this.gl)
     this.textureRenderer = new TextureRenderer(this.gl)
-    this.viewportRectangleRenderer = new ViewportRectangleRenderer(this.gl)
-    this.flamechartColorPassRenderer = new FlamechartColorPassRenderer(this.gl)
+    this.viewportRectangleRenderer = new ViewportRectangleRenderer(this.gl, theme)
+    this.flamechartColorPassRenderer = new FlamechartColorPassRenderer(this.gl, theme)
+    this.theme = theme
+
+    // Whenever the canvas is resized, draw immediately. This prevents
+    // flickering during resizing.
+    this.gl.addAfterResizeEventHandler(this.onBeforeFrame)
 
     const webGLInfo = this.gl.getWebGLInfo()
     if (webGLInfo) {
@@ -48,7 +56,8 @@ export class CanvasContext {
   private onBeforeFrame = () => {
     this.animationFrameRequest = null
     this.gl.setViewport(0, 0, this.gl.renderTargetWidthInPixels, this.gl.renderTargetHeightInPixels)
-    this.gl.clear(new Graphics.Color(1, 1, 1, 1))
+    const color = Color.fromCSSHex(this.theme.bgPrimaryColor)
+    this.gl.clear(new Graphics.Color(color.r, color.g, color.b, color.a))
 
     for (const handler of this.beforeFrameHandlers) {
       handler()

src/gl/flamechart-color-pass-renderer.ts

@@ -1,4 +1,5 @@
 import {Vec2, Rect, AffineTransform} from '../lib/math'
+import {Theme} from '../views/themes/theme'
 import {Graphics} from './graphics'
 import {setUniformAffineTransform} from './utils'
 
@@ -20,7 +21,7 @@ const vert = `
   }
 `
 
-const frag = `
+const frag = (colorForBucket: string) => `
   precision mediump float;
 
   uniform vec2 uvSpacePixelSize;
@@ -49,13 +50,7 @@ const frag = `
     return 2.0 * abs(fract(x) - 0.5) - 1.0;
   }
 
-  vec3 colorForBucket(float t) {
-    float x = triangle(30.0 * t);
-    float H = 360.0 * (0.9 * t);
-    float C = 0.25 + 0.2 * x;
-    float L = 0.80 - 0.15 * x;
-    return hcl2rgb(H, C, L);
-  }
+  ${colorForBucket}
 
   void main() {
     vec4 here = texture2D(colorTexture, vUv);
@@ -107,7 +102,7 @@ export class FlamechartColorPassRenderer {
   private material: Graphics.Material
   private buffer: Graphics.VertexBuffer
 
-  constructor(private gl: Graphics.Context) {
+  constructor(private gl: Graphics.Context, theme: Theme) {
     const vertices = [
       {pos: [-1, 1], uv: [0, 1]},
       {pos: [1, 1], uv: [1, 1]},
@@ -124,7 +119,7 @@ export class FlamechartColorPassRenderer {
 
     this.buffer = gl.createVertexBuffer(vertexFormat.stride * vertices.length)
     this.buffer.uploadFloats(floats)
-    this.material = gl.createMaterial(vertexFormat, vert, frag)
+    this.material = gl.createMaterial(vertexFormat, vert, frag(theme.colorForBucketGLSL))
   }
 
   render(props: FlamechartColorPassRenderProps) {

src/gl/graphics.ts

@@ -83,6 +83,15 @@ export namespace Graphics {
       public alphaF: number,
     ) {}
 
+    equals(other: Color): boolean {
+      return (
+        this.redF === other.redF &&
+        this.greenF === other.greenF &&
+        this.blueF === other.blueF &&
+        this.alphaF === other.alphaF
+      )
+    }
+
     static TRANSPARENT = new Color(0, 0, 0, 0)
   }
 
@@ -160,6 +169,14 @@ export namespace Graphics {
     setUnpremultipliedBlendState() {
       this.setBlendState(BlendOperation.SOURCE_ALPHA, BlendOperation.INVERSE_SOURCE_ALPHA)
     }
+
+    protected resizeEventHandlers = new Set<() => void>()
+    addAfterResizeEventHandler(callback: () => void): void {
+      this.resizeEventHandlers.add(callback)
+    }
+    removeAfterResizeEventHandler(callback: () => void): void {
+      this.resizeEventHandlers.delete(callback)
+    }
   }
 
   export interface Material {
@@ -476,13 +493,15 @@ export namespace WebGL {
       this.setViewport(0, 0, widthInPixels, heightInPixels)
       this._width = widthInPixels
       this._height = heightInPixels
+
+      this.resizeEventHandlers.forEach(cb => cb())
     }
 
     clear(color: Graphics.Color) {
       this._updateRenderTargetAndViewport()
       this._updateBlendState()
 
-      if (color != this._currentClearColor) {
+      if (!color.equals(this._currentClearColor)) {
         this._gl.clearColor(color.redF, color.greenF, color.blueF, color.alphaF)
         this._currentClearColor = color
       }

src/gl/overlay-rectangle-renderer.ts

@@ -1,4 +1,6 @@
+import {Color} from '../lib/color'
 import {AffineTransform, Rect} from '../lib/math'
+import {Theme} from '../views/themes/theme'
 import {Graphics} from './graphics'
 import {setUniformAffineTransform, setUniformVec2} from './utils'
 
@@ -18,53 +20,57 @@ const vert = `
   }
 `
 
-const frag = `
-  precision mediump float;
-
-  uniform mat3 configSpaceToPhysicalViewSpace;
-  uniform vec2 physicalSize;
-  uniform vec2 physicalOrigin;
-  uniform vec2 configSpaceViewportOrigin;
-  uniform vec2 configSpaceViewportSize;
-  uniform float framebufferHeight;
-
-  void main() {
-    vec2 origin = (configSpaceToPhysicalViewSpace * vec3(configSpaceViewportOrigin, 1.0)).xy;
-    vec2 size = (configSpaceToPhysicalViewSpace * vec3(configSpaceViewportSize, 0.0)).xy;
-
-    vec2 halfSize = physicalSize / 2.0;
-
-    float borderWidth = 2.0;
-
-    origin = floor(origin * halfSize) / halfSize + borderWidth * vec2(1.0, 1.0);
-    size = floor(size * halfSize) / halfSize - 2.0 * borderWidth * vec2(1.0, 1.0);
-
-    vec2 coord = gl_FragCoord.xy;
-    coord.x = coord.x - physicalOrigin.x;
-    coord.y = framebufferHeight - coord.y - physicalOrigin.y;
-    vec2 clamped = clamp(coord, origin, origin + size);
-    vec2 gap = clamped - coord;
-    float maxdist = max(abs(gap.x), abs(gap.y));
-
-    // TOOD(jlfwong): Could probably optimize this to use mix somehow.
-    if (maxdist == 0.0) {
-      // Inside viewport rectangle
-      gl_FragColor = vec4(0, 0, 0, 0);
-    } else if (maxdist < borderWidth) {
-      // Inside viewport rectangle at border
-      gl_FragColor = vec4(0.7, 0.7, 0.7, 0.8);
-    } else {
-      // Outside viewport rectangle
-      gl_FragColor = vec4(0.7, 0.7, 0.7, 0.5);
+const frag = (theme: Theme) => {
+  const {r, g, b} = Color.fromCSSHex(theme.fgSecondaryColor)
+  const rgb = `${r.toFixed(1)}, ${g.toFixed(1)}, ${b.toFixed(1)}`
+  return `
+    precision mediump float;
+
+    uniform mat3 configSpaceToPhysicalViewSpace;
+    uniform vec2 physicalSize;
+    uniform vec2 physicalOrigin;
+    uniform vec2 configSpaceViewportOrigin;
+    uniform vec2 configSpaceViewportSize;
+    uniform float framebufferHeight;
+
+    void main() {
+      vec2 origin = (configSpaceToPhysicalViewSpace * vec3(configSpaceViewportOrigin, 1.0)).xy;
+      vec2 size = (configSpaceToPhysicalViewSpace * vec3(configSpaceViewportSize, 0.0)).xy;
+
+      vec2 halfSize = physicalSize / 2.0;
+
+      float borderWidth = 2.0;
+
+      origin = floor(origin * halfSize) / halfSize + borderWidth * vec2(1.0, 1.0);
+      size = floor(size * halfSize) / halfSize - 2.0 * borderWidth * vec2(1.0, 1.0);
+
+      vec2 coord = gl_FragCoord.xy;
+      coord.x = coord.x - physicalOrigin.x;
+      coord.y = framebufferHeight - coord.y - physicalOrigin.y;
+      vec2 clamped = clamp(coord, origin, origin + size);
+      vec2 gap = clamped - coord;
+      float maxdist = max(abs(gap.x), abs(gap.y));
+
+      // TOOD(jlfwong): Could probably optimize this to use mix somehow.
+      if (maxdist == 0.0) {
+        // Inside viewport rectangle
+        gl_FragColor = vec4(0, 0, 0, 0);
+      } else if (maxdist < borderWidth) {
+        // Inside viewport rectangle at border
+        gl_FragColor = vec4(${rgb}, 0.8);
+      } else {
+        // Outside viewport rectangle
+        gl_FragColor = vec4(${rgb}, 0.5);
+      }
     }
-  }
-`
+  `
+}
 
 export class ViewportRectangleRenderer {
   private material: Graphics.Material
   private buffer: Graphics.VertexBuffer
 
-  constructor(private gl: Graphics.Context) {
+  constructor(private gl: Graphics.Context, theme: Theme) {
     const vertices = [
       [-1, 1],
       [1, 1],
@@ -78,7 +84,7 @@ export class ViewportRectangleRenderer {
     }
     this.buffer = gl.createVertexBuffer(vertexFormat.stride * vertices.length)
     this.buffer.upload(new Uint8Array(new Float32Array(floats).buffer))
-    this.material = gl.createMaterial(vertexFormat, vert, frag)
+    this.material = gl.createMaterial(vertexFormat, vert, frag(theme))
   }
 
   render(props: ViewportRectangleRendererProps) {

src/lib/color.ts

@@ -34,6 +34,23 @@ export class Color {
     return new Color(clamp(R1 + m, 0, 1), clamp(G1 + m, 0, 1), clamp(B1 + m, 0, 1), 1.0)
   }
 
+  static fromCSSHex(hex: string) {
+    if (hex.length !== 7 || hex[0] !== '#') {
+      throw new Error(`Invalid color input ${hex}`)
+    }
+    const r = parseInt(hex.substr(1, 2), 16) / 255
+    const g = parseInt(hex.substr(3, 2), 16) / 255
+    const b = parseInt(hex.substr(5, 2), 16) / 255
+    if (r < 0 || r > 1 || g < 0 || g > 1 || b < 0 || b > 1) {
+      throw new Error(`Invalid color input ${hex}`)
+    }
+    return new Color(r, g, b)
+  }
+
+  withAlpha(a: number): Color {
+    return new Color(this.r, this.g, this.b, a)
+  }
+
   toCSS(): string {
     return `rgba(${(255 * this.r).toFixed()}, ${(255 * this.g).toFixed()}, ${(
       255 * this.b

src/speedscope.tsx

@@ -2,6 +2,7 @@ import {h, render} from 'preact'
 import {createAppStore} from './store'
 import {ApplicationContainer} from './views/application-container'
 import {Provider} from './lib/preact-redux'
+import {ThemeProvider} from './views/themes/theme'
 
 console.log(`speedscope v${require('../package.json').version}`)
 
@@ -20,7 +21,9 @@ const store = lastStore ? createAppStore(lastStore.getState()) : createAppStore(
 
 render(
   <Provider store={store}>
-    <ApplicationContainer />
+    <ThemeProvider>
+      <ApplicationContainer />
+    </ThemeProvider>
   </Provider>,
   document.body,
   document.body.lastElementChild || undefined,

src/store/actions.ts

@@ -1,7 +1,7 @@
 import {actionCreator} from '../lib/typed-redux'
 import {CallTreeNode, Frame, ProfileGroup} from '../lib/profile'
 import {SortMethod} from '../views/profile-table-view'
-import {ViewMode} from '.'
+import {ColorScheme, ViewMode} from '.'
 import {FlamechartID} from './flamechart-view-state'
 import {Rect, Vec2} from '../lib/math'
 import {HashParams} from '../lib/hash-params'
@@ -19,6 +19,7 @@ export namespace actions {
   export const setLoading = actionCreator<boolean>('setLoading')
   export const setError = actionCreator<boolean>('setError')
   export const setHashParams = actionCreator<HashParams>('setHashParams')
+  export const setColorScheme = actionCreator<ColorScheme>('setColorScheme')
 
   export namespace sandwichView {
     export const setTableSortMethod = actionCreator<SortMethod>('sandwichView.setTableSortMethod')

src/store/getters.ts

@@ -1,9 +1,9 @@
 import {Frame, Profile} from '../lib/profile'
-import {triangle, memoizeByReference, memoizeByShallowEquality} from '../lib/utils'
+import {memoizeByReference, memoizeByShallowEquality} from '../lib/utils'
 import {RowAtlas} from '../gl/row-atlas'
 import {CanvasContext} from '../gl/canvas-context'
-import {Color} from '../lib/color'
 import {FlamechartRowAtlasKey} from '../gl/flamechart-renderer'
+import {Theme} from '../views/themes/theme'
 
 export const createGetColorBucketForFrame = memoizeByReference(
   (frameToColorBucket: Map<number | string, number>) => {
@@ -13,24 +13,27 @@ export const createGetColorBucketForFrame = memoizeByReference(
   },
 )
 
-export const createGetCSSColorForFrame = memoizeByReference(
-  (frameToColorBucket: Map<number | string, number>) => {
+export const createGetCSSColorForFrame = memoizeByShallowEquality(
+  ({
+    theme,
+    frameToColorBucket,
+  }: {
+    theme: Theme
+    frameToColorBucket: Map<number | string, number>
+  }) => {
     const getColorBucketForFrame = createGetColorBucketForFrame(frameToColorBucket)
     return (frame: Frame): string => {
       const t = getColorBucketForFrame(frame) / 255
-
-      const x = triangle(30.0 * t)
-      const H = 360.0 * (0.9 * t)
-      const C = 0.25 + 0.2 * x
-      const L = 0.8 - 0.15 * x
-      return Color.fromLumaChromaHue(L, C, H).toCSS()
+      return theme.colorForBucket(t).toCSS()
     }
   },
 )
 
-export const getCanvasContext = memoizeByReference((canvas: HTMLCanvasElement) => {
-  return new CanvasContext(canvas)
-})
+export const getCanvasContext = memoizeByShallowEquality(
+  ({theme, canvas}: {theme: Theme; canvas: HTMLCanvasElement}) => {
+    return new CanvasContext(canvas, theme)
+  },
+)
 
 export const getRowAtlas = memoizeByReference((canvasContext: CanvasContext) => {
   return new RowAtlas<FlamechartRowAtlasKey>(