View Tab : The Implementation - Part 1

This post discusses the implementation of the View Tab 1.0. The description and the download link for the extension can be found here. The file structure of the extension is not discussed here, as it is not very different from the simple Hello World extension described in the MDN XUL School Tutorial, except that I haven't used a jar archive to store the chrome elements, and since there are no files under skin and locale, I've omitted these directories and included the content files directly in the chrome directory. The directory tree for the extension is shown below:

ViewTab.xpi :-

• chrome.manifest
• install.rdf
• chrome :-
  
  • viewTab.xul
  • viewTab.js

The file viewTab.xul is the overlay for the main browser window. It does not introduce any new elements into the window, the only purpose served by it is to include the script from the file viewTab.js.

The script under viewTab.js is responsible for creating and showing the preview thumbnails. To view the source code for this file, if you have the add-on installed, type chrome://viewtab/content/viewTab.js in the URL bar and hit Enter. The code is discussed below.

The first block of code declares some global parameters.

//Some Parameters
var VIEWTAB_ASPECT_RATIO = 16/9;
var VIEWTAB_SIZE_RATIO = .3;
var VIEWTAB_SNIP_RATIO = .55;
var VIEWTAB_SCROLL_PREV=true;
var VIEWTAB_NOPREV_SELECTED=true;

VIEWTAB_ASPECT_RATIO is the aspect ratio i.e. width to height ratio of the preview thumbnail(PT). It is set to 16:9.

VIEWTAB_SIZE_RATIO is the ratio of the height of the PT to the screen height. It is set to 0.3, i.e. the height of the PT is 30% of the screen height.

VIEWTAB_SNIP_RATIO is ratio of the height of the portion of the tab which is actually shown in PT to the actual height of the tab. It is set to 0.55, which means only 55% of the tab is actually shown in the PT.

VIEWTAB_SCROLL_PREV decides whether the preview in the PT is scrolled to the current position of the page in a tab. If it is set to false, then the PT will always show the top of the page in the tab, even if it is scrolled to a different position. It is set to true by default.

VIEWTAB_NOPREV_SELECTED, when set to true, ensures that a PT is not shown for the currently selected tab.

These parameters should probably have been provided as editable preferences, to allow the user to customize the add-on according to their needs, but weren't, as I wasn't familiar with handling preferences when I created the first version of the add-on. I plan to incorporate this, along with a few other things in a later version of the add-on.

The next block of code declares a new namespace to avoid naming conflicts with already existing functions and objects.

/* Creating the viewTab namespace */
if ("undefined" == typeof(viewTab)){
   var viewTab={
   }
}

Next, the function that creates a preview thumbnail for a given tab, is defined.

/* Function to create Thumbnail Preview */
viewTab.createPreview = function (aTab,firsttab){

The function takes two arguments, the first being the XUL tab object for which the PT is to be created, and the second a boolean firsttab, which indicates whether the tab provided is the first among all tabs. The next line uses firsttab, as follows,

if(firsttab) aTab = gBrowser.tabContainer.
getElementsByClassName("tabbrowser-tab")[0];

gBrowser is the main tabbrowser element in the browser window, and contains all the tabs, and their corresponding browsers. The tabContainer elements is, as the name suggests, the container for the tabs, whose class attribute is set to "tabbrowser-tab" , which allows them to be selected into an array using the getElementsByClassName() method of the tabContainer element. The first tab in the list is obviously stored under the index 0, and so is retrieved by attaching [0] at the end of the array. Thus, if firsttab is true, aTab is set to be first tab in the browser.

This line of code, however, as most people will realize, is not required in the first place, as aTab, passed as an argument to the function, should already be set to the tab for which the PT is to be created, irrespective of whether it is the first tab or not. But, Firefox, for some reason throws an error "aTab is not defined" when the first tab in the browser is passed to the function. This happens only with the first tab, the function works fine for all other tabs. Hence, this corrective measure makes sure we do not receive such an error.


More in the next post.