Changes

Jump to: navigation, search

Dive into Mozilla Modifying Firefox using an Extension Lab

2,833 bytes added, 11:35, 14 March 2007
Planning the extension
return t;
After the new tab is created and appended to the list, an '''event''' is '''[http://developer.mozilla.org/en/docs/DOM:element.dispatchEvent dispatched'''] to the new tab element. The developers of tabbrowser.xml wanted their code to be extensible; that is, they wanted to provide a way for future developers to extend the code by inserting a hook. In this case, after a tab is created an opportunity is provided to do ''something''. Their foresight makes our job much easier.
===How to move a tab?===
Having already studied and worked with the code in '''addTab''', and knowing that new tabs are always appended to the end of the list, we could do this:
// In an extension, gBrowser is a global reference to the tabbrowser element
var container = gBrowser.tabContainer;
var lastIndex = container.childNodes.length - 1;
var newTab = container.childNodes[lastIndex];
However, looking back at the event dispatching code for '''TabOpen''' we see that the event is dispatched ??? to t, where t is the newly created tab:
t.dispatchEvent(evt);
This means that in the event system, we'll be able to listen for and capture this event, and in so doing get at t (i.e., the tab object) via the event's '''target'''. Three lines of code become one:
var newTab = e.target;
 
We'll discuss this code in more detail below.
===How to get the index of the currently selected tab?===
 
We know that in order to move a tab using tabbrowser's '''moveTabTo''' method we need the tab object--which we now have--and the index where it should be placed. Looking through the code for tabbrowser again, we see [http://lxr.mozilla.org/seamonkey/source/toolkit/content/widgets/tabbrowser.xml#1453 references] to code like this:
 
var currentIndex = this.mTabContainer.selectedIndex;
 
Obviously we can't use '''this''' outside the context of tabbrowser, so in an extension we use '''gBrowser''' instead to get a reference to tabbrowser:
 
gBrowser.tabContainer.selectedIndex
 
If we want to get the tab to the right of the current tab, we simply do this:
 
var positionPlusOne = gBrowser.tabContainer.selectedIndex + 1;
 
Are we done? Not quite. This code will work, but the problem we now face is that our code will run ''after'' the tab has been placed at the end of the list, when '''TabOpen''' is dispatched. As soon as the new tab is created, it becomes the active tab. That means that '''selectedIndex''' will always be the index of the last tab, and moving the last tab one to the right is nonsense.
 
What we ''really'' need is the position of the tab that we were on when he made the new tab. We even know how to get this information, using '''tabContainer.selectedIndex'''. What we don't know is how to get this information, since it is lost by the time our code runs.
 
===Saving tab position state===
 
It's clear that we need data from the past--the position of the tab we were on before this new tab was created. We can't go back in time, so we'll have to store this data in a variable for inspection later.
 
In order to accomplish this, we need another event that tells us when a tab has become the active tab so we can store the position state. A quick search through tabbrowser for other events (e.g., search on '''"dispatchEvent"''') shows these possibilities:
 
* TabSelect
* TabOpen
* TabClose
* NewTab
* TabMove
 
The first event looks interesting. All we need to do now is have a variable that gets updated with the value of '''tabContainer.selectedIndex''' every time '''TabSelect''' occurs. Then, we can use this variable's value to calculate the desired position in '''moveTabTo'''.
 
Finally, we've got all the pieces in place and can write some code.
 
 
 
Question: does moving a tab break our tab position state code? Do we also need to update position on TabMove???

Navigation menu