Skip to content

Commit

Permalink
improve performance #480 + refactor and fixes to css
Browse files Browse the repository at this point in the history
  • Loading branch information
@jcubic
jcubic committed Apr 7, 2019
1 parent e9168b3 commit eed540b
Show file tree
Hide file tree
Showing 15 changed files with 750 additions and 463 deletions.
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Expand Up @@ -3,6 +3,8 @@
* Some improvements to performance of rendering command line
### Bugfix
* fix scrollbar flicker on right click on right/bottom edge of terminal when no scrollbar
* fix text selections on multi line text without line breaks
* fix small bugs in animations (replace all of them with box-shadow)

## 2.3.0
### Features
Expand Down
4 changes: 2 additions & 2 deletions README.md
View file
Expand Up @@ -10,8 +10,8 @@ http://terminal.jcubic.pl

[![npm](https://img.shields.io/badge/npm-DEV-blue.svg)](https://www.npmjs.com/package/jquery.terminal)
![bower](https://img.shields.io/badge/bower-DEV-yellow.svg)
[![travis](https://travis-ci.org/jcubic/jquery.terminal.svg?branch=devel&65902ff941b3149db7d16cdf7f39383607c343e9)](https://travis-ci.org/jcubic/jquery.terminal)
[![Coverage Status](https://coveralls.io/repos/github/jcubic/jquery.terminal/badge.svg?branch=devel&bd8ea63fbdaaca44048d925c35584572)](https://coveralls.io/github/jcubic/jquery.terminal?branch=devel)
[![travis](https://travis-ci.org/jcubic/jquery.terminal.svg?branch=devel&e9168b33e37dc7f600dffbd2b4b5efa9b59d6fa4)](https://travis-ci.org/jcubic/jquery.terminal)
[![Coverage Status](https://coveralls.io/repos/github/jcubic/jquery.terminal/badge.svg?branch=devel&c8256fb5121c89c517616dcd71549b27)](https://coveralls.io/github/jcubic/jquery.terminal?branch=devel)
![downloads](https://img.shields.io/npm/dm/jquery.terminal.svg?style=flat)
[![package quality](http://npm.packagequality.com/shield/jquery.terminal.svg)](http://packagequality.com/#?package=jquery.terminal)
[![](https://data.jsdelivr.com/v1/package/npm/jquery.terminal/badge?style=rounded)](https://www.jsdelivr.com/package/npm/jquery.terminal)
Expand Down
9 changes: 5 additions & 4 deletions __tests__/terminal.spec.js
View file
Expand Up @@ -11,7 +11,7 @@
* Released under the MIT license
*/
/* global global, it, expect, describe, require, spyOn, setTimeout, location,
beforeEach, afterEach, sprintf, jQuery, $, wcwidth, jest */
beforeEach, afterEach, sprintf, jQuery, $, wcwidth, jest, setImmediate */
/* TODO: test caseSensitiveSearch option */

function Storage() {}
Expand Down Expand Up @@ -4174,9 +4174,10 @@ describe('Terminal plugin', function() {
spy(object, 'login');
term.set_prompt('$ ');
term.set_interpreter('/async', true).focus();
// we need to wait for interpreter to initialize but Promise callback is async
return new Promise((resolve) => {
setTimeout(function() {
// there seems to be bug in setTimeout in Node or in Terminal code
// that sometimes don't invoke code when using setTimeout
setImmediate(function() {
if (term.token(true)) {
term.logout(true);
}
Expand All @@ -4189,7 +4190,7 @@ describe('Terminal plugin', function() {
resolve();
});
});
}, 500);
});
});
});
});
Expand Down
170 changes: 42 additions & 128 deletions css/jquery.terminal-2.2.0.css
View file
Expand Up @@ -12,7 +12,7 @@
* Copyright (c) 2011-2019 Jakub Jankiewicz <https://jcubic.pl/me>
* Released under the MIT license
*
* Date: Sat, 06 Apr 2019 10:09:29 +0000
* Date: Sun, 07 Apr 2019 00:00:26 +0000
*/
.terminal .terminal-output .format, .cmd .format,
.cmd .prompt, .cmd .prompt div {
Expand Down Expand Up @@ -59,24 +59,18 @@
text-indent: -9999em; /* better cursor hiding for Safari and IE */
top: calc(var(--cursor-line, 0) * 1em);
}
.cmd .noselect, .cmd .noselect span,
.cmd [role="presentation"]:not(.cursor-line) > span:last-child,
.cmd .cursor-line > span:last-child > span:last-child {
.cmd span.end-line,
.cmd span.end-line span,
.cmd div.end-line span[data-text]:last-child,
.cmd div.end-line span[data-text]:last-child span,
.cmd .cursor + span:empty {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
.cmd .cursor-line:first-of-type:last-of-type > span:last-child > span:last-child {
-webkit-touch-callout: initial;
-webkit-user-select: initial;
-khtml-user-select: initial;
-moz-user-select: initial;
-ms-user-select: initial;
user-select: initial;
}
.terminal img, .terminal audio, .terminal object, .terminal canvas {
cursor: default;
}
Expand Down Expand Up @@ -140,36 +134,9 @@ body.full-screen-terminal .terminal {
}
.cmd .cursor {
display: inline-block;
position: relative;
height: 14px;
min-width: 1ch;
/* box-sizing: border-box; */
}
.cmd .cursor span span {
border-bottom: 3px solid transparent;
margin-bottom: -3px;
background-clip: content-box;
border-left: 1px solid transparent;
position: absolute;
top: 0;
/* margin-left: -1px; */
background-color: inherit;
color: inherit;
bottom: 0;
left: -1px;
}
.cmd .cursor-line > span:empty {
/* display: none; */
}
.cmd .cursor-line > span:empty + .cursor + span {
/*margin-left: -1px;*/
}
.cmd .cursor-line > span:not(.cursor):not(:empty) {
/* margin-left: -1px; */
}
.cmd .cursor-line > span {
display: inline-block;
float: left;
}
.cmd .cursor.blink span:not(.emoji) span {
-webkit-animation: terminal-blink 1s infinite linear;
Expand All @@ -184,7 +151,8 @@ body.full-screen-terminal .terminal {
animation: terminal-blink 1s infinite linear;
}
.bar.terminal .inverted, .bar.cmd .inverted {
border-left-color: #aaa;
box-shadow: -2px 0 0 -1px #aaa;
box-shadow: -2px 0 0 -1px var(--original-color, #aaa);
}
.terminal .terminal .terminal-output > div > div, .cmd .prompt {
display: block;
Expand Down Expand Up @@ -219,7 +187,6 @@ body.full-screen-terminal .terminal {
background-color: #000;
}
.terminal-output > :not(.raw) .emoji, .cmd .emoji {
width: 14px;
height: 14px;
background-size: cover;
display: inline-block;
Expand Down Expand Up @@ -286,13 +253,19 @@ terminal .terminal-output > div {
background-color: inherit !important;
color: inherit !important;
}
/* fix for underline on middle line */
.cmd [role="presentation"].cursor-line {
position: relative;
z-index: 100;
}
/* prompt above cursor line */
.cmd .prompt {
position: relative;
z-index: 200;
}
.cmd [role="presentation"]:not(.cursor-line) {
overflow: hidden;
}
.cmd [role="presentation"] {
padding-bottom: 3px;
margin-bottom: -3px;
}
/*
* this is set so animation can select original color as backgound for cursor
* so span can have --color for selection
Expand Down Expand Up @@ -340,174 +313,120 @@ terminal .terminal-output > div {
/* GLOW ANIMATION */
@-webkit-keyframes terminal-glow {
0%, 50% {
left: 0;
background-color: #aaa;
background-color: var(--original-color, #aaa);
color: #000;
color: var(--background, #000);
box-shadow: 0 0 3px #aaa;
-webkit-box-shadow: 0 0 3px var(--color, #aaa);
box-shadow: 0 0 3px var(--color, #aaa);
border: none;
margin: 0;
padding: 0;
border-bottom: 2px solid #aaa;
border-bottom: 2px solid var(--color, #aaa);
}
50.1%, 100% {
left: 0;
background-color: inherit;
color: inherit;
-webkit-box-shadow: none;
box-shadow: none;
border: none;
margin: 0;
padding: 0;
}
}
@-moz-keyframes terminal-glow {
0%, 50% {
left: 0;
background-color: #aaa;
background-color: var(--original-color, #aaa);
color: #000;
color: var(--background, #000);
box-shadow: 0 0 3px #aaa;
-moz-box-shadow: 0 0 3px var(--color, #aaa);
box-shadow: 0 0 3px var(--color, #aaa);
border: none;
margin: 0;
padding: 0;
border-bottom: 2px solid #aaa;
border-bottom: 2px solid var(--color, #aaa);
}
50.1%, 100% {
left: 0;
background-color: inherit;
color: inherit;
-moz-box-shadow: none;
box-shadow: none;
border: none;
margin: 0;
padding: 0;
}
}
@keyframes terminal-glow {
0%, 50% {
left: 0;
background-color: #aaa;
background-color: var(--original-color, #aaa);
color: #000;
color: var(--background, #000);
box-shadow: 0 0 3px #aaa;
box-shadow: 0 0 3px var(--color, #aaa);
border: none;
margin: 0;
padding: 0;
border-bottom: 2px solid #aaa;
border-bottom: 2px solid var(--color, #aaa);
}
50.1%, 100% {
left: 0;
background-color: inherit;
color: inherit;
box-shadow: none;
border: none;
margin: 0;
padding: 0;
}
}
/* BAR ANIMATION */
@-webkit-keyframes terminal-bar {
0%, 50% {
border-left-color: #aaa;
border-left-color: var(--color, #aaa);
box-shadow: -2px 0 0 -1px #aaa;
box-shadow: -2px 0 0 -1px var(--original-color, #aaa);
}
50.1%, 100% {
border-left-color: #000;
border-left-color: var(--background, #000);
box-shadow: none;
}
}
@-moz-keyframes terminal-bar {
0%, 50% {
border-left-color: #aaa;
border-left-color: var(--color, #aaa);
box-shadow: -2px 0 0 -1px #aaa;
box-shadow: -2px 0 0 -1px var(--original-color, #aaa);
}
50.1%, 100% {
border-left-color: #000;
border-left-color: var(--background, #000);
box-shadow: none;
}
}
@keyframes terminal-bar {
0%, 50% {
border-left-color: #aaa;
border-left-color: var(--color, #aaa);
box-shadow: -2px 0 0 -1px #aaa;
box-shadow: -2px 0 0 -1px var(--original-color, #aaa);
}
50.1%, 100% {
border-left-color: #000;
border-left-color: var(--background, #000);
box-shadow: none;
}
}
/* UNDERLINE ANIMATION */
@-webkit-keyframes terminal-underline {
0%, 50% {
border-left: none;
border-bottom-color: #aaa;
border-bottom-color: var(--color, #aaa);
left: 0;
box-shadow: 0 2px 0 #aaa;
box-shadow: 0 2px 0 var(--original-color, #aaa);
}
50.1%, 100% {
border-left: none;
border-bottom-color: #000;
border-bottom-color: var(--background, #000);
left: 0;
box-shadow: none;
}
}
@-moz-keyframes terminal-underline {
0%, 50% {
border-left: none;
border-bottom-color: #aaa;
border-bottom-color: var(--color, #aaa);
left: 0;
box-shadow: 0 2px 0 #aaa;
box-shadow: 0 2px 0 var(--original-color, #aaa);
}
50.1%, 100% {
border-left: none;
border-bottom-color: #000;
border-bottom-color: var(--background, #000);
left: 0;
box-shadow: none;
}
}
@keyframes terminal-underline {
0%, 50% {
border-bottom-color: #aaa;
border-bottom-color: var(--color, #aaa);
left: 0;
box-shadow: 0 2px 0 #aaa;
box-shadow: 0 2px 0 var(--original-color, #aaa);
}
50.1%, 100% {
border-bottom-color: #000;
border-bottom-color: var(--background, #000);
left: 0;
box-shadow: none;
}
}
.underline-animation .cursor.blink span span {
/* margin-top: 2px; */
border-left: none;
/* margin-left: 0; */
margin-right: -1px;
-webkit-animation-name: terminal-underline;
-moz-animation-name: terminal-underline;
-ms-animation-name: terminal-underline;
animation-name: terminal-underline;
left: 0;
-moz-animation-name: terminal-underline;
-ms-animation-name: terminal-underline;
animation-name: terminal-underline;
}
.glow-animation .cursor.blink span span {
border: none;
margin: 0;
padding: 0;
-webkit-animation-name: terminal-glow;
-moz-animation-name: terminal-glow;
-ms-animation-name: terminal-glow;
animation-name: terminal-glow;
-moz-animation-name: terminal-glow;
-ms-animation-name: terminal-glow;
animation-name: terminal-glow;
}
.bar-animation .cursor.blink span span {
-webkit-animation-name: terminal-bar;
Expand Down Expand Up @@ -716,7 +635,6 @@ terminal .terminal-output > div {
line-height: calc(var(--size, 1) * 14px);
}
.terminal-output > :not(.raw) .emoji, .cmd .emoji {
width: calc(var(--size, 1) * 14px) !important;
height: calc(var(--size, 1) * 14px);
}
.cmd .clipboard {
Expand Down Expand Up @@ -748,10 +666,6 @@ terminal .terminal-output > div {
.cmd .cursor.blink .emoji span {
color: transparent;
}
.cmd .cursor {
height: calc(var(--size, 1) * 14px);
min-width: calc(var(--char-width, 7.23438) * 1px);
}
.terminal h1::-moz-selection,
.terminal h2::-moz-selection,
.terminal h3::-moz-selection,
Expand Down

0 comments on commit eed540b

Please sign in to comment.