Whisker: The O-O Stacking Browser



What is Whisker?

Whisker is a new Object-Oriented (O-O) code browser for the Squeak Smalltalk environment.

The goal of the Whisker Browser (also known as the Stacking Browser) is to provide a simple and intuitive way to view the contents of multiple classes and multiple methods simultaneously, while using screen real estate efficiently and requiring very little window moving/resizing.

Whisker does this by introducing the concept of subpane stacking. The principles behind Whisker could potentially be used by browsers for other object-oriented languages such as Java, Python, etc.

Whisker encourages better code factoring by letting you see the complete contents of several short methods at a time. The current Smalltalk System Browser only lets you view a single method at a time, which can subtly discourage the practice of writing short, well-factored, methods. This is because you can only see a small portion of the code you're dealing with, whereas with longer methods it's easier to see and understand a larger portion.

To solve this with the traditional browsers, you could have multiple browser windows open, each viewing a different interrelated method, which is currently a common practice for most Smalltalkers. But this becomes cumbersome and results in a lot of duplicate information taking up space on the screen, especially if you're viewing a few methods within the same class. Additionally, the method text pane of a System Browser still takes up a fair amount of screen space, even if you happen to be viewing a 2-line method... optimizing screen space with multiple System Browsers can involve a lot of window/pane moving and resizing.

Whisker also has other unique features, such as context-sensitive pop-up menus which apply to individual elements in a heterogeneous hierarchy of items.

For a step-by-step introduction to using the Whisker Browser, follow "A Quick Tour of Whisker" below.



A Quick Tour of Whisker
by Doug Way

This is a quick tour which will introduce you to the major features of the Whisker Browser. A very basic familiarity with Smalltalk is the only requirement for the tour.

Loading Whisker

First, you will need to load the Whisker changeset into a Squeak 2.8 image, using the standard "file in" procedure. (In brief: Open a File List window via the "open..."/"file list" menu, find and then select the Whisker.0.92-Sq2.8.cs changeset in your directory, and then choose "fileIn" from the pop-up menu.)

Opening Whisker

Before opening Whisker, it is recommended that you open and enter a Morphic project in Squeak. Whisker is written using Morphic, and works best in that environment. (It can still be opened and used from within an MVC project, but it will be contained inside a Morphic sub-window, and will have a different feel from the rest of MVC.)

To open a Whisker browser, select "open..." from the World menu, and then "whisker browser" from the submenu.

Basics of Browsing

Upon opening the Whisker browser, you'll see a window with a "Class Categories" subpane in the upper left corner, and a "Class Hierarchy" subpane in the lower left corner. These are two alternate views on all of the classes in Squeak/Smalltalk, "Class Categories" being an informal grouping of classes by application or function, and "Class Hierarchy" being the actual class inheritance hierarchy.

To start, we will choose the class OrderedCollection, which we happen to know is in the "Collections-Sequenceable" category. To get there, go to the Class Categories pane and (left-)click on the arrow to the left of the "Collections" in the list. This expands Collections to show its subcategories. Now expand the arrow for the subcategory "-Sequenceable", and from that expanded list, select the class named "OrderedCollection".

You should now see something like the picture below, with the Class Hierarchy pane now expanded to also select OrderedCollection, and a new green pane in the middle column with the title "OrderedCollection". This "class pane" represents the contents of the class OrderedCollection, including its methods, variables, and comment.

To look at a method in OrderedCollection, let's first expand the method category "accessing" (under Instance Methods) to show its methods. Now we can select the method "at:" from the method list.

You'll see that the source code for the "at:" method now fills up the right column of the Whisker window. We can edit, save, and manipulate this method with the pop-up menu in the method pane, just as with the other Smalltalk browsers.

However, let's try looking at another method. Without touching the "at:" selection in the class pane, select the "at:put:" method below it. Now both methods are selected, and both methods should be appear stacked together in the right column. In this "method stack", we are now looking at both methods at once!

Try selecting a few more methods, such as "capacity" and "size". Note that the shorter methods will take up less space in the method stack than the longer ones, so that as many complete methods as possible are shown. Also note that the methods in the stack appear in the same order that they appear in the class pane. To deselect a method, simply click on the method name again in the class pane. You may try expanding other method categories (or Class Methods), to look at the rest of the methods in the class at the same time.

This multi-selection capability also applies to classes themselves. Go back to the Class Hierarchy pane, expand OrderedCollection to show its subclasses, and select the SortedCollection subclass. A new blue SortedCollection class pane will appear in the middle column, the "class stack", along with the OrderedCollection class pane. You can now select methods in this class pane to view. Note that these methods will appear in a matching blue color, so that the SortedCollection methods are visually associated with the SortedCollection class pane, not the OrderedCollection pane.

Aside from methods, other elements of the class can also be viewed at the same time, such as the class comment and instance variables. When looking at the instance variables of a class, you'll see that Whisker attempts to determine the type of each variable. For example, with SortedCollection, it indicates that the instance variable "sortBlock" is a type of ">", which means that it most likely contains either nil or a BlockContext object. Whisker makes these guesses by collecting existing (SortedCollection) objects in Squeak and finding out what the instance variables tend to contain. This can be very useful when browsing unfamiliar classes.

Using Menus

Like other browser windows in Squeak, Whisker makes use of pop-up menus in the various window panes. However, the menus in Whisker work a little differently.

