photo
Jordan Sissel
geek

Wed, 14 Feb 2007

Vertical tabs in Firefox 2

Update: Vertigo has been released for Firefox 2! Yay :)

The 'Vertigo' extension doesn't work in Firefox 2. Some googling finds a few solutions, all of which suck. That said, I think I'm going to dive back into playing with firefox and make an extension.

So far I've managed to get vertical tabs with a scrollbar that pops up when there are more-than-displayable tabs open. However, much of tonight left me extremely frustrated.

Development with Firefox seems to be exceedingly dependent on trial-and-error. Save whatever files, restart firefox. Repeat. Repeat. Repeat. Firefox is not lightning quick to startup, and I'm not sure how to edit extensions that are currently running without a restart. Maybe there's a debugger I don't know about. Mostly I'd just like to explore the DOM while it's running (Firefox's XUL DOM, not the current web page).

All I wanted to add (tonight) was the ability to choose what side of the browser the tab bar went on.

The following CSS will move the bar to the right (with my extension):

#appcontent tabbox {
  -moz-box-direction: reverse;
}
Also doing <tabbox dir="reverse" in the XUL works too. I need to set this in javascript.

This means tabbox.style.MozBoxDirection = "reverse" should work, right? Here's everything I tried:

var tabbox = document.getElementsByTagName("tabbox")[0];

// Doesn't work (trying either 'reverse' or 'rtl'):
tabbox.style.MozBoxDirection = "reverse";
tabbox.style.direction = "reverse";
tabbox.dir = "reverse";
tabbox.direction = "reverse";

//Try to tell the vbox  (tab list) to order after/before the browser pane:
tabbox.childNodes[0].ordinal = 0;
tabbox.childNodes[0].ordinal = 2;
I'm at a total loss. My lack of familiarity with XUL is hurting me here. What's confusing, is the following code outputs "ltr" (left to right), meaning tabbox.style.direction = "rtl" should work:
  var x = window.getComputedStyle(tabbox, ""):
  alert(x.getPropertyValue("direction")):
Googling for 'tabbox dir' and other variants doesn't show much promise. Wrapping the contents of the tabbox in an hbox and attempting to tweak the direction of the hbox fails, too.

The following code produces something interesting:

alert(tabbox.childNodes[0].nodeName + " / " + tabbox.childNodes[1].nodeName);
The output is "tabs / tabpanel". It should be "vbox / splitter" or something close to that.

Further investigation lands me at gBrowser.mTabBox which has the correct children (has the full xul dom within the real tabbox. where tabbox.childNodes[0] should be a vbox, and it is only when I access mTabBox, not through the tag lookup.

gBrowser.mTabBox.dir = "reverse";
And voila, the tab bar is on the right.

I'm not sure why the following statements yield different values:

 document.getElementsByTagName("tabbox")[0] != gBrowser.mTabBox
Very strange... These should point to the same objects, and while they both are 'tabbox' elements, their children are quite different (the former is an element-trimmed version containing only tabs and tabpanel).

Anybody? ;)

Comments: 4 (view comments)
Tags: , ,
Permalink: /geekery/firefox-2-vertical-tabs-extension-stuff
posted at: 04:13


4 responses to 'Vertical tabs in Firefox 2'

candice posted at Wed Feb 14 20:41:10 2007...
There are debugger extensions...Look at "Extension Developer" stuff.

(Which is kinda part of the problem, but...)

The beast in black posted at Fri Jun 15 05:40:37 2007...
Try firebug (https://addons.mozilla.org/en-US/firefox/addon/1843). Most of the guys at my company swear by the firebug extension for debugging in the browser...

Jordan Sissel posted at Fri Jun 15 13:44:10 2007...
iirc firebug only lets you debug javascript running in a page, not the browser xul/javascript itself (like, the tab bar). I could be wrong.

Sebastian posted at Fri Aug 31 22:36:30 2007...
Just a thought,
did you try loading the browser XUL within a running Firefox and debug that instead? If you change something, reloading the 'page' (the embedded browser-within-a-browser really) just might reload with the changes. Perhaps memory cache should be turned off as well ...


Leave a reply

You need javascript enabled to use this form. Anti-spam efforts ongoing. Also, if the comment doesn't show up, it's because the form expired. Go back and copy your comment, reload the form, and resubmit. Apologies if this is a hassle, I'm just playing with antispam methods right now. If this insists on not working, please email me about it.

Name (required)
E-mail (optional. Not posted or recorded anywhere, ever)
URL (also optional)
Comment:


Search this site

Navigation

Metadata

Home About Resume My Code

Articles

ARP Security Dynamic DNS with DHCP OpenLDAP+Kerberos+SASL PPP over SSH SSH Security: /bin/false Week of Unix Tools Work Efficiency

Projects

fex firefox tabsearch firefox urledit grok keynav liboverride newpsm (FreeBSD) nis2ldap pam_captcha poor man's backup Solaris audio utility xboxproxy xdotool xmlpresenter xpathtool misc scripts

Presentations

Yahoo! Hack Day '06 Unix Essentials Vi/Vim Essentials

Tag Cloud

Calendar

< February 2007 >
SuMoTuWeThFrSa
     1 2 3
4 5 6 7 8 910
11121314151617
18192021222324
25262728   

Friends

BarCamp Kent Brewster Tantek Çelik John Resig Wesley Shields Tyler Shields

Technorati