ActiveBlog

The New Komodo 8 User Interface
by Nathan Rijksen

Nathan Rijksen, February 13, 2013

Linux UI SampleEver since I started using Komodo many years ago, I was intrigued by its ability and potential. No other IDE out there gave me the level of flexibility that Komodo did (and does).

As a web developer, being able to extend my editor of choice with some simple Javascript was amazing. However, the one thing that always bothered me more than anything else was its UI. While it certainly was not the worst I had ever seen in an IDE, it was not the best either. It felt bloated, inconsistent, and most importantly, it did not feel native to the platform.

That might sound a bit harsh, but when I spoke to the Komodo team, it turned out they agreed with me! As the old saying goes, you’re often your own worst critic. Now, after joining the team, I have been given the opportunity to change that. We have since made a lot of progress on a new and improved UI. And with the release of the Komodo 8 beta, we’ll let you be the judge!

 

(Note: The UI is still in development. Things can and will change.)

 

Objectives

The new UI had to be significantly different. It had to feel fresh and make you WANT to use it. But it also should not get in the way of an IDE’s main purpose: writing code.

To this end, we made up our list of objectives:

  • Feel native yet consistent on every platform
  • Use a consistent icon set
  • Maintain a consistent UI
  • Slim it down: no more thick borders or wasted margins
  • Hide rarely used UI elements

You can probably tell the word “consistent” was used multiple times, and for good reason: as many developers added to Komodo’s UI over the years, it became very inconsistent. Understandable, but it was time for a cleanup.

Feel Native Yet Consistent

Setting out to rehaul an entire UI is not simple, especially on a Mozilla project, where each component practically has its own UI styling.

To facilitate this process, we forked LESS and made it compatible with Komodo, while still maintaining as much backwards compatibility as possible for future updates. We then set out to port the UI specific css to LESS, turning any rule that would differ between platforms into a variable. As a result, over 90 percent of the css rules are now identical between platforms, differing only in their values, which are easily controlled over centralized config files. This flexibility feeds back to the community. Developers are now able to easily create custom skins and iconsets for Komodo, simply by overriding these variables. More details on skins and iconsets will follow in a separate blog post in the near future.

Use a Consistent Icon Set

UI IconsOn to the next challenge: finding – or creating – a new and consistent icon set for Komodo.

This is not as simple as you might think, as we needed a consistent icon set which also looked native on every platform. In OSX’s case, we also needed a retina variation (ie. double the size). Creating an icon set that facilitated this would be a long and time-consuming process, and finding a set that met our requirements would be challenging.

After much research, we finally settled on the IcoMoon set, which is a monochrome set. It is also a set that is designed as SVG’s, making them easily scalable to different sizes and even usable as an icon font. This flexibility made it an excellent choice. Keyamoon, the creator of IcoMoon, has also been very supportive in our use of his icons and even made us some custom icons for some of the more specific buttons.

We first showed the new icons to our IDE users through the Komodo 8 Alpha 3 release. The feedback was mixed. Overall, people tended to like the monochrome icons but raised concerns that the lack of color variation made it hard to identify between icons. Following this crucial feedback, we added a “classic” icon set for those users preferring to stick with the originals. Of course, there will also be more icon sets and variations in the future. One I am personally planning on is adding color overlays to the monochrome set, allowing users to identify between a certain class of icons by their color.

Maintain a Consistent UI

UI sidebarAs with the icons, the UI itself had also become inconsistent. For example, the sidebar panels and their buttons were all over the place. Where users were accessing an option menu on the top right in one panel, the next one would have users access it on the left, or even worse, somewhere near the middle or bottom.

Things like this should be streamlined to the point where users should not have to “look” for UI elements. They should just be there.

Slim It Down

The old Komodo UI was based on old OS styles. That meant thick buttons, heavy embossed borders, and lots of margins. However, things have changed, and these days an OS and its app look sleek, minimalistic and sexy – and so should Komodo. In order to achieve this, we first had to lose some weight, that weight being bulky UI elements.

Hide Rarely Used UI Elements

It is a trend these days for software to remove features in order to make things easier for the rookie user. This is NOT what we wanted to do.

Komodo is a big IDE with a boatload of features. Many of those are used only occasionally, so why were they hogging up the UI permanently? To this end we set out to hide these UI elements while still preserving their functionality. For example, the Source Code Control buttons are generally not used directly from the toolbar, so why were they taking up so much space? We turned them into a dropdown menu, and we preserved the existing functionality for those that prefer it. It is simply turned off by default.

Comparing New and Old

Having worked on the new UI for a few months now, I had honestly not used the old UI for quite a while. So when I recently launched Komodo 7, I was quite struck (and pleased) by the contrast between new and old.

 

AfterBefore
(hover your mouse to move the comparison slider)

 

The Future of the UI

Though a lot has already been done, I see this as a continuous project. Big steps have been taken in modernizing the UI but I expect this to be a continuous trend with future updates, though the contrast will obviously not be as big.

So please – try out the Komodo IDE 8 beta and let us know how you feel about the new UI. We look forward to your feedback!

Permalink

I really like what you guys have done with the UI. Excellent!

Permalink

Hello.
I tested the new interface of Komodo 8 beta on Windows 7 and I really have to give my cogratulations on the new IcoMoon-dark theme. I usually don’t like monochrome icons, but these ones are really amazing! The other IcoMoon themes, I don’t like them so much, it is difficult to differentiate between the disabled and disabled icons" May be thay aren’t just appropriate for Windows!

When using Horizontal Tabs for the Left Pane, it is difficult to see they are tabs, I like minimalism, but this one has been very extreme!

The installer in its final step has at its left, wrongly, an image referring to Komodo 7!

Anyway many thanks. You make my dev day more pleasant! Komodo FTW!

Permalink

Thanks Sergio, I hear you about the disabled icons, this is something we’ll be evaluating and tweaking as necessary over the coming releases. A new UI is a lot of work, and though you get the bulk of it with the release of 8.0 it will be an ongoing project to tweak it to be as polished and perfect as possible.

As for the other bugs you mentioned, I believe these have been addressed for the final release, which is due soon.

Permalink

Very good job man! The komodo is in my opinion one of the best editors in the world! I use a lot and it’s really cool!

Permalink

Great news. Komodo is getting better each release. Thanks all.

Permalink

I like the changes..

Permalink

Great post that well-illustrates how to save a dying UI.

Good work.

Hope it makes to the free version…

Permalink

Thanks Lee, the new UI is for both IDE and Edit, so yes - it will be in the free version.

Permalink

First of all, congratulations!

The interface now really seems much more carefully designed! Even me, that in other applications really dislike monochrome icon themes, these one is amanzingly great!

The only one that seems really fine is the Ico Moon. Every other IoMoon them has really strange style, that it is even difficult to differentiate between enabled and disabled icons. (Note: Using Windows 7 and Vista)

Thanks! Thanks! Thanks!

Permalink

One thing I struggle with is key shortcuts across the OS versions. I use Ctrl-Cmd-R to run code on OS-X but Ctrl-F7 on Windows and Linux. I don’t see how either option needs to be different to support a “native” feel, because I have never used these combinations anywhere else besides Komodo. Likewise, I use Ctrl-space to complete that variables I’m typing on Windows and Linux, but I have no idea how to do this on a Mac (I thought maybe Cmd-J, but that doesn’t work).

If I could have any feature, it would be the ability to run the code being edited without saving it first. I’ve been doing this in the OptiPerl IDE since the 90s and it’s a feature I’d love to have in Komodo.

Permalink

Platform: mac. Activity: programming mathematical software, hours every working day. I discovered Komodo a couple of years ago, after having tried almost every single mac programmer’s editor, famous or not. The collection of features of Komodo is with no doubt unique. I switched to using only Komodo after a week of trying it.

