define(function(require, exports, module) {
    main.consumes = [
        "Plugin", "layout", "menus", "tabinteraction", "settings",
        "dialog.notification"
    ];
    main.provides = ["theme.flat-light"];
    return main;

    function main(options, imports, register) {
        var Plugin = imports.Plugin;
        var menus = imports.menus;
        var settings = imports.settings;
        var layout = imports.layout;
        var tabinteraction = imports.tabinteraction;
        var notify = imports["dialog.notification"].show;
        
        /***** Initialization *****/
        
        var plugin = new Plugin("Ajax.org", main.consumes);
        var emit = plugin.getEmitter();
        
        var oldHeight, oldMinimizedHeight, oldTabInteraction, svg, oldTabDelta;
        
        var loaded = false;
        function load() {
            if (loaded) return false;
            loaded = true;
            
            var update = function(e){
                if (e.theme == "flat-light") {
                    oldHeight = menus.height;
                    layout.getElement("logobar").setHeight(40);
                    oldMinimizedHeight = menus.minimizedHeight;
                    oldTabInteraction = tabinteraction.plusMargin;
                    oldTabDelta = apf.tabRightDelta;
                    
                    menus.height = 40;
                    menus.minimizedHeight = 8;
                    
                    tabinteraction.plusMargin = 14;
                    apf.tabRightDelta = 25;
                    
                    settings.set("user/ace/cursorStyle", "smooth slim");
                }
                else if (e.oldTheme == "flat-light") {
                    // temporary hack for local version
                    var oldHeight = window.process ? 27 : 31;
                    menus.height = oldHeight;
                    layout.getElement("logobar").setHeight(oldHeight);
                    
                    menus.minimizedHeight = oldMinimizedHeight;
                    
                    tabinteraction.plusMargin = oldTabInteraction;
                    apf.tabRightDelta = oldTabDelta;
                    
                    settings.set("user/ace/cursorStyle", "ace");
                }
                
                setGeckoMask();
            };
            
            layout.on("themeChange", update);
            
            if (layout.theme == "flat-light")
                update({ theme: layout.theme });
            else if (!settings.getBool("user/theme/@ask-flat-light") && false) {
                var hideThemeSwitch = notify("<div class='c9-theme-switch'>"
                    + "The <a href='#' target='_blank'>Flat Light Theme</a> is "
                    + "now available. Click here to switch.</div>", true);
                
                document.querySelector(".c9-theme-switch").addEventListener("click", function(){
                    hideThemeSwitch();
                    settings.set("user/general/@skin", "flat-light");
                    layout.updateTheme();
                }, false);
                
                settings.set("user/theme/@ask-flat-light", true);
            }
            
            setGeckoMask();
        }
        
        var drawn = false;
        function draw() {
            if (drawn) return;
            drawn = true;
            
            emit("draw");
        }
        
        /***** Methods *****/
        
        // There will be a better place for this when theming is fully
        // abstracted. For now this is a hack
        function setGeckoMask(){
            if (!apf.isGecko) return;
            
            if (svg) svg.parentNode.removeChild(svg);
            
            var isFlatTheme = layout.theme.indexOf("flat") > -1;
            var img = "/static/plugins/c9.ide.layout.classic/images/" + (
                isFlatTheme
                    ? "gecko_mask_flat_light.png"
                    : "gecko_mask.png");
            var width = isFlatTheme ? 76 : 46;
            var height = isFlatTheme ? 26 : 24;
            var x1 = isFlatTheme ? 1 : 1;
            var x2 = isFlatTheme ? -40 : -28;
            
            document.body.insertAdjacentHTML("beforeend", '<svg xmlns="http://www.w3.org/2000/svg">'
                + '<defs>'
                    + '<mask id="tab-mask-left" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">'
                        + '<image width="' + width + 'px" height="' + height + 'px" xlink:href="' + img + '" x="' + x1 + 'px"></image>'
                    + '</mask>'
                    + '<mask id="tab-mask-right" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">'
                        + '<image width="' + width + 'px" height="' + height + 'px" xlink:href="' + img + '" x="' + x2 + 'px"></image>'
                    + '</mask>'
                + '</defs>'
            + '</svg>');
            
            svg = document.body.lastChild;
        }
        
        /***** Lifecycle *****/
        
        plugin.on("load", function() {
            load();
        });
        plugin.on("enable", function() {
            
        });
        plugin.on("disable", function() {
            
        });
        plugin.on("unload", function() {
            loaded = false;
            drawn = false;
            
            if (svg && svg.parentNode)
                svg.parentNode.removeChild(svg);
        });
        
        /***** Register and define API *****/
        
        /**
         * 
         **/
        plugin.freezePublicAPI({
            
        });
        
        register(null, {
            "theme.flat-light": plugin
        });
    }
});
@@ -761,13 +761,8 @@
 ion,
- svg,
  old
@@ -763,32 +763,32 @@
 n, oldTabDelta;%0A
+
         %0A       
@@ -2251,57 +2251,8 @@
   %7D%0A
-                %0A                setGeckoMask();%0A
     
@@ -3136,49 +3136,8 @@
   %7D%0A
-            %0A            setGeckoMask();%0A
     
@@ -3353,1545 +3353,9 @@
 **/%0A
-        %0A        // There will be a better place for this when theming is fully%0A        // abstracted. For now this is a hack%0A        function setGeckoMask()%7B%0A            if (!apf.isGecko) return;%0A            %0A            if (svg) svg.parentNode.removeChild(svg);%0A            %0A            var isFlatTheme = layout.theme.indexOf(%22flat%22) %3E -1;%0A            var img = %22/static/plugins/c9.ide.layout.classic/images/%22 + (%0A                isFlatTheme%0A                    ? %22gecko_mask_flat_light.png%22%0A                    : %22gecko_mask.png%22);%0A            var width = isFlatTheme ? 76 : 46;%0A            var height = isFlatTheme ? 26 : 24;%0A            var x1 = isFlatTheme ? 1 : 1;%0A            var x2 = isFlatTheme ? -40 : -28;%0A            %0A            document.body.insertAdjacentHTML(%22beforeend%22, '%3Csvg xmlns=%22http://www.w3.org/2000/svg%22%3E'%0A                + '%3Cdefs%3E'%0A                    + '%3Cmask id=%22tab-mask-left%22 maskUnits=%22userSpaceOnUse%22 maskContentUnits=%22userSpaceOnUse%22%3E'%0A                        + '%3Cimage width=%22' + width + 'px%22 height=%22' + height + 'px%22 xlink:href=%22' + img + '%22 x=%22' + x1 + 'px%22%3E%3C/image%3E'%0A                    + '%3C/mask%3E'%0A                    + '%3Cmask id=%22tab-mask-right%22 maskUnits=%22userSpaceOnUse%22 maskContentUnits=%22userSpaceOnUse%22%3E'%0A                        + '%3Cimage width=%22' + width + 'px%22 height=%22' + height + 'px%22 xlink:href=%22' + img + '%22 x=%22' + x2 + 'px%22%3E%3C/image%3E'%0A                    + '%3C/mask%3E'%0A                + '%3C/defs%3E'%0A            + '%3C/svg%3E');%0A            %0A            svg = document.body.lastChild;%0A        %7D
 %0A
+
     
@@ -3665,32 +3665,32 @@
 loaded = false;%0A
+
             draw
@@ -3704,109 +3704,8 @@
 se;%0A
-            %0A            if (svg && svg.parentNode)%0A                svg.parentNode.removeChild(svg);%0A
     

fix +7506 Tabs are not rendered correctly on firefox