simono41/shellinabox
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Issue #255: Fixed "White on Black" color theme

Browse source 
* 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.
This commit is contained in:
KLuka 2015-05-20 16:41:11 +02:00
parent e6a6857cb1
commit 0a2ba7c052
6 changed files with 65 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
shellinabox/color.css
View file

@ -1,7 +1,9 @@
/* DEFINES_COLORS */ /* DEFINES_COLORS */
/* SYSTEM colors */ /* SYSTEM colors */
#vt100 .ansi0 { } #vt100 .ansiDef { }
#vt100 .ansi0 { color: #000000; }
#vt100 .ansi1 { color: #cd0000; } #vt100 .ansi1 { color: #cd0000; }
#vt100 .ansi2 { color: #00cd00; } #vt100 .ansi2 { color: #00cd00; }
#vt100 .ansi3 { color: #cdcd00; } #vt100 .ansi3 { color: #cdcd00; }
@ -261,6 +263,8 @@
#vt100 .ansi255 { color: #eeeeee; } #vt100 .ansi255 { color: #eeeeee; }
/* SYSTEM colors */ /* SYSTEM colors */
#vt100 .bgAnsiDef { }
#vt100 .bgAnsi0 { background-color: #000000; } #vt100 .bgAnsi0 { background-color: #000000; }
#vt100 .bgAnsi1 { background-color: #cd0000; } #vt100 .bgAnsi1 { background-color: #cd0000; }
#vt100 .bgAnsi2 { background-color: #00cd00; } #vt100 .bgAnsi2 { background-color: #00cd00; }
@ -276,7 +280,7 @@
#vt100 .bgAnsi12 { background-color: #5c5cff; } #vt100 .bgAnsi12 { background-color: #5c5cff; }
#vt100 .bgAnsi13 { background-color: #ff00ff; } #vt100 .bgAnsi13 { background-color: #ff00ff; }
#vt100 .bgAnsi14 { background-color: #00ffff; } #vt100 .bgAnsi14 { background-color: #00ffff; }
#vt100 .bgAnsi15 { } #vt100 .bgAnsi15 { background-color: #ffffff; }
/* XTERM colors - 256 color mode */ /* XTERM colors - 256 color mode */
#vt100 .bgAnsi16 { background-color: #000000; } #vt100 .bgAnsi16 { background-color: #000000; }

12
shellinabox/monochrome.css
View file

@ -1,5 +1,7 @@
/* SYSTEM colors */ /* SYSTEM colors */
#vt100 .ansi0 { } #vt100 .ansiDef { color: inherit; }
#vt100 .ansi0 { color: inherit; }
#vt100 .ansi1 { color: inherit; } #vt100 .ansi1 { color: inherit; }
#vt100 .ansi2 { color: inherit; } #vt100 .ansi2 { color: inherit; }
#vt100 .ansi3 { color: inherit; } #vt100 .ansi3 { color: inherit; }
@ -14,7 +16,7 @@
#vt100 .ansi12 { color: inherit; } #vt100 .ansi12 { color: inherit; }
#vt100 .ansi13 { color: inherit; } #vt100 .ansi13 { color: inherit; }
#vt100 .ansi14 { color: inherit; } #vt100 .ansi14 { color: inherit; }
#vt100 .ansi15 { } #vt100 .ansi15 { color: inherit; }
/* XTERM colors - 256 color mode */ /* XTERM colors - 256 color mode */
#vt100 .ansi16 { color: inherit; } #vt100 .ansi16 { color: inherit; }
@ -259,7 +261,9 @@
#vt100 .ansi255 { color: inherit; } #vt100 .ansi255 { color: inherit; }
/* SYSTEM colors */ /* SYSTEM colors */
#vt100 .bgAnsi0 { } #vt100 .bgAnsiDef { background-color: transparent; }
#vt100 .bgAnsi0 { background-color: transparent; }
#vt100 .bgAnsi1 { background-color: transparent; } #vt100 .bgAnsi1 { background-color: transparent; }
#vt100 .bgAnsi2 { background-color: transparent; } #vt100 .bgAnsi2 { background-color: transparent; }
#vt100 .bgAnsi3 { background-color: transparent; } #vt100 .bgAnsi3 { background-color: transparent; }
@ -274,7 +278,7 @@
#vt100 .bgAnsi12 { background-color: transparent; } #vt100 .bgAnsi12 { background-color: transparent; }
#vt100 .bgAnsi13 { background-color: transparent; } #vt100 .bgAnsi13 { background-color: transparent; }
#vt100 .bgAnsi14 { background-color: transparent; } #vt100 .bgAnsi14 { background-color: transparent; }
#vt100 .bgAnsi15 { } #vt100 .bgAnsi15 { background-color: transparent; }
/* XTERM colors - 256 color mode */ /* XTERM colors - 256 color mode */
#vt100 .bgAnsi16 { background-color: transparent; } #vt100 .bgAnsi16 { background-color: transparent; }

