Merge pull request +15900 from c9/image-2x

improve css compilation

node_modules/architect-build/build.js

@@ -4,7 +4,10 @@ var mkdirp = require("mkdirp");
 var moduleDeps = require("./module-deps");
 var path = require("path");
 
-function build(config, opts, callback){
+function build(config, opts, callback) {
+    if (opts.compileLess && opts.sources)
+        return compileLess(opts, opts.sources, callback);
+            
     if (!opts.configFile) {
         opts.configFile = "\nrequire.plugins = "
             + JSON.stringify(config, null, 4)
@@ -155,50 +158,147 @@ function createOutputFolder(opts, cb) {
 }
 
 function compileLess(opts, sources, callback) {
+    var libs = opts.lessLibs;
     var less = stripLess(sources);
     var cssCode = [];
     var code = [];
     var cache = opts.cache;
     if (cache && !cache.less)
         cache.less = Object.create(null);
-    
-    var libs = opts.lessLibs;
-    less.forEach(function(file) {
-        var plugin = file.pkg.parent.plugin || {};
-        if (file.pkg.id.match(/(keyframes|font-awesome)\.css$/)) {
-            cssCode.push(file.code
-                .replace(/@\{image-path\}/g, plugin.staticPrefix + "/images")
-                .replace(/@\{icon-path\}/g, plugin.staticPrefix + "/icons")
-                .replace(/@\{base-path\}/g, plugin.staticPrefix)
-            );
-            return;
-        }
+    if (cache && !cache.images)
+        cache.images = Object.create(null);
         
-        var staticPrefix = plugin.staticPrefix || libs.staticPrefix;
-        // Complete paths, but not subdirectories like foo/images/bar.png
-        var lessCode = file.code.replace(/(["(])(images|icons)\//g, "$1" + staticPrefix + "/$2/");
-        code.push("ß{" + lessPathLib(staticPrefix) + lessCode + "}");
-    });
-    
-     var ctx = {
-        paths: ["/"],
-        filename: opts.basepath + '/unknown.less',
-        compress: !!opts.compress
-    };
-    code = lessPathLib("/static/" + libs.staticPrefix) + libs.join("\n") + code.join("\n");
-    
-    var lessParser = require("less");
-    return lessParser.parse(code, ctx, function(err, tree, imports, options) {
-        if (err) return callback(err);
-        
-        toCss(tree, imports, options, function(err, css) {
-            if (err) return callback(err);
-             
-            callback(null, { code: css.replace(/ß /g, "").replace(/^ +/gm, "\t") });
+    function readLibs(cb) {
+        async.forEach(Object.keys(libs), function(key, next) {
+            var lib = libs[key];
+            if (typeof lib !== "string")
+                return next();
+            var path = moduleDeps.resolveModulePath(lib, opts.pathConfig.pathMap);
+            fs.readFile(path, "utf8", function(e, code) {
+                libs[key] = { code: code || "", id: lib };
+                next();
+            });
+        }, function() {
+            cb();
         });
+    }
+    
+    function expandVariables(code, variables, plugin) {
+        variables["base-path"] = (plugin && plugin.staticPrefix || opts.staticPrefix);
+        variables["icon-path"] = variables["base-path"] + "/icons";
+        variables["image-path"] = variables["base-path"] + "/images";
+        variables["plugin-path"] = plugin
+            ? "/static/" + path.dirname(plugin.packagePath)
+            : "plugin-path";
+        
+        return code.replace(/@({([\w-]+)}|[\w-]+)/g, function(_, m, m1) {
+            var name = m1 || m;
+            return variables[name] || _;
+        });
+    }
+    
+    function preprocess() {
+        less.forEach(function(file) {
+            var plugin = file.pkg.parent.plugin;
+            
+            var id = file.pkg.id.replace(/^[^!]+!/, "");
+            code.push(
+                "/* @file " + id + " */\nß{"
+                + expandVariables(file.code, Object.create(null), plugin)
+                + "}"
+            );
+        });
+        code = code.join("\n")
+            + expandVariables(libs.map(function(l) {
+                return l.code ? "/* @file " + l.id + " */\n" + l.code : "";
+            }).join("\n"), Object.create(null));
+    }
+    
+    function compile() {
+        var ctx = {
+            paths: ["/"],
+            filename: opts.basepath + '/unknown.less',
+            compress: !!opts.compress
+        };
+        var lessParser = require("less");
+        return lessParser.parse(code, ctx, function(err, tree, imports, options) {
+            if (err) return callback(err);
+            
+            toCss(tree, imports, options, function(err, css) {
+                if (err) return callback(err);
+                css = css.replace(/ß /g, "").replace(/^ +/gm, "\t");
+                css = checkImages(css, opts, cache);
+                css = addCssPrefixes(css);
+                callback(null, { code: css });
+            });
+        });
+    }
+    
+    
+    readLibs(function() {
+        preprocess();
+        compile();
     });
 }
 
+function checkImages(css, opts, cache) {
+    var images = cache && cache.images || Object.create(null);
+    var t = Date.now();
+    var file;
+    var count = 0;
+    var missingCount = 0;
+    css = css.replace(/(url\(['"]?)(?:\/static\/)?([^"')]+)|@file (\S+)/g, function(_, prefix, imagePath, fileId) {
+        if (fileId) {
+            file = fileId;
+            return _;
+        }
+        if (/^data:|^#/.test(imagePath))
+            return _;
+        count++;
+        
+        if (/^(images|icons)/.test(imagePath))
+            imagePath = opts.staticPrefix + "/" + imagePath;
+        
+        var dir = path.dirname(imagePath);
+        var name = path.basename(imagePath);
+        try {
+            if (!images[dir]) {
+                var absPath = moduleDeps.resolveModulePath(dir, opts.pathConfig.pathMap);
+                images[dir] = fs.readdirSync(absPath);
+            }
+        } catch (e) {
+            images[dir] = [];
+        }
+        var nameNx = name.replace("@1x", "");
+        var name1x = nameNx.replace(/\.\w+$/, "@1x$&"); 
+        var name2x = nameNx.replace(/\.\w+$/, "@2x$&"); 
+        
+        var hasNx = images[dir].indexOf(nameNx) != -1;
+        var has1x = images[dir].indexOf(name1x) != -1;
+        var has2x = images[dir].indexOf(name2x) != -1;
+        
+        if (hasNx) {
+            name = nameNx;
+        } else if (has1x) {
+            name = name1x;
+            if (!has2x)
+                reportError(imagePath + " 2x");
+        }
+        else {
+            reportError(imagePath);
+        }
+        
+        // todo check image sizes
+        return prefix + "/static/" + dir + "/" + name;
+    });
+    
+    function reportError(imagePath) {
+        missingCount++;
+        console.log("" + missingCount + " missing image: " + imagePath, "from /" + file);
+    }
+    console.log("checked " + count + " images in " + (t - Date.now()) + "ms");
+    return css;
+}
 
 function addCssPrefixes(css) {
     return css.replace(/\b(user-select|font-smoothing)\b([^;\n]+);?/g, function(_, prop, value, index, string) {
@@ -226,24 +326,14 @@ function toCss(tree, imports, options, callback) {
     catch (err) {
         return callback(err);
     }
-    css = addCssPrefixes(css);
     callback(null, css);
 }
 
-function lessPathLib(staticPrefix) {
-    if (!staticPrefix) return "";
-
-    staticPrefix = staticPrefix.replace(/^(\/static\/)?(plugins\/)?/, "/static/plugins/");
-    
-    return "@base-path : \"" + staticPrefix + "\";\n"
-        + "@image-path : \"" + staticPrefix + "/images\";\n"
-        + "@icon-path : \"" + staticPrefix + "/icons\";\n";
-}
-
 function stripLess(sources) {
     var less = [];
 
     function addLessFile(pkg, code, file) {
+        pkg.cssSource = code;
         less.push({
             pkg: pkg,
             code: code,
@@ -252,7 +342,10 @@ function stripLess(sources) {
     }
     
     sources.forEach(function(pkg) {
-        if (pkg.id && (pkg.id.indexOf("text!") > -1) && pkg.id.match(/text\!.*\.(less|css)$/)) {
+        if (pkg.cssSource != null) {
+            addLessFile(pkg, pkg.cssSource);
+        }
+        else if (pkg.id && (pkg.id.indexOf("text!") > -1) && pkg.id.match(/text\!.*\.(less|css)$/)) {
             var source = pkg.source;
             pkg.source = "";
             

plugins/c9.ide.ace.gotoline/skin.xml

@@ -86,30 +86,10 @@
                 border: @gotoline-border-dark;
                 border-left: 0;
             }
-            .brGtlContent {
-            }
-            .barGotoline .brGtlTop {
-                background: url(images/barGotoLineCorners.png) no-repeat 0 0;
-                height: 3px;
-                width: 4px;
-                position: absolute;
-                top: -3px;
-                left:0;
-            }
-            .barGotoline .brGtlBottom {
-                background: url(images/barGotoLineCorners.png) no-repeat 0 -3px;
-                height: 3px;
-                width: 4px;
-                position: absolute;
-                bottom: -3px;
-                left:0;
-            }
         ]]></a:style>
         <a:presentation>
             <a:main container=".">
                 <div class="barGotoline">
-                    <div class="brGtlTop"></div>
-                    <div class="brGtlBottom"></div>
                 </div>
             </a:main>
         </a:presentation>

plugins/c9.ide.ace.statusbar/statusbar.xml

@@ -34,7 +34,7 @@
           skin    = "btn-statusbar-icon" 
           skinset = "c9statusbar"
           height  = "23"
-          icon    = "pref-ico.png" 
+          icon    = "true" 
           submenudir = "up" />
     </a:bar>
 </a:application>

plugins/c9.ide.console/style.css

@@ -8,12 +8,5 @@
 }
 
 .console .console_close_btn {
-    background-image: url("@{icon-path}/@{button-console-close}");
-}
-
-@media print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx) {
-    .console .console_close_btn {
-        background-image: url("@{icon-path}/@{button-console-close-retina}");
-        background-size: 22px 66px;
-    }
+    .image-2x("@{icon-path}/@{button-console-close}", 22px, 66px);
 }

plugins/c9.ide.find.replace/findreplace.css

@@ -18,10 +18,10 @@
 }
 
 .btnquicksearchnav.btnquicksearchnavLeft .lbl span {
-    background-image: url("@{icon-path}/@{find-next-image}");
+    .image-2x("@{icon-path}/@{find-next-image}", 20px, 100px);
 }
 .btnquicksearchnav.btnquicksearchnavRight .lbl span {
-    background-image: url("@{icon-path}/@{find-previous-image}");
+    .image-2x("@{icon-path}/@{find-previous-image}", 20px, 100px);
 }
 
 .findInRangeMarker {

plugins/c9.ide.help/skin.xml

@@ -15,7 +15,7 @@
             .aboutDialogBox .aboutImage {
                 position:relative;
                 color: white;
-                background: url(images/about_cloud.png) no-repeat 0 0;
+                background: url(@plugin-path/images/about_cloud.png) no-repeat 0 0;
                 width: 515px;
                 height: 339px;
             }
@@ -29,7 +29,7 @@
             .win-help-about .buttons .close {
                  height: 20px;
                 width: 19px;
-                background: url(images/close.png) no-repeat 4px 3px;
+                background: url(@plugin-path/images/close.png) no-repeat 4px 3px;
             }
             
             .win-help-about .buttons .close.hover {

plugins/c9.ide.imgeditor/style.css

@@ -42,7 +42,7 @@
 }
 
 .imgeditor canvas{
-    background: url("@{image-path}/background.png");
+    background: url("@{plugin-path}/images/background.png");
     cursor: crosshair;
     box-shadow: 0 0 8px rgba(0,0,0,0.5);
     display: inline-block;