Waking up in the gutter...

Posted by on in Blogs

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.

 



About
Gold User, Rank: 83, Points: 11

Comments

  • Guest
    François GAILLARD Wednesday, 25 May 2005

    Hi Allen,

    I'm sure you'll get a lot of different opinions on the gutter and line numbering...

    I like the line numbers and because they are faded behind the blue dots or other icons they don't bother me.

    I understand that the dimming might not work 100% for some configurations.

    But with the new design - your screenshot #3 with the execution line on the 10th line shows exactly the drawback - you have a good chance not to see the line number anymore if you have icons on the 10th lines bearing the numbering.

    Your example displays 14 lines of code and nobody can tell what line numbers they have.

    So I suggest you change the binary option show lines Yes/No into a ternary one Show Line Numbers All/10th/None.

  • Guest
    Nick Hodges Wednesday, 25 May 2005

    Allen -- I'm begging you, please, PLEASE -- don't cover up the line numbers, even with the dot/dask scheme you've come up with.

  • Guest
    Rossen Assenov Wednesday, 25 May 2005

    Line numbers - the first thing I turn off in the editor options :). Anyway I like the new overlapping order for the blue dots, the red dots and bookmarks.



    I am actually more interested what sofware do you use to run your internal blog and internal wiki ?

  • Guest
    François GAILLARD Wednesday, 25 May 2005

    And another one: when you replace numbers by "." and "-", it will be harder to get/guess the line number when you fold a portion of code as it is likely to remove some of the 10th milestones.

  • Guest
    Allen Bauer Wednesday, 25 May 2005

    Nick,

    So are you willing to give up text real estate so that the line numbers are not overlapped? The general consensus here is that the text portion is more precious and needs to be preserved as much as possible.

  • Guest
    Allen Bauer Wednesday, 25 May 2005

    François,

    That is a good point, however the line number reference in the status bar will *always* be correct and show the line/column of the caret location.

  • Guest
    Allen Bauer Wednesday, 25 May 2005

    Rossen,

    The blog is running WordPress (http://wordpress.org/">http://wordpress.org/) and the wiki is running MediaWiki (http://wikipedia.sourceforge.net/">http://wikipedia.sourceforge.net/).



    You can ask more about them over on Steve's blog since he unofficially maintains that server for the team.

  • Guest
    Rudy Velthuis Wednesday, 25 May 2005

    <<

    We determined that the main cause of “fear and loathing” regarding the http://www.borland.com/delphi" target="_blank">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.

    >>



    I think you are wrong there. The problem is clutter indeed, but the main problem is that items overlap, i.e. one item covers another. My request: if the user makes the gutter wide enough (AFAIK, this is a setting in the options), make sure the items do not overlap, i.e. are moved apart. Only make them overlap if the gutter is not wide enough, or has its standard width.

  • Guest
    Allen Bauer Wednesday, 25 May 2005

    Rudy,



    You're saying the same thing here. My "clutter" comment was talking about the forced overlap regardless of gutter width. If there is enough room, we don't overlap them. The breakpoint/execution point are a special case where the overlap is by design by virtue of their relationship. The idea here is to show the most important information on top. It is far more important to show where the current execution point is than whether or not a breakpoint is there. I've observed various other environments and they also tend to overlap the breakpoint and execution point glyphs as well. The bookmark glyph shouldn't be overlapped unless there is not enough gutter width.

  • Guest
    ARMtech User Wednesday, 25 May 2005

    All I want to say is this is one of those things that in my opinion just don't deserve the kind of attention you're giving it.



    Please make a decision and move on to something else. I find it hard to think of anything that has less impact on my decision to upgrade from http://www.borland.com/delphi" target="_blank">Delphi 7 than how line numbers are displayed in the gutter.

  • Guest
    Allen Bauer Wednesday, 25 May 2005

    ARMtech,



    It only looks like we've given this a whole bunch of attention since there is this blog post. Also, there have been a few vocal "friends of Borland" that have weighed in on the issue and it is a relatively innocuous item to play around with publically. Frankly, Steve and I spent all of about 1/2 hour on this late yesterday afternoon and played with a few ideas. We had a hard stop at about 5:30pm since we both have families we like to see every once in a while ;-). I then checked in the changes we made this morning and will appear in internal builds later today.

  • Guest
    Andrea Raimondi Wednesday, 25 May 2005

    Sorry Allen,

    But I have to ask this: did you try putting line numbers INSIDE the blue dots, making those wider and elliptical?



    Andrew

  • Guest
    John Wester Wednesday, 25 May 2005

    Look at how Castilia does the line numbering in D7. It adds a line number gutter and leaves the "decorations" where the D7 IDE puts them.



    Make it work like that in D2005 and I'd be happier than a puppy dog with two tails.



    I'm more than willing to give up a small bit of real estate for that.

  • Guest
    Robert Kozak Wednesday, 25 May 2005

    Allen,



    As you probable know, VS uses 2 gutters. 1 for images and another separate one for line numbers. I really couldn't care less about blue dots or execution points painted on the side and I never use bookmarks. But I *NEED* my line numbers. It is the first thing I turn on and I leave it on.



    Probably just one minor opinion of many.



    -- Robert



  • Guest
    Jim McKeeth Wednesday, 25 May 2005

    Allen,



    My first suggestion was going to be to put the blue dots directly over the line number dots, then I thought, why not just make the line numbers blue instead of putting a blue dot on them.



    The next logical progression would be to make them red for a breakpoint. Maybe bold too. The break point is already fairly obvious because the whole line is colored.



    I would keep the execution point as a green arrow and bookmark icons.



    Maybe alternatively you could colorize the background instead of colorizing the text. I would like to see some variations on that.



    Also, if you are going to only display line numbers on every 10th line, I would ALWAYS display the line number on a folded line, maybe on the line after it too or instead. That way you would know what line it was even though it was folded.



    While we are in the gutter, something that would be really nice is the ability to close a folding block from within the block. Either by clicking the line in the gutter or clicking on the end of the block. That is probably in order of perfered method. The right click fold menu is a huge help, thanks!



    -Jim McKeeth

    http://www.bsdg.org/">http://www.bsdg.org/ - http://www.mckeeth.org/">http://www.mckeeth.org/

  • Guest
    Tory Jacobs Wednesday, 25 May 2005

    a> dearth is a noun meaning "scarcity", not an adjective: "the dearth of feedback..." would be the correct usage



    b> I think Jim's suggestion is best, use color to combine several messages in the same space - my other thought was to have a tooltip show up when the mouse is moved over the gutter showing line# and all other info

  • Guest
    Richard Hollerich Wednesday, 25 May 2005

    I was going to sugggest the same thing as Jim. Forget most of the icons and change the color of the numbers.

  • Guest
    Allen Bauer Wednesday, 25 May 2005

    Tory,

    Thanks for the clarification regarding "dearth." I've update the text to reflect the proper usage.



    As far as using only color to denote things is not really an option since there are many users that are color blind and it would be somewhat frustrating for them. In fact we have a couple of folks on the the team that are color blind and will generally let folks know when we only use color for state.

  • Guest
    Nick Hodges Wednesday, 25 May 2005

    Allen --



    I /absolutely/ would be willing to give up the /horizontal/ code space to get those blasted blue balls off of my line numbers.



    (I use line numbers all the time. ASP.NET error messages in the browser have the line numbers as part of the error, and you have to find them manually.)



    Vertical space for code is /way/ more important than horizontal space. Being able to see more lines of code is more important than being able to see far out on the right margin. I'd /happily, readily, and gladly/ give up the horizontal space to get the numbers out of the gutter.



    Nick

  • Guest
    Roger C. Morgan II Wednesday, 25 May 2005

    >>

    If there is enough room, we don't overlap them.

    <<



    Does this go for the line numbers as well? If Nick sets his gutter wide enough will he ALWAYS see his line numbers?

  • Please login first in order for you to submit comments

Check out more tips and tricks in this development video: