verticaltabs.jsm

/* -*- Mode: javascript; indent-tabs-mode: nil -*- */
/* ***** BEGIN LICENSE BLOCK *****
 * Version: MPL 1.1/GPL 2.0/LGPL 2.1
 *
 * The contents of this file are subject to the Mozilla Public License Version
 * 1.1 (the "License"); you may not use this file except in compliance with
 * the License. You may obtain a copy of the License at
 * http://www.mozilla.org/MPL/
 *
 * Software distributed under the License is distributed on an "AS IS" basis,
 * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
 * for the specific language governing rights and limitations under the
 * License.
 *
 * The Original Code is Vertical Tabs.
 *
 * The Initial Developer of the Original Code is
 * Philipp von Weitershausen.
 * Portions created by the Initial Developer are Copyright (C) 2011
 * the Initial Developer. All Rights Reserved.
 *
 * Contributor(s):
 *
 * Alternatively, the contents of this file may be used under the terms of
 * either the GNU General Public License Version 2 or later (the "GPL"), or
 * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
 * in which case the provisions of the GPL or the LGPL are applicable instead
 * of those above. If you wish to allow use of your version of this file only
 * under the terms of either the GPL or the LGPL, and not to allow others to
 * use your version of this file under the terms of the MPL, indicate your
 * decision by deleting the provisions above and replace them with the notice
 * and other provisions required by the GPL or the LGPL. If you do not delete
 * the provisions above, a recipient may use your version of this file under
 * the terms of any one of the MPL, the GPL or the LGPL.
 *
 * ***** END LICENSE BLOCK ***** */

Components.utils.import("resource://gre/modules/Services.jsm");

let console = (Components.utils.import("resource://gre/modules/devtools/Console.jsm", {})).console;

const EXPORTED_SYMBOLS = ["VerticalTabs"];

const NS_XUL = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
const TAB_DROP_TYPE = "application/x-moz-tabbrowser-tab";

/*
 * Vertical Tabs
 *
 * Main entry point of this add-on.
 */
function VerticalTabs(window) {
    this.window = window;
    this.document = window.document;
    this.unloaders = [];
    this.init();
}

