From 6c8a723e8a09b0f59ed4b91d15f0d3e99099c295 Mon Sep 17 00:00:00 2001 From: nightwing Date: Thu, 5 Apr 2018 23:25:32 +0400 Subject: [PATCH] update plugins to work with new dom based renderer in ace --- plugins/c9.ide.language.core/complete.css | 2 - plugins/c9.ide.language.core/completedp.js | 60 ++++++++------------ plugins/c9.ide.terminal/aceterm/aceterm.js | 65 ++++++++++------------ 3 files changed, 50 insertions(+), 77 deletions(-) diff --git a/plugins/c9.ide.language.core/complete.css b/plugins/c9.ide.language.core/complete.css index f67d104a..bec8ce6e 100644 --- a/plugins/c9.ide.language.core/complete.css +++ b/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; diff --git a/plugins/c9.ide.language.core/completedp.js b/plugins/c9.ide.language.core/completedp.js index 16bdb4f6..197e5b7b 100644 --- a/plugins/c9.ide.language.core/completedp.js +++ b/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) { - var match = this.data[row]; + function renderLine(lineEl, row, foldLine) { + var match = this.popup.data[row]; - var html = ""; + var icon = this.dom.createElement("span"); + icon.className = "completer-img " + (match.icon + ? 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) - : name.substr(0, this.prefix.length); + ? this.popup.calcPrefix(match.identifierRegex) + : 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); - html += '' - + prefix + "" + simpleName.substring(prefix.length) - + '' - + '' - + name.substring(Math.max(simpleName.length, prefix.length)) - + ''; + this.dom.buildDom(["span", { class: "main" + trim }, + ["u", prefix], simpleName.substring(prefix.length), + ["span", { class: "deferred" }, name.substring(Math.max(simpleName.length, prefix.length))] + ], lineEl); } else { - html += '' - + prefix + "" + name.substring(prefix.length) - + ''; + this.dom.buildDom(["span", { class: "main" + trim }, + ["u", prefix], name.substring(prefix.length) + ], lineEl); } } else { - html += '' + prefix + "" - + name.substring(prefix.length) + ''; + this.dom.buildDom(["span", { class: "main" + trim }, + ["span", { class: "deferred" }, ["u", prefix], name.substring(prefix.length)] + ], lineEl); } - if (match.meta) - html += ' - ' + match.meta + ''; - - builder.push(html); - } - - function renderLine(stringBuilder, row, onlyContents, foldLine) { - if (!onlyContents) { - stringBuilder.push( - "
" - ); + if (match.meta) { + this.dom.buildDom(["span", { class: "meta"}, match.meta], lineEl); } - this.popup.$renderLineInner(stringBuilder, row); - - if (!onlyContents) - stringBuilder.push("
"); } 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; diff --git a/plugins/c9.ide.terminal/aceterm/aceterm.js b/plugins/c9.ide.terminal/aceterm/aceterm.js index 2d411c22..ad21c9de 100644 --- a/plugins/c9.ide.terminal/aceterm/aceterm.js +++ b/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) { - if (!onlyContents) { - stringBuilder.push( - "
" - ); - } - this.$renderLineInner(stringBuilder, row); - - if (!onlyContents) - stringBuilder.push("
"); - }; - - Aceterm.renderLineInner = function(stringBuilder, row) { + Aceterm.renderLine = function(lineEl, row, foldLine) { 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) - out += ''; + if (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 = this.dom.createElement("span"); + span.appendChild(text); + span.className = "reverse-video"; this.$cur = null; } else { - out += '> 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] + ';'; - out += 'display:inline-block" class="aceterm-line-bg" l="' + i; + span.style.color = Terminal.colors[fgColor]; + span.style.display = "inline-block" + span.className = "aceterm-line-bg"; } - out += '">'; } } - if (ch <= ' ') out += ch == "\x00" ? "" : "\xa0"; - else if (ch == '&') - out += '&'; - else if (ch == '<') - out += '<'; else out += ch; attr = data; } - if (attr !== defAttr) - out += ''; - stringBuilder.push(out); + if (span) { + text.data = out; + lineEl.appendChild(span); + } }; }); \ No newline at end of file