monito/extension.js

/* -*- mode: js; js-basic-offset: 4; indent-tabs-mode: nil -*- */
/*
    Monito Gnome-Shell extension
    Copyright (C) 2021  Benjamin Drieu

    This program is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation; either version 2 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License along
    with this program; if not, write to the Free Software Foundation, Inc.,
    51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.

    SPDX-License-Identifier: GPL-2.0-or-later
 */

/* exported init */

const GETTEXT_DOMAIN = 'monito';

let _httpSession;
let _status;
let _ok_text;

const ExtensionUtils = imports.misc.extensionUtils;
const Lang = imports.lang;
const Main = imports.ui.main;
const Mainloop = imports.mainloop;
const Me = ExtensionUtils.getCurrentExtension();
const PanelMenu = imports.ui.panelMenu;
const PopupMenu = imports.ui.popupMenu;

const Gettext = imports.gettext.domain(GETTEXT_DOMAIN);
const _ = Gettext.gettext;

const { GObject, St, Clutter, Gio, GLib, Pango } = imports.gi;

const SETTINGS_SCHEMA = "org.gnome.shell.extensions.monito";
const SETTINGS_SCHEMA_ACCOUNT = "org.gnome.shell.extensions.monito.account";
const SETTINGS_SCHEMA_ACCOUNT_PATH = "/org/gnome/shell/extensions/monito/account";

const Convenience = Me.imports.convenience;
const GenericServer = Me.imports.servers.genericserver.GenericServer;
const Icinga = Me.imports.servers.icinga.Icinga;
const Icinga2 = Me.imports.servers.icinga2.Icinga2;
const Icinga2API = Me.imports.servers.icinga2api.Icinga2API;
const Preferences = Me.imports.prefs;

let settings = Convenience.getSettings(SETTINGS_SCHEMA);
let account_settings = [ ];

const column_definitions = {
    status: { label: _('Status'), width: 50, expand: false, },
    host_name: { label: _('Host name'), width: 300, expand: false, },
    service_display_name: { label: _('Service'), width: 300, expand: false, },
    has_been_acknowledged: { label: _('Ack'), width: 50, expand: false, align: Clutter.ActorAlign.CENTER, style: 'font-weight:bold;'  },
    last_check: { label: _('Last check'), width: 200, expand: false, type: 'date' },
    attempts: { label: _('Attempts'), width: 50, expand: false, },
    status_information: { label: _('Information'), width: 600, expand: false, },
    actions: { label: 'Actions', width: 50, expand: false, special: 'actions' },
};


