fix tab and content color mismatch for output tabs

plugins/c9.ide.editors/tab.js

@@ -1,3 +1,4 @@
+/*global apf*/
 define(function(require, module, exports) {
     main.consumes = ["Plugin", "ui", "Document", "dialog.alert"];
     main.provides = ["Tab"];
@@ -9,8 +10,6 @@ define(function(require, module, exports) {
         var ui = imports.ui;
         var alert = imports["dialog.alert"].show;
         
-        var stylesheet = ui.createStylesheet();
-        
         function Tab(options) {
             var editorType, doc, path, amlPane, init, active, fg, bg,
                 title, tooltip, amlTab, closed, rule, docInited;
@@ -53,12 +52,8 @@ define(function(require, module, exports) {
                 if (!bg) bg = "inherit";
                 if (!fg) fg = "inherit";
                 
-                (
+                ui.setStyleRule(rule, "background-color", bg);
-                    ui.setStyleRule(rule, "background-color", bg, stylesheet) &&
+                ui.setStyleRule(rule, "color", fg);
-                    ui.setStyleRule(rule, "foreground-color", fg, stylesheet)
-                ) || ui.importStylesheet([
-                    [rule, "background-color:" + bg + ";" + "color:" + fg + ";"]
-                ], window, stylesheet);
             }
             
             /***** Initialization *****/
@@ -301,7 +296,7 @@ define(function(require, module, exports) {
                 closed = true;
                 
                 if (rule)
-                    ui.removeStyleRule(rule, stylesheet);
+                    ui.removeStyleRule(rule);
                 // If there are no more pages left, reset location
                 var last = e && e.last || amlPane.getPages().length === 0;
                 if (last)
@@ -432,7 +427,7 @@ define(function(require, module, exports) {
                     bg = v || "";
                     if (!rule) 
                         return initStyleSheet(fg, bg);
-                    ui.setStyleRule(rule, "background-color", bg, stylesheet);
+                    ui.setStyleRule(rule, "background-color", bg);
                 },
                 /**
                  * The foreground color of the tab button and it's body. It is
@@ -447,7 +442,7 @@ define(function(require, module, exports) {
                     fg = v;
                     if (!rule) 
                         return initStyleSheet(fg, bg);
-                    ui.setStyleRule(rule, "color", fg, stylesheet);
+                    ui.setStyleRule(rule, "color", fg);
                 },
                 /** 
                  * @property {Object}   classList               Object that 

plugins/c9.ide.ui/lib_apf.js

@@ -2406,6 +2406,14 @@ function findCssRule(name, stylesheet, win) {
     }
 }
 
+
+function toCssPropertyName(name) {
+    return name.replace(/[A-Z]/g, function(a) {return "-" + a.toLowerCase()});
+}
+function toCamelCase(name) {
+    return name.replace(/-(\w)/g, function(_, a) {return a.toUpperCase()});
+}
+
 /**
  * This method sets a single CSS rule.
  * @param {String} name         The CSS name of the rule (i.e. `.cls` or `#id`).
@@ -2415,14 +2423,22 @@ function findCssRule(name, stylesheet, win) {
  * @param {Object} [win]        A reference to a window
  */
 apf.setStyleRule = function(name, type, value, stylesheet, win) {
+    if (!stylesheet)
+        stylesheet = apf.$dynamicStyles || (apf.$dynamicStyles = apf.createStylesheet("", "dynamicStyles.css"));
     var rule = findCssRule(name, stylesheet, win);
     if (rule) {
         if (value.indexOf("!important") > -1) {
+            type = toCssPropertyName(type);
             rule.style.cssText = type + ":" + value;
         } else {
-            type = type.replace(/-(\w)/g, function(_, a) {return a.toUpperCase()});
+            type = toCamelCase(type);
             rule.style[type] = value;
         }
+    } else {
+        type = toCssPropertyName(type);
+        apf.importStylesheet([
+            [name, type + ":" + value]
+        ], win, stylesheet);
     }
     return !!rule;
 };
@@ -2492,12 +2508,15 @@ apf.setStyleClass = function(oHtml, className, exclusion, userAction) {
  */
 apf.importCssString = function(cssString, doc, media) {
     doc = doc || document;
-    var htmlNode = doc.getElementsByTagName("head")[0];
+    var htmlNode = doc.head;
     var style = doc.createElement("style");
+    if (cssString)
         style.appendChild(doc.createTextNode(cssString));
     if (media)
         style.setAttribute('media', media);
-    htmlNode.appendChild(style);
+    var before = apf.$dynamicStyles && apf.$dynamicStyles.ownerNode;
+    htmlNode.insertBefore(style, before);
+    return style;
 };
 
 /**
@@ -2553,11 +2572,10 @@ apf.importStylesheet = function (def, win, stylesheet) {
 
         var rule = def[i][0] + " {" + def[i][1] + "}";
         try {
-            stylesheet.insertRule(rule, 0);
+            stylesheet.insertRule(rule, stylesheet.cssRules.length);
         }
         catch (e) {
-            stylesheet = new StyleSheet();
+            console.error(e);
-            stylesheet.insertRule(rule, 0);
         }
     }
 };
@@ -2567,17 +2585,10 @@ apf.importStylesheet = function (def, win, stylesheet) {
  * @param {Object}  [win] A reference to a window
  * @returns {String} The created CSS stylesheet
  */ 
-apf.createStylesheet = function(win) {
+apf.createStylesheet = function(win, id) {
-    var doc = (win || window).document;
+    var elem = apf.importCssString(null, (win || window).document)
-    
+    if (id) elem.id = id;
-    if (doc.createStyleSheet)
-        return doc.createStyleSheet();
-    else {
-        var elem = doc.createElement("style");
-        elem.type = "text/css";
-        doc.getElementsByTagName("head")[0].appendChild(elem);
     return elem.sheet;
-    }
 };
 
 /**

plugins/c9.ide.ui/ui.js

@@ -126,13 +126,6 @@ define(function(require, module, exports) {
             });
         }
         
-        function createStyleSheet(css) {
-            var style = document.createElement("style");
-            style.appendChild(document.createTextNode(css));
-            document.getElementsByTagName("head")[0].appendChild(style);
-            return style;
-        }
-        
         function insertLess(css, filename, staticPrefix, _callback, force) {
             var callback = _callback || function(err) {
                 if (err) console.error(err);    
@@ -166,7 +159,7 @@ define(function(require, module, exports) {
                         return callback(e);
                         
                     // Add css to the DOM
-                    var style = createStyleSheet(tree.toCSS({
+                    var style = apf.importCssString(tree.toCSS({
                         relativeUrls: true,
                         rootpath: staticPrefix || ""
                     }));
@@ -202,7 +195,7 @@ define(function(require, module, exports) {
                 if (!packed && packedThemes && staticPrefix !== false) {
                     return;
                 }
-                var style = createStyleSheet(css);
+                var style = apf.importCssString(css);
                 
                 // Cleanup
                 plugin.addOther(function() {