From 5a0906af9b247b5a08452f8bdeb7def6e2b41c51 Mon Sep 17 00:00:00 2001 From: Fabian Jakobs Date: Mon, 25 Oct 2010 15:51:30 +0200 Subject: [PATCH 1/4] extract font size from themes --- src/ace/css/editor.css | 3 +++ src/ace/theme/Dawn.js | 4 ---- src/ace/theme/IdleFingers.js | 4 ---- src/ace/theme/Twilight.js | 4 ---- src/ace/theme/eclipse.css | 4 ---- src/ace/theme/tm.css | 4 ---- tool/Theme.tmpl.css | 4 ---- 7 files changed, 3 insertions(+), 24 deletions(-) diff --git a/src/ace/css/editor.css b/src/ace/css/editor.css index d2db5f81..cd52dfe1 100644 --- a/src/ace/css/editor.css +++ b/src/ace/css/editor.css @@ -1,6 +1,9 @@ .ace_editor { position: absolute; overflow: hidden; + + font-family: "Menlo", "Monaco", "Courier New", monospace; + font-size: 12px; } .ace_scroller { diff --git a/src/ace/theme/Dawn.js b/src/ace/theme/Dawn.js index d1167a67..99074e0e 100644 --- a/src/ace/theme/Dawn.js +++ b/src/ace/theme/Dawn.js @@ -13,8 +13,6 @@ require.def("ace/theme/Dawn", width: 50px;\ background: #e8e8e8;\ color: #333;\ - font-family: \"Menlo\", \"Monaco\", \"Courier New\", monospace;\ - font-size: 11px;\ overflow : hidden;\ }\ \ @@ -39,8 +37,6 @@ require.def("ace/theme/Dawn", .ace-dawn .ace_text-layer {\ cursor: text;\ color: #080808;\ - font-family: \"Menlo\", \"Monaco\", \"Courier New\", \"Courier\", monospace;\ - font-size: 11px;\ }\ \ .ace-dawn .ace_cursor {\ diff --git a/src/ace/theme/IdleFingers.js b/src/ace/theme/IdleFingers.js index a530fe8d..ced77897 100644 --- a/src/ace/theme/IdleFingers.js +++ b/src/ace/theme/IdleFingers.js @@ -13,8 +13,6 @@ require.def("ace/theme/IdleFingers", width: 50px;\ background: #e8e8e8;\ color: #333;\ - font-family: \"Menlo\", \"Monaco\", \"Courier New\", monospace;\ - font-size: 11px;\ overflow : hidden;\ }\ \ @@ -39,8 +37,6 @@ require.def("ace/theme/IdleFingers", .ace-idle-fingers .ace_text-layer {\ cursor: text;\ color: #FFFFFF;\ - font-family: \"Menlo\", \"Monaco\", \"Courier New\", \"Courier\", monospace;\ - font-size: 11px;\ }\ \ .ace-idle-fingers .ace_cursor {\ diff --git a/src/ace/theme/Twilight.js b/src/ace/theme/Twilight.js index 05a94a13..af70a7a5 100644 --- a/src/ace/theme/Twilight.js +++ b/src/ace/theme/Twilight.js @@ -13,8 +13,6 @@ require.def("ace/theme/Twilight", width: 50px;\ background: #e8e8e8;\ color: #333;\ - font-family: \"Menlo\", \"Monaco\", \"Courier New\", monospace;\ - font-size: 11px;\ overflow : hidden;\ }\ \ @@ -39,8 +37,6 @@ require.def("ace/theme/Twilight", .ace-twilight .ace_text-layer {\ cursor: text;\ color: #F8F8F8;\ - font-family: \"Menlo\", \"Monaco\", \"Courier New\", \"Courier\", monospace;\ - font-size: 11px;\ }\ \ .ace-twilight .ace_cursor {\ diff --git a/src/ace/theme/eclipse.css b/src/ace/theme/eclipse.css index 0afba302..ff24f87f 100644 --- a/src/ace/theme/eclipse.css +++ b/src/ace/theme/eclipse.css @@ -11,8 +11,6 @@ background: rgb(227, 227, 227); border-right: 1px solid rgb(159, 159, 159); color: rgb(136, 136, 136); - font-family: Monaco, "Courier New"; - font-size: 11px; } .ace-eclipse .ace_gutter-layer { @@ -21,8 +19,6 @@ } .ace-eclipse .ace_text-layer { - font-family: Monaco, "Courier New", monospace; - font-size: 11px; cursor: text; } diff --git a/src/ace/theme/tm.css b/src/ace/theme/tm.css index 0310bcf1..a6b002bc 100644 --- a/src/ace/theme/tm.css +++ b/src/ace/theme/tm.css @@ -10,8 +10,6 @@ width: 50px; background: #e8e8e8; color: #333; - font-family: "Menlo", "Monaco", "Courier New", monospace; - font-size: 11px; overflow : hidden; } @@ -31,8 +29,6 @@ .ace-tm .ace_text-layer { cursor: text; - font-family: "Menlo", "Monaco", "Courier New", "Courier", monospace; - font-size: 11px; } .ace-tm .ace_cursor { diff --git a/tool/Theme.tmpl.css b/tool/Theme.tmpl.css index 8a32f152..f6dccb05 100644 --- a/tool/Theme.tmpl.css +++ b/tool/Theme.tmpl.css @@ -10,8 +10,6 @@ width: 50px; background: #e8e8e8; color: #333; - font-family: "Menlo", "Monaco", "Courier New", monospace; - font-size: 11px; overflow : hidden; } @@ -36,8 +34,6 @@ .%cssClass% .ace_text-layer { cursor: text; color: %foreground%; - font-family: "Menlo", "Monaco", "Courier New", "Courier", monospace; - font-size: 11px; } .%cssClass% .ace_cursor { From 3d8d834aec770a99fb61dcdb6012cf0078b45442 Mon Sep 17 00:00:00 2001 From: Fabian Jakobs Date: Mon, 25 Oct 2010 16:19:39 +0200 Subject: [PATCH 2/4] make CSS highlighting more compatible with TextMate --- src/ace/layer/Text.js | 2 +- src/ace/mode/CssHighlightRules.js | 54 ++++++++++++++++++------------- src/ace/theme/Dawn.js | 8 +++-- src/ace/theme/IdleFingers.js | 6 +++- src/ace/theme/Twilight.js | 8 +++-- src/ace/theme/tm.css | 2 +- tool/Theme.tmpl.css | 8 +++-- tool/tmtheme.js | 3 ++ 8 files changed, 59 insertions(+), 32 deletions(-) diff --git a/src/ace/layer/Text.js b/src/ace/layer/Text.js index 1a966776..37780a67 100644 --- a/src/ace/layer/Text.js +++ b/src/ace/layer/Text.js @@ -244,7 +244,7 @@ var Text = function(parentEl) { .replace(/\t/g, this.$tabString); if (!this.$textToken[token.type]) { - var classes = "ace_" + token.type.replace(".", " ace_"); + var classes = "ace_" + token.type.replace(/\./g, " ace_"); stringBuilder.push("", output, ""); } else { diff --git a/src/ace/mode/CssHighlightRules.js b/src/ace/mode/CssHighlightRules.js index 39f053a0..9d25aab0 100644 --- a/src/ace/mode/CssHighlightRules.js +++ b/src/ace/mode/CssHighlightRules.js @@ -68,6 +68,11 @@ var CssHighlightRules = function() { "vertical-ideographic|vertical-text|visible|w-resize|wait|whitespace|" + "zero").split("|") ); + + var colors = lang.arrayToMap( + ("aqua|black|blue|fuchsia|gray|green|lime|maroon|navy|olive|orange|" + + "purple|red|silver|teal|white|yellow").split("|") + ); // regexp must not have capturing parentheses. Use (?:) instead. // regexps are ordered -> the first match is used @@ -100,61 +105,61 @@ var CssHighlightRules = function() { token : "string", // single line regex : "['](?:(?:\\\\.)|(?:[^'\\\\]))*?[']" }, { - token : "number", + token : "constant.numeric", regex : numRe + ic("em") }, { - token : "number", + token : "constant.numeric", regex : numRe + ic("ex") }, { - token : "number", + token : "constant.numeric", regex : numRe + ic("px") }, { - token : "number", + token : "constant.numeric", regex : numRe + ic("cm") }, { - token : "number", + token : "constant.numeric", regex : numRe + ic("mm") }, { - token : "number", + token : "constant.numeric", regex : numRe + ic("in") }, { - token : "number", + token : "constant.numeric", regex : numRe + ic("pt") }, { - token : "number", + token : "constant.numeric", regex : numRe + ic("pc") }, { - token : "number", + token : "constant.numeric", regex : numRe + ic("deg") }, { - token : "number", + token : "constant.numeric", regex : numRe + ic("rad") }, { - token : "number", + token : "constant.numeric", regex : numRe + ic("grad") }, { - token : "number", + token : "constant.numeric", regex : numRe + ic("ms") }, { - token : "number", + token : "constant.numeric", regex : numRe + ic("s") }, { - token : "number", + token : "constant.numeric", regex : numRe + ic("hz") }, { - token : "number", + token : "constant.numeric", regex : numRe + ic("khz") }, { - token : "number", + token : "constant.numeric", regex : numRe + "%" }, { - token : "number", + token : "constant.numeric", regex : numRe }, { - token : "number", // hex6 color + token : "constant.numeric", // hex6 color regex : "#[a-fA-F0-9]{6}" }, { - token : "number", // hex3 color + token : "constant.numeric", // hex3 color regex : "#[a-fA-F0-9]{3}" }, { token : "lparen", @@ -165,16 +170,19 @@ var CssHighlightRules = function() { }, { token : function(value) { if (properties[value.toLowerCase()]) { - return "constant.language"; + return "support.type"; } else if (functions[value.toLowerCase()]) { - return "function.language"; + return "support.function"; } else if (constants[value.toLowerCase()]) { - return "constant.library"; + return "support.constant"; + } + else if (colors[value.toLowerCase()]) { + return "support.constant.color"; } else { - return "identifier"; + return "text"; } }, regex : "\\-?[a-zA-Z_][a-zA-Z0-9_\\-]*" diff --git a/src/ace/theme/Dawn.js b/src/ace/theme/Dawn.js index 99074e0e..7d4daf9d 100644 --- a/src/ace/theme/Dawn.js +++ b/src/ace/theme/Dawn.js @@ -111,8 +111,12 @@ font-style:italic;\ color:#B52A1D;\ }\ \ -.ace-dawn .ace_function {\ - \ +.ace-dawn .ace_support {\ + color:#691C97;\ +}\ +\ +.ace-dawn .ace_support.ace_function {\ + color:#693A17;\ }\ \ .ace-dawn .ace_function.ace_buildin {\ diff --git a/src/ace/theme/IdleFingers.js b/src/ace/theme/IdleFingers.js index ced77897..d52bc240 100644 --- a/src/ace/theme/IdleFingers.js +++ b/src/ace/theme/IdleFingers.js @@ -107,10 +107,14 @@ background-color:#FF0000;\ \ }\ \ -.ace-idle-fingers .ace_function {\ +.ace-idle-fingers .ace_support {\ \ }\ \ +.ace-idle-fingers .ace_support.ace_function {\ + color:#B83426;\ +}\ +\ .ace-idle-fingers .ace_function.ace_buildin {\ \ }\ diff --git a/src/ace/theme/Twilight.js b/src/ace/theme/Twilight.js index af70a7a5..e228f62a 100644 --- a/src/ace/theme/Twilight.js +++ b/src/ace/theme/Twilight.js @@ -109,8 +109,12 @@ font-style:italic;\ color:#D2A8A1;\ }\ \ -.ace-twilight .ace_function {\ - \ +.ace-twilight .ace_support {\ + color:#9B859D;\ +}\ +\ +.ace-twilight .ace_support.ace_function {\ + color:#DAD085;\ }\ \ .ace-twilight .ace_function.ace_buildin {\ diff --git a/src/ace/theme/tm.css b/src/ace/theme/tm.css index a6b002bc..4e331482 100644 --- a/src/ace/theme/tm.css +++ b/src/ace/theme/tm.css @@ -61,7 +61,7 @@ color: white; } -.ace-tm .ace_line .ace_function { +.ace-tm .ace_line .ace_support.ace_function { color: rgb(60, 76, 114); } diff --git a/tool/Theme.tmpl.css b/tool/Theme.tmpl.css index f6dccb05..3ce12e1d 100644 --- a/tool/Theme.tmpl.css +++ b/tool/Theme.tmpl.css @@ -103,8 +103,12 @@ %invalid.deprecated% } -.%cssClass% .ace_function { - %function% +.%cssClass% .ace_support { + %support% +} + +.%cssClass% .ace_support.ace_function { + %support.function% } .%cssClass% .ace_function.ace_buildin { diff --git a/tool/tmtheme.js b/tool/tmtheme.js index 0540a376..bce7a1d7 100644 --- a/tool/tmtheme.js +++ b/tool/tmtheme.js @@ -63,6 +63,9 @@ var supportedScopes = { "constant.library": "constant.library", "constant.numeric": "constant.numeric", + "support": "support", + "support.function": "support.function", + "function": "function", "function.buildin": "function.buildin", From 7d62c76128954184d001bdc91bd927136ef0f602 Mon Sep 17 00:00:00 2001 From: Fabian Jakobs Date: Mon, 25 Oct 2010 16:39:48 +0200 Subject: [PATCH 3/4] the cursor works always in document space --- src/ace/Document.js | 8 -------- src/ace/Selection.js | 2 +- 2 files changed, 1 insertion(+), 9 deletions(-) diff --git a/src/ace/Document.js b/src/ace/Document.js index 40df85df..44aaae39 100644 --- a/src/ace/Document.js +++ b/src/ace/Document.js @@ -259,14 +259,6 @@ var Document = function(text, mode) { return this.lines[row] || ""; }; - /** - * Get a line as it is displayed on screen. Tabs are replaced by spaces. - */ - this.getDisplayLine = function(row) { - var tab = new Array(this.getTabSize()+1).join(" "); - return this.lines[row].replace(/\t/g, tab); - }; - this.getLines = function(firstRow, lastRow) { return this.lines.slice(firstRow, lastRow+1); }; diff --git a/src/ace/Selection.js b/src/ace/Selection.js index d7d01854..6609ff81 100644 --- a/src/ace/Selection.js +++ b/src/ace/Selection.js @@ -287,7 +287,7 @@ var Selection = function(doc) { this.moveCursorLineStart = function() { var row = this.selectionLead.row; var column = this.selectionLead.column; - var beforeCursor = this.doc.getDisplayLine(row).slice(0, column); + var beforeCursor = this.doc.getLine(row).slice(0, column); var leadingSpace = beforeCursor.match(/^\s+/); if (!leadingSpace || leadingSpace[0].length >= column) this.moveCursorTo(this.selectionLead.row, 0); From 38be2616aad43ae69756582e704277306d02b814 Mon Sep 17 00:00:00 2001 From: Fabian Jakobs Date: Mon, 25 Oct 2010 16:40:18 +0200 Subject: [PATCH 4/4] spaces are not treated as invisibles (matches textmate) --- src/ace/layer/Text.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/ace/layer/Text.js b/src/ace/layer/Text.js index 37780a67..8a43e005 100644 --- a/src/ace/layer/Text.js +++ b/src/ace/layer/Text.js @@ -221,18 +221,18 @@ var Text = function(parentEl) { }; this.$renderLine = function(stringBuilder, row, tokens) { - if (this.$showInvisibles) { - var self = this; - var spaceRe = /[\v\f \u00a0\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u2028\u2029\u3000]+/g; - var spaceReplace = function(space) { - var space = new Array(space.length+1).join(self.SPACE_CHAR); - return "" + space + ""; - }; - } - else { +// if (this.$showInvisibles) { +// var self = this; +// var spaceRe = /[\v\f \u00a0\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u2028\u2029\u3000]+/g; +// var spaceReplace = function(space) { +// var space = new Array(space.length+1).join(self.SPACE_CHAR); +// return "" + space + ""; +// }; +// } +// else { var spaceRe = /[\v\f \u00a0\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u2028\u2029\u3000]/g; var spaceReplace = " "; - } +// } for ( var i = 0; i < tokens.length; i++) { var token = tokens[i];