diff --git a/plugins/c9.ide.editors/tab.js b/plugins/c9.ide.editors/tab.js
index 732b65e5..f960fbb0 100644
--- a/plugins/c9.ide.editors/tab.js
+++ b/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, stylesheet) &&
- ui.setStyleRule(rule, "foreground-color", fg, stylesheet)
- ) || ui.importStylesheet([
- [rule, "background-color:" + bg + ";" + "color:" + fg + ";"]
- ], window, stylesheet);
+ ui.setStyleRule(rule, "background-color", bg);
+ ui.setStyleRule(rule, "color", fg);
}
/***** 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
diff --git a/plugins/c9.ide.layout.classic/less/menu.less b/plugins/c9.ide.layout.classic/less/menu.less
index a4595b27..95ede8f5 100644
--- a/plugins/c9.ide.layout.classic/less/menu.less
+++ b/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;
diff --git a/plugins/c9.ide.layout.classic/skins.xml b/plugins/c9.ide.layout.classic/skins.xml
index a85ccd53..98a24f02 100644
--- a/plugins/c9.ide.layout.classic/skins.xml
+++ b/plugins/c9.ide.layout.classic/skins.xml
@@ -219,59 +219,6 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
@@ -420,8 +367,8 @@
-
-
+
+
diff --git a/plugins/c9.ide.ui/lib_apf.js b/plugins/c9.ide.ui/lib_apf.js
index 5d213417..e0fb7d30 100644
--- a/plugins/c9.ide.ui/lib_apf.js
+++ b/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();
- stylesheet.insertRule(rule, 0);
+ console.error(e);
}
}
};
@@ -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) {
- var doc = (win || window).document;
-
- 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;
- }
+apf.createStylesheet = function(win, id) {
+ var elem = apf.importCssString(null, (win || window).document)
+ if (id) elem.id = id;
+ return elem.sheet;
};
/**
diff --git a/plugins/c9.ide.ui/ui.js b/plugins/c9.ide.ui/ui.js
index 7cf5a857..70ea4396 100644
--- a/plugins/c9.ide.ui/ui.js
+++ b/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() {