For example, try pressing the menu button in the Class Hierarchy pane. (The menu button is the secondary or "yellow" button of the mouse, normally the middle button on a 3-button mouse, the right button on a 2-button mouse, or option-mouse click on a Mac.)

You'll see that a pop-up menu appears, as in the figure below. However, note that a box is drawn around the list item which the mouse was clicked on, in this case "ColorMap", and that the menu has "Class ColorMap" as its title. In other words, this pop-menu specifically operates on the class ColorMap. If you select "class references" from this menu, it will search for references to the class ColorMap. On the other hand, the menu items in the bottom section of the menu will tend to not be specific to the clicked-on item, such as "find class...".

Similarly, if we go to one of the class panes and menu-click on a method name, such as "at:put:" in OrderedCollection, the pop-up menu will appear with the title "Method at:put:". Several menu operations appear here which are relevant to methods, such as finding senders and implementors of the method. Menu-clicking on another method brings up a similar menu. But if we menu-click on a method category such as "accessing", a different menu appears, with operations for method categories. There are also different menus for instance variables and other item types.

You may notice that there is a distinction between selectable list items (such as methods and classes) which open a new pane when selected (left-clicked), and non-selectable items (such as categories), which do not open a new pane. These selectable list items appear in black to indicate that they are selectable, while non-selectable items appear in other colors such as dark blue, green or brown. Attempting to select (left-click) a non-selectable item will bring up its pop-up menu instead.

(You may occasionally see disabled menu items here and there... for the most part these are features which have not yet been implemented in this version of Whisker.)

Editing Smalltalk Code and Creating Classes

To edit an existing method in Whisker, you can simply edit the text contents of the method, and then save/accept the method with the pop-up menu in the method pane.

To create a new method for a class, one simple trick (which works in the other Smalltalk browsers) is to edit an existing method and change its name (in bold) at the top of the method, and then save/accept the new method.

However, if you don't like this approach, or if you need to create a new method in an empty category, you can use the "new method..." operation in the method category pop-up menu. This will prompt you for the method name and create an empty method with the name for you to edit. (Depending on your version of Whisker, if for some reason the new method doesn't show up in the list, you may need to collapse and re-expand the method category contents.)

If you are starting with a newly created class, you will first need to create a method category before you can add new methods. To create a new Instance-side method category, menu-click on the "Instance Methods" item in the class pane and select "new category..." from the menu.

Continuing to work backwards, if you want to create a new class, for now you'll have to use the more traditional technique used in the regular Smalltalk browsers. You can click on the Definition item in a class pane, and then edit the names of the parent class and the class to be created, the instance variables, category, etc., and then save/accept the new definition. (Depending on your version of Whisker, you may need to collapse and re-expand the Class Hierarchy to get the new class to appear.) There will probably be a menu-driven alternative to creating a class in an upcoming release of Whisker, see the Whisker home page (below) for details on current/upcoming releases.

To add, remove or rename instance or class variables, for now you will also need to select the Definition item in the class pane, and edit the variables in the definition template.

Other Features

A special feature of the Whisker browser is its support for method version browsing.

If you save a method more than one time, you'll notice that an expandable arrow will appear to the left of the method name in the class pane. Expanding this arrow will reveal the history of the versions of this method, similar to the "versions" menu item in other Squeak browsers.

Beyond the regular Squeak versions browser, Whisker gives you the ability to view any or all of the method versions at the same time, and also to compare the differences between any of the versions. This can be very useful when trying to merge changes made by more than one person to the same method. The picture below shows three different versions of the method AbstractHierarchicalList>>genericMenu: being compared with each other.

To try an example of versions browsing, create a new method called something harmless like "myMethod" on the class OrderedCollection (or any other class). Add a new comment or line of code to the method, and save/accept the method. Add another comment or line of code in a random spot, and save again. Repeat this 5 or 6 times. If you expand the arrow by the method name in the class pane, you'll see each version which you just saved listed individually.

By default, "diffs" are shown, which shows the differences in the method text between the selected version and a previous version. If you only select one method version to view, it will show its diffs relative to the immediately previous version. However, if you select two method versions (say, the 2nd and the 4th one in the list), it will show the diffs between version #2 and version #4, ignoring version #3. You could even select versions #2, #4 and #7 and see the diffs from 2 to 4, and 4 to 7 at the same time. Diffs can be turned on and off globally with the diffsInChangeList browsing preference (see below).

Preferences

In every list pane pop-up menu in Whisker, there's a menu item "whisker preferences" which brings up the Squeak preferences dialog with a special Whisker page of preferences. To see what these do, move the mouse over each preference to bring up a balloon help description.

For example, the showWhiskerMethodTitles preference, if turned on, will place a titlebar above every method pane (which can be handy if you want to use the close boxes in the method titlebars, but otherwise wastes space). You may need to close currently open panes (or simply close and re-open Whisker) for most of these preferences to properly take effect.

There are also other non-Whisker preferences scattered throughout the preferences dialog which can still be relevant to Whisker, such as the diffsInChangeList or browseWithPrettyPrint preferences in the "browsing" category. Also, if you already use the inboardScrollbars preference in the "scrolling" category, you may also want to try the hiddenScrollbars preference, which makes it visually more obvious when a method is completely shown in its pane in Whisker.

Whisker Home Page

That's it for the quick tour of Whisker. For the most up-to-date releases and additional information on Whisker, see the Whisker home page at http://www.mindspring.com/~dway/smalltalk/whisker.html.