From 43cb4f471fb69ec1bd7d5f0bf99fe867c8056d56 Mon Sep 17 00:00:00 2001 From: yutaka Date: Fri, 3 Mar 2017 07:57:05 +0000 Subject: [PATCH 01/26] Set charMeasure.height values to each row height --- src/xterm.js | 23 +++++++++++++++++------ 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/src/xterm.js b/src/xterm.js index a08e9dd1..8385b601 100644 --- a/src/xterm.js +++ b/src/xterm.js @@ -562,6 +562,7 @@ Terminal.bindKeys = function(term) { Terminal.prototype.insertRow = function (row) { if (typeof row != 'object') { row = document.createElement('div'); + row.style.height = this.charMeasure.height + 'px'; } this.rowContainer.appendChild(row); @@ -642,17 +643,18 @@ Terminal.prototype.open = function(parent) { this.charSizeStyleElement = document.createElement('style'); this.helperContainer.appendChild(this.charSizeStyleElement); + this.charMeasure = new CharMeasure(document, this.helperContainer); + this.charMeasure.on('charsizechanged', function () { + self.updateCharSizeCSS(); + self.updateRowHeight(); + }); + this.charMeasure.measure(); + for (; i < this.rows; i++) { this.insertRow(); } this.parent.appendChild(this.element); - this.charMeasure = new CharMeasure(document, this.helperContainer); - this.charMeasure.on('charsizechanged', function () { - self.updateCharSizeCSS(); - }); - this.charMeasure.measure(); - this.viewport = new Viewport(this, this.viewportElement, this.viewportScrollArea, this.charMeasure); this.renderer = new Renderer(this); @@ -714,6 +716,15 @@ Terminal.prototype.updateCharSizeCSS = function() { this.charSizeStyleElement.textContent = '.xterm-wide-char{width:' + (this.charMeasure.width * 2) + 'px;}'; } +/** + * Updates the height for each rows + */ +Terminal.prototype.updateRowHeight = function() { + for (var i = 0; i < this.children.length; ++i) { + this.children[i].style.height = this.charMeasure.height + 'px'; + } +} + /** * XTerm mouse events * http://invisible-island.net/xterm/ctlseqs/ctlseqs.html#Mouse%20Tracking From dc3a136704e1a33aac72317e8385258399e94da6 Mon Sep 17 00:00:00 2001 From: Aleksandr Andrienko Date: Tue, 28 Feb 2017 11:30:47 +0200 Subject: [PATCH 02/26] Use tsconfig.json data in gulpfile.js instead of hardcoded values. Use tsconfig.json data in gulpfile.js instead of hardcoded values. Little code clean up Signed-off-by: Aleksandr Andrienko --- gulpfile.js | 39 ++++++++++++++++++++------------------- 1 file changed, 20 insertions(+), 19 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 2e58d26c..feaa3dcf 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -13,27 +13,28 @@ const ts = require('gulp-typescript'); let buildDir = process.env.BUILD_DIR || 'build'; - +let tsProject = ts.createProject('tsconfig.json'); +let srcDir = tsProject.config.compilerOptions.rootDir; +let outDir = tsProject.config.compilerOptions.outDir; /** * Compile TypeScript sources to JavaScript files and create a source map file for each TypeScript * file compiled. */ gulp.task('tsc', function () { - // Remove the lib/ directory to prevent confusion if files were deleted in src/ - fs.emptyDirSync('lib'); + // Remove the ${outDir}/ directory to prevent confusion if files were deleted in ${srcDir}/ + fs.emptyDirSync(`${outDir}`); - // Build all TypeScript files (including tests) to lib/, based on the configuration defined in + // Build all TypeScript files (including tests) to ${outDir}/, based on the configuration defined in // `tsconfig.json`. - let tsProject = ts.createProject('tsconfig.json'); let tsResult = tsProject.src().pipe(sourcemaps.init()).pipe(tsProject()); - let tsc = tsResult.js.pipe(sourcemaps.write('.', {includeContent: false, sourceRoot: ''})).pipe(gulp.dest('lib')); + let tsc = tsResult.js.pipe(sourcemaps.write('.', {includeContent: false, sourceRoot: ''})).pipe(gulp.dest(outDir)); - // Copy all addons from src/ to lib/ - let copyAddons = gulp.src('src/addons/**/*').pipe(gulp.dest('lib/addons')); + // Copy all addons from ${srcDir}/ to ${outDir}/ + let copyAddons = gulp.src(`${srcDir}/addons/**/*`).pipe(gulp.dest(`${outDir}/addons`)); - // Copy stylesheets from src/ to lib/ - let copyStylesheets = gulp.src('src/**/*.css').pipe(gulp.dest('lib')); + // Copy stylesheets from ${srcDir}/ to ${outDir}/ + let copyStylesheets = gulp.src(`${srcDir}/**/*.css`).pipe(gulp.dest(outDir)); return merge(tsc, copyAddons, copyStylesheets); }); @@ -49,7 +50,7 @@ gulp.task('browserify', ['tsc'], function() { let browserifyOptions = { basedir: buildDir, debug: true, - entries: ['../lib/xterm.js'], + entries: [`../${outDir}/xterm.js`], standalone: 'Terminal', cache: {}, packageCache: {} @@ -62,17 +63,17 @@ gulp.task('browserify', ['tsc'], function() { .pipe(sourcemaps.write('./')) .pipe(gulp.dest(buildDir)); - // Copy all add-ons from lib/ to buildDir - let copyAddons = gulp.src('lib/addons/**/*').pipe(gulp.dest(`${buildDir}/addons`)); + // Copy all add-ons from ${outDir}/ to buildDir + let copyAddons = gulp.src(`${outDir}/addons/**/*`).pipe(gulp.dest(`${buildDir}/addons`)); - // Copy stylesheets from src/ to lib/ - let copyStylesheets = gulp.src('lib/**/*.css').pipe(gulp.dest(buildDir)); + // Copy stylesheets from ${outDir}/ to ${buildDir}/ + let copyStylesheets = gulp.src(`${outDir}/**/*.css`).pipe(gulp.dest(buildDir)); return merge(bundleStream, copyAddons, copyStylesheets); }); gulp.task('instrument-test', function () { - return gulp.src(['lib/**/*.js']) + return gulp.src([`${outDir}/**/*.js`]) // Covering files .pipe(istanbul()) // Force `require` to return covered files @@ -80,7 +81,7 @@ gulp.task('instrument-test', function () { }); gulp.task('mocha', ['instrument-test'], function () { - return gulp.src(['lib/*test.js', 'lib/**/*test.js'], {read: false}) + return gulp.src([`${outDir}/*test.js`, `${outDir}/**/*test.js`], {read: false}) .pipe(mocha()) .pipe(istanbul.writeReports()); }); @@ -88,11 +89,11 @@ gulp.task('mocha', ['instrument-test'], function () { /** * Use `sorcery` to resolve the source map chain and point back to the TypeScript files. * (Without this task the source maps produced for the JavaScript bundle points into the - * compiled JavaScript files in lib/). + * compiled JavaScript files in ${outDir}/). */ gulp.task('sorcery', ['browserify'], function () { var chain = sorcery.loadSync(`${buildDir}/xterm.js`); - var map = chain.apply(); + chain.apply(); chain.writeSync(); }); From 31a0996b2f6084621bb18dbd836dbadad91433ea Mon Sep 17 00:00:00 2001 From: yutaka Date: Wed, 8 Mar 2017 00:27:22 +0000 Subject: [PATCH 03/26] Revert "Set charMeasure.height values to each row height" This reverts commit 43cb4f471fb69ec1bd7d5f0bf99fe867c8056d56. --- src/xterm.js | 23 ++++++----------------- 1 file changed, 6 insertions(+), 17 deletions(-) diff --git a/src/xterm.js b/src/xterm.js index 8385b601..a08e9dd1 100644 --- a/src/xterm.js +++ b/src/xterm.js @@ -562,7 +562,6 @@ Terminal.bindKeys = function(term) { Terminal.prototype.insertRow = function (row) { if (typeof row != 'object') { row = document.createElement('div'); - row.style.height = this.charMeasure.height + 'px'; } this.rowContainer.appendChild(row); @@ -643,18 +642,17 @@ Terminal.prototype.open = function(parent) { this.charSizeStyleElement = document.createElement('style'); this.helperContainer.appendChild(this.charSizeStyleElement); - this.charMeasure = new CharMeasure(document, this.helperContainer); - this.charMeasure.on('charsizechanged', function () { - self.updateCharSizeCSS(); - self.updateRowHeight(); - }); - this.charMeasure.measure(); - for (; i < this.rows; i++) { this.insertRow(); } this.parent.appendChild(this.element); + this.charMeasure = new CharMeasure(document, this.helperContainer); + this.charMeasure.on('charsizechanged', function () { + self.updateCharSizeCSS(); + }); + this.charMeasure.measure(); + this.viewport = new Viewport(this, this.viewportElement, this.viewportScrollArea, this.charMeasure); this.renderer = new Renderer(this); @@ -716,15 +714,6 @@ Terminal.prototype.updateCharSizeCSS = function() { this.charSizeStyleElement.textContent = '.xterm-wide-char{width:' + (this.charMeasure.width * 2) + 'px;}'; } -/** - * Updates the height for each rows - */ -Terminal.prototype.updateRowHeight = function() { - for (var i = 0; i < this.children.length; ++i) { - this.children[i].style.height = this.charMeasure.height + 'px'; - } -} - /** * XTerm mouse events * http://invisible-island.net/xterm/ctlseqs/ctlseqs.html#Mouse%20Tracking From f0d5b4012134a617408c38eb98382c1ef36ebe17 Mon Sep 17 00:00:00 2001 From: yutaka Date: Wed, 8 Mar 2017 01:03:18 +0000 Subject: [PATCH 04/26] Detect bold font was broken correctly. --- src/Renderer.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/Renderer.ts b/src/Renderer.ts index 9b6234ca..e1ebbe8f 100644 --- a/src/Renderer.ts +++ b/src/Renderer.ts @@ -34,7 +34,7 @@ export class Renderer { // Figure out whether boldness affects // the character width of monospace fonts. if (brokenBold === null) { - brokenBold = checkBoldBroken((this._terminal).document); + brokenBold = checkBoldBroken((this._terminal).element); } // TODO: Pull more DOM interactions into Renderer.constructor, element for @@ -291,14 +291,14 @@ export class Renderer { // if bold is broken, we can't // use it in the terminal. -function checkBoldBroken(document) { - const body = document.getElementsByTagName('body')[0]; +function checkBoldBroken(terminal) { + const document = terminal.ownerDocument; const el = document.createElement('span'); el.innerHTML = 'hello world'; - body.appendChild(el); + terminal.appendChild(el); const w1 = el.scrollWidth; el.style.fontWeight = 'bold'; const w2 = el.scrollWidth; - body.removeChild(el); + terminal.removeChild(el); return w1 !== w2; } From 2ec756fd6bfadf2689d1c243960efaa01a7f93a4 Mon Sep 17 00:00:00 2001 From: yutaka Date: Wed, 8 Mar 2017 00:44:57 +0000 Subject: [PATCH 05/26] Use offsetWidth instead of scrollWidth scrollWidth does not work on Chrome with `display: inline` element. --- src/Renderer.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Renderer.ts b/src/Renderer.ts index e1ebbe8f..a839e7d9 100644 --- a/src/Renderer.ts +++ b/src/Renderer.ts @@ -296,9 +296,9 @@ function checkBoldBroken(terminal) { const el = document.createElement('span'); el.innerHTML = 'hello world'; terminal.appendChild(el); - const w1 = el.scrollWidth; + const w1 = el.offsetWidth; el.style.fontWeight = 'bold'; - const w2 = el.scrollWidth; + const w2 = el.offsetWidth; terminal.removeChild(el); return w1 !== w2; } From 4b2ae6a79fb0f899e895093ef440ac9977210d8f Mon Sep 17 00:00:00 2001 From: yutaka Date: Wed, 8 Mar 2017 05:12:25 +0000 Subject: [PATCH 06/26] Use rendered height for detect broken bold font. --- src/Renderer.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/Renderer.ts b/src/Renderer.ts index a839e7d9..4131abc4 100644 --- a/src/Renderer.ts +++ b/src/Renderer.ts @@ -297,8 +297,10 @@ function checkBoldBroken(terminal) { el.innerHTML = 'hello world'; terminal.appendChild(el); const w1 = el.offsetWidth; + const h1 = el.offsetHeight; el.style.fontWeight = 'bold'; const w2 = el.offsetWidth; + const h2 = el.offsetHeight; terminal.removeChild(el); - return w1 !== w2; + return w1 !== w2 || h1 !== h2; } From 3c3a646d423caad334b2086e76d2ccdf34f6d4f7 Mon Sep 17 00:00:00 2001 From: Michael Irwin Date: Tue, 14 Mar 2017 17:02:53 -0400 Subject: [PATCH 07/26] Fixed characterHeight calculation, which could cause overflowing The previous calculation was simply using the height of the letter W, but wasn't taking into account that each row has a lineHeight, which might be greater. If the lineHeight is .4px off, after many rows, it will cause the proposedGeometry to have an extra row, potentially causing hidden rows (based on layout). --- src/addons/fit/fit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/addons/fit/fit.js b/src/addons/fit/fit.js index 11fc6eb7..390cc0e9 100644 --- a/src/addons/fit/fit.js +++ b/src/addons/fit/fit.js @@ -56,7 +56,7 @@ subjectRow.innerHTML = 'W'; // Common character for measuring width, although on monospace characterWidth = subjectRow.getBoundingClientRect().width; subjectRow.style.display = ''; // Revert style before calculating height, since they differ. - characterHeight = parseInt(subjectRow.offsetHeight); + characterHeight = parseFloat(term.rowContainer.style.lineHeight); subjectRow.innerHTML = contentBuffer; rows = parseInt(availableHeight / characterHeight); From 8cf76cc6e93d8a109a59d7315405dca3150e134e Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Tue, 14 Mar 2017 15:15:36 -0700 Subject: [PATCH 08/26] Polish development and contribution section --- README.md | 22 +--------------------- 1 file changed, 1 insertion(+), 21 deletions(-) diff --git a/README.md b/README.md index 84b116df..9c22a777 100644 --- a/README.md +++ b/README.md @@ -121,27 +121,7 @@ The existing releases are available at this GitHub repo's [Releases](https://git Xterm.js is maintained by [SourceLair](https://www.sourcelair.com/) and a few external contributors, but we would love to receive contributions from everyone! -To contribute either code, documentation or issues to xterm.js please read the [Contributing document](CONTRIBUTING.md) before. - -The development of xterm.js does not require any special tool. All you need is an editor that supports JavaScript and a browser (if you would like to run the demo you will need Node.js to get all features). - -It is recommended though to use a development tool that uses xterm.js internally, to develop for xterm.js. [Eating our own dogfood](https://en.wikipedia.org/wiki/Eating_your_own_dog_food) has been proved extremely beneficial for this project. Known tools that use xterm.js internally are: - -#### [SourceLair](https://www.sourcelair.com) - -Visit https://lair.io/sourcelair/xterm and follow the instructions. All development will happen in your browser. - -#### [Visual Studio Code](http://code.visualstudio.com/) - -[Download Visual Studio Code](http://code.visualstudio.com/Download), clone xterm.js and you are all set. - -#### [Eclipse Che](http://www.eclipse.org/che) - -You can start Eclipse Che with `docker run eclipse/che start`. - -#### [Codenvy](http://www.codenvy.io) - -You can create a trial account or install an enterprise version with `docker run codenvy/cli start`. +To contribute either code, documentation or issues to xterm.js please read the [Contributing document](CONTRIBUTING.md) beforehand. The development of xterm.js does not require any special tool. All you need is an editor that supports JavaScript/TypeScript and a browser. You will need Node.js installed locally to get all the features working in the demo. ## License Agreement From 0cb8ecc6f72638aa65f6c04fc5fd5a241f2f482c Mon Sep 17 00:00:00 2001 From: Michael Irwin Date: Wed, 15 Mar 2017 08:28:44 -0400 Subject: [PATCH 09/26] Use boundingClientRect instead of style to get actual height PR #598 --- src/addons/fit/fit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/addons/fit/fit.js b/src/addons/fit/fit.js index 390cc0e9..46b79e9b 100644 --- a/src/addons/fit/fit.js +++ b/src/addons/fit/fit.js @@ -56,7 +56,7 @@ subjectRow.innerHTML = 'W'; // Common character for measuring width, although on monospace characterWidth = subjectRow.getBoundingClientRect().width; subjectRow.style.display = ''; // Revert style before calculating height, since they differ. - characterHeight = parseFloat(term.rowContainer.style.lineHeight); + characterHeight = subjectRow.getBoundingClientRect().height; subjectRow.innerHTML = contentBuffer; rows = parseInt(availableHeight / characterHeight); From 9055bace966d7ef6862d1596a369ee306f00dbaf Mon Sep 17 00:00:00 2001 From: Paris Kasidiaris Date: Wed, 15 Mar 2017 18:28:17 +0200 Subject: [PATCH 10/26] Fix cursor style on blurred terminals --- src/xterm.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/xterm.css b/src/xterm.css index b7f120f9..aac95444 100644 --- a/src/xterm.css +++ b/src/xterm.css @@ -86,7 +86,7 @@ text-decoration: none; } -.terminal:not(.xterm-cursor-style-underline):not(.xterm-cursor-style-bar) .terminal-cursor { +.terminal.focus:not(.xterm-cursor-style-underline):not(.xterm-cursor-style-bar) .terminal-cursor { background-color: #fff; color: #000; } From 5225a6e27a54314d28564296bf60a8e59d969037 Mon Sep 17 00:00:00 2001 From: Paris Kasidiaris Date: Wed, 15 Mar 2017 18:36:06 +0200 Subject: [PATCH 11/26] Rebuild xterm.js even when CSS changes Otherwise you had to run `npm build` manually every time you changed a CSS file to see the updated result in the demo. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 27579a0d..c1d07e3c 100644 --- a/package.json +++ b/package.json @@ -68,7 +68,7 @@ "scripts": { "prestart": "npm run build", "start": "node demo/app", - "dev": "nodemon -e js,ts --watch src --watch demo --exec npm start", + "dev": "nodemon -e js,ts,css --watch src --watch demo --exec npm start", "lint": "tslint src/*.ts src/**/*.ts", "test": "gulp test", "build:docs": "jsdoc -c jsdoc.json", From b68180b97bde51b2cb85923921eee2e35e0c79ed Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Wed, 15 Mar 2017 13:54:36 -0700 Subject: [PATCH 12/26] Allow ~ char in linkify path and query fragments --- src/Linkifier.test.ts | 14 ++++++++++++++ src/Linkifier.ts | 4 ++-- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/src/Linkifier.test.ts b/src/Linkifier.test.ts index 012b1b68..ca393c21 100644 --- a/src/Linkifier.test.ts +++ b/src/Linkifier.test.ts @@ -49,6 +49,20 @@ describe('Linkifier', () => { element.dispatchEvent(event); } + function assertLinkifiesEntireRow(uri: string, done: MochaDone) { + addRow(uri); + linkifier.linkifyRow(0); + setTimeout(() => { + assert.equal((rows[0].firstChild).tagName, 'A'); + assert.equal((rows[0].firstChild).textContent, uri); + done(); + }, 0); + } + + describe('http links', () => { + it('should allow ~ character in URI path', done => assertLinkifiesEntireRow('http://foo.com/a~b#c~d?e~f', done)); + }); + describe('validationCallback', () => { it('should enable link if true', done => { addRow('test'); diff --git a/src/Linkifier.ts b/src/Linkifier.ts index a34edbc2..df7b08a3 100644 --- a/src/Linkifier.ts +++ b/src/Linkifier.ts @@ -16,8 +16,8 @@ const ipClause = '((\\d{1,3}\\.){3}\\d{1,3})'; const localHostClause = '(localhost)'; const portClause = '(:\\d{1,5})'; const hostClause = '((' + domainBodyClause + '\\.' + tldClause + ')|' + ipClause + '|' + localHostClause + ')' + portClause + '?'; -const pathClause = '(\\/[\\/\\w\\.\\-%]*)*'; -const queryStringHashFragmentCharacterSet = '[0-9\\w\\[\\]\\(\\)\\/\\?\\!#@$%&\'*+,:;\\=\\.\\-]*'; +const pathClause = '(\\/[\\/\\w\\.\\-%~]*)*'; +const queryStringHashFragmentCharacterSet = '[0-9\\w\\[\\]\\(\\)\\/\\?\\!#@$%&\'*+,:;~\\=\\.\\-]*'; const queryStringClause = '(\\?' + queryStringHashFragmentCharacterSet + ')?'; const hashFragmentClause = '(#' + queryStringHashFragmentCharacterSet + ')?'; const negatedPathCharacterSet = '[^\\/\\w\\.\\-%]+'; From 22cc8079dc17437490189c08fc3bd895e3815975 Mon Sep 17 00:00:00 2001 From: Paris Kasidiaris Date: Thu, 16 Mar 2017 10:53:56 +0200 Subject: [PATCH 13/26] Add xterm.js logo --- README.md | 2 +- logo.png | Bin 0 -> 8446 bytes 2 files changed, 1 insertion(+), 1 deletion(-) create mode 100644 logo.png diff --git a/README.md b/README.md index 9c22a777..af98ed58 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# xterm.js +# [![xterm.js logo](logo.png)](https://xtermjs.org) [![xterm.js build status](https://api.travis-ci.org/sourcelair/xterm.js.svg)](https://travis-ci.org/sourcelair/xterm.js) [![Coverage Status](https://coveralls.io/repos/github/sourcelair/xterm.js/badge.svg)](https://coveralls.io/github/sourcelair/xterm.js) [![Gitter](https://badges.gitter.im/sourcelair/xterm.js.svg)](https://gitter.im/sourcelair/xterm.js?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) diff --git a/logo.png b/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..c16ac7260d4fca251eb2a09b1d1b0af77a39a3f4 GIT binary patch literal 8446 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 Date: Thu, 16 Mar 2017 12:07:25 -0700 Subject: [PATCH 14/26] Ensure terminal links are not draggable --- src/Linkifier.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Linkifier.ts b/src/Linkifier.ts index a34edbc2..e0e2e7c4 100644 --- a/src/Linkifier.ts +++ b/src/Linkifier.ts @@ -232,6 +232,7 @@ export class Linkifier { private _createAnchorElement(uri: string, handler: LinkMatcherHandler, isHypertextLinkHandler: boolean): HTMLAnchorElement { const element = this._document.createElement('a'); element.textContent = uri; + element.draggable = false; if (isHypertextLinkHandler) { element.href = uri; // Force link on another tab so work is not lost From 365f9b4c1bb0a6175d005b1adc8853d4cf513d57 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Edgar=20Andr=C3=A9s=20Margffoy=20Tuay?= Date: Sat, 18 Mar 2017 18:05:05 -0500 Subject: [PATCH 15/26] Added Spyder IDE as a xterm case-use application --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index af98ed58..28d1ac47 100644 --- a/README.md +++ b/README.md @@ -30,6 +30,7 @@ Xterm.js is used in several world-class applications to provide great terminal e - [**Codenvy**](http://www.codenvy.com): Cloud workspaces for development teams. - [**CoderPad**](https://coderpad.io): Online interviewing platform for programmers. Run code in many programming languages, with results displayed by `xterm.js`. - [**WebSSH2**](https://github.com/billchurch/WebSSH2): A web based SSH2 client using `xterm.js`, socket.io, and ssh2. +- [**Spyder Terminal**](https://github.com/spyder-ide/spyder-terminal): A full fledged system terminal embedded on Spyder IDE. Do you use xterm.js in your application as well? Please [open a Pull Request](https://github.com/sourcelair/xterm.js/pulls) to include it here. We would love to have it in our list. From cb77b9dc1a07ae4549d09da4c81307c1fd1201cb Mon Sep 17 00:00:00 2001 From: Lucian Buzzo Date: Sun, 19 Mar 2017 08:26:37 +0000 Subject: [PATCH 16/26] Prevent line data from being discarded on resize. --- src/xterm.js | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/xterm.js b/src/xterm.js index 37c00ed8..830b8f84 100644 --- a/src/xterm.js +++ b/src/xterm.js @@ -1805,14 +1805,8 @@ Terminal.prototype.resize = function(x, y) { this.lines.get(i).push(ch); } } - } else { // (j > x) - i = this.lines.length; - while (i--) { - while (this.lines.get(i).length > x) { - this.lines.get(i).pop(); - } - } } + this.cols = x; this.setupStops(this.cols); From b0624cadb7ca5756c260a2857833ffd831cbfb2f Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Fri, 24 Mar 2017 11:04:04 -0700 Subject: [PATCH 17/26] Allow links to be registered before terminal is attached to DOM Fixes #618 --- src/Linkifier.test.ts | 154 +++++++++++++++++++++++------------------- src/Linkifier.ts | 19 +++++- src/xterm.js | 4 +- 3 files changed, 103 insertions(+), 74 deletions(-) diff --git a/src/Linkifier.test.ts b/src/Linkifier.test.ts index ca393c21..36f825ba 100644 --- a/src/Linkifier.test.ts +++ b/src/Linkifier.test.ts @@ -8,9 +8,9 @@ import { Linkifier } from './Linkifier'; import { LinkMatcher } from './Types'; class TestLinkifier extends Linkifier { - constructor(document: Document, rows: HTMLElement[]) { + constructor() { Linkifier.TIME_BEFORE_LINKIFY = 0; - super(document, rows); + super(); } public get linkMatchers(): LinkMatcher[] { return this._linkMatchers; } @@ -25,89 +25,105 @@ describe('Linkifier', () => { let linkifier: TestLinkifier; beforeEach(done => { - rows = []; jsdom.env('', (err, w) => { window = w; document = window.document; - linkifier = new TestLinkifier(document, rows); - container = document.createElement('div'); - document.body.appendChild(container); + linkifier = new TestLinkifier(); done(); }); }); - function addRow(text: string) { - const element = document.createElement('div'); - element.textContent = text; - container.appendChild(element); - rows.push(element); - } - - function clickElement(element: Node) { - const event = document.createEvent('MouseEvent'); - event.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); - element.dispatchEvent(event); - } - - function assertLinkifiesEntireRow(uri: string, done: MochaDone) { - addRow(uri); - linkifier.linkifyRow(0); - setTimeout(() => { - assert.equal((rows[0].firstChild).tagName, 'A'); - assert.equal((rows[0].firstChild).textContent, uri); + describe('before attachToDom', () => { + it('should allow link matcher registration', done => { + assert.doesNotThrow(() => { + const linkMatcherId = linkifier.registerLinkMatcher(/foo/, () => {}); + assert.isTrue(linkifier.deregisterLinkMatcher(linkMatcherId)); done(); - }, 0); - } - - describe('http links', () => { - it('should allow ~ character in URI path', done => assertLinkifiesEntireRow('http://foo.com/a~b#c~d?e~f', done)); - }); - - describe('validationCallback', () => { - it('should enable link if true', done => { - addRow('test'); - linkifier.registerLinkMatcher(/test/, () => done(), { - validationCallback: (url, cb) => { - cb(true); - assert.equal((rows[0].firstChild).tagName, 'A'); - setTimeout(() => clickElement(rows[0].firstChild), 0); - } }); - linkifier.linkifyRow(0); - }); - - it('should disable link if false', done => { - addRow('test'); - linkifier.registerLinkMatcher(/test/, () => assert.fail(), { - validationCallback: (url, cb) => { - cb(false); - assert.equal((rows[0].firstChild).tagName, 'A'); - setTimeout(() => clickElement(rows[0].firstChild), 0); - } - }); - linkifier.linkifyRow(0); - // Allow time for the click to be performed - setTimeout(() => done(), 10); }); }); - describe('priority', () => { - it('should order the list from highest priority to lowest #1', () => { - const aId = linkifier.registerLinkMatcher(/a/, () => {}, { priority: 1 }); - const bId = linkifier.registerLinkMatcher(/b/, () => {}, { priority: -1 }); - assert.deepEqual(linkifier.linkMatchers.map(lm => lm.id), [aId, 0, bId]); + describe('after attachToDom', () => { + beforeEach(() => { + rows = []; + linkifier.attachToDom(document, rows); + container = document.createElement('div'); + document.body.appendChild(container); }); - it('should order the list from highest priority to lowest #2', () => { - const aId = linkifier.registerLinkMatcher(/a/, () => {}, { priority: -1 }); - const bId = linkifier.registerLinkMatcher(/b/, () => {}, { priority: 1 }); - assert.deepEqual(linkifier.linkMatchers.map(lm => lm.id), [bId, 0, aId]); + function addRow(text: string) { + const element = document.createElement('div'); + element.textContent = text; + container.appendChild(element); + rows.push(element); + } + + function clickElement(element: Node) { + const event = document.createEvent('MouseEvent'); + event.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); + element.dispatchEvent(event); + } + + function assertLinkifiesEntireRow(uri: string, done: MochaDone) { + addRow(uri); + linkifier.linkifyRow(0); + setTimeout(() => { + assert.equal((rows[0].firstChild).tagName, 'A'); + assert.equal((rows[0].firstChild).textContent, uri); + done(); + }, 0); + } + + describe('http links', () => { + it('should allow ~ character in URI path', done => assertLinkifiesEntireRow('http://foo.com/a~b#c~d?e~f', done)); }); - it('should order items of equal priority in the order they are added', () => { - const aId = linkifier.registerLinkMatcher(/a/, () => {}, { priority: 0 }); - const bId = linkifier.registerLinkMatcher(/b/, () => {}, { priority: 0 }); - assert.deepEqual(linkifier.linkMatchers.map(lm => lm.id), [0, aId, bId]); + describe('validationCallback', () => { + it('should enable link if true', done => { + addRow('test'); + linkifier.registerLinkMatcher(/test/, () => done(), { + validationCallback: (url, cb) => { + cb(true); + assert.equal((rows[0].firstChild).tagName, 'A'); + setTimeout(() => clickElement(rows[0].firstChild), 0); + } + }); + linkifier.linkifyRow(0); + }); + + it('should disable link if false', done => { + addRow('test'); + linkifier.registerLinkMatcher(/test/, () => assert.fail(), { + validationCallback: (url, cb) => { + cb(false); + assert.equal((rows[0].firstChild).tagName, 'A'); + setTimeout(() => clickElement(rows[0].firstChild), 0); + } + }); + linkifier.linkifyRow(0); + // Allow time for the click to be performed + setTimeout(() => done(), 10); + }); + }); + + describe('priority', () => { + it('should order the list from highest priority to lowest #1', () => { + const aId = linkifier.registerLinkMatcher(/a/, () => {}, { priority: 1 }); + const bId = linkifier.registerLinkMatcher(/b/, () => {}, { priority: -1 }); + assert.deepEqual(linkifier.linkMatchers.map(lm => lm.id), [aId, 0, bId]); + }); + + it('should order the list from highest priority to lowest #2', () => { + const aId = linkifier.registerLinkMatcher(/a/, () => {}, { priority: -1 }); + const bId = linkifier.registerLinkMatcher(/b/, () => {}, { priority: 1 }); + assert.deepEqual(linkifier.linkMatchers.map(lm => lm.id), [bId, 0, aId]); + }); + + it('should order items of equal priority in the order they are added', () => { + const aId = linkifier.registerLinkMatcher(/a/, () => {}, { priority: 0 }); + const bId = linkifier.registerLinkMatcher(/b/, () => {}, { priority: 0 }); + assert.deepEqual(linkifier.linkMatchers.map(lm => lm.id), [0, aId, bId]); + }); }); }); }); diff --git a/src/Linkifier.ts b/src/Linkifier.ts index d9a16940..c263496a 100644 --- a/src/Linkifier.ts +++ b/src/Linkifier.ts @@ -49,19 +49,32 @@ export class Linkifier { private _rowTimeoutIds: number[]; private _nextLinkMatcherId = HYPERTEXT_LINK_MATCHER_ID; - constructor(document: Document, rows: HTMLElement[]) { - this._document = document; - this._rows = rows; + constructor() { this._rowTimeoutIds = []; this._linkMatchers = []; this.registerLinkMatcher(strictUrlRegex, null, { matchIndex: 1 }); } + /** + * Attaches the linkifier to the DOM, enabling linkification. + * @param document The document object. + * @param rows The array of rows to apply links to. + */ + public attachToDom(document: Document, rows: HTMLElement[]) { + this._document = document; + this._rows = rows; + } + /** * Queues a row for linkification. * @param {number} rowIndex The index of the row to linkify. */ public linkifyRow(rowIndex: number): void { + // Don't attempt linkify if not yet attached to DOM + if (!this._document) { + return; + } + const timeoutId = this._rowTimeoutIds[rowIndex]; if (timeoutId) { clearTimeout(timeoutId); diff --git a/src/xterm.js b/src/xterm.js index 830b8f84..13fca0bb 100644 --- a/src/xterm.js +++ b/src/xterm.js @@ -211,7 +211,7 @@ function Terminal(options) { this.parser = new Parser(this.inputHandler, this); // Reuse renderer if the Terminal is being recreated via a Terminal.reset call. this.renderer = this.renderer || null; - this.linkifier = this.linkifier || null;; + this.linkifier = this.linkifier || new Linkifier(); // user input states this.writeBuffer = []; @@ -612,7 +612,7 @@ Terminal.prototype.open = function(parent) { this.rowContainer.classList.add('xterm-rows'); this.element.appendChild(this.rowContainer); this.children = []; - this.linkifier = new Linkifier(document, this.children); + this.linkifier.attachToDom(document, this.children); // Create the container that will hold helpers like the textarea for // capturing DOM Events. Then produce the helpers. From 44cfb2dc87b02948e7e3d565796fd9ccc91b8739 Mon Sep 17 00:00:00 2001 From: coderaiser Date: Thu, 30 Mar 2017 14:26:56 +0300 Subject: [PATCH 18/26] Added Cloud Commander to real world uses --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 28d1ac47..d0de1569 100644 --- a/README.md +++ b/README.md @@ -31,6 +31,7 @@ Xterm.js is used in several world-class applications to provide great terminal e - [**CoderPad**](https://coderpad.io): Online interviewing platform for programmers. Run code in many programming languages, with results displayed by `xterm.js`. - [**WebSSH2**](https://github.com/billchurch/WebSSH2): A web based SSH2 client using `xterm.js`, socket.io, and ssh2. - [**Spyder Terminal**](https://github.com/spyder-ide/spyder-terminal): A full fledged system terminal embedded on Spyder IDE. +- [**Cloud Commander**](https://cloudcmd.io "Cloud Commander"): Orthodox web file manager with console and editor. Do you use xterm.js in your application as well? Please [open a Pull Request](https://github.com/sourcelair/xterm.js/pulls) to include it here. We would love to have it in our list. From 08fd050c3f9bfd3eafe14ebfb41e1426bfaff973 Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Fri, 31 Mar 2017 01:48:35 -0700 Subject: [PATCH 19/26] Support multiple link matches in a single row Fixes #612 --- src/Linkifier.ts | 98 +++++++++++++++++++++++++++--------------------- 1 file changed, 56 insertions(+), 42 deletions(-) diff --git a/src/Linkifier.ts b/src/Linkifier.ts index d9a16940..85d1bd5e 100644 --- a/src/Linkifier.ts +++ b/src/Linkifier.ts @@ -155,16 +155,17 @@ export class Linkifier { const text = row.textContent; for (let i = 0; i < this._linkMatchers.length; i++) { const matcher = this._linkMatchers[i]; - const uri = this._findLinkMatch(text, matcher.regex, matcher.matchIndex); - if (uri) { - const linkElement = this._doLinkifyRow(rowIndex, uri, matcher.handler, matcher.id === HYPERTEXT_LINK_MATCHER_ID); + const linkElements = this._doLinkifyRow(row, matcher); + if (linkElements.length > 0) { // Fire validation callback - if (linkElement && matcher.validationCallback) { - matcher.validationCallback(uri, isValid => { - if (!isValid) { - linkElement.classList.add(INVALID_LINK_CLASS); - } - }); + if (matcher.validationCallback) { + for (let j = 0; j < linkElements.length; j++) { + matcher.validationCallback(linkElements[j].textContent, isValid => { + if (!isValid) { + linkElements[j].classList.add(INVALID_LINK_CLASS); + } + }); + } } // Only allow a single LinkMatcher to trigger on any given row. return; @@ -174,22 +175,32 @@ export class Linkifier { /** * Linkifies a row given a specific handler. - * @param {number} rowIndex The index of the row to linkify. - * @param {string} uri The uri that has been found. - * @param {handler} handler The handler to trigger when the link is triggered. + * @param {HTMLElement} row The row to linkify. + * @param {LinkMatcher} matcher The link matcher for this line. * @return The link element if it was added, otherwise undefined. */ - private _doLinkifyRow(rowIndex: number, uri: string, handler: LinkMatcherHandler, isHttpLinkMatcher: boolean): HTMLElement { + private _doLinkifyRow(row: HTMLElement, matcher: LinkMatcher): HTMLElement[] { // Iterate over nodes as we want to consider text nodes - const nodes = this._rows[rowIndex].childNodes; + let result = []; + const isHttpLinkMatcher = matcher.id === HYPERTEXT_LINK_MATCHER_ID; + const nodes = row.childNodes; + + // Find the first match + let match = row.textContent.match(matcher.regex); + if (!match || match.length === 0) { + return result; + } + let uri = match[typeof matcher.matchIndex !== 'number' ? 0 : matcher.matchIndex]; + // Set the next searches start index + let rowStartIndex = match.index + uri.length; + for (let i = 0; i < nodes.length; i++) { const node = nodes[i]; const searchIndex = node.textContent.indexOf(uri); if (searchIndex >= 0) { - const linkElement = this._createAnchorElement(uri, handler, isHttpLinkMatcher); + const linkElement = this._createAnchorElement(uri, matcher.handler, isHttpLinkMatcher); if (node.textContent.length === uri.length) { // Matches entire string - if (node.nodeType === 3 /*Node.TEXT_NODE*/) { this._replaceNode(node, linkElement); } else { @@ -203,25 +214,22 @@ export class Linkifier { } } else { // Matches part of string - this._replaceNodeSubstringWithNode(node, linkElement, uri, searchIndex); + const nodesAdded = this._replaceNodeSubstringWithNode(node, linkElement, uri, searchIndex); + // No need to consider the new nodes + i += nodesAdded - 1; } - return linkElement; + result.push(linkElement); + + // Find the next match + match = row.textContent.substring(rowStartIndex).match(matcher.regex); + if (!match || match.length === 0) { + return result; + } + uri = match[typeof matcher.matchIndex !== 'number' ? 0 : matcher.matchIndex]; + rowStartIndex += match.index + uri.length; } } - } - - /** - * Finds a link match in a piece of text. - * @param {string} text The text to search. - * @param {number} matchIndex The regex match index of the link. - * @return {string} The matching URI or null if not found. - */ - private _findLinkMatch(text: string, regex: RegExp, matchIndex?: number): string { - const match = text.match(regex); - if (!match || match.length === 0) { - return null; - } - return match[typeof matchIndex !== 'number' ? 0 : matchIndex]; + return result; } /** @@ -274,8 +282,9 @@ export class Linkifier { * @param {Node} newNode The new node to insert. * @param {string} substring The substring to replace. * @param {number} substringIndex The index of the substring within the string. + * @return The number of nodes to skip when searching for the next uri. */ - private _replaceNodeSubstringWithNode(targetNode: Node, newNode: Node, substring: string, substringIndex: number): void { + private _replaceNodeSubstringWithNode(targetNode: Node, newNode: Node, substring: string, substringIndex: number): number { let node = targetNode; if (node.nodeType !== 3/*Node.TEXT_NODE*/) { node = node.childNodes[0]; @@ -284,7 +293,7 @@ export class Linkifier { // The targetNode will be either a text node or a . The text node // (targetNode or its only-child) needs to be replaced with newNode plus new // text nodes potentially on either side. - if (node.childNodes.length === 0 && node.nodeType !== Node.TEXT_NODE) { + if (node.childNodes.length === 0 && node.nodeType !== 3/*Node.TEXT_NODE*/) { throw new Error('targetNode must be a text node or only contain a single text node'); } @@ -295,18 +304,23 @@ export class Linkifier { const rightText = fullText.substring(substring.length); const rightTextNode = this._document.createTextNode(rightText); this._replaceNode(node, newNode, rightTextNode); - } else if (substringIndex === targetNode.textContent.length - substring.length) { + return 0; + } + + if (substringIndex === targetNode.textContent.length - substring.length) { // Replace with const leftText = fullText.substring(0, substringIndex); const leftTextNode = this._document.createTextNode(leftText); this._replaceNode(node, leftTextNode, newNode); - } else { - // Replace with - const leftText = fullText.substring(0, substringIndex); - const leftTextNode = this._document.createTextNode(leftText); - const rightText = fullText.substring(substringIndex + substring.length); - const rightTextNode = this._document.createTextNode(rightText); - this._replaceNode(node, leftTextNode, newNode, rightTextNode); + return 1; } + + // Replace with + const leftText = fullText.substring(0, substringIndex); + const leftTextNode = this._document.createTextNode(leftText); + const rightText = fullText.substring(substringIndex + substring.length); + const rightTextNode = this._document.createTextNode(rightText); + this._replaceNode(node, leftTextNode, newNode, rightTextNode); + return 1; } } From d8140097214cc17d093cf9a14b3be5125ed3a571 Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Fri, 31 Mar 2017 01:48:51 -0700 Subject: [PATCH 20/26] Add tests --- src/Linkifier.test.ts | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/Linkifier.test.ts b/src/Linkifier.test.ts index ca393c21..f70718ea 100644 --- a/src/Linkifier.test.ts +++ b/src/Linkifier.test.ts @@ -89,6 +89,21 @@ describe('Linkifier', () => { // Allow time for the click to be performed setTimeout(() => done(), 10); }); + + it('should trigger for multiple link matches on one row', done => { + addRow('test test'); + let count = 0; + linkifier.registerLinkMatcher(/test/, () => assert.fail(), { + validationCallback: (url, cb) => { + count += 1; + if (count === 2) { + done(); + } + cb(false); + } + }); + linkifier.linkifyRow(0); + }); }); describe('priority', () => { From 5546baa927e9dd97e527ac6da763f7a9dfcc9d2e Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Fri, 31 Mar 2017 01:54:21 -0700 Subject: [PATCH 21/26] Fix edge case --- src/Linkifier.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Linkifier.ts b/src/Linkifier.ts index 85d1bd5e..f305945c 100644 --- a/src/Linkifier.ts +++ b/src/Linkifier.ts @@ -207,7 +207,7 @@ export class Linkifier { const element = (node); if (element.nodeName === 'A') { // This row has already been linkified - return; + return result; } element.innerHTML = ''; element.appendChild(linkElement); @@ -216,7 +216,7 @@ export class Linkifier { // Matches part of string const nodesAdded = this._replaceNodeSubstringWithNode(node, linkElement, uri, searchIndex); // No need to consider the new nodes - i += nodesAdded - 1; + i += nodesAdded; } result.push(linkElement); From 8c2db8ddb8799771b45500af9dbcc6f4f5fbf08e Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Fri, 31 Mar 2017 02:10:07 -0700 Subject: [PATCH 22/26] More tests --- src/Linkifier.test.ts | 45 +++++++++++++++++++++++++++++++++++++------ src/Linkifier.ts | 2 +- 2 files changed, 40 insertions(+), 7 deletions(-) diff --git a/src/Linkifier.test.ts b/src/Linkifier.test.ts index f70718ea..16e388fa 100644 --- a/src/Linkifier.test.ts +++ b/src/Linkifier.test.ts @@ -36,9 +36,9 @@ describe('Linkifier', () => { }); }); - function addRow(text: string) { + function addRow(html: string) { const element = document.createElement('div'); - element.textContent = text; + element.innerHTML = html; container.appendChild(element); rows.push(element); } @@ -49,7 +49,8 @@ describe('Linkifier', () => { element.dispatchEvent(event); } - function assertLinkifiesEntireRow(uri: string, done: MochaDone) { + describe('http links', () => { + function assertLinkifiesEntireRow(uri: string, done: MochaDone) { addRow(uri); linkifier.linkifyRow(0); setTimeout(() => { @@ -57,12 +58,44 @@ describe('Linkifier', () => { assert.equal((rows[0].firstChild).textContent, uri); done(); }, 0); - } - - describe('http links', () => { + } it('should allow ~ character in URI path', done => assertLinkifiesEntireRow('http://foo.com/a~b#c~d?e~f', done)); }); + describe('link matcher', () => { + function assertLinkifiesRow(rowText: string, linkMatcherRegex: RegExp, expectedHtml: string, done: MochaDone) { + addRow(rowText); + linkifier.registerLinkMatcher(linkMatcherRegex, () => {}); + linkifier.linkifyRow(0); + // Allow linkify to happen + setTimeout(() => { + assert.equal(rows[0].innerHTML, expectedHtml); + done(); + }, 0); + } + it('should match a single link', done => { + assertLinkifiesRow('foo', /foo/, 'foo', done); + }); + it('should match a single link at the start of a text node', done => { + assertLinkifiesRow('foo bar', /foo/, 'foo bar', done); + }); + it('should match a single link in the middle of a text node', done => { + assertLinkifiesRow('foo bar baz', /bar/, 'foo bar baz', done); + }); + it('should match a single link at the end of a text node', done => { + assertLinkifiesRow('foo bar', /bar/, 'foo bar', done); + }); + it('should match a link after a link at the start of a text node', done => { + assertLinkifiesRow('foo bar', /foo|bar/, 'foo bar', done); + }); + it('should match a link after a link in the middle of a text node', done => { + assertLinkifiesRow('foo bar baz', /bar|baz/, 'foo bar baz', done); + }); + it('should match a link immediately after a link at the end of a text node', done => { + assertLinkifiesRow('foo barbaz', /bar|baz/, 'foo barbaz', done); + }); + }); + describe('validationCallback', () => { it('should enable link if true', done => { addRow('test'); diff --git a/src/Linkifier.ts b/src/Linkifier.ts index f305945c..b229c775 100644 --- a/src/Linkifier.ts +++ b/src/Linkifier.ts @@ -312,7 +312,7 @@ export class Linkifier { const leftText = fullText.substring(0, substringIndex); const leftTextNode = this._document.createTextNode(leftText); this._replaceNode(node, leftTextNode, newNode); - return 1; + return 0; } // Replace with From 26ccf2a3169681c91d0d42e36c71bd49a80987a5 Mon Sep 17 00:00:00 2001 From: InDieTasten Date: Fri, 31 Mar 2017 22:16:11 +0200 Subject: [PATCH 23/26] Fix typos in comment --- src/Linkifier.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Linkifier.ts b/src/Linkifier.ts index d9a16940..0f9d9a21 100644 --- a/src/Linkifier.ts +++ b/src/Linkifier.ts @@ -37,8 +37,8 @@ const HYPERTEXT_LINK_MATCHER_ID = 0; export class Linkifier { /** * The time to wait after a row is changed before it is linkified. This prevents - * the costly operation of searching every row multiple times, pntentially a - * huge aount of times. + * the costly operation of searching every row multiple times, potentially a + * huge amount of times. */ protected static TIME_BEFORE_LINKIFY = 200; From aca81c764a188738ae89886bab407d93cd37d136 Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Mon, 3 Apr 2017 14:49:21 -0700 Subject: [PATCH 24/26] Use setInterval over animation for cursor blink Fixes #625 --- src/xterm.css | 23 ++++++++--------------- src/xterm.js | 34 ++++++++++++++++++++++++++++++++-- 2 files changed, 40 insertions(+), 17 deletions(-) diff --git a/src/xterm.css b/src/xterm.css index aac95444..a67485e5 100644 --- a/src/xterm.css +++ b/src/xterm.css @@ -97,16 +97,9 @@ background-color: transparent; } -.terminal:not(.xterm-cursor-style-underline):not(.xterm-cursor-style-bar).focus.xterm-cursor-blink .terminal-cursor { - animation: xterm-cursor-blink 1.2s infinite step-end; -} - -@keyframes xterm-cursor-blink { - 0% { } - 50% { - background-color: transparent; - color: inherit; - } +.terminal:not(.xterm-cursor-style-underline):not(.xterm-cursor-style-bar).focus.xterm-cursor-blink-on .terminal-cursor { + background-color: transparent; + color: inherit; } .terminal.xterm-cursor-style-bar .terminal-cursor, @@ -132,13 +125,13 @@ right: 0; height: 1px; } +.terminal.xterm-cursor-style-bar.focus.xterm-cursor-blink.xterm-cursor-blink-on .terminal-cursor::before, +.terminal.xterm-cursor-style-underline.focus.xterm-cursor-blink.xterm-cursor-blink-on .terminal-cursor::before { + background-color: transparent; +} .terminal.xterm-cursor-style-bar.focus.xterm-cursor-blink .terminal-cursor::before, .terminal.xterm-cursor-style-underline.focus.xterm-cursor-blink .terminal-cursor::before { - animation: xterm-cursor-non-bar-blink 1.2s infinite step-end; -} -@keyframes xterm-cursor-non-bar-blink { - 0% { background-color: #fff; } - 50% { background-color: transparent; } + background-color: #fff; } .terminal .composition-view { diff --git a/src/xterm.js b/src/xterm.js index 830b8f84..fb690bd4 100644 --- a/src/xterm.js +++ b/src/xterm.js @@ -52,6 +52,13 @@ var WRITE_BUFFER_PAUSE_THRESHOLD = 5; */ var WRITE_BATCH_SIZE = 300; +/** + * The time between cursor blinks. This is driven by JS rather than a CSS + * animation due to a bug in Chromium that causes it to use excessive CPU time. + * See https://github.com/Microsoft/vscode/issues/22900 + */ +var CURSOR_BLINK_INTERVAL = 600; + /** * Terminal */ @@ -159,6 +166,7 @@ function Terminal(options) { this.scrollTop = 0; this.scrollBottom = this.rows - 1; this.customKeydownHandler = null; + this.cursorBlinkInterval = null; // modes this.applicationKeypad = false; @@ -423,7 +431,7 @@ Terminal.prototype.setOption = function(key, value) { this[key] = value; this.options[key] = value; switch (key) { - case 'cursorBlink': this.element.classList.toggle('xterm-cursor-blink', value); break; + case 'cursorBlink': this.setCursorBlinking(value); break; case 'cursorStyle': // Style 'block' applies with no class this.element.classList.toggle(`xterm-cursor-style-underline`, value === 'underline'); @@ -433,6 +441,25 @@ Terminal.prototype.setOption = function(key, value) { } }; +Terminal.prototype.restartCursorBlinking = function () { + this.setCursorBlinking(this.options.cursorBlink); +} + +Terminal.prototype.setCursorBlinking = function (enabled) { + this.element.classList.toggle('xterm-cursor-blink', enabled); + this.element.classList.remove('xterm-cursor-blink-on'); + if (this.cursorBlinkInterval) { + clearInterval(this.cursorBlinkInterval); + this.cursorBlinkInterval = null; + } + if (enabled) { + var self = this; + this.cursorBlinkInterval = setInterval(function () { + self.element.classList.toggle('xterm-cursor-blink-on'); + }, CURSOR_BLINK_INTERVAL); + } +} + /** * Binds the desired focus behavior on a given terminal object. * @@ -445,6 +472,7 @@ Terminal.bindFocus = function (term) { } term.element.classList.add('focus'); term.showCursor(); + term.restartCursorBlinking.apply(term); Terminal.focus = term; term.emit('focus', {terminal: term}); }); @@ -594,7 +622,7 @@ Terminal.prototype.open = function(parent) { this.element.classList.add('terminal'); this.element.classList.add('xterm'); this.element.classList.add('xterm-theme-' + this.theme); - this.element.classList.toggle('xterm-cursor-blink', this.options.cursorBlink); + this.setCursorBlinking(this.options.cursorBlink); this.element.style.height this.element.setAttribute('tabindex', 0); @@ -1336,6 +1364,8 @@ Terminal.prototype.keyDown = function(ev) { return false; } + this.restartCursorBlinking(); + if (!this.compositionHelper.keydown.bind(this.compositionHelper)(ev)) { if (this.ybase !== this.ydisp) { this.scrollToBottom(); From 0c4ba9fd676f08b29bdb90aa8f6b4f7197bcb307 Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Mon, 3 Apr 2017 15:09:38 -0700 Subject: [PATCH 25/26] Clear cursor blink interval on blur --- src/xterm.js | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/src/xterm.js b/src/xterm.js index fb690bd4..fb7d0cf7 100644 --- a/src/xterm.js +++ b/src/xterm.js @@ -443,22 +443,26 @@ Terminal.prototype.setOption = function(key, value) { Terminal.prototype.restartCursorBlinking = function () { this.setCursorBlinking(this.options.cursorBlink); -} +}; Terminal.prototype.setCursorBlinking = function (enabled) { this.element.classList.toggle('xterm-cursor-blink', enabled); - this.element.classList.remove('xterm-cursor-blink-on'); - if (this.cursorBlinkInterval) { - clearInterval(this.cursorBlinkInterval); - this.cursorBlinkInterval = null; - } + this.clearCursorBlinkingInterval(); if (enabled) { var self = this; this.cursorBlinkInterval = setInterval(function () { self.element.classList.toggle('xterm-cursor-blink-on'); }, CURSOR_BLINK_INTERVAL); } -} +}; + +Terminal.prototype.clearCursorBlinkingInterval = function () { + this.element.classList.remove('xterm-cursor-blink-on'); + if (this.cursorBlinkInterval) { + clearInterval(this.cursorBlinkInterval); + this.cursorBlinkInterval = null; + } +}; /** * Binds the desired focus behavior on a given terminal object. @@ -497,6 +501,7 @@ Terminal.bindBlur = function (term) { term.send(C0.ESC + '[O'); } term.element.classList.remove('focus'); + term.clearCursorBlinkingInterval.apply(term); Terminal.focus = null; term.emit('blur', {terminal: term}); }); From 64663bf4a8145b8aa0dc31cb1246fe6d110a6390 Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Tue, 4 Apr 2017 09:35:52 -0700 Subject: [PATCH 26/26] Fix tests --- src/test/test.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/test/test.js b/src/test/test.js index 716b48c4..1644e580 100644 --- a/src/test/test.js +++ b/src/test/test.js @@ -21,7 +21,8 @@ describe('xterm.js', function() { }; xterm.element = { classList: { - toggle: function(){} + toggle: function(){}, + remove: function(){} } }; });