const Indicator = GObject.registerClass(
class Indicator extends PanelMenu.Button {
    _init(server) {
        super._init(0.0, _('Monito Checker'));

        this.server = server;

	this.initStatus ( );

        this.namesBoxes = { };
        this.boxes = { };

        this.sortIcons = { };
	account_settings [ server ] = Preferences.getAccountSettings ( this.server );
        this.account_settings = account_settings [ server ];

	let type = this.account_settings.get_string ( "type" );
        if ( type == 'Icinga' )
            this.serverLogic = new Icinga ( this.server, this );
        else if ( type == 'Icinga2' )
            this.serverLogic = new Icinga2 ( this.server, this );
        else if ( type == 'Icinga2API' )
            this.serverLogic = new Icinga2API ( this.server, this );

        this.initUI ( );
    }

    initUI ( ) {
	let box = new St.BoxLayout ( { } );
        this.add_child(box);

        monitoLog ( '> Server ' + this.server );
        
	let serverBox = new St.BoxLayout ( { style_class: 'monito-serverbox' } );
        box.add_child(serverBox);
        
	let name_box = new St.BoxLayout( { style_class: 'monito-namebox' } );
	this.namesBoxes [ this.server ] = new St.Label ( { text: this.account_settings.get_string ( 'name' ),
                                                           y_align: Clutter.ActorAlign.CENTER, } );
        name_box.add_child ( this.namesBoxes [ this.server ] );
        serverBox.add_child(name_box);
        this.account_settings.bind ( 'name', this.namesBoxes [ this.server ], 'text', Gio.SettingsBindFlags.GET );
        
        this.namesBoxes [ this.server ].connect ( 'button-press-event', Lang.bind ( this, function ( ) { this.setMenu ( this.menu ); } ) );

        
        for ( var boxName of [ 'ok', 'warning', 'critical', 'unknown' ] )
        {
	    let _box = new St.BoxLayout( { style_class: 'monito-%s-box monito-box'.format(boxName), visible: false } );
            _box.set_style ( this.getStyleForRow ( boxName ) );
            this.account_settings.connect("changed::%s-color".format(boxName), Lang.bind ( { widget: _box }, setColor ) );
            this.account_settings.connect("changed::%s-fg".format(boxName), Lang.bind ( { widget: _box }, setColor ) );

	    this.boxes [ boxName ] = new St.Label ( { text: '' } );
            _box.add_child ( this.boxes [ boxName ] );
            serverBox.add_child(_box);
        }
        
        box.add_child(PopupMenu.arrowIcon(St.Side.BOTTOM));

        this.menu_new = new PopupMenu.PopupMenu(this, Clutter.ActorAlign.START, St.Side.TOP, 0);

	// Menu
        this._buttonMenu = new PopupMenu.PopupBaseMenuItem({
            reactive: false,
            style_class: 'monito-menu-button-container',
        });
        this.menu.addMenuItem(this._buttonMenu);

        let _path = Me.path + '/img/monito.png';
        let _icon = new St.Icon({
            gicon: Gio.icon_new_for_string(_path),
        });
        let _iconBin = new St.Bin();
        _iconBin.child = _icon;
        this._buttonMenu.actor.add_actor(_iconBin);

	this._mainLabel = new St.Label ( { style_class: 'monito-title', text: _('Monito Checker'), x_expand: true } );
        this._buttonMenu.actor.add_actor(this._mainLabel);

        this._searchField = new St.Entry ( {
	    x_align: Clutter.ActorAlign.END,
            y_align: Clutter.ActorAlign.CENTER,
            reactive: true,
            can_focus: true,
            track_hover: true,
            style_class: 'entry',
            secondary_icon: new St.Icon ( {
	        style_class: 'monito-button-icon',
                icon_name: 'edit-find-symbolic',
	        icon_size: 24,
	        width: 24,
	        height: 24,
            } ),
        });
        this._searchField.connect('secondary-icon-clicked', Lang.bind(this, this._onSearchFieldActivate ) );
        this._searchField.clutter_text.connect('activate', Lang.bind(this, this._onSearchFieldActivate ) );
        this._searchField.clutter_text.connect('text-changed', Lang.bind(this, this._onSearchFieldActivate ) );

        this._buttonMenu.actor.add_child (this._searchField);

	this._prefsButton = this._createButton ( 'big', 'preferences-system-symbolic', _('Preferences'), this._onPreferencesActivate );
        this._buttonMenu.actor.add_child (this._prefsButton);

        if ( this.serverLogic && this.serverLogic.canRecheck )
        {
	    this._recheckButton = this._createButton ( 'big', 'mail-send-receive-symbolic', _('Recheck all'), this.recheckAll );
            this._buttonMenu.actor.add_child (this._recheckButton );
        }

	this._reloadButton = this._createButton ( 'big', 'view-refresh-symbolic', _('Reload view'), this.updateStatus );
        this._buttonMenu.actor.add_child (this._reloadButton );

	let _intermediate = new PopupMenu.PopupBaseMenuItem ( {
	    style_class: 'monito-services',
            reactive: false
        });

        this.menu.addMenuItem(_intermediate);
        this._box = new St.BoxLayout({
	    style_class: 'monito-services',
	    vertical: true,
	    x_expand: true
	});
        _intermediate.actor.add_actor(this._box);
        this.menu_orig = this.menu;

	this.updateStatus ( );
        this.setupTimeout ( );
    }

    cancelTimeout ( )
    {
        if (this.timeout)
            Mainloop.source_remove(this.timeout);
    }

    setupTimeout ( )
    {
        monitoLog ( 'Setting up timeout of ' + settings.get_int ( "poll-delay" ) + ' secs' );
        this.cancelTimeout ( );
        this.timeout = Mainloop.timeout_add ( settings.get_int ( "poll-delay" ) * 1000, Lang.bind(this, this.updateStatus ) );
    }

    initStatus ( ) {
	_status = { 'OK': 0,
		    'WARNING': 0,
		    'CRITICAL': 0,
		    'UNKNOWN': 0 };
    }

    recheckAll ( )
    {
        this.spinChildOf ( this._recheckButton );
        this.serverLogic.recheckAll ( this._recheckButton );
    }

    updateStatus ( )
    {
        this.spinChildOf ( this._reloadButton );
        this.serverLogic.refresh ( );
        this.setupTimeout ( );
    }

    spinChildOf ( widget )
    {
        if ( ! widget )
            return;

        let _size = widget.get_child().width;

        let _child = new St.Icon({
	    style_class: 'monito-button-icon',
            icon_name: 'process-working-symbolic',
	    icon_size: _size,
	    width: _size,
	    height: _size,
        });

        let _transition = new Clutter.PropertyTransition ( { property_name: 'rotation_angle_z',
                                                             repeat_count: -1,
                                                             duration: 1000 } );
        _transition.set_from ( 0 );
        _transition.set_to ( 360 );

        widget.set_child ( _child );
        _child.set_pivot_point ( .5, .5 );
        _child.add_transition ( 'rotation', _transition );
    }

    stopChildSpin ( widget )
    {
        let _size = widget.get_child().width;

        widget.get_child().get_transition('rotation').stop();        

        widget.child = new St.Icon({
	    style_class: 'monito-button-icon',
            icon_name: widget.prevIcon,
	    icon_size: _size,
	    width: _size,
	    height: _size,
        });
    }

    createHeaderBin ( colName ) {
        let col = column_definitions [ colName ];

        let _box = new St.BoxLayout ( { vertical: false,
	                                x_expand: true } );
        _box.add_child ( new St.Label ( { text: col.label,
                                          x_expand: true,
	                                  x_align: Clutter.ActorAlign.START } ) );

        let _iconBin = new St.Bin ( { x_align: Clutter.ActorAlign.END });
        _box.add_child ( _iconBin );

        let _iconName = '';
        let _sortOrder = Preferences.getSortOrder ( this.server );
        if ( _sortOrder.indexOf ( colName + '+' ) >= 0 )
            _iconName = 'view-sort-descending-symbolic';
        else if ( _sortOrder.indexOf ( colName + '-' ) >= 0 )
            _iconName = 'view-sort-ascending-symbolic';
 
        this.sortIcons [ colName ] = new St.Icon ( {
	    style_class: 'monito-button-icon',
            icon_name: _iconName,
            icon_size: 16,
        } );
        _iconBin.child = this.sortIcons [ colName ];

        let _button = new St.Button ( {
	        x_align: Clutter.ActorAlign.FILL,
                y_align: Clutter.ActorAlign.CENTER,
                width: col.width,
                reactive: true,
                can_focus: true,
                track_hover: true,
                accessible_name: col.label,
                style_class: 'button',
        } );
        _button.column = colName;
        
        _button.add_actor ( _box );
        _button.connect ( 'clicked', Lang.bind ( this, this._onSortColumnClick ) );

	let _bin = new St.Bin({
	    style_class: 'monito-service',
	    width: col.width,
	    x_expand: col.expand,
	    child: _button,
	});

	return _bin;
    }

    createBin ( status, text, col ) {
        let _child;

        if ( text === undefined )
            text = '…';

        if ( ! col [ 'special' ] )
        {
            _child = new St.Label ( { style_class: 'monito-label',
                                      reactive: true,
                                      can_focus: true,
                                      track_hover: true,
	                              width: col.width,
                                      text: text.toString().replace(/\n.*/s, ''),
                                      x_align: ( col.align ? col.align : Clutter.ActorAlign.START ),
                                      style: ( col.style ? col.style : '' ) } );
            _child.original_text = text.toString();
            _child.connect('button-press-event', Lang.bind(this, this._onExpandLabel ) );
//            _child.connect('notify::hover', Lang.bind(this, this._onEnterEvent ) );
        }
        else if ( col.special == 'actions' )
        {
	    _child = new St.BoxLayout ( { x_expand: true,
                                          vertical: false,
	                                  width: col.width, } );

            if ( this.serverLogic.canRecheck )
            {
                _child.add_child ( this._createButton ( 'small', 'mail-send-receive-symbolic', text, this._onRecheckButtonClick ) );
            }
            _child.add_child ( this._createButton ( 'small', 'web-browser-symbolic', text, this._onOpenInBrowser ) );
            
        }

	let _bin = new St.Bin({
            track_hover: true,
	    width: col.width,
	    x_expand: col.expand,
	    child: _child,
	});
	return _bin;
    }

    getStyleForRow ( boxName, row = 0 )
    {
        let bgColor = this.account_settings.get_string ( boxName + '-color' );
        let fgColor = this.account_settings.get_string ( boxName + '-fg' );
        
        if ( row % 2 )
        {
            bgColor = this.lightenColor(bgColor, 12);
            fgColor = this.lightenColor(fgColor, 12);
        }
        else
        {
            bgColor = this.lightenColor(bgColor, -12);
            fgColor = this.lightenColor(fgColor, -12);
        }

        return 'background-color: %s; color: %s' . format ( bgColor, fgColor );
    }
    
    lightenColor ( col, amt ) {
        if ( col.substring(0,1) == '#' )
            col = col.substring ( 1 );
        col = parseInt(col, 16);
        return '#%06x'.format (Math.max(Math.min((col & 0x0000FF) + amt,0x0000FF),0) |
                               (Math.max(Math.min((((col >> 8) & 0x00FF) + amt),0x0000FF),0) << 8) |
                               (Math.max(Math.min(((col >> 16) + amt),0x0000FF),0) << 16));
    }

    refreshUI ( ) {
        try {
	    this.initStatus ( );

	    this._box.remove_all_children();

            if ( this.serverLogic.error || ! this.serverLogic.status )
            {
                this._box.add_child ( new St.Label ( { style_class: 'monito-network-error', text: this.serverLogic.error } ) );
	        this.boxes['ok'].set_text ( '…' );
	        this.boxes['warning'].set_text ( '…' );
	        this.boxes['critical'].set_text ( '…' );
	        this.boxes['unknown'].set_text ( '…' );
                this.stopChildSpin ( this._reloadButton );
                return;
            }
	    
	    let headerBox = new St.BoxLayout({
	        track_hover: true,
	        x_expand: true
	    });
	    this._box.add_child(headerBox);

            let _columns = Preferences.getColumns ( this.server );
            for ( let _col of _columns )
	        headerBox.add_child ( this.createHeaderBin ( _col ) );
	    headerBox.add_child ( this.createHeaderBin ( 'actions' ) );

            let scrollBox = new St.ScrollView ( { hscrollbar_policy: St.PolicyType.NEVER,
                                                  enable_mouse_scrolling: true, } );
	    this._box.add_child(scrollBox);

	    let tableBox = new St.BoxLayout({
	        track_hover: true,
                vertical: true,
	        x_expand: true,
	    });
	    scrollBox.add_actor(tableBox);

            let processedStatus = this.serverLogic.getProcessedStatus ( )
            for ( let entryCount of processedStatus )
	        _status [ entryCount.status ] ++;

            let _row = 0;
            for ( let entry of processedStatus )
	    {
                if ( this._searchString &&
                     ! ( entry [ 'host_name' ].toLowerCase().includes ( this._searchString ) ||
                         entry [ 'service_display_name' ].toLowerCase().includes ( this._searchString ) ||
                         entry [ 'status_information' ].toLowerCase().includes ( this._searchString ) ) )
                    continue;

	        if ( ( ! _status [ 'WARNING' ] && ! _status [ 'CRITICAL' ] && ! _status [ 'UNKNOWN' ] && entry.status == 'OK' ) ||
                     ( ( _status [ 'WARNING' ] || _status [ 'CRITICAL' ] || _status [ 'UNKNOWN' ] ) && entry.status != 'OK' ) )
	        {
                    let _style = this.getStyleForRow ( entry.status.toLowerCase(), _row );
		    let infoBox = new St.BoxLayout({
		        style_class: 'monito-service-line',
                        style: _style,
		        x_expand: true,
                        reactive: true,
                        can_focus: true,
                        track_hover: true,
		    });
		    tableBox.add_child(infoBox);

                    let _columns = Preferences.getColumns ( this.server );
                    for ( let _col of _columns )
                    {
                        entry [ 'real_' + _col ] = entry [ _col ];
                        if ( _col == 'host_name' && this.account_settings.get_string ( 'host-match' ) )
                            entry [ _col ] = entry [ _col ] . replace ( new RegExp ( this.account_settings.get_string ( 'host-match' ), 'i' ),
                                                                        this.account_settings.get_string ( 'host-replace' ) );
                        else if ( _col == 'service_display_name' && this.account_settings.get_string ( 'service-match' ) )
                            entry [ _col ] = entry [ _col ] . replace ( new RegExp ( this.account_settings.get_string ( 'service-match' ), 'i' ),
                                                                        this.account_settings.get_string ( 'service-replace' ) );
                        else if ( _col == 'status_information' && this.account_settings.get_string ( 'status-info-match' ) )
                            entry [ _col ] = entry [ _col ] . replace ( new RegExp ( this.account_settings.get_string ( 'status-info-match' ), 'i' ),
                                                                        this.account_settings.get_string ( 'status-info-replace' ) ) . replace ( new RegExp ( "\n.*" ), "" );
                        else if ( _col == 'has_been_acknowledged' )
                        {
                            if ( entry [ _col ] )
                                entry [ _col ] = '✔'; // … or ✅🗹 ?
                            else
                                entry [ _col ] = '';
                        }
                        
		        infoBox.add_child ( this.createBin ( entry.status, entry [ _col ], column_definitions [ _col ] ) );
                    }
	            infoBox.add_child ( this.createBin ( entry.status, entry, column_definitions [ 'actions' ] ) );

                    _row ++;
	        }
	    }

            if ( _status.WARNING == 0 && _status.CRITICAL == 0 )
            {
	        this.boxes['ok'].set_text ( String(_status.OK) );
                this.boxes['ok'].get_parent().show ( );
                this.boxes['warning'].get_parent().hide ( );
                this.boxes['critical'].get_parent().hide ( );
                this.boxes['unknown'].get_parent().hide ( );
            }
            else
            {
	        this.boxes['warning'].set_text ( String(_status.WARNING) );
	        this.boxes['critical'].set_text ( String(_status.CRITICAL) );
                this.boxes['ok'].get_parent().hide ( );
                this.boxes['warning'].get_parent().show ( );
                this.boxes['critical'].get_parent().show ( );
            }

            if ( _status.UNKNOWN != 0 )
            {
	        this.boxes['unknown'].set_text ( String(_status.UNKNOWN) );
                this.boxes['unknown'].get_parent().show ( );
            }
            else
            {
                this.boxes['unknown'].get_parent().hide ( );
            }
        }
        catch ( e )
        {
            monitoLog ( 'RefreshUI error: ' + e );
            monitoLog ( e.stack );
        }

        this.stopChildSpin ( this._reloadButton );

        monitoLog ( 'RefreshUI done' );
        return;
    }

    _onSearchFieldActivate ( e ) {
        monitoLog ( 'Search: ' + e.text );        
        this._searchString = e.text.toLowerCase();
        this.refreshUI ( );
        return;
    }

    _onPreferencesActivate ( ) {
        this.menu.actor.hide();
        if (typeof ExtensionUtils.openPrefs === 'function') {
            ExtensionUtils.openPrefs();
        } else {
            Util.spawn([
                "gnome-shell-extension-prefs",
                Me.uuid
            ]);
        }
        return 0;
    }

    _onSortColumnClick ( button ) {
        let _sortOrder = Preferences.getSortOrder ( this.server );
        let _columns = Preferences.getColumns ( this.server );

        let _indexPlus = _sortOrder.indexOf ( button.column + '+' );
        let _indexMinus = _sortOrder.indexOf ( button.column + '-' );

        if ( _indexPlus >= 0 )
            _sortOrder [ _indexPlus ] = button.column + '-';
        else if ( _indexMinus >= 0 )
            _sortOrder.splice ( _indexMinus, 1 );
        else
            _sortOrder.unshift ( button.column + '+' );

        Preferences.setSortOrder ( this.server, _sortOrder );
        this.refreshUI ( );
    }

    _onRecheckButtonClick ( e )
    {
        this.spinChildOf ( e );
//        monitoLog ( JSON.stringify ( e.service ) );
        e.service.button = e;

        this.serverLogic.recheck ( e.service );
    }

    _onExpandLabel ( e )
    {
        log ( "Monito: Click label " + e.original_text );
        let temp = e.text;
        e.text = e.original_text;
        e.original_text = temp;
        if ( e.clutter_text.line_wrap )
        {
            e.clutter_text.line_wrap = false;
        }
        else
        {    
            e.clutter_text.line_wrap = true;
            e.clutter_text.line_wrap_mode = Pango.WrapMode.WORD;
            e.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
        }
        
    }

//    _onEnterEvent ( e )
//    {
//        log ( "Monito: enter");
//    }

    _onOpenInBrowser ( e )
    {
        this.spinChildOf ( e );
        e.service.button = e;

        let loop = GLib.MainLoop.new(null, false);
        try {
            let _cmd = "%s %s".format(settings.get_string ( "web-browser" ), this.serverLogic.getUrlForService ( e.service ) );
            let proc = Gio.Subprocess.new (
                _cmd.split ( ' ' ),
                Gio.SubprocessFlags.STDOUT_PIPE | Gio.SubprocessFlags.STDERR_PIPE
            );

            let cancellable = new Gio.Cancellable();
            proc.wait_async(cancellable, (proc, result) => {
                try {
                    proc.wait_finish(result);
                    if ( ! proc.get_successful()) {
                        log ( 'Monito: the process failed' );
                    }
                } catch (e) {
                    logError(e);
                } finally {
                    loop.quit();
                }
            });
        } catch ( e ) {
            log ( 'Monito err: ' + e.message );
            Main.notifyError ( _('Unable to execute command: %s').format ( e.message ) );
        }
        this.stopChildSpin ( e.service.button );
    }

    _createButton ( sizeName, icon, data, callback ) {
        let size = 24;
        if ( sizeName == 'small' )
            size = 24;
        else if ( sizeName == 'big' )
            size = 32;

        let _text = '';
        if ( ! data instanceof Object )
            _text = data;

        let button = new St.Button({
	    x_align: Clutter.ActorAlign.END,
            y_align: Clutter.ActorAlign.CENTER,
            reactive: true,
            can_focus: true,
            track_hover: true,
            accessible_name: _text,
            style_class: 'button %s-button'.format(sizeName),
            rotation_angle_x: 0.0,
//	    width: size,
//	    height: size
        });
        button.prevIcon = icon;

        if ( data instanceof Object )
            button.service = data;

        button.child = new St.Icon({
	    style_class: 'monito-button-icon',
            icon_name: icon,
	    icon_size: size - 4,
	    width: size - 4,
	    height: size - 4
        });

        button.connect('clicked', Lang.bind(this, callback ) );

	return button;
    }

});

class Extension {
    constructor(uuid) {
        this._uuid = uuid;

        settings.connect("changed::servers", Lang.bind ( this, function(stgs, key) {
            this.disable ( );
            this.enable ( );
        } ) );

        ExtensionUtils.initTranslations(GETTEXT_DOMAIN);
    }

    enable() {
        this._indicators = { };

        for ( let _server of Preferences.getServersList() )
        {
	    let _pref = Preferences.getAccountSettings ( _server );
            if ( _pref.get_boolean ( 'active' ) )
            {
                this._indicators [ _server ] = new Indicator(_server);
                Main.panel.addToStatusArea ( '%s-%d'.format ( this._uuid, _server), this._indicators [ _server ] );
            }
        }
    }

    disable() {
        for ( var i of Object.keys(this._indicators) )
        {
            this._indicators[i].cancelTimeout();
            this._indicators[i].destroy();
        }

        this._indicators = { };
    }
}

function init(meta) {
    return new Extension(meta.uuid);
}


function monitoLog ( msg )
{
    log ( 'Monito: ' + msg );
}


function setColor (stgs, key) {
//    monitoLog ( '> %s color %s'.format ( key, stgs.get_string(key) ) );
//    monitoLog ( '> style %s'.format ( style ) );
    let style = this.widget.get_style ( );
    if ( key.match ( /-fg$/ ) )
        this.widget.set_style ( style + ';color: ' + stgs.get_string(key) );
    else
        this.widget.set_style ( style + ';background-color: ' + stgs.get_string(key) );
}