Edited on 9 June 2009 Mozilla guys decided to add a getter for imageURL so no extension will be affected by new property mediaURL replacement, you can read the full story at bug 497098.

Another time Mozilla community demonstrates its strength, why nobody considered the impact before modification is another story

–

Today a ViewSourceWith user filed a bug about a regression on Firefox 3.5b4, causing VSW to no more open images

After dressing the debug uniform I started to investigate the problem.

I’ve realized the object gContextMenu doesn’t more contain the property imageURL used by VSW and maybe many other extensions.

The imageURL property has been renamed/refactored to mediaURL.

Honestly the new name fits better its new usage and maybe the imageURL property is not intended for usage from extensions.

The poor gContextMenu documentation doesn’t describe imageURL so maybe I abused its usage.

I think gContextMenu need a better documentation because its usage is so sexy inside extensions.

The workaround

A string find/replace inside code fixed the bug, to maintain compatibility with FF 3.0.x I’ve modified the code as shown below

var imageURL = gContextMenu.imageURL || gContextMenu.mediaURL;

The Komodo macro ecosystem grows quickly and many state-of-art macros born every day.

I’ve already said in the past that Komodo macro environment is powerful like Microsoft VBA although it has many lacks (like UI creation).

I would have a similar environment on every Mozilla based application something like a KoMonkey or GreaseModo (Komodo macros plus GreaseMonkey).

Macros become more complex and the authors release many revisions thanks to community feedback but today it is difficult to stay tuned when new versions are published.

Adding an update checker to KPZ files is possible but not easy, many technical aspects must be considered.

Today the best approach consists to pack macros like extensions (XPI files) but developers need deeper knowledge and this should be frustrating.

I’m sure the Komodo macros are at the beginning of a radical evolution

Very often I take a look at search terms used to arrive on my blog, a practice that I use to understand people needs about XUL.

Obviously it is only a funny exercise because this blog receives a ridiculous count of visits per month (~200) and the search terms are a very very very little subset of XUL related terms but I want to share with my readers (six or seven) this statistic.

Terms are sorted by views and divided in two categories: general XUL and Komodo specific

General XUL search terms

1. nsiwebprogresslistener
2. xul textbox css
3. mccoy firefox
4. xul menuitem image
5. xul style tab
6. mccoy command line
7. xul synchronize scrollbars
   removing scrollbar xul, firefox 3.x (after 10th position but strictly related)
8. xul paste clipboard as html text
9. mdc notifyobservers example
10. vsw thunderbird

Many people has problems with McCoy (3rd and 6th), indeed signing extensions is a very awful process.
I use an ANT build and the Massimiliamo Mirra’s StarTrek friend Mr Spock.

Styling XUL widgets and their color modifications (2nd, 4th and 5th) are mystical activities, people doesn’t read documentation and ignores the -moz-appearance existence.

Scrollbar synchronization is an hot topic, I used a simple DOM event based approach but I admit it isn’t so obvious.

People uses ViewSourceWith with Thunderbird, I’m glad to read this but honestly ViewSourceWith is a browser related extension.

Komodo specific

1. komodo scintilla
2. komodo snippets
3. komodo color schemes
4. komodo syntax checking disable
5. komodo copy with color
6. komodo adding colors
7. komodo clipboard
8. komodo macro open new browser window
9. komodo command openkomodo
10. dafizilla klint for komodo ide

Many people wants to style its Komodo installation like with Firefox (3rd) but many people hates the native lint checker UI (4th and 10th).

The Komodo linter UI is awful (IMHO) and my extension Klint seems to be known as a valid enhancement, well I’m very glad hey guys, run to donate

Using clipboard from macros is an hot topic I suppose developers don’t know version 5 contains xtk.clipboard namespace.

Snippets are a  leitmotiv, I have some ideas about a website dedicated to komodo snippets and macros but I need days with 35-39 hours before deploy it.

The masterpiece

1. mature blonde girl

I don’t know how it is possible to arrive to a blog dedicated to XUL and other computer related materials searching porn-like terms

I’m very curious and I would like to know the terms used to arrive to bigger blogs on planet.mozilla

