Factor out toRgba function and test

src/browser/Color.test.ts

@@ -4,7 +4,7 @@
  */
 
 import { assert } from 'chai';
-import { blend, fromCss, toPaddedHex, toCss } from 'browser/Color';
+import { blend, fromCss, toPaddedHex, toCss, toRgba } from 'browser/Color';
 
 describe('Color', () => {
   describe('blend', () => {
@@ -94,4 +94,45 @@ describe('Color', () => {
       assert.equal(toCss(0xff, 0xff, 0xff), '#ffffff');
     });
   });
+
+  describe('toRgba', () => {
+    it('should convert an rgb array to an rgba number', () => {
+      assert.equal(toRgba(0x00, 0x00, 0x00), 0x000000FF);
+      assert.equal(toRgba(0x10, 0x10, 0x10), 0x101010FF);
+      assert.equal(toRgba(0x20, 0x20, 0x20), 0x202020FF);
+      assert.equal(toRgba(0x30, 0x30, 0x30), 0x303030FF);
+      assert.equal(toRgba(0x40, 0x40, 0x40), 0x404040FF);
+      assert.equal(toRgba(0x50, 0x50, 0x50), 0x505050FF);
+      assert.equal(toRgba(0x60, 0x60, 0x60), 0x606060FF);
+      assert.equal(toRgba(0x70, 0x70, 0x70), 0x707070FF);
+      assert.equal(toRgba(0x80, 0x80, 0x80), 0x808080FF);
+      assert.equal(toRgba(0x90, 0x90, 0x90), 0x909090FF);
+      assert.equal(toRgba(0xa0, 0xa0, 0xa0), 0xa0a0a0FF);
+      assert.equal(toRgba(0xb0, 0xb0, 0xb0), 0xb0b0b0FF);
+      assert.equal(toRgba(0xc0, 0xc0, 0xc0), 0xc0c0c0FF);
+      assert.equal(toRgba(0xd0, 0xd0, 0xd0), 0xd0d0d0FF);
+      assert.equal(toRgba(0xe0, 0xe0, 0xe0), 0xe0e0e0FF);
+      assert.equal(toRgba(0xf0, 0xf0, 0xf0), 0xf0f0f0FF);
+      assert.equal(toRgba(0xff, 0xff, 0xff), 0xffffffFF);
+    });
+    it('should convert an rgba array to an rgba number', () => {
+      assert.equal(toRgba(0x00, 0x00, 0x00, 0x00), 0x00000000);
+      assert.equal(toRgba(0x10, 0x10, 0x10, 0x10), 0x10101010);
+      assert.equal(toRgba(0x20, 0x20, 0x20, 0x20), 0x20202020);
+      assert.equal(toRgba(0x30, 0x30, 0x30, 0x30), 0x30303030);
+      assert.equal(toRgba(0x40, 0x40, 0x40, 0x40), 0x40404040);
+      assert.equal(toRgba(0x50, 0x50, 0x50, 0x50), 0x50505050);
+      assert.equal(toRgba(0x60, 0x60, 0x60, 0x60), 0x60606060);
+      assert.equal(toRgba(0x70, 0x70, 0x70, 0x70), 0x70707070);
+      assert.equal(toRgba(0x80, 0x80, 0x80, 0x80), 0x80808080);
+      assert.equal(toRgba(0x90, 0x90, 0x90, 0x90), 0x90909090);
+      assert.equal(toRgba(0xa0, 0xa0, 0xa0, 0xa0), 0xa0a0a0a0);
+      assert.equal(toRgba(0xb0, 0xb0, 0xb0, 0xb0), 0xb0b0b0b0);
+      assert.equal(toRgba(0xc0, 0xc0, 0xc0, 0xc0), 0xc0c0c0c0);
+      assert.equal(toRgba(0xd0, 0xd0, 0xd0, 0xd0), 0xd0d0d0d0);
+      assert.equal(toRgba(0xe0, 0xe0, 0xe0, 0xe0), 0xe0e0e0e0);
+      assert.equal(toRgba(0xf0, 0xf0, 0xf0, 0xf0), 0xf0f0f0f0);
+      assert.equal(toRgba(0xff, 0xff, 0xff, 0xff), 0xffffffff);
+    });
+  });
 });

src/browser/Color.ts

@@ -23,7 +23,7 @@ export function blend(bg: IColor, fg: IColor): IColor {
   const g = bgG + Math.round((fgG - bgG) * a);
   const b = bgB + Math.round((fgB - bgB) * a);
   const css = toCss(r, g, b);
-  const rgba = ((r << 24) | (g << 16) | (b << 8) | 0xFF) >>> 0;
+  const rgba = toRgba(r, g, b);
   return { css, rgba };
 }
 
@@ -42,3 +42,8 @@ export function toPaddedHex(c: number): string {
 export function toCss(r: number, g: number, b: number): string {
   return `#${toPaddedHex(r)}${toPaddedHex(g)}${toPaddedHex(b)}`;
 }
+
+export function toRgba(r: number, g: number, b: number, a: number = 0xFF): number {
+  // >>> 0 forces an unsigned int
+  return (r << 24 | g << 16 | b << 8 | a) >>> 0;
+}

src/browser/ColorManager.ts

@@ -5,7 +5,7 @@
 
 import { IColorManager, IColor, IColorSet } from 'browser/Types';
 import { ITheme } from 'common/services/Services';
-import { fromCss, toPaddedHex, toCss, blend } from 'browser/Color';
+import { fromCss, toCss, blend, toRgba } from 'browser/Color';
 
 const DEFAULT_FOREGROUND = fromCss('#ffffff');
 const DEFAULT_BACKGROUND = fromCss('#000000');
@@ -49,18 +49,16 @@ export const DEFAULT_ANSI_COLORS = (() => {
     const b = v[i % 6];
     colors.push({
       css: toCss(r, g, b),
-      // Use >>> 0 to force a conversion to an unsigned int
-      rgba: ((r << 24) | (g << 16) | (b << 8) | 0xFF) >>> 0
+      rgba: toRgba(r, g, b)
     });
   }
 
   // Generate greys (232-255)
   for (let i = 0; i < 24; i++) {
     const c = 8 + i * 10;
-    const ch = toPaddedHex(c);
     colors.push({
-      css: `#${ch}${ch}${ch}`,
-      rgba: ((c << 24) | (c << 16) | (c << 8) | 0xFF) >>> 0
+      css: toCss(c, c, c),
+      rgba: toRgba(c, c, c)
     });
   }
 
@@ -175,7 +173,7 @@ export class ColorManager implements IColorManager {
 
     return {
       css,
-      rgba: (data[0] << 24 | data[1] << 16 | data[2] << 8 | data[3]) >>> 0
+      rgba: toRgba(data[0], data[1], data[2], data[3])
     };
   }
 }