Waking up in the gutter...

So, yesterday, Steve Trefethen, stopped by my office and had asked whether or not I'd gotten any internal feedback on what to do about the left gutter in the editor.  You see, we have an internal blog and an internal wiki that we use to communicate newsworthy items and to float around technical specs among the various teams.  Because we have teams spread across the globe, development is happening on Delphi almost 24-7, so it is usually much easier to dissiminate information via the internal blog than to spam everyone's email box.  The Delphi Welcome Page for developer's builds automatically points to the RSS feed for the internal blog so most folks don't miss the blog information.  Oh, things like meeting minutes, new feature status, build breakages, etc... are all published there, but I digress.  You're here for a discussion on the left gutter in the editor.

As Steve and I were talking about the dearth of feedback we'd gotten internally, we spent a few moments and brainstormed (OK. I did get one bit of feedback, thanks Jesper!).  I think we hit on an epiphany.  We determined that the main cause of “fear and loathing” regarding the Delphi 2005 gutter was that it was actually packed with too much information.  It was cluttered which lead to the general feeling of being disorganized.  Myself being somewhat ADD, that clutter is easily overlooked, or at least minimalized.  I knew something just didn't “click” with it, but couldn't quite put my finger on it.  So as we brainstormed, Steve hit upon an what could be characterized as a “duh!”.  What if we only painted every 10th line number and then placed little dots for the lines in between?  The same information is conveyed, but every 10th was too far apart to quickly see what lines were in between.  I didn't realize how much I relied on the line numbers in the gutter until we started changing things.  So we tried to paint only every 5th line lumber... nope, still too cluttered.    At first we painted '-' characters on the lines between the numbers... ick.. that made it look like a ruler.  So we went with the dots.  That was better, but every 5th line was still too many line numbers cluttering things up.  So, again, Steve, suggested we paint a '-' on the 5th line between the numbers and dots on all the rest.  Wow!  That is actually starting to look good.  Here's what we've go so far:

That's far less cluttered, don't you think?  The “-” character clearly deliniates the 5th line.  With just a little more effort, we think it will quickly become second nature to be able to glance at that and see what line number a particular line is.

Now that the line numbers are not so prominent and “out there,” let's tackle the “overlapping icons” issue...  The problem we're trying to solve here is that there is a lot of information we want to convey visually from the left gutter.  Things like breakpoints, bookmarks, breakpointable lines, current execution point, etc..  All of this information takes precious real estate from the really important information, the source code.  So we compromised and placed the icons over the line numbers and also tried to change the intensity of the line number to be less prominent.  The problem with playing with luminance and saturation is that many times those value tend to wrap around and actually create a much brigher color.  The reason for “dimming” the line number was an attempt at reducing the clutter I talked about above.  So we disabled that “feature.”  Now that the gutter is far less cluttered, lets look at what it would look like now with the infamous “blue balls.”

Hm..   That's getting there.  The breakpointable line icon is clearly visible and easily overshadows the line numbers making them very visible.  They also don't steal any more real estate.  So what about bookmarks and the current execution point?

Notice that the breakpoint glyph doesn't overlap the bookmark glyph.  However the excution point arrow does overlap.  This is on purpose.  Those are related items.  The breakpoint glyph and the execution point arrow glyph are all about debugging.  Notice that the blue ball is also covered up. Why continue showing that when it is clear that the breakpoint has been set there?  You can still see the breakpoint under the arrow, so there is no need to take up more real estate.  Notice that the line number has taken a complete back seat to all of this.  They're not as an important piece of information as the bookmark, breakpoint and execution point glyphs are.  Also since there are no line numbers painted on the adjacent lines, there is far less surrounding clutter to detract from where the real information lies.

Finally, lets look at what happens when the gutter is too narrow to display those two glyphs side-by-side without also spilling into the code folding information.  At this point, the glyphs will begin to overlap, but only to a certain point so that all the glyphs will be at least partially visible.  But we've rearranged the priority of them so that the bookmark is always on the bottom, then the breakpoint/breakpointable glyphs, finally the execution point is alway on the top.

As most source files tend to be more than the mere 30 lines we see here, the gutter will generally be wider and thus there'll be far less overlap between the glyphs.  Hopefully we'll see some derivative of the above changes in the next Delphi release.  Since this is only a start, I'm sure we'll be refining this even further, and since I have no delusions of pleasing everyone, I think we're on the right track.