Glyph Gutter and the Foldingbar
Author: Rudolf Bock
NetBeans's code Editor including a lot of features. some of the basic are the Glyph Gutter and Foldingbar. Their functionality is similar to same UI elements in other known editors, but we can improve it trough an aesthetical and precise look&feel.
The Glyph Gutter has now a default size 19 pixels. Where the first 16 px from left are the content area of the gutter, 1 px has the gutter, which separate the gutter from the 2 px protection zone.
The width of the gutter content area is enough to content all necessary UI elements like Breakpoint icons, Errors etc. On the right site of the Glyph Gutter is a pro protection zone, which separate the gutter from the Folding bar. This 2 pixel area is mandatory, because the symbols used for the code folding can differ from platform to platform (this means mostly the size of used symbols) and it's important to keep up the graphical consistency/readability of the Glyph Gutter.
The colors of the gutter are chosen to correlate with the rest of the UI on all common platforms. The Foldingbar is transparent.
If the user enable line numbers using menu item "View/Show Line Numbers", the Glyph gutter will now contain line numbering and its width will change so, that it can display hundreds of code lines by default including internal protection zone on both sites. The line number are aligned to right, 4 px from the gutter line. If line numbers are only decimal digits, the default gutter size is as shown on the picture above, because we need fit all needed icons for multiple annotations.
Line numbers are displayed always using the default black Monospace font, in-depended on the fonts used in the Editor. The size of line number characters must be always 1 pt smaller against the font size used in the Editor (e.g. if the Editor use the font size 12 pt, line numbers are displayed using size 11 pt).
- Note: The width of the Glyph Gutter should change less as possible. And the line spacing of the ev. shown line numbers must always depend on the characteristic of the font used in the Editor.
In real life often happens, that the Glyph Gutter contains icons for Breakpoints, Bookmarks or even Errors related to a line of code. There could be one of them or more icons simultaneously, but the gutter can't fit all this annotations. If should be displayed multiple annotations, the Editor will show one of them with a switcher on the right site (see fig. C).
|(Fig. A) Breakpoint||(Fig. B) Error||(Fig. C) Multiple annotations|
The three pictures above showing some examples, how display annotations correctly. On multiple annotations the gutter will display the icon for the most important annotation followed by the switcher icon.
The order of importance for displaying icons in the Glyph Gutter (these icons are only the basic annotations types):
The user can interacting with these annotations using his mouse. Breakpoints could be set or removed simple by clicking on the line number (or on the Glyph Gutter in the proper vertical position for the preferred line, if the line numbers are hidden).
Errors can be evaluated through a doubleclick on the Error icon or by selecting the proper contextual menu item (described later).
Bookmarks can be set/removed using toolbar buttons or the proper contextual menu item.
The figure C. showing a combination of a Breakpoint and Error. We can see, that the gutter displays the Error icon and a switcher icon - the Breakpoint is represented only by modified background color in the in the code.
If there will be a combination Bookmark/Breakpoint, the gutter will show the Bookmark icon and the line of code will have a "breakpoint-pink" background.
In combination Error/Bookmark, the gutter should display the Error icon and the switcher icon.
The annotation icons mustn't never be displayed inside the Editor area! This will lead to a completely weird behavior - like the picture on the left showing.
The switcher menu
This menu is a contextual menu, which can be invoked over the Glyph Gutter. By default has the menu three items - the submenu "Bookmarks" and the items "Show Line Numbers", "Show Toolbar".
The last two does was they telling. The first one opening a submenu, where the user can jump between bookmarks or set a new bookmark.
This contextual menu is a dynamic menu, which content depends on the state of the specific line. If there is a Breakpoint, the menu will contain a item called "Breakpoint" above the submenu "Bookmarks". The user can remove the Breakpoint selecting this menu item.
The same applies also for the Errors, but if user select this menu item, the proper error description is showed in the status line.
Behavior of the Foldingbar
This mockup is showing the correct behavior of the Foldingbar. If the user click somewhere inside the editor, the cursor is set to that position. But if the user will click somewhere on the Foldingbar (outsite the folding symbols of course). The active line is set to the proper line corresponding to the vertical position of the mouse cursor and the text cursor is set at the beginning of the line.
The flashing stars illustrate only mouseclicks in this mockup and they are not a part of the final UI.
Note: There are still some symbols (icons), which have a wrong format. This means, that they are stored not as masked 32-bit images (with alpha transparency), but as normal images with pre-set background color (what will not work with new look&feel).