Wednesday, May 25, 2005

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.

 

39 comments:

  1. François GAILLARDMay 25, 2005 at 3:55 AM

    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.

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

    ReplyDelete
  3. 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 ?

    ReplyDelete
  4. François GAILLARDMay 25, 2005 at 4:16 AM

    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.

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

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

    ReplyDelete
  7. Rossen,

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


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

    ReplyDelete
  8. <<

    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.

    >>


    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.

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

    ReplyDelete
  10. 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 Delphi 7 than how line numbers are displayed in the gutter.

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

    ReplyDelete
  12. Sorry Allen,

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


    Andrew

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

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


    ReplyDelete
  15. 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.mckeeth.org/

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

    ReplyDelete
  17. Richard HollerichMay 25, 2005 at 7:30 AM

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

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

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

    ReplyDelete
  20. Roger C. Morgan IIMay 25, 2005 at 8:17 AM

    >>

    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?

    ReplyDelete
  21. Allen,


    I actually thought about color blindness when I was making the suggestion.


    The line numbers really should be visible. Putting the dots on top obscures the usability of line numbers and makes it look really ugly / cluttered.


    I like the idea of maybe making the blue or red dots circles around the line numbers instead. For the break points you would make them hexagons around the number so the shape and color both show the state.


    I know making customizable options is a pain, maybe to let people choose between chaning number color or showing an icon. For those wanting an icon you could have a second gutter, like a few other people suggested.


    -Jim McKeeth

    http://www.bsdg.org/2005/05/gutters-numbers-and-colors.shtml

    ReplyDelete
  22. Allen,

    I don't like the approach that you are taking. I like ALL of the line numbers to appear but I also want all of the other information.


    I see the problem like you as there being too much information in the gutter. But have you considered simply having more than one gutter? Say, one gutter for line numbers, another for the blue/red dots and a third for bookmarks/breakpoints. I think beyond 3 gutters and you get too many but I think 3 is usable. Each gutter would be just wide enough to display the information it 'contains' with the 3rd probably containing the line information and would be variable in width based on the number of lines in the file.

    ReplyDelete
  23. Mark,


    I would suggest that if there were 3 gutters that it display at least the bookmarks gutter dynamically. So if there are no bookmarks in use it hides the 3rd gutter. Maybe for people who like the layered look you could let them combine them together.


    -Jim

    ReplyDelete
  24. Allen, you wrote:


    <<

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

    >>


    In Delphi 2005, you most certainly do. I can make the gutter 100 pixels wide, and still the breakpoints and balls, etc. are painted over the line numbers, and the space to the right is just empty. If you are thinking of changing that, I'm a happy camper. I think items should only overlap if there is not enough room to put them side by side.


    You asked Nick if he would give up horizontal text estate, and like him, I would. I don't mind making the gutter 80 or 100 pixels wide, if that unclutters my balls (hmmm... is that ambiguous?). My text area is only 80 characters wide anyway, and I don't let text go over that width.

    ReplyDelete
  25. Allen


    From your comment to ARMtech "It only looks like we've given this a whole bunch of attention since there is this blog post."

    This EXTERNAL blog is what we see, so if there's days of nothing and suddenly a large post about the gutter, what do you think the customers perception will be? If INTERNAL blogs are there to keep everybody up-to-speed, than EXTERNAL blogs are there to inform the customers about important stuff. Right? By saying that it didn't get "a whole bunch of attention" you are saying "it's not that important". If that is true, than why do you even bother to blog about it?

    Being an ADD (it says so in your post) it will be hard enough already to produce such a large post with screenshots and all.


    How are things getting along with .NET 2.0? That's something I like to know. I don't care if my screwdriver has a plastic orange or a rubbery black grip, if it's too small, I can't use it anyway for the big screws. Please stop screwing around (pun intended) or somebody will find themselves in the gutter, next to other blue (Borland) balls.

    ReplyDelete
  26. Tjipke van der PlaatsMay 25, 2005 at 6:00 PM

    The line numbers, hmm first thing I turn off: cost to much screen estate and doesn't tell me a thing. (It is not that I am programming in basic or something Goto 110)

    In the very rare case I want to now which line I am on, I see it in the statusbar


    And the overlapping: no problem as long as the most important thing is on top (and during debugging that is a breakpoint). Not everyone has 21" LCD screens :-)

    ReplyDelete
  27. Allen,

    I'm not using D2005 nor line numbers but I can understand those who need them.

    As some suggested, you should remove one extra space-taking glyph and play with the background of the line number: for color blind people, my suggestion would be to have a contrasted border as shown in this mockup: http://www.ibe-software.com/temp/gutter-mockup.png


    I've tried to take as little screen space as possible while having the line numbers visible. The hints are optionally available if you've set a smaller gutter.


    To gain even more screen space, the blue arrows and dots could be cut as shown in the last example of the mockup, line "9876".

    Once again, color blind people could recognise the shapes of the items.


    Hope this helps having some ideas to refine the gutter.


    John.

    ReplyDelete
  28. I understand both sides of the arguement, but I tend to agree with John Riche here.


    I think a lot more can be done with the available space, and perhaps even the first few pixels/border of the code area to show important issues.


    I was wondering why you don't have a comment type indicator on a line which may display more information in a tooltip if the developer has forgotten something.


    The fourth and sixth indicators seem the most sensible to me in terms of space and information.


    Much like the last 9876 where the > is on the right edge. Have you thought of having a small triangle in the code area right on the left most border to indicate the current line of execution?


    Something like the following perhaps?


    <a href="http://67.18.168.252/download/bookmark_breakpoint_in_codewindow.JPG">Something like this</a>

    ReplyDelete
  29. Drawing every 10th line number with dots and dashes in between does look tidier, and I'm sure I can get used to the information at a glance.


    On the other hand, please don't obscure line numbers (or dots/dashes). If I can't understand the line number information at a glance or if the glyphs make it possible to misread them, then they aren't as useful.

    ReplyDelete
  30. Wow. Long thread, eyes glazing over.


    Here's a wacky idea. How about putting changing the font STYLE of the line numbers in addition to the color, and killing the dots entirely.


    What if dotted lines were indicated by line numbers that were in bold italic blue. Then those who are color blind still get the virtue of the BOLDED lines indicating those that can have break points set on them. Then, you can put a RED FRAME around line numbers that are breakpointed. Then everyone sees their line numbers all the time, but breakpoint and executable lines are still deliniated with both color and style.


    Randy

    ReplyDelete
  31. SwitchBL8,


    I'm not sure why you're being combative here? Sometimes it is just fun to too toss out some ideas and see what bounces back. We have to keep a lot of things confidential, however there are also a lot of areas we're working on that are not nessesarily "game changers," so a few moments spent posting a blog entry can be helpful in breaking up the day-to-day grind. It lets folks know that we're still here and we're at least trying to listen. If all you think we do is post trivial blog entries and that is the extent of what is going on at Borland, then I hope you don't pilot a ship too close to an iceberg. There's a lot more going on than what you actually see.

    ReplyDelete
  32. If you had a verticle bar instead of a blue ball it would take up less horizontal space and possibly link up with the lines vertically surrounding it.


    You could even re-use the gutter borders.


    By the way the Delphi 2005 IDE has made my life much more productive. I enjoy using it and it is easily the best Ive ever used.

    ReplyDelete
  33. Hmm. The only-every-10 line number display with a hash at the 5 is a *fantastic* idea. It conveys just enough information to trick your brain into supplying the rest. :)

    ReplyDelete
  34. Allen,


    I see myself steering away from the iceberg more and more, just because they are so unpredictable.

    I no Microsoft fan (that's why I have Delphi), but with them I know where they are going. With Borland I do not. People want to know what Borland will do with the Compact Framework, or with .NET 2.0, and out of nowhere comes a blogentry about the gutter. It certainly does not make me turn the steeringwheel back to where I came from.

    From my point of view the whole blogentry contradicts the "we want to inform people and let them know we care".


    Of course it's fun to bring up an idea, and see how people react to that. But this (the gutter) is something I would expect from a junior, not from a senior like yourself. The principal architect and a senior R&D are working on enhancing the gutter. What's the rest doing? That's what this post says to me.


    Thanks for listening.

    ReplyDelete
  35. Allen,


    I think maybe put the icons on the leftside and the linenumber on the right side of the editor is a good idea.


    Because in the editor current line is highlighted and it will not difficult to see the linenumber on the right.


    That just an idea.

    My English is poor, so sorry about that.

    ReplyDelete
  36. I just find it interesting how different each developer is. Some have posted that they just gotta have line numbers. Other say they couldn't care less about line numbers. I occasionally find line numbers useful, but not often. If this were a vote, I'd vote for a separate line number gutter that you can turn on and off easily.


    On another subject, I'd like to be able to double click on the tabs for a form to switch between code and design.

    ReplyDelete
  37. my vote: remove the blue balls and keep the full line number text.


    I like the idea of playing with the line number font, color or some kind of background shape. Using thin blue vertical bars instead of balls is a possibility too.


    But again, I agree with those that say this is a small issue, there are more important things that Delphi needs to address IMO.

    ReplyDelete
  38. Allen, have you considered exposing an OTAPI for this so that more advanced developers can customize the drawing?

    ReplyDelete
  39. @Chee Wee Chua

    Well put. As I was reading all the posts, I was wondering the exact same thing... Since there are so many preferences, and since we’re taking about a product addressed to developers, why not let anybody have it his/her way.

    ReplyDelete

Please keep your comments related to the post on which you are commenting. No spam, personal attacks, or general nastiness. I will be watching and will delete comments I find irrelevant, offensive and unnecessary.