Adding CSS Color Preview Tooltip to Komodo

Do you know Firebug? Uh no? Well please make a jump in twentieth century then return here

Firebug has many great features but I love the color preview tooltip, from CSS Tab moving the mouse over a CSS color expression you will see a little box filled with the color found under the mouse pointer.

Every time I edit CSS (and HTML) files from Komodo subconsciously I move mouse over a color waiting to see the tooltip but nothing happens

I’ve realized a macro can do this job so I’ve written ColorInfoTip that adds to Komodo the ability to show colored tooltip.

Some technical detail

This is a macro! No need to create extensions, the Komodo macro ecosystem is very cool and powerful.

The tooltip is a scintilla Call tip accessible from Komodo API.

The CSS color string can be written using many syntaxes like #RRGGBB or rgb(R,G,B) instead of reinventing the wheel and write the parser I’ve used the getRGBColorValue standard DOM method.

I discovered Scintilla uses BBGGRR color format instead of RRGGBB so the CSSRGBColor components have been converted to be Scintilla compliant.

Known problems

The macro isn’t perfect and any help is welcomed

• Sometimes the tooltip doesn’t close especially changing editor view
• Moving mouse quickly doesn’t update the color (fixed)
• fill here the bug you found

ColorInfoTip.kpz

You can download the macro from ColorInfoTip.kpz then open the file from Komodo to install

Komodo and readonly behavior

Komodo editor handles read-only in a incomplete manner, at least for me.

The truly question is “what read-only means?” A file can be read-only but also an editor buffer can be read-only.

Komodo handles read-only files is a smart way, it opens file and shows a little lock on editor tab but user can edit the text buffer, it isn’t marked as read-only.

If user tries to save a warning message pops up allowing to choose if saving must be forced or cancelled.

Cool sure but I want to mark editor buffer as temporary read-only irrespective to file flag, this feature is missing on Komodo but scintilla has a readonly property.

I’ve added to MoreKomodo the ability to mark editor buffers as “edit locked”.

I think “edit locked” sounds good then “buffer read-only”.

The code is straightforward, simply sent the scintilla readonly property as shown below

     onToogleLockEdit : function() {
        var view = ko.views.manager.currentView;
        view.scintilla.scimoz.readOnly = !view.scintilla.scimoz.readOnly;
    }