From 0a2ba7c0520e87a9f3c405a202466c17307c1b43 Mon Sep 17 00:00:00 2001 From: KLuka Date: Wed, 20 May 2015 16:41:11 +0200 Subject: [PATCH] Issue #255: Fixed "White on Black" color theme * Changed handling of ANSI escape codes. Now we detect when to use default colors and when to use explicit ANSI colors. * Added new CSS classes "ansiDef" and "bgAnsiDef" for default terminal foreground and background. Before we were using "ansi0" and "bgAnsi15" for default bg/fg colors. This was causing problems, when "White on Black" color theme modified their values. Now just this two classes are changed when user changes his color theme. --- shellinabox/color.css | 8 ++++-- shellinabox/monochrome.css | 12 ++++++--- shellinabox/shell_in_a_box.jspp | 2 ++ shellinabox/styles.css | 14 +++++++--- shellinabox/vt100.jspp | 46 +++++++++++++++++++++------------ shellinabox/white-on-black.css | 12 +++++++-- 6 files changed, 65 insertions(+), 29 deletions(-) diff --git a/shellinabox/color.css b/shellinabox/color.css index 20b793e..06e565b 100644 --- a/shellinabox/color.css +++ b/shellinabox/color.css @@ -1,7 +1,9 @@ /* DEFINES_COLORS */ /* SYSTEM colors */ -#vt100 .ansi0 { } +#vt100 .ansiDef { } + +#vt100 .ansi0 { color: #000000; } #vt100 .ansi1 { color: #cd0000; } #vt100 .ansi2 { color: #00cd00; } #vt100 .ansi3 { color: #cdcd00; } @@ -261,6 +263,8 @@ #vt100 .ansi255 { color: #eeeeee; } /* SYSTEM colors */ +#vt100 .bgAnsiDef { } + #vt100 .bgAnsi0 { background-color: #000000; } #vt100 .bgAnsi1 { background-color: #cd0000; } #vt100 .bgAnsi2 { background-color: #00cd00; } @@ -276,7 +280,7 @@ #vt100 .bgAnsi12 { background-color: #5c5cff; } #vt100 .bgAnsi13 { background-color: #ff00ff; } #vt100 .bgAnsi14 { background-color: #00ffff; } -#vt100 .bgAnsi15 { } +#vt100 .bgAnsi15 { background-color: #ffffff; } /* XTERM colors - 256 color mode */ #vt100 .bgAnsi16 { background-color: #000000; } diff --git a/shellinabox/monochrome.css b/shellinabox/monochrome.css index 28983e0..fac3d34 100644 --- a/shellinabox/monochrome.css +++ b/shellinabox/monochrome.css @@ -1,5 +1,7 @@ /* SYSTEM colors */ -#vt100 .ansi0 { } +#vt100 .ansiDef { color: inherit; } + +#vt100 .ansi0 { color: inherit; } #vt100 .ansi1 { color: inherit; } #vt100 .ansi2 { color: inherit; } #vt100 .ansi3 { color: inherit; } @@ -14,7 +16,7 @@ #vt100 .ansi12 { color: inherit; } #vt100 .ansi13 { color: inherit; } #vt100 .ansi14 { color: inherit; } -#vt100 .ansi15 { } +#vt100 .ansi15 { color: inherit; } /* XTERM colors - 256 color mode */ #vt100 .ansi16 { color: inherit; } @@ -259,7 +261,9 @@ #vt100 .ansi255 { color: inherit; } /* SYSTEM colors */ -#vt100 .bgAnsi0 { } +#vt100 .bgAnsiDef { background-color: transparent; } + +#vt100 .bgAnsi0 { background-color: transparent; } #vt100 .bgAnsi1 { background-color: transparent; } #vt100 .bgAnsi2 { background-color: transparent; } #vt100 .bgAnsi3 { background-color: transparent; } @@ -274,7 +278,7 @@ #vt100 .bgAnsi12 { background-color: transparent; } #vt100 .bgAnsi13 { background-color: transparent; } #vt100 .bgAnsi14 { background-color: transparent; } -#vt100 .bgAnsi15 { } +#vt100 .bgAnsi15 { background-color: transparent; } /* XTERM colors - 256 color mode */ #vt100 .bgAnsi16 { background-color: transparent; } diff --git a/shellinabox/shell_in_a_box.jspp b/shellinabox/shell_in_a_box.jspp index 8de5220..c7b61cb 100644 --- a/shellinabox/shell_in_a_box.jspp +++ b/shellinabox/shell_in_a_box.jspp @@ -373,3 +373,5 @@ ShellInABox.prototype.about = function() { "Eric Young\n(eay@cryptsoft.com)" : "")); }; + +/* vim: set filetype=javascript : */ diff --git a/shellinabox/styles.css b/shellinabox/styles.css index 23dcf89..6bb823d 100755 --- a/shellinabox/styles.css +++ b/shellinabox/styles.css @@ -133,8 +133,10 @@ height: 1ex; } -#vt100 #scrollable.inverted { color: #ffffff; - background-color: #000000; } +#vt100 #scrollable.inverted { + color: #ffffff; + background-color: #000000; +} #vt100 #kbd_button { float: left; @@ -237,7 +239,9 @@ */ [else DEFINES_COLORS] /* SYSTEM colors */ -#vt100 .ansi0 { } +#vt100 .ansiDef { color: #000000; } + +#vt100 .ansi0 { color: #000000; } #vt100 .ansi1 { color: #cd0000; } #vt100 .ansi2 { color: #00cd00; } #vt100 .ansi3 { color: #cdcd00; } @@ -497,6 +501,8 @@ #vt100 .ansi255 { color: #eeeeee; } /* SYSTEM colors */ +#vt100 .bgAnsiDef { background-color: #ffffff; } + #vt100 .bgAnsi0 { background-color: #000000; } #vt100 .bgAnsi1 { background-color: #cd0000; } #vt100 .bgAnsi2 { background-color: #00cd00; } @@ -512,7 +518,7 @@ #vt100 .bgAnsi12 { background-color: #5c5cff; } #vt100 .bgAnsi13 { background-color: #ff00ff; } #vt100 .bgAnsi14 { background-color: #00ffff; } -#vt100 .bgAnsi15 { } +#vt100 .bgAnsi15 { background-color: #ffffff; } /* XTERM colors - 256 color mode */ #vt100 .bgAnsi16 { background-color: #000000; } diff --git a/shellinabox/vt100.jspp b/shellinabox/vt100.jspp index dbc70b4..9f8fd8f 100755 --- a/shellinabox/vt100.jspp +++ b/shellinabox/vt100.jspp @@ -84,12 +84,14 @@ #define ESss2 18 #define ESss3 19 -#define ATTR_DEFAULT 0x00F0 +#define ATTR_DEFAULT 0x60F0 #define ATTR_REVERSE 0x0100 #define ATTR_UNDERLINE 0x0200 #define ATTR_DIM 0x0400 #define ATTR_BRIGHT 0x0800 #define ATTR_BLINK 0x1000 +#define ATTR_DEF_FG 0x2000 +#define ATTR_DEF_BG 0x4000 #define MOUSE_DOWN 0 #define MOUSE_UP 1 @@ -215,7 +217,7 @@ VT100.prototype.reset = function(clearHistory) { this.utfEnabled = this.utfPreferred; this.utfCount = 0; this.utfChar = 0; - this.color = 'ansi0 bgAnsi15'; + this.color = 'ansiDef bgAnsiDef'; this.style = ''; this.attr = ATTR_DEFAULT; this.attrFg = false; @@ -1534,13 +1536,13 @@ VT100.prototype.insertBlankLine = function(y, color, style) { // not add any missing lines in between. It is the caller's responsibility // to do so. if (!color) { - color = 'ansi0 bgAnsi15'; + color = 'ansiDef bgAnsiDef'; } if (!style) { style = ''; } var line; - if (color != 'ansi0 bgAnsi15' && !style) { + if (color != 'ansiDef bgAnsiDef' && !style) { line = document.createElement('pre'); this.setTextContent(line, '\n'); } else { @@ -1631,7 +1633,7 @@ VT100.prototype.truncateLines = function(width) { // Prune white space from the end of the current line var span = line.lastChild; while (span && - span.className == 'ansi0 bgAnsi15' && + span.className == 'ansiDef bgAnsiDef' && !span.style.cssText.length) { // Scan backwards looking for first non-space character var s = this.getTextContent(span); @@ -1665,7 +1667,7 @@ VT100.prototype.truncateLines = function(width) { VT100.prototype.putString = function(x, y, text, color, style) { if (!color) { - color = 'ansi0 bgAnsi15'; + color = 'ansiDef bgAnsiDef'; } if (!style) { style = ''; @@ -1726,12 +1728,12 @@ VT100.prototype.putString = function(x, y, text, color, style) { var oldColor = span.className; var oldStyle = span.style.cssText; if (xPos + s.length < x) { - if (oldColor != 'ansi0 bgAnsi15' || oldStyle != '') { + if (oldColor != 'ansiDef bgAnsiDef' || oldStyle != '') { span = document.createElement('span'); line.appendChild(span); - span.className = 'ansi0 bgAnsi15'; + span.className = 'ansiDef bgAnsiDef'; span.style.cssText = ''; - oldColor = 'ansi0 bgAnsi15'; + oldColor = 'ansiDef bgAnsiDef'; oldStyle = ''; xPos += s.length; s = ''; @@ -1899,7 +1901,7 @@ VT100.prototype.putString = function(x, y, text, color, style) { // Prune white space from the end of the current line span = line.lastChild; while (span && - span.className == 'ansi0 bgAnsi15' && + span.className == 'ansiDef bgAnsiDef' && !span.style.cssText.length) { // Scan backwards looking for first non-space character s = this.getTextContent(span); @@ -2090,7 +2092,7 @@ VT100.prototype.clearRegion = function(x, y, w, h, color, style) { // child nodes. if (!this.numScrollbackLines && w == this.terminalWidth && h == this.terminalHeight && - (color == undefined || color == 'ansi0 bgAnsi15') && !style) { + (color == undefined || color == 'ansiDef bgAnsiDef') && !style) { var console = this.console[this.currentScreen]; while (console.lastChild) { console.removeChild(console.lastChild); @@ -2152,7 +2154,7 @@ VT100.prototype.copyLineSegment = function(dX, dY, sX, sY, w) { if (className[i]) { color = className[i]; } else { - color = 'ansi0 bgAnsi15'; + color = 'ansiDef bgAnsiDef'; } this.putString(dX, dY - this.numScrollbackLines, text[i], color, style[i]); dX += text[i].length; @@ -3366,6 +3368,14 @@ VT100.prototype.updateStyle = function() { this.style = 'text-decoration: blink;'; } + // Default colors + if (this.attr & ATTR_DEF_FG) { + fg = 'Def'; + } + if (this.attr & ATTR_DEF_BG) { + bg = 'Def'; + } + // Extended color mode support (256 colors). if (this.attrFg) { fg = this.attrFg; @@ -3862,11 +3872,11 @@ VT100.prototype.csim = function() { i += 2; } else { // Default VT100 behaviour. - this.attr = (this.attr & ~(ATTR_DIM|ATTR_BRIGHT|0x0F))|ATTR_UNDERLINE; + this.attr = (this.attr & ~(ATTR_DIM|ATTR_BRIGHT|0x0F))|ATTR_UNDERLINE | ATTR_DEF_FG; } break; case 39: - this.attr &= ~(ATTR_DIM|ATTR_BRIGHT|ATTR_UNDERLINE|0x0F); + this.attr = (this.attr & ~(ATTR_DIM|ATTR_BRIGHT|ATTR_UNDERLINE|0x0F)) | ATTR_DEF_FG; this.attrFg = false; break; case 48: @@ -3879,17 +3889,17 @@ VT100.prototype.csim = function() { } break; case 49: - this.attr |= 0xF0; + this.attr |= (0xF0|ATTR_DEF_BG); this.attrBg = false; break; default: if (this.par[i] >= 30 && this.par[i] <= 37) { var fg = this.par[i] - 30; - this.attr = (this.attr & ~0x0F) | fg; + this.attr = ((this.attr & ~0x0F) | fg) & ~(ATTR_DEF_FG); this.attrFg = false; } else if (this.par[i] >= 40 && this.par[i] <= 47) { var bg = this.par[i] - 40; - this.attr = (this.attr & ~0xF0) | (bg << 4); + this.attr = ((this.attr & ~0xF0) | (bg << 4)) & ~(ATTR_DEF_BG); this.attrBg = false; } break; @@ -4518,3 +4528,5 @@ VT100.prototype.ctrlAlways = [ false, false, false, false, false, false, false, false, false, false, false, true, false, false, false, false ]; + +/* vim: set filetype=javascript : */ diff --git a/shellinabox/white-on-black.css b/shellinabox/white-on-black.css index e442e7f..a2e2b79 100755 --- a/shellinabox/white-on-black.css +++ b/shellinabox/white-on-black.css @@ -13,10 +13,18 @@ background-color: #ffffff; } -#vt100 .ansi15 { +#vt100 .ansiDef { + color: #ffffff; +} + +#vt100 .bgAnsiDef { + background-color: #000000; +} + +#vt100 #scrollable.inverted .ansiDef { color: #000000; } -#vt100 .bgAnsi0 { +#vt100 #scrollable.inverted .bgAnsiDef { background-color: #ffffff; }