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

Posting syntax highlighted code on wordpress.com using Komodo macro

This post is superseded, now it is possible to use native tag also on wordpress.com, more details can be found here

Soon or later any blogger talking about software development will post some snippet of code.

To make code more cool and attractive he/she will use syntax highlight.

There are many alternatives for many blog platforms like Pygments, GeSHI, CodeHighlighter, WP-Syntax and so on.

This blog is hosted on the free version of WordPress.com, it doesn’t allow to use any plugin or user-defined CSS so adding sexy code is very difficult.

Komodo has the ability to print to HTML files code with the syntax highlighted, this feature is fully accessible from APIs so I’ve written a macro that

• make CSS style inline replacing HTML class with corresponding style attributes
• copy to clipboard (using the new Komodo 5 clipboard helper library) in HTML format so user can paste directly on Visual WordPress mode

Below you find the macro source code obviously highlighted by itself 😛

How to get the selected text (or the whole Komodo view) converted to HTML

The variable str at end contains the converted HTML

var view = ko.views.manager.currentView;

var tmpFileSvc = Components.classes["@activestate.com/koFileService;1"]
                 .getService(Components.interfaces.koIFileService)
fname = tmpFileSvc.makeTempName(".html");

var lang = view.document.languageObj;
var forceColor = true;
var selectionOnly = view.selection != "";
var schemeService = Components.classes['@activestate.com/koScintillaSchemeService;1'].getService();
schemeService.convertToHTMLFile(view.scimoz,
                                view.document.displayPath,
                                view.document.language,
                                lang.styleBits,
                                view.document.encoding.python_encoding_name,
                                fname,
                                selectionOnly,
                                forceColor);

var file = Components.classes["@activestate.com/koFileEx;1"]
        .createInstance(Components.interfaces.koIFileEx)
file.URI = ko.uriparse.localPathToURI(fname);
file.open('rb');
var str = file.readfile();
file.close();

Applying the replace to str

Nothing really interesting, simply the replace method is called many times to make CSS style inline inside span tags

Copy to clipboard in HTML format

Komodo 5 allows to interact with clipboard wrapping XPCOM services, these APIs allow to copy in the so called HTML flavor so content preserves styles and colors.

xtk.include("clipboard");

var transferable = xtk.clipboard.addTextDataFlavor("text/html", str);
transferable = xtk.clipboard.addTextDataFlavor("text/unicode", str, transferable);
xtk.clipboard.copyFromTransferable(transferable);

That’s all folks

After running this macro on a Komodo view you can paste directly on WordPress Visual editor and obtain your beautiful code.

Using HTML flavor you can paste into any application able to accept Special Formats like Microsoft Word or OpenOffice Writer.

The full macro source code can be found on Macro SVN repository

nsIProcess, Windows and Unicode

ViewSourceWith (VSW for friends) existence was impossible without nsIProcess, VSW must run programs and pass them at least one file name.

When arguments passed to nsIProcess are ASCII strings all works like a charm but you enter the hell if strings contain Unicode characters like those contained in Cyrillic or Japanese alphabets.

nsIProcess, especially under Microsoft Windows, doesn’t work very well with UTF-8 strings (see bugs 229379, 408923, 411511).

On VSW forum an user asked to me to fix the problem but it isn’t strictly related to VSW because the problem affects the XPCOM implementation.

After many attempts I surrendered and I decided to write my Win32 (Win64??) XPCOM component.

My IWinProcess has the same nsIProcess’s method signatures (Init, Run) but accepts wstrings and calls the unicode CreateProcessW Win32 API instead of its sibling CreateProcessA.

The Javascript caller (eg VSW) must pass UTF-8 strings but this is the only constraint.
Now finally I can open local files containing Unicode characters without tweaking the Windows ‘Regional Options’.

Linux seems to work fine (at least on my Gutsy box) simply converting Unicode strings with nsIScriptableUnicodeConverter.ConvertFromUnicode, no other special workarounds.