But on the other hand I never liked the look, old icons, thick borders, and some minor inconsistencies with the mac platform (e.g. you cannot use the OS mechanism to assign keyboard shortcuts to Komodo menus and submenus). It is also very slow to load.

So, I was and still am very interested in the new Komodo 8 interface. It seems it is going to address most of the things that I don’t like of this terrific editor. Hence I downloaded - first some alpha version, it was too green - then the first beta released Feb/7. For two reasons, important to me, I end up returning to Komodo 7.

1. When you start Komodo 8 in a mac, you see, to the right a column with mini pages. I was unable to make that column disappear from my view. I tried all Komodo’s menus - searched the help pages, nothing. No way to remove it. Moreover: you know the mac platform has a different convention for scrolling than Windows and others, it is called “Scroll direction: natural” (Content tracks finger movement). But then, while pages in Komodo respect that, these mini-pages in the column to the right do not respect that choice, making the combination really distracting: depending on what part of the Komodo window I am scrolling, it scrolls in opposite directions.

2. When searching and doing other activity, Komodo’s window splits horizontally and shows, in the lower part a bunch of tabs like “Command Output”, “Find Results”, “Notifications”, etc. All great. That window is resizable in the vertical direction, also great. But in Komodo 8, when I tried resizing it, the upper half of the window, where I have my program visible, flashes badly like a machine gun while resizing. In Komodo 7 it does not flash at all (correct behaviour).

I believe these two are just minor things to adjust, but in my opinion they make the editor not usable for work. I didn’t try further, and returned to Komodo 7. It would be great if these two could be fixed asap.

BTW I also noticed that Komodo 8 didn’t appear really faster than Komodo 7 when starting. Is there a measure of how faster is K8 supposed to be regarding that? Also, the borders of the window continue to look thick - same comment about the buttons used for the tabs, compare for instance with CODA.

Looking forward for 1. and 2. fixed in order to try it again.
Edgardo

Permalink

Hi Edgardo, thanks for your comment. Both issues you raised have been addressed for the final release - which will follow veeeery soon ;)

Permalink

Cant wait for that new version! I think the new GUI is the right way to integrate into a good user feeling. To many icons and you cannot focus on the work.

Permalink

Loving Komodo Edit 8 and it’s new look and features.

One thing though, on the product home page there’s a screen shot of a dark theme where the sidebars have changed colour. How do I do this? No matter what I try, my sidebars don’t change theme/style or colour.

I’m using the Linux version, but have also tried on Windows.

Permalink

That screenshot is made with the GTK theme “Boje-Blue”, the iconset “Cupertino-Blue” and the color scheme “Dark_Wombatsosia”.

Note that Komodo 8.1 will likely have it’s own dark skin that you can use.

Permalink

I am loving the new Komodo Edit 8 and it makes my Ruby programming much easier, especially switching between multiple projects.

One problem I have on my MacBook Pro 13" Retina display is the Find Results tab. The rows disappear when the cursor hovers over the row. Has this issue been documented yet, and if not, would you like some help with this?

Thanks for making such a great product.

-Larry

info: Komodo Edit, version 8.0.0, build 12188, platform macosx. Built on Wed Mar 6 23:47:42 2013.

Permalink

Thanks Larry, we are aware of some outstanding Retina issues. They’re a bit hard to nail down sometimes but we’re on it :)

Permalink

I would like to know what “Appearance” setting is used in the screenshots for Komodo 8? Is it available under the preferences or is that a customized preference?

Subscribe to ActiveState Blogs by Email

Category: komodo
About the Author: RSS

Nathan Rijksen is a Komodo developer with web dev expertise. He has experience as a backend architect, application developer and database engineer, and has worked with third-party authentication and payment modules. Nathan is a long time Komodo user and has written multiple macros and extensions before joining the Komodo team.