From 0a2ba7c0520e87a9f3c405a202466c17307c1b43 Mon Sep 17 00:00:00 2001 From: KLuka Date: Wed, 20 May 2015 16:41:11 +0200 Subject: [PATCH 1/3] 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; } From 9bb3b787aeba3ff1687d90857a41b153bed39769 Mon Sep 17 00:00:00 2001 From: KLuka Date: Thu, 21 May 2015 09:51:59 +0200 Subject: [PATCH 2/3] Updated manuals for SSH service --- shellinabox/shellinaboxd.man.in | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/shellinabox/shellinaboxd.man.in b/shellinabox/shellinaboxd.man.in index c00a8bc..16a68e5 100644 --- a/shellinabox/shellinaboxd.man.in +++ b/shellinabox/shellinaboxd.man.in @@ -499,7 +499,8 @@ or respectively. Please note that for SSH service to work properly, we need a running ssh server on -local system with enabled password authentication. +local system with enabled password authentication. If we are using parameter, +same conditions must be true on that remote system. .RE #ifdef HAVE_OPENSSL From 8923598a6d4a1980fb6c42b3890488928dd65a7b Mon Sep 17 00:00:00 2001 From: KLuka Date: Fri, 22 May 2015 21:26:01 +0200 Subject: [PATCH 3/3] Improved terminal cursor style * Changed "dim" cursor visibility from invisible to almost transparent and in the same color as default background. This improves visibility of cursor, if we are usign application (like vim for example) with dark background and the "Black on White" user CSS is set. --- shellinabox/styles.css | 5 ++++- shellinabox/white-on-black.css | 7 +++++++ 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/shellinabox/styles.css b/shellinabox/styles.css index 6bb823d..4d3b8df 100755 --- a/shellinabox/styles.css +++ b/shellinabox/styles.css @@ -67,7 +67,10 @@ } #vt100 #cursor.dim { - visibility: hidden; + background-color: white; + opacity: 0.2; + -moz-opacity: 0.2; + filter: alpha(opacity=20); } #vt100 #cursor.inactive { diff --git a/shellinabox/white-on-black.css b/shellinabox/white-on-black.css index a2e2b79..2482f1d 100755 --- a/shellinabox/white-on-black.css +++ b/shellinabox/white-on-black.css @@ -3,6 +3,13 @@ color: black; } +#vt100 #cursor.dim { + background-color: black; + opacity: 0.2; + -moz-opacity: 0.2; + filter: alpha(opacity=20); +} + #vt100 #scrollable { color: #ffffff; background-color: #000000;