Difference between revisions of "Development:Third-Party Tab Themes"
(initial porting of japser's documentation) |
(update for 24px tall tabs in 2.0; fudge the graphics and only actually change the text) |
||
| (12 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
| − | + | The tabbed browsing UI of Camino 1.0 and newer allows the use of custom of themes. The theming system for the tabs was designed to be both simple and flexible. | |
| + | <!--'''''N.B.''' Note that these instructions and illustrations are correct as of Camino 1.5. There have been significant changes to the tab system in nightly builds following Camino 1.5. This documentation will be updated for such changes as time allows.'' | ||
| + | |||
| + | Forum thread where updates are announced: http://forums.mozillazine.org/viewtopic.php?t=556990 | ||
| + | --> | ||
==How does it work?== | ==How does it work?== | ||
| − | + | Camino's tab bar consists of one main image (<code>tab_bar_bg</code>) tiled across the width of the tab bar. The various parts of the tabs and the tab divider (<code>tab_button_divider</code>) are overlaid on top of the tab bar background (base). | |
| + | |||
| + | |||
| + | [[image:tab_bar_overview.png|Tab Layout Diagram]] | ||
| + | |||
| + | |||
| + | The tabs themselves are made up of several different components, as illustrated below: | ||
| + | |||
| + | |||
| + | [[image:tab_bar_components.png|Our Keen Tabs]] | ||
| + | |||
| − | < | + | * A - <code>tab_bar_bg.tiff</code> - 24 px high |
| + | * B - <code>tab_button_divider.tiff</code> - 2 px wide | ||
| + | * C - Tri-state tab close buttons | ||
| + | ** <code>tab_close.tiff</code> - 14 x 14 px | ||
| + | ** <code>tab_close_hover.tiff</code> - 14 x 14 px | ||
| + | ** <code>tab_close_pressed.tiff</code> - 14 x 14 px | ||
| + | * D - Dual-state inactive tab | ||
| + | ** <code>tab_bar_bg.tiff</code> - 2 px wide | ||
| + | ** <code>tab_hover.tiff</code> - 2 px wide | ||
| + | * E - <code>tab_left_side.tiff</code> - 2 px wide | ||
| + | * F - <code>tab_active_bg.tiff</code> - 2 px wide | ||
| + | * G - <code>tab_right_side.tiff</code> - 2 px wide | ||
| + | * H - <code>tab_menu_button.tiff</code> - 17 x 18 px | ||
| + | * I - <code>tab_scroll_button_left.tiff</code> - 18 x 18 px | ||
| + | * J - <code>tab_scroll_button_right.tiff</code> - 18 x 18 px | ||
===Active Tab=== | ===Active Tab=== | ||
| − | The active tab consists of three objects. The sides of the tabs are painted using <code>tab_left_side</code> and <code>tab_right_side</code>. The middle part of the active tab is painted using <code>tab_active_bg</code> as a pattern. | + | The active tab consists of three objects. The sides of the tabs are painted using <code>tab_left_side</code> and <code>tab_right_side</code>. The middle part of the active tab is painted using <code>tab_active_bg</code> as a pattern. |
| − | + | ||
| − | |||
===Tab Close Buttons=== | ===Tab Close Buttons=== | ||
| − | The close tab button has three separate states: one for the general inactive state, one for the hover state, and one for the clicked state. The | + | The close tab button has three separate states: one for the general inactive state, one for the hover state, and one for the clicked state. (The actual close buttons are only 12px wide; there is 1px of transparent margin on either side of the visible image.) The buttons are 4px from the edge of the tab and 4px from the edge of the site icon/progress spinner. |
| + | |||
| + | ===Tab Scroll Buttons=== | ||
| + | |||
| + | The tab scroll buttons appear at the left edge and one-from-the-right-edge when there are more tabs than can be displayed in the current window-width. | ||
| + | |||
| + | ===Tab Menu Button=== | ||
| + | |||
| + | The tab menu button appears when there are more tabs than can fit in the current window-width. It is painted in the remaining space between the right scroll button and the right edge of the tab bar. | ||
===Tab Bar=== | ===Tab Bar=== | ||
| − | Because the <code> | + | The base for the tab bar is <code>tab_bar_bg</code>, which is painted as a pattern (tiled) across the entire width of the bar. Then, at the ends of every tab, the <code>tab_button_divider</code> is painted. <br /> |
| + | |||
| + | Because the <code>tab_bar_bg</code>, <code>tab_active_bg</code> and <code>tab_hover</code> images are painted as patterns, there is great freedom in what can be done. These patterns can be made as wide as you wish, which can increase your flexibility when designing tab themes. It is also possible to make the divider and side images wider than two pixels, but this could cause the expected behavior to change. | ||
Latest revision as of 21:14, 31 October 2009
The tabbed browsing UI of Camino 1.0 and newer allows the use of custom of themes. The theming system for the tabs was designed to be both simple and flexible.
Contents
How does it work?
Camino's tab bar consists of one main image (tab_bar_bg) tiled across the width of the tab bar. The various parts of the tabs and the tab divider (tab_button_divider) are overlaid on top of the tab bar background (base).
The tabs themselves are made up of several different components, as illustrated below:
- A -
tab_bar_bg.tiff- 24 px high - B -
tab_button_divider.tiff- 2 px wide - C - Tri-state tab close buttons
tab_close.tiff- 14 x 14 pxtab_close_hover.tiff- 14 x 14 pxtab_close_pressed.tiff- 14 x 14 px
- D - Dual-state inactive tab
tab_bar_bg.tiff- 2 px widetab_hover.tiff- 2 px wide
- E -
tab_left_side.tiff- 2 px wide - F -
tab_active_bg.tiff- 2 px wide - G -
tab_right_side.tiff- 2 px wide - H -
tab_menu_button.tiff- 17 x 18 px - I -
tab_scroll_button_left.tiff- 18 x 18 px - J -
tab_scroll_button_right.tiff- 18 x 18 px
Active Tab
The active tab consists of three objects. The sides of the tabs are painted using tab_left_side and tab_right_side. The middle part of the active tab is painted using tab_active_bg as a pattern.
Tab Close Buttons
The close tab button has three separate states: one for the general inactive state, one for the hover state, and one for the clicked state. (The actual close buttons are only 12px wide; there is 1px of transparent margin on either side of the visible image.) The buttons are 4px from the edge of the tab and 4px from the edge of the site icon/progress spinner.
Tab Scroll Buttons
The tab scroll buttons appear at the left edge and one-from-the-right-edge when there are more tabs than can be displayed in the current window-width.
Tab Menu Button
The tab menu button appears when there are more tabs than can fit in the current window-width. It is painted in the remaining space between the right scroll button and the right edge of the tab bar.
Tab Bar
The base for the tab bar is tab_bar_bg, which is painted as a pattern (tiled) across the entire width of the bar. Then, at the ends of every tab, the tab_button_divider is painted.
Because the tab_bar_bg, tab_active_bg and tab_hover images are painted as patterns, there is great freedom in what can be done. These patterns can be made as wide as you wish, which can increase your flexibility when designing tab themes. It is also possible to make the divider and side images wider than two pixels, but this could cause the expected behavior to change.
