New Gecko core

Using a newer Gecko core has become an emergency because the old Gecko 1.7 isn’t compatible with GTK 2.14, hence the crashes on recent distros (Ubuntu Intrepid / Jaunty, Fedora 10, etc.).

Porting KompoZer to another Gecko core isn’t easy because Nvu uses a heavily modified Gecko 1.7 core (over 15 000 lines of patch). The first step has been to adapt this “Nvu patch” to a newer Gecko core, sometimes by patching the core again (e.g. PHP support), sometimes by implementing features in the chrome side (e.g. source code edition). I’ve settled for Gecko 1.8.1 because there’s still a lot of xpfe in this app and I wanted to focus on the “Nvu patch” first. The second step will be to get rid of xpfe and upgrade to the latest Gecko core (1.9.1), possibly by backporting KompoZer to SeaMonkey Composer.

Good news: nobody’s been able to crash/freeze KompoZer 0.8 so far! The 0.8a1 version is much more stable than the 0.7.x branch, which was already significantly more stable than Nvu 1.0.

HTML source dock

By far the most noticeable change:

KompoZer 0.8, source dock

I never liked the “Source” view, and I think the pseudo syntax highlighting introduced by Nvu made it even worse: it’s known to be the first cause of crashes and code losses with Nvu and KompoZer 0.7.x, and it’s very difficult to use without a mouse. Besides, when I started to port KompoZer to Gecko 1.8.1, I realized supporting this pseudo syntax highlighting required to patch the core quite heavily. And should I mention this “Source” view removes all tabs because of technical limitations?

So I dropped this source view and designed a source dock instead. This is how it works:

  • the colored source view of the current element is displayed in the dock
  • double-click in this dock, you’re editing the source in a good old text box
  • click in the main window, your changes have been validated

The key point is, this source dock shows only the code of the current element, not the whole document’s code. This means the code that is displayed will always be very simple, unless the user deliberately selects a parent element.

This source dock still requires some development (bugfix + performance optimization) but it should be a major improvement. Users who want to learn HTML syntax should find this dock useful. That’s the difference between a beginner tool and a learning tool. :-)

KompoZer 0.8, DOM sidebar

DOM sidebar

The DOM sidebar provides a view of the document tree. To keep it as simple as possible, only the part of the DOM tree that is directly related to the current element is displayed: children, parents, siblings. This HTML tree is much simpler than the DOM inspector tree, and if I believe the users who tested it, it’s a good help to understand the structure of an HTML document.

This DOM tree is also useful to navigate in the document: when the mouse pointer hovers a tree element, the corresponding document element is highlighted and the main window is scrolled if necessary to ensure the hovered element is visible. Of course, this DOM tree can be used to select an element or to edit its properties (HTML attributes and inline style properties).

This sidebar can also provide a list of the CSS rules that apply on the current element. I like it a lot — seeing only the relevant rules makes more sense than checking all style rules in a separate window — but it’s not finished yet:

  • it needs a context menu to add/edit style rules: if we can’t edit CSS rules, it’s pretty useless
  • it might be better to include the current element’s parents’ style rules, too, but I’m afraid it might be confuse beginners. Any thoughts?

The main point of this new sidebar is to help users to understand how an HTML document works. More specifically, I hope it will ease writing CSS selectors…

Enhanced status bar

The status bar is one of the things I always loved in Mozilla Composer: it provides a lot of information in very little space. The new status bar implements some of the DOM sidebar features:

  • when the mouse hovers a status bar button, the corresponding element is highlighted in the main window;
  • using the mouse wheel over a status bar button selects the corresponding elements’s siblings and ensures it’s visible (i.e. the main window is scrolled if necessary).

I guess advanced users will keep using this status bar rather than displaying the DOM tree in the sidebar. Besides, updating the status bar takes much less CPU than redrawing the DOM tree: this is hardly noticeable on a recent PC but it makes a significant difference on my EeePC.

Keyboard-friendly

Using a mouse is very intuitive but much less effective than keeping both hands on the keyboard. I’m aware that most users don’t touch-type and rather use the mouse whenever possible, but I wanted to propose a more productive alternative with these keyboard shortcuts:

  • Alt+Enter: edit the current element in the source dock
  • Alt+BackSpace: select the current element
  • Alt+Left: select the parent element
  • Alt+Right: select the first child element
  • Alt+Up: select the previous sibling
  • Alt+Down: select the next sibling

The Alt+Enter shortcut is very useful for touch-typists. Alt+BackSpace is handy too, but I’d prefer to use Alt+Space instead (much more comfortable). Unfortunately, I couldn’t get Alt+Space to work — any suggestions, someone?

The Alt+arrow trick is a killer feature for me. It took me a few minutes to get used to it (note that these Alt+arrow shortcuts are much more intuitive when the DOM tree is displayed), but now I couldn’t use KompoZer without it. I don’t know if anybody else will use that, but it’s implemented. Call me a nerd. ;-)

What’s next?

Obviously, this version needs to be ironed before it can become an end-user release. It shouldn’t crash but the preferences window is buggy, the addons manager is not working properly, many UI bugs need to be addressed, etc.

The site manager will be updated to use external applications “out of the box” (= without any extension) and to be compatible with FireFTP, which can’t be included in KompoZer because of its incompatible license.

I’m thinking of making a “KompoZer lite” extension for Firefox and/or Komodo. It would use the CSS editor, the site manager, the DOM sidebar, the source dock and the status bar, without the HTML editor. The goal would be to have a simple and reliable web design tool for PHP/ASP/JSP/Ruby users.

I’d also like to work with the SeaMonkey team to backport KompoZer to SeaMonkey Composer to join our efforts on the editor: KompoZer would be built on SeaMonkey and SeaMonkey could have most of KompoZer’s features and bugfixes.

Get it and test it

KompoZer 0.8a1 is only available for GNU/Linux at the moment. I’m not neglecting Windows, I’m just focusing on the platform where KompoZer 0.7.10 stopped working: Windows and MacOS builds will come later, unless somebody can provide these builds.

Linux users, here you go:

  • download this archive: kompozer-20090206.tar.gz
  • unzip it somewhere (e.g. in your home directory)
  • rename your ~/.kompozer profile (e.g. ~/.kompozer.bak)
  • start the kompozer script: ~/kompozer/kompozer

Don’t try to install any langpack, they need to be updated for this version.

Warning: alpha release. There *will* be bugs, please report them in the SourceForge tracker or in one of these forums:

Feel free to use the comments for any suggestion but please, do NOT report bugs in this blog.

If you want to contribute to this project, you can find me on #kompozer (irc.mozilla.org).