KompoZer 0.8a1

Yes, a new version of KompoZer is coming. KompoZer has been ported to a new Mozilla core, and the new UI displays more relevant information about the current HTML element: DOM tree, style properties, HTML code.

In other words: KompoZer 0.8 should be rock-solid and aims to be a better learning tool.

New Gecko core

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:

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. :-)

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 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.

Tags :

Comments

I really hope you'll end up working with the SeaMonkey guys, to benefit not only SM but also the much neglected TB compose module...
It was nice talk to you in Bruxelles (at breakfast!), keep up the good work!

Very nice! Glad to see some development there, especially (but not limited to) the SeaMonkey references. I'm looking forward to a joint development effort. I think we'd all benefit from it.

I didn't look at your code (could I? where?) but I think the Space key issue might be related to keyCode vs. charCode. I recently fixed this in SeaMonkey's and Thunderbird's filter dialog:http://hg.mozilla.org/comm-central/...

Yeah. 0.8a1 looks pretty sweet, especially when you put the source tab back in. I use that window/tab heavily, otherwise, it's back to Notepad to correct major composing issues or shelling out the bucks for Dreamweaver, Frontpage or god knows what all is out there now. I'll try it, but I can't see it working the way I need it to.

SamSan > the “source” view in Nvu or KompoZer 0.7.x cannot be compared to the “source” editor in DreamWeaver, FrontPage, etc.
Basically, with Nvu you’re editing a modified colored source view in a wysiwyg html editor, then export it to text and rebuild the DOM from that text when you get back to “normal” view. It sucks. It’s nowhere near a text editor. It can be handy but it will *never* work properly.
I know a few users prefer this “source view“ than the current “source dock”, but I’ll probably wait a little to see if they don’t find the advantages of the “source dock” over time. ;-)