Fix ANSI inverse (#2967)

* Invert inverse ANSI colors The "inverse" escape sequence was implemented in #2186, but not by actually inverting foreground and background. * ANSI colors: allow switching off underline and inverse * Add CSS classes ansi-default-inverse-fg and ...-bg
jupyter · Nov 1, 2017 · 4918eb1 · 4918eb1
1 parent bfe012e
commit 4918eb1
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 47 deletions.
diff --git a/notebook/static/base/js/utils.js b/notebook/static/base/js/utils.js
@@ -238,6 +238,59 @@ define([
         "ansi-white-intense",
     ];
 
+    function _pushColoredChunk(chunk, fg, bg, bold, underline, inverse, out) {
+        if (chunk) {
+            var classes = [];
+            var styles = [];
+
+            if (bold && typeof fg === "number" && 0 <= fg && fg < 8) {
+                fg += 8;  // Bold text uses "intense" colors
+            }
+            if (inverse) {
+                [fg, bg] = [bg, fg];
+            }
+
+            if (typeof fg === "number") {
+                classes.push(_ANSI_COLORS[fg] + "-fg");
+            } else if (fg.length) {
+                styles.push("color: rgb(" + fg + ")");
+            } else if (inverse) {
+                classes.push("ansi-default-inverse-fg");
+            }
+
+            if (typeof bg === "number") {
+                classes.push(_ANSI_COLORS[bg] + "-bg");
+            } else if (bg.length) {
+                styles.push("background-color: rgb(" + bg + ")");
+            } else if (inverse) {
+                classes.push("ansi-default-inverse-bg");
+            }
+
+            if (bold) {
+                classes.push("ansi-bold");
+            }
+
+            if (underline) {
+                classes.push("ansi-underline");
+            }
+
+            if (classes.length || styles.length) {
+                out.push("<span");
+                if (classes.length) {
+                    out.push(' class="' + classes.join(" ") + '"');
+                }
+                if (styles.length) {
+                    out.push(' style="' + styles.join("; ") + '"');
+                }
+                out.push(">");
+                out.push(chunk);
+                out.push("</span>");
+            } else {
+                out.push(chunk);
+            }
+        }
+    }
+
     function _getExtendedColors(numbers) {
         var r, g, b;
         var n = numbers.shift();
@@ -309,52 +362,7 @@ define([
                 // Ignored: Not a color code
             }
             var chunk = str.substring(start, match.index);
-            if (chunk) {
-                if (bold && typeof fg === "number" && 0 <= fg && fg < 8) {
-                    fg += 8;  // Bold text uses "intense" colors
-                }
-                var classes = [];
-                var styles = [];
-
-                if (typeof fg === "number") {
-                    classes.push(_ANSI_COLORS[fg] + "-fg");
-                } else if (fg.length) {
-                    styles.push("color: rgb(" + fg + ")");
-                }
-
-                if (typeof bg === "number") {
-                    classes.push(_ANSI_COLORS[bg] + "-bg");
-                } else if (bg.length) {
-                    styles.push("background-color: rgb(" + bg + ")");
-                }
-
-                if (bold) {
-                    classes.push("ansi-bold");
-                }
-
-                if (underline) {
-                    classes.push("ansi-underline");
-                }
-
-                if (inverse) {
-                    classes.push("ansi-inverse");
-                }
-
-                if (classes.length || styles.length) {
-                    out.push("<span");
-                    if (classes.length) {
-                        out.push(' class="' + classes.join(" ") + '"');
-                    }
-                    if (styles.length) {
-                        out.push(' style="' + styles.join("; ") + '"');
-                    }
-                    out.push(">");
-                    out.push(chunk);
-                    out.push("</span>");
-                } else {
-                    out.push(chunk);
-                }
-            }
+	    _pushColoredChunk(chunk, fg, bg, bold, underline, inverse, out);
             start = ansi_re.lastIndex;
 
             while (numbers.length) {
@@ -380,6 +388,12 @@ define([
                     case 22:
                         bold = false;
                         break;
+                    case 24:
+                        underline = false;
+                        break;
+                    case 27:
+                        inverse = false;
+                        break;
                     case 30:
                     case 31:
                     case 32:

diff --git a/notebook/static/notebook/less/ansicolors.less b/notebook/static/notebook/less/ansicolors.less
@@ -20,13 +20,16 @@
 .ansicolors(cyan, #60C6C8, #258F8F);
 .ansicolors(white, #C5C1B4, #A1A6B2);
 
+.ansi-default-inverse-fg { color: #FFFFFF; }
+.ansi-default-inverse-bg { background-color: #000000; }
+
 .ansi-bold { font-weight: bold; }
 .ansi-underline { text-decoration: underline; }
-.ansi-inverse { outline: 0.5px dotted; }
 
 /* The following styles are deprecated an will be removed in a future version */
 
 .ansibold {font-weight: bold;}
+.ansi-inverse { outline: 0.5px dotted; }
 
 /* use dark versions for foreground, to improve visibility */
 .ansiblack {color: black;}