From bc16a8b7e747107807d189327f87efd4eaebbee9 Mon Sep 17 00:00:00 2001
From: Daniel Imms <daimms@microsoft.com>
Date: Tue, 9 Oct 2018 11:35:48 -0700
Subject: [PATCH] Handle inverted default colors properly in DOM renderer

This uses the actual fg for bg and bg to fg, rather than the
black/white theme colors

Fixes #1738
---
 src/renderer/dom/DomRenderer.ts           |  4 ++++
 src/renderer/dom/DomRendererRowFactory.ts | 13 +++++++------
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/renderer/dom/DomRenderer.ts b/src/renderer/dom/DomRenderer.ts
index 8f51c4ef..069e9a13 100644
--- a/src/renderer/dom/DomRenderer.ts
+++ b/src/renderer/dom/DomRenderer.ts
@@ -10,6 +10,7 @@ import { EventEmitter } from '../../common/EventEmitter';
 import { ColorManager } from '../ColorManager';
 import { RenderDebouncer } from '../../ui/RenderDebouncer';
 import { BOLD_CLASS, ITALIC_CLASS, CURSOR_CLASS, CURSOR_STYLE_BLOCK_CLASS, CURSOR_STYLE_BAR_CLASS, CURSOR_STYLE_UNDERLINE_CLASS, DomRendererRowFactory } from './DomRendererRowFactory';
+import { INVERTED_DEFAULT_COLOR } from '../atlas/Types';
 
 const TERMINAL_CLASS_PREFIX = 'xterm-dom-renderer-owner-';
 const ROW_CONTAINER_CLASS = 'xterm-rows';
@@ -196,6 +197,9 @@ export class DomRenderer extends EventEmitter implements IRenderer {
           `${this._terminalSelector} .${FG_CLASS_PREFIX}${i} { color: ${c.css}; }` +
           `${this._terminalSelector} .${BG_CLASS_PREFIX}${i} { background-color: ${c.css}; }`;
     });
+    styles +=
+        `${this._terminalSelector} .${FG_CLASS_PREFIX}${INVERTED_DEFAULT_COLOR} { color: ${this.colorManager.colors.background.css}; }` +
+        `${this._terminalSelector} .${BG_CLASS_PREFIX}${INVERTED_DEFAULT_COLOR} { background-color: ${this.colorManager.colors.foreground.css}; }`;
 
     this._themeStyleElement.innerHTML = styles;
     return this.colorManager.colors;
diff --git a/src/renderer/dom/DomRendererRowFactory.ts b/src/renderer/dom/DomRendererRowFactory.ts
index 877f3fdd..9f8ac357 100644
--- a/src/renderer/dom/DomRendererRowFactory.ts
+++ b/src/renderer/dom/DomRendererRowFactory.ts
@@ -6,7 +6,7 @@
 import { CHAR_DATA_CHAR_INDEX, CHAR_DATA_ATTR_INDEX, CHAR_DATA_WIDTH_INDEX } from '../../Buffer';
 import { FLAGS } from '../Types';
 import { IBufferLine } from '../../Types';
-import { DEFAULT_COLOR } from '../atlas/Types';
+import { DEFAULT_COLOR, INVERTED_DEFAULT_COLOR } from '../atlas/Types';
 
 export const BOLD_CLASS = 'xterm-bold';
 export const ITALIC_CLASS = 'xterm-italic';
@@ -72,15 +72,16 @@ export class DomRendererRowFactory {
         bg = fg;
         fg = temp;
         if (fg === DEFAULT_COLOR) {
-          fg = 0;
+          fg = INVERTED_DEFAULT_COLOR;
         }
         if (bg === DEFAULT_COLOR) {
-          bg = 15;
+          bg = INVERTED_DEFAULT_COLOR;
         }
       }
 
       if (flags & FLAGS.BOLD) {
-        // Convert the FG color to the bold variant
+        // Convert the FG color to the bold variant. This should not happen when
+        // the fg is the inverse default color as there is no bold variant.
         if (fg < 8) {
           fg += 8;
         }
@@ -92,10 +93,10 @@ export class DomRendererRowFactory {
       }
 
       charElement.textContent = char;
-      if (fg < DEFAULT_COLOR) {
+      if (fg !== DEFAULT_COLOR) {
         charElement.classList.add(`xterm-fg-${fg}`);
       }
-      if (bg < DEFAULT_COLOR) {
+      if (bg !== DEFAULT_COLOR) {
         charElement.classList.add(`xterm-bg-${bg}`);
       }
       fragment.appendChild(charElement);