Better support for 3/4 bit color terminals

docs/kubebox.js

@@ -734,7 +734,6 @@ function Canvas(options, canvasType) {
   }
 
   options = options || {};
-  this.options = options
   Box.call(this, options);
 
   this.on('attach', function () {
@@ -1748,7 +1747,9 @@ blessed.listbar.prototype.appendItem = function (item, callback) {
     cmd.prefix = cmd.keys[0];
   }
 
-  var t = blessed.helpers.generateTags(this.style.prefix || { fg: 'lightblack' });
+  // PATCH BEGIN
+  var t = blessed.helpers.generateTags(this.style.prefix /* || { fg: 'lightblack' } */);
+  // PATCH END
 
   title = (cmd.prefix != null ? t.open + cmd.prefix + t.close + ':' : '') + cmd.text;
 
@@ -1776,7 +1777,7 @@ blessed.listbar.prototype.appendItem = function (item, callback) {
 
   ['bg', 'fg', 'bold', 'underline', 'blink', 'inverse', 'invisible'].forEach(
     function(name) {
-      options.style[name] = function() {
+      options.style[name] = function () {
         var attr =
           self.items[self.selected] === el
             ? self.style.selected[name]
@@ -2992,8 +2993,8 @@ module.exports = screen => {
   const d = debug(screen);
   return {
     debug : d,
-    log   : message => new Promise(resolve => {
-      d.log(message);
+    log : (...args) => new Promise(resolve => {
+      d.log(args);
       resolve();
     }),
   }
@@ -3617,14 +3618,14 @@ function namespaces_list(screen) {
       ch      : ' ',
       style   : { bg: 'white' },
       track   : {
-        style : { bg: 'grey' }
+        style : { bg: 'grey' },
       }
     },
     style : {
       fg       : 'white',
       label    : { bold: true },
       border   : { fg: 'white' },
-      selected : { bg: 'blue' }
+      selected : { bg: 'blue' },
     }
   });
 
@@ -3749,10 +3750,7 @@ class NavBar {
       mouse  : true,
       keys   : true,
       style : {
-        bg     : 'white',
-        prefix : {
-          fg : '#888',
-        },
+        bg : 'white',
         item : {
           fg : 'black',
           bg : 'white',
@@ -3764,7 +3762,7 @@ class NavBar {
         },
         selected : {
           fg : 'white',
-          bg : 'grey',
+          bg : 'blue',
         }
       },
       autoCommandKeys : false,
@@ -3844,7 +3842,7 @@ class NavBar {
       // fix for listBar#removeItem
       tabs.commands.forEach((command, index) => {
         command.prefix = index + 1;
-        command.element.content = `{#888-fg}${command.prefix}{/#888-fg}:${command.text}`;
+        command.element.content = `${command.prefix}:${command.text}`;
       });
       tabs.render();
       // TODO: we may want to maintain a navigation history
@@ -3991,6 +3989,13 @@ Object.defineProperties(Array.prototype, {
   }
 });
 
+module.exports.safeGet = function (object, path) {
+  if (typeof path === 'string') {
+    path = path.split('.');
+  }
+  return path.reduce((r, p) => r && r[p] ? r[p] : null, object);
+}
+
 module.exports.isEmpty = str => !str || str === '';
 
 module.exports.isNotEmpty = str => str && str.length > 0;

index.js

@@ -2,6 +2,12 @@
 
 'use strict';
 
+const terminal = process.env.TERM || (process.platform === 'win32' ? 'windows-ansi' : 'xterm');
+// theming, it has to be the first to hack into blessed Node module
+if (!['xterm-color', 'xterm-16color', 'xterm-256color'].includes(terminal)) {
+  require('./lib/ui/theme');
+}
+
 const blessed       = require('blessed'),
       cancellations = require('./lib/task'),
       Context       = require('./lib/config/context'),

lib/ui/blessed-contrib/canvas.js

@@ -11,7 +11,6 @@ function Canvas(options, canvasType) {
   }
 
   options = options || {};
-  this.options = options
   Box.call(this, options);
 
   this.on('attach', function () {

lib/ui/blessed/listbar.js

@@ -44,7 +44,9 @@ blessed.listbar.prototype.appendItem = function (item, callback) {
     cmd.prefix = cmd.keys[0];
   }
 
-  var t = blessed.helpers.generateTags(this.style.prefix || { fg: 'lightblack' });
+  // PATCH BEGIN
+  var t = blessed.helpers.generateTags(this.style.prefix /* || { fg: 'lightblack' } */);
+  // PATCH END
 
   title = (cmd.prefix != null ? t.open + cmd.prefix + t.close + ':' : '') + cmd.text;
 
@@ -72,7 +74,7 @@ blessed.listbar.prototype.appendItem = function (item, callback) {
 
   ['bg', 'fg', 'bold', 'underline', 'blink', 'inverse', 'invisible'].forEach(
     function(name) {
-      options.style[name] = function() {
+      options.style[name] = function () {
         var attr =
           self.items[self.selected] === el
             ? self.style.selected[name]

lib/ui/debug.js

@@ -32,8 +32,8 @@ module.exports = screen => {
   const d = debug(screen);
   return {
     debug : d,
-    log   : message => new Promise(resolve => {
-      d.log(message);
+    log : (...args) => new Promise(resolve => {
+      d.log(args);
       resolve();
     }),
   }

lib/ui/namespaces.js

@@ -22,14 +22,14 @@ function namespaces_list(screen) {
       ch      : ' ',
       style   : { bg: 'white' },
       track   : {
-        style : { bg: 'grey' }
+        style : { bg: 'grey' },
       }
     },
     style : {
       fg       : 'white',
       label    : { bold: true },
       border   : { fg: 'white' },
-      selected : { bg: 'blue' }
+      selected : { bg: 'blue' },
     }
   });
 

lib/ui/navbar.js

@@ -32,10 +32,7 @@ class NavBar {
       mouse  : true,
       keys   : true,
       style : {
-        bg     : 'white',
-        prefix : {
-          fg : '#888',
-        },
+        bg : 'white',
         item : {
           fg : 'black',
           bg : 'white',
@@ -47,7 +44,7 @@ class NavBar {
         },
         selected : {
           fg : 'white',
-          bg : 'grey',
+          bg : 'blue',
         }
       },
       autoCommandKeys : false,
@@ -127,7 +124,7 @@ class NavBar {
       // fix for listBar#removeItem
       tabs.commands.forEach((command, index) => {
         command.prefix = index + 1;
-        command.element.content = `{#888-fg}${command.prefix}{/#888-fg}:${command.text}`;
+        command.element.content = `${command.prefix}:${command.text}`;
       });
       tabs.render();
       // TODO: we may want to maintain a navigation history

lib/ui/theme.js

@@ -0,0 +1,55 @@
+'use strict';
+
+const Module = require('module');
+const { safeGet } = require('../util');
+
+const _require = Module.prototype.require;
+Module.prototype.require = function (path) {
+  const module = _require.apply(this, arguments);
+  if (path === './node') {
+    const Node = function (options) {
+      theme(this, options);
+      return module.call(this, options);
+    }
+    Node.prototype = module.prototype;
+    return Node;
+  }
+  return module;
+};
+
+function theme(widget, options) {
+  const type = widget.type;
+  switch (type) {
+    case 'list-table':
+      if (safeGet(options, 'style.header.fg') === 'grey') {
+        options.style.header.fg = 'white';
+      }
+    case 'list':
+    case 'log':
+    case 'terminal':
+      if (safeGet(options, 'scrollbar.track.style.bg') === 'grey') {
+        delete options.scrollbar.track.style.bg;
+        options.scrollbar.track.style.fg = 'white';
+        options.scrollbar.track.ch = '░';
+      }
+    default:
+      if (safeGet(options, 'style.fg') === 'grey') {
+        const bg = safeGet(options, 'style.bg') || 'black';
+        options.style.fg = bg === 'white' ? 'black' : 'white';
+      }
+  }
+  if (type === 'line') {
+    if (typeof safeGet(options, 'style.baseline') === 'object') {
+      options.style.baseline = 'white';
+    }
+  }
+}
+
+const blessed = require('blessed');
+const _parseTags = blessed.Element.prototype._parseTags;
+blessed.Element.prototype._parseTags = function (text) {
+  if (!this.parseTags) return text;
+  if (!/{\/?[\w\-,;!#]*}/.test(text)) return text;
+
+  return _parseTags.call(this, text.replace(/\{(\/)?grey-fg\}/g, '{$1white-fg}'));
+}

lib/util.js

@@ -26,6 +26,13 @@ Object.defineProperties(Array.prototype, {
   }
 });
 
+module.exports.safeGet = function (object, path) {
+  if (typeof path === 'string') {
+    path = path.split('.');
+  }
+  return path.reduce((r, p) => r && r[p] ? r[p] : null, object);
+}
+
 module.exports.isEmpty = str => !str || str === '';
 
 module.exports.isNotEmpty = str => str && str.length > 0;