Development:Third-Party Tab Themes - Revision history

Sardisson: update for 24px tall tabs in 2.0; fudge the graphics and only actually change the text

2009-11-01T04:14:38Z

update for 24px tall tabs in 2.0; fudge the graphics and only actually change the text

Sardisson: add forum thread in comments so I don't have to hunt for it next time

2008-05-26T03:32:47Z

add forum thread in comments so I don't have to hunt for it next time

Sardisson: hide the note about out-of-dateness

2008-05-25T18:56:07Z

hide the note about out-of-dateness

Sardisson: /* How does it work? */ update for 1.6

2008-05-25T18:51:19Z

How does it work?: update for 1.6

Sardisson: /* Tab Close Buttons */ corrections

2008-01-02T06:46:35Z

Tab Close Buttons: corrections

Sardisson: /* Tab Close Buttons */ add px from ian

2008-01-02T06:41:50Z

Tab Close Buttons: add px from ian

Sardisson: now correct for 1.5 :p

2007-08-30T01:34:48Z

now correct for 1.5 :p

Sardisson: /* Tab Bar */ typo

2007-08-30T01:33:48Z

Tab Bar: typo

Sardisson: reorganize this to make a little more sense

2007-08-28T06:19:22Z

reorganize this to make a little more sense

Sardisson: /* Tab Bar */ use image names

2007-08-28T06:12:10Z

Tab Bar: use image names

@@ Line 19: / Line 19: @@
-* A - <code>tab_bar_bg.tiff</code> - 22 px high
+* 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

@@ Line 2: / Line 2: @@
 <!--'''''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.''
 -->
 ==How does it work?==

@@ 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.''
+<!--'''''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.''
+-->
 ==How does it work?==

@@ Line 8: / Line 8: @@
-[[image:tab_theme2.jpg|Tab Layout Diagram]]
+[[image:tab_bar_overview.png|Tab Layout Diagram]]
@@ Line 17: / Line 17: @@
-* A - <code>tab_bar_bg.tif</code> - 22 px high
+* A - <code>tab_bar_bg.tiff</code> - 22 px high
-* B - <code>tab_button_divider.tif</code> - 2 px wide
+* B - <code>tab_button_divider.tiff</code> - 2 px wide
 * C - Tri-state tab close buttons
-** <code>tab_close.tif</code> - 14 x 14 px
+** <code>tab_close.tiff</code> - 14 x 14 px
-** <code>tab_close_hover.tif</code> - 14 x 14 px
+** <code>tab_close_hover.tiff</code> - 14 x 14 px
-** <code>tab_close_pressed.tif</code> - 14 x 14 px
+** <code>tab_close_pressed.tiff</code> - 14 x 14 px
 * D - Dual-state inactive tab
-** <code>tab_bar_bg.tif</code> - 2 px wide
+** <code>tab_bar_bg.tiff</code> - 2 px wide
-** <code>tab_hover.tif</code> - 2 px wide
+** <code>tab_hover.tiff</code> - 2 px wide
-* E - <code>tab_left_side.tif</code> - 2 px wide
+* E - <code>tab_left_side.tiff</code> - 2 px wide
-* F - <code>tab_active_bg.tif</code> - 2 px wide
+* F - <code>tab_active_bg.tiff</code> - 2 px wide
-* G - <code>tab_right_side.tif</code> - 2 px wide
+* G - <code>tab_right_side.tiff</code> - 2 px wide
-* H - <code>tab_overflow.tif</code> - 16 x 16 px
+* H - <code>tab_menu_button.tiff</code> - 17 x 18 px
 ===Active Tab===
@@ Line 37: / Line 39: @@
 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.
-===Overflow Menu Button===
+===Tab Scroll Buttons===
-The overflow menu button is painted in the remaining space on the tab bar.
+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 Bar===

@@ Line 35: / Line 35: @@
 ===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.  They are 4px from the edge of the tab and 4px from the edge of the site icon/progress spinner.
+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.
 ===Overflow Menu Button===

@@ Line 42: / Line 42: @@
 ===Tab Bar===
-The base for the tab bar is <code>tab_bar_bg</code>, which painted as a pattern across the entire width of the bar. Then, at the ends of every tab, the <code>tab_button_divider</code> is painted. <br />
+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.

← Older revision		Revision as of 06:12, 28 August 2007
Line 33:		Line 33:

	===Tab Bar===		===Tab Bar===
−	Because the <code>~~bar_bg~~</code>, <code>~~active_bg~~</code> and ~~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.	+	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.