update plugins to work with new dom based renderer in ace

plugins/c9.ide.language.core/complete.css

@@ -136,9 +136,7 @@
 
 .code_complete_text .ace_line{
     background : transparent;
-    
     overflow: hidden;
-    position: relative;
     white-space: nowrap;
     /*padding : 0 0 1px 0; */ /*todo requires special handling in ace*/
     pointer-events: auto;

plugins/c9.ide.language.core/completedp.js

@@ -1,5 +1,4 @@
 define(function(require, exports, module) {
-    var escapeHTML = require("ace/lib/lang").escapeHTML;
     
     var guidToShortString = exports.guidToShortString = function(guid) {
         var result = guid && guid.replace(/^[^:]+:(([^\/]+)\/)*?([^\/]*?)(\[\d+[^\]]*\])?(\/prototype)?$|.*/, "$3");
@@ -41,12 +40,14 @@ define(function(require, exports, module) {
     function tokenizeRow() {
         return [];
     }
-    function renderLineInner(builder, row) {
+    function renderLine(lineEl, row, foldLine) {
-        var match = this.data[row];
+        var match = this.popup.data[row];
         
-        var html = "<span class='completer-img " + (match.icon 
+        var icon = this.dom.createElement("span");
-            ? iconClass[match.icon] || this.$defineIcon(match.icon)
+        icon.className = "completer-img " + (match.icon 
-            : "") + "'></span>";
+            ? iconClass[match.icon] || this.popup.$defineIcon(match.icon)
+            : "");
+        lineEl.appendChild(icon);
         
         if (match.type) {
             var shortType = guidToShortString(match.type);
@@ -54,58 +55,41 @@ define(function(require, exports, module) {
                 match.meta = shortType;
         }
         
-        var name = escapeHTML(match.name);
+        var name = match.name;
         var prefix = match.identifierRegex
-            ? this.calcPrefix(match.identifierRegex)
+            ? this.popup.calcPrefix(match.identifierRegex)
-            : name.substr(0, this.prefix.length);
+            : name.substr(0, this.popup.prefix.length);
         
         var trim = match.meta ? " maintrim" : "";
         if (!this.ignoreGenericMatches || !match.isGeneric) {
             var simpleName = match.replaceText.replace("^^", "").replace(/\(\)$/, "");
             if (name.indexOf(simpleName) === 0) {
-                simpleName = escapeHTML(simpleName);
+                this.dom.buildDom(["span", { class: "main" + trim }, 
-                html += '<span class="main' + trim + '"><u>' 
+                    ["u", prefix], simpleName.substring(prefix.length),
-                    + prefix + "</u>" + simpleName.substring(prefix.length) 
+                    ["span", { class: "deferred" }, name.substring(Math.max(simpleName.length, prefix.length))]
-                    + '</span>'
+                ], lineEl);
-                    + '<span class="deferred">'
-                    + name.substring(Math.max(simpleName.length, prefix.length))
-                    + '</span>';
             }
             else {
-                html += '<span class="main' + trim + '"><u>' 
+                this.dom.buildDom(["span", { class: "main" + trim }, 
-                    + prefix + "</u>" + name.substring(prefix.length) 
+                    ["u", prefix], name.substring(prefix.length)
-                    + '</span>';
+                ], lineEl);
             }
         }
         else {
-            html += '<span class="main' + trim 
+            this.dom.buildDom(["span", { class: "main" + trim }, 
-                + '"><span class="deferred"><u>' + prefix + "</u>" 
+                ["span", { class: "deferred" }, ["u", prefix], name.substring(prefix.length)]
-                + name.substring(prefix.length) + '</span></span>';
+            ], lineEl);
         }
         
-        if (match.meta)
+        if (match.meta) {
-            html += '<span class="meta"> - ' + match.meta + '</span>';
+            this.dom.buildDom(["span", { class: "meta"}, match.meta], lineEl);
-        
-        builder.push(html);
-    }
-    
-    function renderLine(stringBuilder, row, onlyContents, foldLine) {
-        if (!onlyContents) {
-            stringBuilder.push(
-                "<div class='ace_line' style='height:", this.config.lineHeight, "px'>"
-            );
         }
-        this.popup.$renderLineInner(stringBuilder, row);
-    
-        if (!onlyContents)
-            stringBuilder.push("</div>");
     }
     
     exports.initPopup = function(popup, staticUrl) {
         popup.session.bgTokenizer.popup = popup;
         popup.session.bgTokenizer.$tokenizeRow = tokenizeRow;
         popup.renderer.$textLayer.popup = popup;
-        popup.$renderLineInner = renderLineInner;
         popup.$defineIcon = defineIcon;
         popup.renderer.$textLayer.$renderLine = renderLine;
         popup.staticUrl = staticUrl;

plugins/c9.ide.terminal/aceterm/aceterm.js

@@ -456,26 +456,12 @@ define(function(require, exports, module) {
         ace.renderer.$textLayer.element.style.overflow = "visible";
         
         ace.renderer.$textLayer.$renderLine = Aceterm.renderLine;
-            
-        ace.renderer.$textLayer.$renderLineInner = Aceterm.renderLineInner;
         
         ace.setOption("showPrintMargin", false);
         ace.setOption("highlightActiveLine", false);
     }
     
-    Aceterm.renderLine = function(stringBuilder, row, onlyContents, foldLine) {
+    Aceterm.renderLine = function(lineEl, row, foldLine) {
-        if (!onlyContents) {
-            stringBuilder.push(
-                "<div class='ace_line' style='height:", this.config.lineHeight, "px'>"
-            );
-        }
-        this.$renderLineInner(stringBuilder, row);
-    
-        if (!onlyContents)
-            stringBuilder.push("</div>");
-    };
-    
-    Aceterm.renderLineInner = function(stringBuilder, row) {
         var term = this.session.term;
         if (!term)
             return;
@@ -498,7 +484,8 @@ define(function(require, exports, module) {
             : -1;
 
         var defAttr = term.defAttr;
-        var attr = defAttr;
+        var attr;
+        var span, text;
         for (var i = 0; i < width; i++) {
             var token = line[i] || term.ch;
             var data = token[0];
@@ -507,15 +494,23 @@ define(function(require, exports, module) {
             if (i === x) data = -1;
     
             if (data !== attr) {
-                if (attr !== defAttr)
+                if (span) {
-                    out += '</span>';
+                    text.data = out;
+                    lineEl.appendChild(span);
+                    out = "";
+                    span = null;
+                }
+                text = this.dom.createTextNode();
                 if (data === defAttr) {
-                    // do nothing
+                    span = text;
                 } else if (data === -1) {
-                    out += '<span class="reverse-video">';
+                    span = this.dom.createElement("span");
+                    span.appendChild(text);
+                    span.className = "reverse-video";
                     this.$cur = null;
                 } else {
-                    out += '<span style="';
+                    span = this.dom.createElement("span");
+                    span.appendChild(text);
 
                     bgColor = data & 0x1ff;
                     fgColor = (data >> 9) & 0x1ff;
@@ -523,47 +518,43 @@ define(function(require, exports, module) {
 
                     if (flags & 1) {
                         if (this.$fontMetrics.allowBoldFonts)
-                            out += 'font-weight:bold;';
+                            span.style.fontWeight = "bold";
                         // see: XTerm*boldColors
                         if (fgColor < 8)
                             fgColor += 8;
                     }
 
                     if (flags & 2)
-                        out += 'text-decoration:underline;';
+                        span.style.textDecoration = "underline";
 
                     if (bgColor === 256) {
                         if (fgColor !== 257)
-                            out += 'color:' + (
+                            span.style.color = (
                                 Terminal.overridenColors[fgColor] ||
                                 Terminal.colors[fgColor]
-                            ) + ';';
+                            );
                     } else {
-                        out += 'background-color:' + Terminal.colors[bgColor] + ';';
+                        span.style.backgroundColor = Terminal.colors[bgColor];
                         if (fgColor !== 257)
-                            out += 'color:' + Terminal.colors[fgColor] + ';';
+                            span.style.color = Terminal.colors[fgColor];
-                        out += 'display:inline-block" class="aceterm-line-bg" l="' + i;
+                        span.style.display = "inline-block" 
+                        span.className = "aceterm-line-bg";
                     }
-                    out += '">';
                 }
             }
-    
             
             if (ch <= ' ')
                 out += ch == "\x00" ? "" : "\xa0";
-            else if (ch == '&')
-                out += '&#38;';
-            else if (ch == '<')
-                out += '&#60;';
             else
                 out += ch;
     
             attr = data;
         }
     
-        if (attr !== defAttr)
+        if (span) {
-            out += '</span>';
+            text.data = out;
-        stringBuilder.push(out);
+            lineEl.appendChild(span);
+        }
     };
 
 });