VerticalTabs.prototype = {
    init: function() {
        this.window.VerticalTabs = this;
        this.unloaders.push(function() {
            delete this.window.VerticalTabs;
        });

        this.sss = Components.classes["@mozilla.org/content/style-sheet-service;1"]
                   .getService(Components.interfaces.nsIStyleSheetService);
        this.ios = Components.classes["@mozilla.org/network/io-service;1"]
                   .getService(Components.interfaces.nsIIOService);

        this.installStylesheet("resource://verticaltabs/override-bindings.css");
        this.installStylesheet("resource://verticaltabs/skin/base.css");
        this.applyThemeStylesheet();
        this.unloaders.push(this.removeThemeStylesheet);

        this.rearrangeXUL();
        this.observeRightPref();
        this.observeThemePref();
    },

    installStylesheet: function(uri) {
        uri = this.ios.newURI(uri, null, null);
        this.sss.loadAndRegisterSheet(uri, this.sss.USER_SHEET);
    },

    applyThemeStylesheet: function() {
        this.theme = Services.prefs.getCharPref("extensions.verticaltabs.theme");
        this.installStylesheet(this.getThemeStylesheet(this.theme));
    },

    removeThemeStylesheet: function() {
        var uri = this.ios.newURI(this.getThemeStylesheet(this.theme), null, null);
        this.sss.unregisterSheet(uri, this.sss.USER_SHEET);
    },

    getThemeStylesheet: function(theme) {
        var stylesheet;
        switch (theme) {
        case "default":
            switch(Services.appinfo.OS) {
            case "WINNT":
                stylesheet = "resource://verticaltabs/skin/win7/win7.css";
                break;
                
            case "Darwin":
                stylesheet = "resource://verticaltabs/skin/osx/osx.css";
                break;
                
            case "Linux":
                stylesheet = "resource://verticaltabs/skin/linux/linux.css";
                break;
            }
            break;
            
        case "dark":
            stylesheet = "resource://verticaltabs/skin/dark/dark.css";
            break;
            
        case "light":
            stylesheet = "resource://verticaltabs/skin/light/light.css";
            break;
        }

        return stylesheet;
    },

    rearrangeXUL: function() {
        const window = this.window;
        const document = this.document;

        // Move the bottom stuff (findbar, addonbar, etc.) in with the
        // tabbrowser.  That way it will share the same (horizontal)
        // space as the brower.  In other words, the bottom stuff no
        // longer extends across the whole bottom of the window.
        let contentbox = document.getElementById("appcontent");
        let bottom = document.getElementById("browser-bottombox");
        contentbox.appendChild(bottom);

        // Create a box next to the app content. It will hold the tab
        // bar and the tab toolbar.
        let browserbox = document.getElementById("browser");
        let leftbox = document.createElementNS(NS_XUL, "vbox");
        leftbox.id = "verticaltabs-box";
        browserbox.insertBefore(leftbox, contentbox);

        let splitter = document.createElementNS(NS_XUL, "splitter");
        splitter.id = "verticaltabs-splitter";
        splitter.className = "chromeclass-extrachrome";
        browserbox.insertBefore(splitter, contentbox);
        // Hook up event handler for splitter so that the width of the
        // tab bar is persisted.
        splitter.addEventListener("mouseup", this, false);

        // Move the tabs next to the app content, make them vertical,
        // and restore their width from previous session
        if (Services.prefs.getBoolPref("extensions.verticaltabs.right")) {
            browserbox.dir = "reverse";
        }

        let tabs = document.getElementById("tabbrowser-tabs");
        leftbox.insertBefore(tabs, leftbox.firstChild);
        tabs.orient = "vertical";
        tabs.mTabstrip.orient = "vertical";
        tabs.tabbox.orient = "horizontal"; // probably not necessary
        tabs.setAttribute("width", Services.prefs.getIntPref("extensions.verticaltabs.width"));

        // Move the tabs toolbar into the tab strip
        let toolbar = document.getElementById("TabsToolbar");
        toolbar.setAttribute("collapsed", "false"); // no more vanishing new tab toolbar
        toolbar._toolbox = null; // reset value set by constructor
        toolbar.setAttribute("toolboxid", "navigator-toolbox");
        leftbox.appendChild(toolbar);
        
        // Not sure what this does, it and all related code might be unnecessary
        /*
        window.TabsOnTop = window.TabsOnTop ? window.TabsOnTop : {};
        window.TabsOnTop.enabled = false;
        */

        let toolbar_context_menu = document.getElementById("toolbar-context-menu");
        toolbar_context_menu.firstChild.collapsed = true;
        toolbar_context_menu.firstChild.nextSibling.collapsed = true; // separator

        tabs.addEventListener("TabOpen", this, false);
        for (let i=0; i < tabs.childNodes.length; i++) {
            this.initTab(tabs.childNodes[i]);
        }

        this.window.addEventListener("resize", this, false);

        this.unloaders.push(function () {
            // Move the bottom back to being the next sibling of contentbox.
            browserbox.insertBefore(bottom, contentbox.nextSibling);

            // Move the tabs toolbar back to where it was
            toolbar._toolbox = null; // reset value set by constructor
            toolbar.removeAttribute("toolboxid");
            let toolbox = document.getElementById("navigator-toolbox");
            let navbar = document.getElementById("nav-bar");
            //toolbox.appendChild(toolbar);

            // Restore the tab strip.
            toolbox.insertBefore(toolbar, navbar);

            let new_tab_button = document.getElementById("new-tab-button");

            // Put the tabs back up dur
            toolbar.insertBefore(tabs, new_tab_button);
            tabs.orient = "horizontal";
            tabs.mTabstrip.orient = "horizontal";
            tabs.tabbox.orient = "vertical"; // probably not necessary
            tabs.removeAttribute("width");
            tabs.removeEventListener("TabOpen", this, false);

            // Restore tabs on top.
            /*
            window.TabsOnTop.enabled = Services.prefs.getBoolPref(
                "extensions.verticaltabs.tabsOnTop");
            */
            toolbar_context_menu.firstChild.collapsed = false;
            toolbar_context_menu.firstChild.nextSibling.collapsed = false; // separator

            // Restore all individual tabs.
            for (let i = 0; i < tabs.childNodes.length; i++) {
              let tab = tabs.childNodes[i];
              tab.removeAttribute("align");
              tab.maxWidth = tab.minWidth = "";
            }

            // Remove all the crap we added.
            splitter.removeEventListener("mouseup", this, false);
            browserbox.removeChild(leftbox);
            browserbox.removeChild(splitter);
            browserbox.dir = "normal";
            leftbox = splitter = null;
        });
    },

    initTab: function(aTab) {
        aTab.setAttribute("align", "stretch");
        aTab.maxWidth = 65000;
        aTab.minWidth = 0;
    },

    setPinnedSizes: function() {
        let tabs = this.document.getElementById("tabbrowser-tabs");
        // awfulness
        let numPinned = tabs.tabbrowser._numPinnedTabs;

        if (tabs.getAttribute("positionpinnedtabs")) {
            let width = tabs.boxObject.width;
            for (let i = 0; i < numPinned; ++i) {
                tabs.childNodes[i].style.width = tabs.boxObject.width + "px";
            }
        } else {
            for (let i = 0; i < numPinned; ++i) {
                tabs.childNodes[i].style.width = "";
            }
        }
    },

    onTabbarResized: function() {
        let tabs = this.document.getElementById("tabbrowser-tabs");
        this.setPinnedSizes();
        this.window.setTimeout(function() {
            Services.prefs.setIntPref("extensions.verticaltabs.width",
                                      tabs.boxObject.width);
        }, 10);
    },

    observeRightPref: function () {
        Services.prefs.addObserver("extensions.verticaltabs.right", this, false);
        this.unloaders.push(function () {
            Services.prefs.removeObserver("extensions.verticaltabs.right", this, false);
        });
    },

    observeThemePref: function() {
        Services.prefs.addObserver("extensions.verticaltabs.theme", this, false);
        this.unloaders.push(function() {
            Services.prefs.removeObserver("extensions.verticaltabs.theme", this, false);
        });
    },

    observe: function (subject, topic, data) {
        if (topic != "nsPref:changed") {
            return;
        }

        switch (data) {
        case "extensions.verticaltabs.right":
            let browserbox = this.document.getElementById("browser");
            if (browserbox.dir != "reverse") {
                browserbox.dir = "reverse";
            } else {
                browserbox.dir = "normal";
            }
            break;
          
        case "extensions.verticaltabs.theme":
            console.log("updating theme");
            this.removeThemeStylesheet();
            this.applyThemeStylesheet();
            break;
        }
    },

    unload: function() {
        this.unloaders.forEach(function(func) {
            func.call(this);
        }, this);
    },

    /*** Event handlers ***/

    handleEvent: function(aEvent) {
        switch (aEvent.type) {
        case "TabOpen":
            this.initTab(aEvent.target);
            this.setPinnedSizes();
            return;
            
        case "mouseup":
            if (aEvent.target.getAttribute("id") == "verticaltabs-splitter") {
                this.onTabbarResized();
            }
            return;
            
        case "DOMContentLoaded":
            this.init();
            return;
            
        case "resize":
            this.setPinnedSizes();
            return;
        }
    },
};