I don’t know if MacOSX works like Linux, I’m unable to test under Apple machines.

I don’t like code containing platform checks (if Windows … else if Linux … ) but to simplify VSW development the ‘if’ statement sounds reasonable.

The IWinProcess source and DLL are present on dafizilla SVN repository.

The next VSW release (0.4) will contain the IWinProcess component

XPCOM components, extensions and Visual C++ Express

I’ve written a little XPCOM component that worked immediately thanks to the good tutorial written by Mark Finkle.

The extension stopped to work when I’ve installed it on computer different from my development environment, the error in console was

Failed to load XPCOM component: c:\Documents and Settings\…

The solution was to statically link the C/C++ runtime and add msvcrt to nodefaultlib switch.

VC++ Express 2008 (or above??) users must set from Configuration Properties

• C/C++ -> Code Generation -> Runtime Library = Multi-threaded (/MT)
• Linker -> Input -> Ignore Specific Library = MSVCRT.LIB

Using nsIObserverService.notifyObservers subject argument from Javascript

When a XUL extension developer needs to notify a global modification (ie not strictly related to a single document window) can use the nsIObserverService service, it is easy and well documented.

The notifyObservers method does the work, it accepts three parameters

• subject
• topic
• someData

topic is a string containing the “command”, someData is a string specific for topic and can be null (read more at MDC docs).

The subject argument can contain a pointer to application data, not only a simple string but a complex object.

The subject argument can be very useful to pass informations from notifier to callback function but using it from extension can be a bit complicated because it requires the presence of the wrappedJSObject property.

I never used subject‘s notifyObservers parameter, I’ve always set it to null but on my last MoreKomodo release I’ve tried to use it discovering my usage was unsuccessful without wrappedJSObject.

The correct usage requires you declare a wrappedJSObject property inside your data referring to itself 😎

var data = {
document : viewDoc,
newDocument : newDoc,
command : “rename”
};

data.wrappedJSObject = data;

then call notifyObservers passing it into first parameter (subject)

Components.classes[“@mozilla.org/observer-service;1”]
.getService(Components.interfaces.nsIObserverService)
.notifyObservers(data, “morekomodo_command”, null);

The observe callback must “unwrap” received subject to access to user defined properties

observe : function(subject, topic, data) {
switch (topic) {
case “morekomodo_command”:
var unwrapped = subject.wrappedJSObject;
…
…

var doc = unwrapped.document;
break;
}
},

Another little lesson learned 😉

Open a tab using FUEL on Firefox 3

I want to migrate to Firefox 3 and stop compatibility with FF2.x so I’m starting to use intensively FUEL.

Today I’ve replaced the old “open new tab” code shown below

newTab : function (url) {
const newTab = getBrowser().addTab(url);
getBrowser().selectedTab = newTab;
}

With the FUEL version

newTab : function (url) {
var uri = Components.classes[“@mozilla.org/network/io-service;1”]
.getService(Components.interfaces.nsIIOService)
.newURI(url, null, null);
Application.activeWindow.open(uri);
}

Onestly I found so complicated the FUEL approach.

Why I need to create an URI?

Why open doesn’t work with a simple string?

BTW FUEL is great

How to detect XUL trees scroll event

My extension VisualDiffer contains two nsITreeViews that must synchronize scrolling, when user scrolls one the other tree moves the selection to the corresponding row.

Apparently XUL trees don’t have any event handler to intercept scrolling operations so I run the risk to became crazy.

After days spent to find a solution (using google) without result I’ve tried to use the DOMAttrModified event and amazingly it worked.

First I add a listener to the tree (VisualDiffer adds listeners to left and right trees)

document.getElementById(“left-tree”).addEventListener(“DOMAttrModified”,
function(event) { gFolderDiffer.onLeftScroll(event);}, false);

The onScroll simply checks if event.attrName is “curpos” and if it’s true the tree has been scrolled by user

onLeftScroll : function(event) { if (event.attrName == “curpos”) {
rightTreeView.treebox.scrollToRow(leftTreeView.treebox.getFirstVisibleRow());
}
}