2
shellinabox/shell_in_a_box.jspp
View file

@ -373,3 +373,5 @@ ShellInABox.prototype.about = function() {
"Eric Young\n(eay@cryptsoft.com)" : "Eric Young\n(eay@cryptsoft.com)" :
"")); ""));
}; };
/* vim: set filetype=javascript : */

14
shellinabox/styles.css
View file

@ -133,8 +133,10 @@
height: 1ex; height: 1ex;
} }
#vt100 #scrollable.inverted { color: #ffffff; #vt100 #scrollable.inverted {
background-color: #000000; } color: #ffffff;
background-color: #000000;
}
#vt100 #kbd_button { #vt100 #kbd_button {
float: left; float: left;
@ -237,7 +239,9 @@
*/ */
[else DEFINES_COLORS] [else DEFINES_COLORS]
/* SYSTEM colors */ /* SYSTEM colors */
#vt100 .ansi0 { } #vt100 .ansiDef { color: #000000; }
#vt100 .ansi0 { color: #000000; }
#vt100 .ansi1 { color: #cd0000; } #vt100 .ansi1 { color: #cd0000; }
#vt100 .ansi2 { color: #00cd00; } #vt100 .ansi2 { color: #00cd00; }
#vt100 .ansi3 { color: #cdcd00; } #vt100 .ansi3 { color: #cdcd00; }
@ -497,6 +501,8 @@
#vt100 .ansi255 { color: #eeeeee; } #vt100 .ansi255 { color: #eeeeee; }
/* SYSTEM colors */ /* SYSTEM colors */
#vt100 .bgAnsiDef { background-color: #ffffff; }
#vt100 .bgAnsi0 { background-color: #000000; } #vt100 .bgAnsi0 { background-color: #000000; }
#vt100 .bgAnsi1 { background-color: #cd0000; } #vt100 .bgAnsi1 { background-color: #cd0000; }
#vt100 .bgAnsi2 { background-color: #00cd00; } #vt100 .bgAnsi2 { background-color: #00cd00; }
@ -512,7 +518,7 @@
#vt100 .bgAnsi12 { background-color: #5c5cff; } #vt100 .bgAnsi12 { background-color: #5c5cff; }
#vt100 .bgAnsi13 { background-color: #ff00ff; } #vt100 .bgAnsi13 { background-color: #ff00ff; }
#vt100 .bgAnsi14 { background-color: #00ffff; } #vt100 .bgAnsi14 { background-color: #00ffff; }
#vt100 .bgAnsi15 { } #vt100 .bgAnsi15 { background-color: #ffffff; }
/* XTERM colors - 256 color mode */ /* XTERM colors - 256 color mode */
#vt100 .bgAnsi16 { background-color: #000000; } #vt100 .bgAnsi16 { background-color: #000000; }

46
shellinabox/vt100.jspp
View file

