Allow theming with arbitrary CSS color strings

This mostly worked before, but clearColor made the assumption that the
colors were always in #RRBBGG format. See the discussion here:
xtermjs#1327 (comment)

This changes the internal representation of a color so that we hold onto
into an object containing the original css string along with an RGBA
value encoded as a 32-bit uint. clearColor can then use that RGBA
representation.

Additionally, this deduplicates some code between ColorManager and
Terminal. Terminal was generating the 256 ansi colors the same way
ColorManager was, so this just makes Terminal use the same constant.

Author: bgw

src/Terminal.ts

@@ -2233,38 +2233,6 @@ function wasMondifierKeyOnlyEvent(ev: KeyboardEvent): boolean {
  * ANSI color code.
  */
 
-// Colors 0-15 + 16-255
-// Much thanks to TooTallNate for writing this.
-const vcolors: number[][] = (function(): number[][] {
-  const result = DEFAULT_ANSI_COLORS.map(c => {
-    c = c.substring(1);
-    return [
-      parseInt(c.substring(0, 2), 16),
-      parseInt(c.substring(2, 4), 16),
-      parseInt(c.substring(4, 6), 16)
-    ];
-  });
-  const r = [0x00, 0x5f, 0x87, 0xaf, 0xd7, 0xff];
-
-  // 16-231
-  for (let i = 0; i < 216; i++) {
-    result.push([
-      r[(i / 36) % 6 | 0],
-      r[(i / 6) % 6 | 0],
-      r[i % 6]
-    ]);
-  }
-
-  // 232-255 (grey)
-  let c: number;
-  for (let i = 0; i < 24; i++) {
-    c = 8 + i * 10;
-    result.push([c, c, c]);
-  }
-
-  return result;
-})();
-
 const matchColorCache: {[colorRGBHash: number]: number} = {};
 
 // http://stackoverflow.com/questions/1633828
@@ -2285,17 +2253,18 @@ function matchColor_(r1: number, g1: number, b1: number): number {
   let ldiff = Infinity;
   let li = -1;
   let i = 0;
-  let c: number[];
+  let c: number;
   let r2: number;
   let g2: number;
   let b2: number;
   let diff: number;
 
-  for (; i < vcolors.length; i++) {
-    c = vcolors[i];
-    r2 = c[0];
-    g2 = c[1];
-    b2 = c[2];
+  for (; i < DEFAULT_ANSI_COLORS.length; i++) {
+    c = DEFAULT_ANSI_COLORS[i].rgba;
+    r2 = c >>> 24;
+    g2 = c >>> 16 & 0xFF;
+    b2 = c >>> 8 & 0xFF;
+    // assume that alpha is 0xFF
 
     diff = matchColorDistance(r1, g1, b1, r2, g2, b2);
 

src/Viewport.ts

@@ -50,7 +50,7 @@ export class Viewport implements IViewport {
   }
 
   public onThemeChanged(colors: IColorSet): void {
-    this._viewportElement.style.backgroundColor = colors.background;
+    this._viewportElement.style.backgroundColor = colors.background.css;
   }
 
   /**

src/renderer/BaseRenderLayer.ts

@@ -179,7 +179,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     if (this._alpha) {
       this._ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
     } else {
-      this._ctx.fillStyle = this._colors.background;
+      this._ctx.fillStyle = this._colors.background.css;
       this._ctx.fillRect(0, 0, this._canvas.width, this._canvas.height);
     }
   }
@@ -199,7 +199,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
           width * this._scaledCellWidth,
           height * this._scaledCellHeight);
     } else {
-      this._ctx.fillStyle = this._colors.background;
+      this._ctx.fillStyle = this._colors.background.css;
       this._ctx.fillRect(
           x * this._scaledCellWidth,
           y * this._scaledCellHeight,
@@ -311,12 +311,12 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     this._ctx.textBaseline = 'top';
 
     if (fg === INVERTED_DEFAULT_COLOR) {
-      this._ctx.fillStyle = this._colors.background;
+      this._ctx.fillStyle = this._colors.background.css;
     } else if (fg < 256) {
       // 256 color support
-      this._ctx.fillStyle = this._colors.ansi[fg];
+      this._ctx.fillStyle = this._colors.ansi[fg].css;
     } else {
-      this._ctx.fillStyle = this._colors.foreground;
+      this._ctx.fillStyle = this._colors.foreground.css;
     }
 
     this._clipRow(terminal, y);