This solution works fine but maybe exists a better way…

How to detect the current active theme name on Firefox

Sometime obtaining informations about components isn’t so quick, you must iterate over RDF, XML or call many API.

Sometime is very simple like get a pref string… well this time I’m lucky 😉

The pref general.skins.selectedSkin contains the current active theme name.

var currentThemeName = Components.classes['@mozilla.org/preferences-service;1']
.getService()
.QueryInterface(Components.interfaces.nsIPrefBranch)
.getCharPref("general.skins.selectedSkin");

Put in clipboard same content in multiple formats using XUL.

Copy plain text in clipboard can be obtained using code shown below.

Components.classes["@mozilla.org/widget/clipboardhelper;1"]

    .getService(Components.interfaces.nsIClipboardHelper)

    .copyString("<font color=’#FF0000′>Hello world</font>");

Using this approach you can easily copy HTML text but… it remains plain text!
So if you copy the string <font color=’#FF0000′>Hello world</font> inside OpenOffice Calc (or Microsoft Word) you don’t see the text “Hello world” in red but the plain HTML tag.

Copy data (not necessary text) using a specific format requires nsITransferable‘s use.
You specify the mime type and if destination application (where you paste the data) is able to understand the format the correct result appears.

The code below insert real HTML data into clipboard and when you paste for example in OpenOffice you see the colored text.

var textHtml = "<font color='#FF0000'>Hello world</font>";

var xferable = Components.classes["@mozilla.org/widget/transferable;1"]

    .createInstance(Components.interfaces.nsITransferable);

xferable.addDataFlavor("text/html");

var htmlstring = Components.classes["@mozilla.org/supports-string;1"]

    .createInstance(Components.interfaces.nsISupportsString);

htmlstring.data = textHtml;

xferable.setTransferData("text/html", htmlstring, textHtml.length * 2);

var clipboard = Components.classes["@mozilla.org/widget/clipboard;1"]

    .getService(Components.interfaces.nsIClipboard);

clipboard.setData(xferable, null,

        Components.interfaces.nsIClipboard.kGlobalClipboard);

Consider you want be able to choose if text must be pasted like HTML or plain text, for example because some application can’t handle stylished code.
Consider a plain text editor, it handles text not colorful HTML so you need the ability to paste based on destination application.
It’s easy! You only need to add a new flavor to the code shown above

var plainText = "Hello world in plain";

xferable.addDataFlavor("text/unicode");

var unicodestring = Components.classes["@mozilla.org/supports-string;1"]

    .createInstance(Components.interfaces.nsISupportsString);

unicodestring.data = plainText;

xferable.setTransferData("text/unicode", unicodestring, plainText.length * 2);

Now text editors receive the string “Hello world in plain” without any formatting and rich editors receive a colored “Hello world”.
Rich editors like OpenOffice Calc or Writer allow user to choose how to paste using the “Paste special” function.
You can choose to paste the same data in different format or different data per different format.

Table2Clipboard uses two flavors, you can take a look at its source code here.

Short-circuits, innocent code and nsIDOMEvent targets

An user on AMI tells me that my bonsai RichFeedButton doesn’t work when installed together with another extension.

I install the offended extension and discover that RichFeedButton breaks this little jewel!

The solution was simple but the bug hunting was hard 😦

The problem was into an innocent function associated with a listener that simply checks the nsIDOMEvent‘s target id and attrName as shown below
if (event.target.id == "xxx" && event.attrName == "yyy") {
...
}

For some motivations the “event.target” expression breaks the other extension.

I suspect event.target at some event stage isn’t valid and generates internally some error corrupting (???) the full event queue or simply I’m a bad programmer 😦

The solution??

Simply swaps first equality test with second one

if (event.attrName == "yyy" && event.target.id == "xxx") {
...
}

The javascript short-circuit evaluation ensures me event.target.id is parsed only if first condition is true. 🙂

Every day I learn something about XUL and its implementation… 😉