@ -84,12 +84,14 @@
#define ESss2 18 #define ESss2 18
#define ESss3 19 #define ESss3 19
#define ATTR_DEFAULT 0x00F0 #define ATTR_DEFAULT 0x60F0
#define ATTR_REVERSE 0x0100 #define ATTR_REVERSE 0x0100
#define ATTR_UNDERLINE 0x0200 #define ATTR_UNDERLINE 0x0200
#define ATTR_DIM 0x0400 #define ATTR_DIM 0x0400
#define ATTR_BRIGHT 0x0800 #define ATTR_BRIGHT 0x0800
#define ATTR_BLINK 0x1000 #define ATTR_BLINK 0x1000
#define ATTR_DEF_FG 0x2000
#define ATTR_DEF_BG 0x4000
#define MOUSE_DOWN 0 #define MOUSE_DOWN 0
#define MOUSE_UP 1 #define MOUSE_UP 1
@ -215,7 +217,7 @@ VT100.prototype.reset = function(clearHistory) {
this.utfEnabled = this.utfPreferred; this.utfEnabled = this.utfPreferred;
this.utfCount = 0; this.utfCount = 0;
this.utfChar = 0; this.utfChar = 0;
this.color = 'ansi0 bgAnsi15'; this.color = 'ansiDef bgAnsiDef';
this.style = ''; this.style = '';
this.attr = ATTR_DEFAULT; this.attr = ATTR_DEFAULT;
this.attrFg = false; 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 // not add any missing lines in between. It is the caller's responsibility
// to do so. // to do so.
if (!color) { if (!color) {
color = 'ansi0 bgAnsi15'; color = 'ansiDef bgAnsiDef';
} }
if (!style) { if (!style) {
style = ''; style = '';
} }
var line; var line;
if (color != 'ansi0 bgAnsi15' && !style) { if (color != 'ansiDef bgAnsiDef' && !style) {
line = document.createElement('pre'); line = document.createElement('pre');
this.setTextContent(line, '\n'); this.setTextContent(line, '\n');
} else { } else {
@ -1631,7 +1633,7 @@ VT100.prototype.truncateLines = function(width) {
// Prune white space from the end of the current line // Prune white space from the end of the current line
var span = line.lastChild; var span = line.lastChild;
while (span && while (span &&
span.className == 'ansi0 bgAnsi15' && span.className == 'ansiDef bgAnsiDef' &&
!span.style.cssText.length) { !span.style.cssText.length) {
// Scan backwards looking for first non-space character // Scan backwards looking for first non-space character
var s = this.getTextContent(span); var s = this.getTextContent(span);
@ -1665,7 +1667,7 @@ VT100.prototype.truncateLines = function(width) {
VT100.prototype.putString = function(x, y, text, color, style) { VT100.prototype.putString = function(x, y, text, color, style) {
if (!color) { if (!color) {
color = 'ansi0 bgAnsi15'; color = 'ansiDef bgAnsiDef';
} }
if (!style) { if (!style) {
style = ''; style = '';
@ -1726,12 +1728,12 @@ VT100.prototype.putString = function(x, y, text, color, style) {
var oldColor = span.className; var oldColor = span.className;
var oldStyle = span.style.cssText; var oldStyle = span.style.cssText;
if (xPos + s.length < x) { if (xPos + s.length < x) {
if (oldColor != 'ansi0 bgAnsi15' || oldStyle != '') { if (oldColor != 'ansiDef bgAnsiDef' || oldStyle != '') {
span = document.createElement('span'); span = document.createElement('span');
line.appendChild(span); line.appendChild(span);
span.className = 'ansi0 bgAnsi15'; span.className = 'ansiDef bgAnsiDef';
span.style.cssText = ''; span.style.cssText = '';
oldColor = 'ansi0 bgAnsi15'; oldColor = 'ansiDef bgAnsiDef';
oldStyle = ''; oldStyle = '';
xPos += s.length; xPos += s.length;
s = ''; s = '';
@ -1899,7 +1901,7 @@ VT100.prototype.putString = function(x, y, text, color, style) {
// Prune white space from the end of the current line // Prune white space from the end of the current line
span = line.lastChild; span = line.lastChild;
while (span && while (span &&
span.className == 'ansi0 bgAnsi15' && span.className == 'ansiDef bgAnsiDef' &&
!span.style.cssText.length) { !span.style.cssText.length) {
// Scan backwards looking for first non-space character // Scan backwards looking for first non-space character
s = this.getTextContent(span); s = this.getTextContent(span);
@ -2090,7 +2092,7 @@ VT100.prototype.clearRegion = function(x, y, w, h, color, style) {
// child nodes. // child nodes.
if (!this.numScrollbackLines && if (!this.numScrollbackLines &&
w == this.terminalWidth && h == this.terminalHeight && w == this.terminalWidth && h == this.terminalHeight &&
(color == undefined || color == 'ansi0 bgAnsi15') && !style) { (color == undefined || color == 'ansiDef bgAnsiDef') && !style) {
var console = this.console[this.currentScreen]; var console = this.console[this.currentScreen];
while (console.lastChild) { while (console.lastChild) {
console.removeChild(console.lastChild); console.removeChild(console.lastChild);
@ -2152,7 +2154,7 @@ VT100.prototype.copyLineSegment = function(dX, dY, sX, sY, w) {
if (className[i]) { if (className[i]) {
color = className[i]; color = className[i];
} else { } else {
color = 'ansi0 bgAnsi15'; color = 'ansiDef bgAnsiDef';
} }
this.putString(dX, dY - this.numScrollbackLines, text[i], color, style[i]); this.putString(dX, dY - this.numScrollbackLines, text[i], color, style[i]);
dX += text[i].length; dX += text[i].length;
@ -3366,6 +3368,14 @@ VT100.prototype.updateStyle = function() {
this.style = 'text-decoration: blink;'; 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). // Extended color mode support (256 colors).
if (this.attrFg) { if (this.attrFg) {
fg = this.attrFg; fg = this.attrFg;
@ -3862,11 +3872,11 @@ VT100.prototype.csim = function() {
i += 2; i += 2;
} else { } else {
// Default VT100 behaviour. // 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; break;
case 39: 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; this.attrFg = false;
break; break;
case 48: case 48:
@ -3879,17 +3889,17 @@ VT100.prototype.csim = function() {
} }
break; break;
case 49: case 49:
this.attr |= 0xF0; this.attr |= (0xF0|ATTR_DEF_BG);
this.attrBg = false; this.attrBg = false;
break; break;
default: default:
if (this.par[i] >= 30 && this.par[i] <= 37) { if (this.par[i] >= 30 && this.par[i] <= 37) {
var fg = this.par[i] - 30; var fg = this.par[i] - 30;
this.attr = (this.attr & ~0x0F) | fg; this.attr = ((this.attr & ~0x0F) | fg) & ~(ATTR_DEF_FG);
this.attrFg = false; this.attrFg = false;
} else if (this.par[i] >= 40 && this.par[i] <= 47) { } else if (this.par[i] >= 40 && this.par[i] <= 47) {
var bg = this.par[i] - 40; 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; this.attrBg = false;
} }
break; break;
@ -4518,3 +4528,5 @@ VT100.prototype.ctrlAlways = [
false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false,
false, false, false, true, false, false, false, false false, false, false, true, false, false, false, false
]; ];
/* vim: set filetype=javascript : */

12
shellinabox/white-on-black.css
View file

@ -13,10 +13,18 @@
background-color: #ffffff; background-color: #ffffff;
} }
#vt100 .ansi15 { #vt100 .ansiDef {
color: #ffffff;
}
#vt100 .bgAnsiDef {
background-color: #000000;
}
#vt100 #scrollable.inverted .ansiDef {
color: #000000; color: #000000;
} }
#vt100 .bgAnsi0 { #vt100 #scrollable.inverted .bgAnsiDef {
background-color: #ffffff; background-color: #ffffff;
} }