Merge pull request #2342 from ajaxorg/better-css-support

[Liskov] Better CSS / PHP / HTML support

Author: lennartcl

Makefile

@@ -56,6 +56,10 @@ plugins-client/lib.ace/www/worker/worker-language.js plugins-client/lib.ace/www/
         $(wildcard plugins-client/ext.codecomplete/*/*) \
         $(wildcard plugins-client/ext.jslanguage/*) \
         $(wildcard plugins-client/ext.jslanguage/*/*) \
+        $(wildcard plugins-client/ext.csslanguage/*) \
+        $(wildcard plugins-client/ext.csslanguage/*/*) \
+        $(wildcard plugins-client/ext.htmllanguage/*) \
+        $(wildcard plugins-client/ext.htmllanguage/*/*) \
         $(wildcard plugins-client/ext.jsinfer/*) \
         $(wildcard plugins-client/ext.jsinfer/*/*) \
         $(wildcard node_modules/treehugger/lib/*) \
@@ -69,6 +73,8 @@ plugins-client/lib.ace/www/worker/worker-language.js plugins-client/lib.ace/www/
 	ln -s `pwd`/plugins-client/ext.language /tmp/c9_worker_build/ext/language
 	ln -s `pwd`/plugins-client/ext.codecomplete /tmp/c9_worker_build/ext/codecomplete
 	ln -s `pwd`/plugins-client/ext.jslanguage /tmp/c9_worker_build/ext/jslanguage
+	ln -s `pwd`/plugins-client/ext.csslanguage /tmp/c9_worker_build/ext/csslanguage
+	ln -s `pwd`/plugins-client/ext.htmllanguage /tmp/c9_worker_build/ext/htmllanguage
 	ln -s `pwd`/plugins-client/ext.linereport /tmp/c9_worker_build/ext/linereport
 	ln -s `pwd`/plugins-client/ext.linereport_php /tmp/c9_worker_build/ext/linereport_php
 	node Makefile.dryice.js worker

Makefile.dryice.js

@@ -69,6 +69,9 @@ function worker(project) {
                     'ext/jslanguage/jumptodef',
                     'ext/jslanguage/debugger',
                     'ext/jslanguage/outline',
+                    'ext/csslanguage/css_handler',
+                    'ext/htmllanguage/html_completer',
+                    'ext/codecomplete/mode_completer',
                     'ext/linereport/linereport_base',
                     'ext/linereport_php/linereport_php_worker',
                 ]

configs/default.js

@@ -133,6 +133,8 @@ var config = [
             "ext/guidedtour/guidedtour",
             "ext/quickstart/quickstart",
             "ext/jslanguage/jslanguage",
+            "ext/csslanguage/csslanguage",
+            "ext/htmllanguage/htmllanguage",
             "ext/autotest/autotest",
             "ext/closeconfirmation/closeconfirmation",
             "ext/codetools/codetools",

plugins-client/ext.codecomplete/codecomplete.js

@@ -22,6 +22,7 @@ module.exports = ext.register("ext/codecomplete/codecomplete", {
     init : function() {
         language.registerLanguageHandler('ext/codecomplete/local_completer');
         language.registerLanguageHandler('ext/codecomplete/snippet_completer');
+        language.registerLanguageHandler("ext/codecomplete/mode_completer");
         language.registerLanguageHandler('ext/codecomplete/open_files_local_completer');
     },
 

plugins-client/ext.codecomplete/complete_util.js

@@ -2,17 +2,30 @@ define(function(require, exports, module) {
 
 var ID_REGEX = /[a-zA-Z_0-9\$]/;
 
-function retrievePreceedingIdentifier(text, pos) {
+function retrievePreceedingIdentifier(text, pos, regex) {
+    regex = regex || ID_REGEX;
     var buf = [];
     for (var i = pos-1; i >= 0; i--) {
-        if(ID_REGEX.test(text[i]))
+        if (regex.test(text[i]))
             buf.push(text[i]);
         else
             break;
     }
     return buf.reverse().join("");
 }
 
+function retrieveFollowingIdentifier(text, pos, regex) {
+    regex = regex || ID_REGEX;
+    var buf = [];
+    for (var i = pos; i < text.length; i++) {
+        if (regex.test(text[i]))
+            buf.push(text[i]);
+        else
+            break;
+    }
+    return buf;
+}
+
 function prefixBinarySearch(items, prefix) {
     var startIndex = 0;
     var stopIndex = items.length - 1;
@@ -43,7 +56,25 @@ function findCompletions(prefix, allIdentifiers) {
     return matches;
 }
 
+function fetchText(staticPrefix, path) {
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', staticPrefix + "/" + path, false);
+    try {
+        xhr.send();
+    }
+    // Likely we got a cross-script error (equivalent with a 404 in our cloud setup)
+    catch(e) {
+        return false;
+    }
+    if (xhr.status === 200)
+        return xhr.responseText;
+    else
+        return false;
+}
+
 exports.retrievePreceedingIdentifier = retrievePreceedingIdentifier;
+exports.retrieveFollowingIdentifier = retrieveFollowingIdentifier;
 exports.findCompletions = findCompletions;
+exports.fetchText = fetchText;
 
 });

plugins-client/ext.codecomplete/mode_completer.js

@@ -0,0 +1,88 @@
+/**
+ * Cloud9 Language Foundation
+ *
+ * @copyright 2011, Ajax.org B.V.
+ * @license GPLv3 <http://www.gnu.org/licenses/gpl.txt>
+ */
+define(function(require, exports, module) {
+
+var completeUtil = require("ext/codecomplete/complete_util");
+var baseLanguageHandler = require('ext/language/base_handler');
+
+var completer = module.exports = Object.create(baseLanguageHandler);
+
+var modeCache = {}; // extension -> static data
+var iconLanglist = ["php"];
+
+completer.handlesLanguage = function(language) {
+    return ["css", "php"].indexOf(language) !== -1;
+};
+
+var ID_REGEXES = {
+    "css": /[a-zA-Z_0-9-]/
+};
+
+completer.complete = function(doc, fullAst, pos, currentNode, callback) {
+    var language = this.language;
+    var line = doc.getLine(pos.row);
+    var idRegex = ID_REGEXES[language];
+    var identifier = completeUtil.retrievePreceedingIdentifier(line, pos.column, idRegex);
+    if(!identifier.length) // No completion after "."
+        return callback([]);
+
+    var mode = modeCache[language];
+
+    if (mode === undefined) {
+        var text;
+        if (language)
+            text = completeUtil.fetchText(this.staticPrefix, 'ext/codecomplete/modes/' + this.language + '.json');
+        mode = text ? JSON.parse(text) : {};
+        // Cache
+        modeCache[language] = mode;
+    }
+
+    function getIcon(type) {
+        if (iconLanglist.indexOf(language) === -1)
+            return null;
+        var iconMap = {
+            "variable": "property",
+            "constant": "property",
+            "function": "method"
+        };
+        var subs = Object.keys(iconMap);
+        for (var i = 0; i < subs.length; i++)
+            if (type.indexOf(subs[i]) !== -1)
+                return iconMap[subs[i]];
+        return null;
+    }
+
+    // keywords, functions, constants, ..etc
+    var types = Object.keys(mode);
+    var matches = [];
+    types.forEach(function (type) {
+        var icon = getIcon(type);
+        var nameAppend = "", replaceAppend = "";
+        if (type.indexOf("function") !== -1) {
+            nameAppend = "()";
+            replaceAppend = "(^^)";
+        }
+        var deprecated = type.indexOf("deprecated") === -1 ? 0 : 1;
+        var compls = completeUtil.findCompletions(identifier, mode[type]);
+        matches.push.apply(matches, compls.map(function(m) {
+            return {
+                name        : m + nameAppend,
+                replaceText : m + replaceAppend,
+                doc         : deprecated ? ("Deprecated: <del>" + m + nameAppend + "</del>") : null,
+                icon        : icon,
+                meta        : type,
+                idRegex     : idRegex,
+                priority    : 2 - deprecated
+            };
+        }));
+    });
+    
+    callback(matches);
+};
+
+
+});

plugins-client/ext.codecomplete/modes/css.json

@@ -0,0 +1,9 @@
+{
+    "type": ["animation-fill-mode", "alignment-adjust", "alignment-baseline", "animation-delay", "animation-direction", "animation-duration", "animation-iteration-count", "animation-name", "animation-play-state", "animation-timing-function", "animation", "appearance", "azimuth", "backface-visibility", "background-attachment", "background-break", "background-clip", "background-color", "background-image", "background-origin", "background-position", "background-repeat", "background-size", "background", "baseline-shift", "binding", "bleed", "bookmark-label", "bookmark-level", "bookmark-state", "bookmark-target", "border-bottom", "border-bottom-color", "border-bottom-left-radius", "border-bottom-right-radius", "border-bottom-style", "border-bottom-width", "border-collapse", "border-color", "border-image", "border-image-outset", "border-image-repeat", "border-image-slice", "border-image-source", "border-image-width", "border-left", "border-left-color", "border-left-style", "border-left-width", "border-radius", "border-right", "border-right-color", "border-right-style", "border-right-width", "border-spacing", "border-style", "border-top", "border-top-color", "border-top-left-radius", "border-top-right-radius", "border-top-style", "border-top-width", "border-width", "border", "bottom", "box-align", "box-decoration-break", "box-direction", "box-flex-group", "box-flex", "box-lines", "box-ordinal-group", "box-orient", "box-pack", "box-shadow", "box-sizing", "break-after", "break-before", "break-inside", "caption-side", "clear", "clip", "color-profile", "color", "column-count", "column-fill", "column-gap", "column-rule", "column-rule-color", "column-rule-style", "column-rule-width", "column-span", "column-width", "columns", "content", "counter-increment", "counter-reset", "crop", "cue-after", "cue-before", "cue", "cursor", "direction", "display", "dominant-baseline", "drop-initial-after-adjust", "drop-initial-after-align", "drop-initial-before-adjust", "drop-initial-before-align", "drop-initial-size", "drop-initial-value", "elevation", "empty-cells", "fit", "fit-position", "float-offset", "float", "font-family", "font-size", "font-size-adjust", "font-stretch", "font-style", "font-variant", "font-weight", "font", "grid-columns", "grid-rows", "hanging-punctuation", "height", "hyphenate-after", "hyphenate-before", "hyphenate-character", "hyphenate-lines", "hyphenate-resource", "hyphens", "icon", "image-orientation", "image-rendering", "image-resolution", "inline-box-align", "left", "letter-spacing", "line-height", "line-stacking-ruby", "line-stacking-shift", "line-stacking-strategy", "line-stacking", "list-style-image", "list-style-position", "list-style-type", "list-style", "margin-bottom", "margin-left", "margin-right", "margin-top", "margin", "mark-after", "mark-before", "mark", "marks", "marquee-direction", "marquee-play-count", "marquee-speed", "marquee-style", "max-height", "max-width", "min-height", "min-width", "move-to", "nav-down", "nav-index", "nav-left", "nav-right", "nav-up", "opacity", "orphans", "outline-color", "outline-offset", "outline-style", "outline-width", "outline", "overflow-style", "overflow-x", "overflow-y", "overflow", "padding-bottom", "padding-left", "padding-right", "padding-top", "padding", "page-break-after", "page-break-before", "page-break-inside", "page-policy", "page", "pause-after", "pause-before", "pause", "perspective-origin", "perspective", "phonemes", "pitch-range", "pitch", "play-during", "position", "presentation-level", "punctuation-trim", "quotes", "rendering-intent", "resize", "rest-after", "rest-before", "rest", "richness", "right", "rotation-point", "rotation", "ruby-align", "ruby-overhang", "ruby-position", "ruby-span", "size", "speak-header", "speak-numeral", "speak-punctuation", "speak", "speech-rate", "stress", "string-set", "table-layout", "target-name", "target-new", "target-position", "target", "text-align-last", "text-align", "text-decoration", "text-emphasis", "text-height", "text-indent", "text-justify", "text-outline", "text-shadow", "text-transform", "text-wrap", "top", "transform-origin", "transform-style", "transform", "transition-delay", "transition-duration", "transition-property", "transition-timing-function", "transition", "unicode-bidi", "vertical-align", "visibility", "voice-balance", "voice-duration", "voice-family", "voice-pitch-range", "voice-pitch", "voice-rate", "voice-stress", "voice-volume", "volume", "white-space-collapse", "white-space", "widows", "width", "word-break", "word-spacing", "word-wrap", "z-index"],
+    "function": ["rgb", "rgba", "url", "attr", "counter", "counters"],
+    "constant": ["absolute", "after-edge", "after", "all-scroll", "all", "alphabetic", "always", "antialiased", "armenian", "auto", "avoid-column", "avoid-page", "avoid", "balance", "baseline", "before-edge", "before", "below", "bidi-override", "block-line-height", "block", "bold", "bolder", "border-box", "both", "bottom", "box", "break-all", "break-word", "capitalize", "caps-height", "caption", "center", "central", "char", "circle", "cjk-ideographic", "clone", "close-quote", "col-resize", "collapse", "column", "consider-shifts", "contain", "content-box", "cover", "crosshair", "cubic-bezier", "dashed", "decimal-leading-zero", "decimal", "default", "disabled", "disc", "disregard-shifts", "distribute-all-lines", "distribute-letter", "distribute-space", "distribute", "dotted", "double", "e-resize", "ease-in", "ease-in-out", "ease-out", "ease", "ellipsis", "end", "exclude-ruby", "fill", "fixed", "georgian", "glyphs", "grid-height", "groove", "hand", "hanging", "hebrew", "help", "hidden", "hiragana-iroha", "hiragana", "horizontal", "icon", "ideograph-alpha", "ideograph-numeric", "ideograph-parenthesis", "ideograph-space", "ideographic", "inactive", "include-ruby", "inherit", "initial", "inline-block", "inline-box", "inline-line-height", "inline-table", "inline", "inset", "inside", "inter-ideograph", "inter-word", "invert", "italic", "justify", "katakana-iroha", "katakana", "keep-all", "last", "left", "lighter", "line-edge", "line-through", "line", "linear", "list-item", "local", "loose", "lower-alpha", "lower-greek", "lower-latin", "lower-roman", "lowercase", "lr-tb", "ltr", "mathematical", "max-height", "max-size", "medium", "menu", "message-box", "middle", "move", "n-resize", "ne-resize", "newspaper", "no-change", "no-close-quote", "no-drop", "no-open-quote", "no-repeat", "none", "normal", "not-allowed", "nowrap", "nw-resize", "oblique", "open-quote", "outset", "outside", "overline", "padding-box", "page", "pointer", "pre-line", "pre-wrap", "pre", "preserve-3d", "progress", "relative", "repeat-x", "repeat-y", "repeat", "replaced", "reset-size", "ridge", "right", "round", "row-resize", "rtl", "s-resize", "scroll", "se-resize", "separate", "slice", "small-caps", "small-caption", "solid", "space", "square", "start", "static", "status-bar", "step-end", "step-start", "steps", "stretch", "strict", "sub", "super", "sw-resize", "table-caption", "table-cell", "table-column-group", "table-column", "table-footer-group", "table-header-group", "table-row-group", "table-row", "table", "tb-rl", "text-after-edge", "text-before-edge", "text-bottom", "text-size", "text-top", "text", "thick", "thin", "transparent", "underline", "upper-alpha", "upper-latin", "upper-roman", "uppercase", "use-script", "vertical-ideographic", "vertical-text", "visible", "w-resize", "wait", "whitespace", "z-index", "zero"],
+    "color": ["aqua", "black", "blue", "fuchsia", "gray", "green", "lime", "maroon", "navy", "olive", "orange", "purple", "red", "silver", "teal", "white", "yellow"],
+    "font": ["arial", "century", "comic", "courier", "garamond", "georgia", "helvetica", "impact", "lucida", "symbol", "system", "tahoma", "times", "trebuchet", "utopia", "verdana", "webdings", "sans-serif", "serif", "monospace"],
+    "pseudo.element": ["after", "before", "first-letter", "first-line", "moz-selection", "selection"],
+    "pseudo.class": ["active", "checked", "disabled", "empty", "enabled", "first-child", "first-of-type", "focus", "hover", "indeterminate", "invalid", "last-child", "last-of-type", "link", "not", "nth-child", "nth-last-child", "nth-last-of-type", "nth-of-type", "only-child", "only-of-type", "required", "root", "target", "valid", "visited"]
+}