Search this site


Metadata

Articles

Projects

Presentations

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? ;)

Pyblosxom single-entry page title plugin

The page titles pyblosxom provides are usually great. However, when there is only one entry displayed, I feel it would be better to rely on that entry's title.

I wrote a very short plugin to do just that. Turns out the plugin api for pyblosxom is quite easy to understand, and this hack was only about 10 lines.

pagetitle.py adds a new variable which will contain the standard page title, unless there is only one entry in view. If there is only one entry in view, the page title is augmented with the story title aswell. This makes search engine results and browsers happier, as they can recognize what your page is about by the title. User experience good, also good for search engines.

The new variable you want to use is: $blog_title_or_entry_title

If you want to get a better idea of what this plugin does, you can click the permalink below to view only this entry. The page title (in the url bar) should now reflect this entry's title.

download pagetitle.py