Merge pull request +15846 from c9/fix-apf-dynamic-styles

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.layout.classic/less/menu.less

@@ -89,6 +89,9 @@
     left: @menu-item-check-left;
     margin-top : -1px;
 }
+.c9menu>div.menu_item>a{
+    float: left;
+}
 
 .c9menu>div.menu_item.selected>u{
     background: @menu-item-radio-background;

plugins/c9.ide.layout.classic/skins.xml

@@ -219,59 +219,6 @@
         </a:main>
     </a:presentation>
 </a:checkbox>
-<a:datagrid  name="datagrid">
-    
-    
-    
-    
-    
-
-
-    <a:presentation>
-        <a:main head="div[1]" container="div[3]" pointer="div[2]" widthdiff="1" iframe2="true">
-            <div class="datagrid">
-                <div class="headings">
-
-                </div>
-                <div class="pointer"> </div>
-                <div class="records"> </div>
-            </div>
-        </a:main>
-
-        <a:headitem class="." caption="u/text()">
-            <div><u>-<span/></u></div>
-        </a:headitem>
-
-        <a:rowheaditem class="." caption="text()">
-            <span>-</span>
-        </a:rowheaditem>
-
-        <a:item class="." container="following-sibling::blockquote">
-            <div class="row"/>
-            <blockquote> </blockquote>
-        </a:item>
-
-        <a:dragindicator>
-            <div class="dragdg"> </div>
-        </a:dragindicator>
-
-        <a:cell caption="u"><span><u>-</u></span></a:cell>
-
-        <a:treecell caption="u" openclose="strong" editoroffset="0"><span class="treecell"><strong> </strong><u>-</u></span></a:treecell>
-
-        <a:container container=".">
-            <div class="dginfo">-</div>
-        </a:container>
-
-        <a:loading>
-            <div class="message"/>
-        </a:loading>
-
-        <a:empty caption=".">
-            <div class="empty"> </div>
-        </a:empty>
-    </a:presentation>
-</a:datagrid>
 <a:divider  name="divider">
     
 
@@ -420,8 +367,8 @@
 
             </blockquote>
         </a:main>
-        <a:item caption="text()" icon="u" hotkey="span" inherit="true">
+        <a:item caption="a/text()" icon="u" hotkey="span" inherit="true">
-            <div class="menu_item"><span> </span><u> </u>-</div>
+            <div class="menu_item"><u> </u><a>-</a><span class="shortcut"> </span></div>
         </a:item>
         <a:divider inherit="true">
             <div class="menu_divider"> </div>

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");
-    style.appendChild(doc.createTextNode(cssString));
+    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 elem.sheet;
-        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() {