From 7652cd8af3a20d5466634fd417126db9f81e049c Mon Sep 17 00:00:00 2001
From: Daniel Imms <daimms@microsoft.com>
Date: Wed, 13 Nov 2019 06:59:46 -0800
Subject: [PATCH] Use hash notation over rgb() for dom colors

---
 .../renderer/dom/DomRendererRowFactory.test.ts        |  4 ++--
 src/browser/renderer/dom/DomRendererRowFactory.ts     | 11 +++++++++--
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/browser/renderer/dom/DomRendererRowFactory.test.ts b/src/browser/renderer/dom/DomRendererRowFactory.test.ts
index 180db0fc4..c71945cfd 100644
--- a/src/browser/renderer/dom/DomRendererRowFactory.test.ts
+++ b/src/browser/renderer/dom/DomRendererRowFactory.test.ts
@@ -212,7 +212,7 @@ describe('DomRendererRowFactory', () => {
         lineData.setCell(0, cell);
         const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20);
         assert.equal(getFragmentHtml(fragment),
-          '<span style="color:rgb(1,2,3);background-color:rgb(4,5,6);">a</span>'
+          '<span style="color:#010203;background-color:#040506;">a</span>'
         );
       });
 
@@ -223,7 +223,7 @@ describe('DomRendererRowFactory', () => {
         lineData.setCell(0, cell);
         const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20);
         assert.equal(getFragmentHtml(fragment),
-          '<span style="color:rgb(4,5,6);background-color:rgb(1,2,3);">a</span>'
+          '<span style="color:#040506;background-color:#010203;">a</span>'
         );
       });
     });
diff --git a/src/browser/renderer/dom/DomRendererRowFactory.ts b/src/browser/renderer/dom/DomRendererRowFactory.ts
index bb96fb723..5e53cf604 100644
--- a/src/browser/renderer/dom/DomRendererRowFactory.ts
+++ b/src/browser/renderer/dom/DomRendererRowFactory.ts
@@ -130,7 +130,7 @@ export class DomRendererRowFactory {
           }
           break;
         case Attributes.CM_RGB:
-          charElement.setAttribute('style', `${charElement.getAttribute('style') || ''}color:rgb(${(AttributeData.toColorRGB(fg)).join(',')});`);
+          charElement.setAttribute('style', `${charElement.getAttribute('style') || ''}color:#${padStart(fg.toString(16), '0', 6)};`);
           break;
         case Attributes.CM_DEFAULT:
         default:
@@ -148,7 +148,7 @@ export class DomRendererRowFactory {
           charElement.classList.add(`xterm-bg-${bg}`);
           break;
         case Attributes.CM_RGB:
-          charElement.setAttribute('style', `${charElement.getAttribute('style') || ''}background-color:rgb(${(AttributeData.toColorRGB(bg)).join(',')});`);
+          charElement.setAttribute('style', `${charElement.getAttribute('style') || ''}background-color:#${padStart(bg.toString(16), '0', 6)};`);
           break;
         case Attributes.CM_DEFAULT:
         default:
@@ -184,3 +184,10 @@ export class DomRendererRowFactory {
     return false;
   }
 }
+
+function padStart(text: string, padChar: string, length: number): string {
+  while (text.length < length) {
+    text = padChar + text;
+  }
+  return text;
+}