This section compares the Tonic l&f against the Metal l&f. This includes a detailed discussion of Metal’s most severe problems, and how Tonic addresses them.
| Two plain and simple buttons. Note how the etched border of the Metal buttons distracts from their purpose and makes them bulkier | ||
 |
 |
|
| The toolbar. This is one of the most visible components in a standard application. It should be slim and clean. These images expose one of Metal’s annoying flaws: The ‘bumped’ surfaces. Conceptionally they make sense, but visually they add distracting noise to the whole visual appearance. | ||
 |
 |
|
|
The split pane is crucial for complex application layouts. It has a draggable separating edge between the two panels it contains. With Metal, this edge is again bunped and distracts attention from the actual content. Also, as you can see, nesting split panes does not work well with Metal.
With Tonic, attention was paid that nesting works seamlessly, and that the separating edge itself is clean. A special ‘shadowy’ border has been implemented which can be applied to components inside a split pane. This border makes the panels inside a split pane appear to float on the application surface. |
||
 |
 |
|
| The tree view of Tonic comes with new, cleaner icons, and discards the rather bizarre ‘levers’ from Metal. | ||
 |
 |
|
| The Metal scrollbars are quite an annoyance: They have an etched border, which by itself looks awkward enough. However, when put inside a component with a second border, or when close to another edge, scrollbars simply look cluttered and messy. Tonic has a clean single pixel wide border, and the border is automatically removed where the scrollbar touches the border of a parent component. | ||
 |
 |
|
| With Tonic menues, the menu items with and without icons are aligned. | ||
 |
 |
|
| The dented look of Metal tabs has been irritating for many users. Tonic replaces this look with a clean, single-pixel line look. The currently active tab is highlighted by a lighter background color, and optionally by a 2 pixel edge, which further increases its visibility. | ||
 |
 |
|
| Checkboxes and radio buttons: Again, the etched borders have been replaced by a clean one-pixel line. The default font is lighter in Tonic, and the default heights are smaller, thereby leading to a condensed look where visual grouping is easier. | ||
 |
 |
|
| Metal spinners actually have two borders, making them appear twice as deep as any other GUI element. The Metal progress bar is ambiguous, as it has a shadow on the N/W side, but no highlight on the S/E side. | ||
 |
 |
|
|
The Metal option pane does not work well for two reasons: The alignment of the icon, the message, and the buttons is not optimal (for example, the left edge of the buttons does not align with the left edge of the message); and the default icons are inconsistent in color, not very easily recognized, and visually boring.
Tonic comes with high attention icons resembling comic bubbles. They draw attention to the message, and can be discriminated easily. |
||
 |
||
 |
||
| The file chooser has basically remained unchanged (although the look uses the same, new GUI elements as everywhere else in Tonic). However, the feel has been altered in a subtle, yet important way: Double-clicking does not trigger a renaming action, as it often and very annoyingly does in Metal. | ||
 |
||
 |
||
Also note how Tonic uses the file icons of the operating system, where possible.