A couple of months ago I wrote a Komodo macro allowing the editor view tabs to be colored based on user defined color schemes, when the macro became stable I published it on Komodo community forum.

Amazingly the macro received more feedback so I decided to ‘convert’ it to an XUL extension.

Komodo macros are fantastic but they don’t allow to create complex UIs so moving them to XPI become a necessary step.

Now ColorTab is ready and can be downloaded from here.

The original name was KolorTab, the ‘K’ letter used to remember Komodo but I’ve decided to use a more tradictional name

ColorTab look&feel

The Babelzilla Team is proud to present the (unofficial) Komodo French localization.

Komodo 5.1 has been released, it contains many cool features and the Babelzilla guys have completed the FIRST localization, the first one.

You can find further details at French Mozilla blog and the installation instructions at BabelWiki

A special thanks goes to Goofy that coordinated the L10N work.

Thanks guys, you made the world a better place without linguistic barrier.

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

When Firefox integrated the spelling checker I didn’t immediately realized its value, but using it day after day I became “spell” addicted and now I can’t imagine my browser without this feature.

You can install all dictionaries you need, but many people uses only the dictionary for its own language.

Obviously I’m not a normal person so I use three dictionaries; Italian, English and French switching between them when necessary.

Following Murphy laws every time I start to type inside a input box I discover I’m using the wrong language and I must switch it from context menu, a very annoying practice.

Finally I’ve solved this problem writing the extension SpellBySite.

SpellBySite switches automatically to the correct dictionary looking for it on user settings.

For example user can set English dictionary for mail.google.com, Italian for twitter.com and so on.

When input boxes receive focus the dictionary is set and spell checking executed, no more needs to switching from context menu

Now my life is a bit easier

PS
SpellBySite is waiting on AMO to escape from sandbox

The XUL overlay mechanism is great, it allows to extend virtually any UI widget.

Damn, why developers continue to forget to add id attributes to elements candidate to be re-used (ie all)?

Please dear developers follow these simple rules

• Please don’t forget windows and dialogs or simply refer to this short list
• Please don’t forget menu and menuitems (not generated dinamically)
• Add id attribute to every element
• Add id attribute to every element (#1)
• Add id attribute to every element (#2)
• …
• Add id attribute to every element (#n)

Based on my experience no application is fully compliant: Firefox, Thunderbird, SeaMonkey and also Komodo contain elements I needed to access without an associated id attribute

How to survive to bad practices

Sometimes (but not always) it is possible to use some workaround.
Consider that workarounds can be worst than initial problem

• Find target element with getAttributesByName method, it is especially useful for menuitems passing the ‘value’ attribute
• Find an element closer to the target using its id then navigate DOM with methods/attributes like firstChild & co.

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

After many months I’ve started again to work on VisualDiffer the most complex extension I ever realized.

Developing VisualDiffer is an exciting task at least for two reasons

• Deeper level XUL usage to create complex user interfaces
• Attention to code performances to make application more reactive

At this time the UI doesn’t present any special widget but I’ve some idea about line position sliders and comparison file results, they will be very fun to implement.

The implementation has a bottleneck in the Javascript sort function.

While VisualDiffer only runs on Komodo I’ve tried to run the directories sort routines on Firefox with TraceMonkey enabled and I noticed some speedup, nothing so amazing but with deep file trees  (~600 directories and ~2000 files) TraceMonkey completes in 10-20% less time (very good!!).

Due to the fact Komodo is based on Python, it should be easier to write core sort routines directly in Python, I will do it very soon.

VisualDiffer features list (in my mind)  is very long but the already implemented is a very short subset.

I think it is mandatory to adopt the Release Early, Release Often strategy otherwise I’ll release the next version in 2030.

A couple of new functionalities are complete

• 2369618 quick comparing two open files selecting them from View Tab context menu (released)
• 2515481 set two different base folders from Directory Panel (not released)

At this time I’ve abandoned the idea to add the three-file compare view I want to add many little time saver features like

• copy/move folders from Folder sides
• rename folders/files
• reload changed files
• syntax highlight (this should be easy within Komodo)
• in place edit (no need to switch between Komodo and VisualDiffer)