Merge pull request #25 from jwforres/xterm

Switch to xterm.js
kubernetes-ui · Jul 19, 2017 · 25fa3c2 · 25fa3c2
2 parents daedc03 + 33b2286
commit 25fa3c2
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 23 deletions.
diff --git a/bower.json b/bower.json
@@ -29,17 +29,10 @@
     ],
     "dependencies": {
         "angular": ">=1.3.8 <1.6",
-        "term.js": "#0.0.7",
+        "xterm.js": "#2.8.0",
         "font-awesome": "*"
     },
     "devDependencies": {
         "patternfly": ">=1.2.1"
-    },
-    "overrides": {
-        "term.js": {
-            "main": [
-                "src/term.js"
-            ]
-        }
     }
 }
diff --git a/container-terminal.css b/container-terminal.css
@@ -1,6 +1,6 @@
 kubernetes-container-terminal {
     position: relative;
-    display: block;
+    display: inline-block;
 }
 
 kubernetes-container-terminal .terminal {
@@ -9,11 +9,9 @@ kubernetes-container-terminal .terminal {
     color: #F0F0F0;
     text-align: left;
     outline: medium none;
-    background-color: black;
-    border: 1px solid black;
-    padding: 10px;
-    display: inline-block; /* size DIV to contents */
+    border: 3px solid black;
     line-height: 1em;
+    display: inline-block;
 }
 
 @media (min-width: 568px) {
@@ -28,8 +26,8 @@ kubernetes-container-terminal .terminal-cursor {
 }
 
 kubernetes-container-terminal .terminal-wrapper {
-    display: inline-block;
     vertical-align: top;
+    display: inline-block;
 }
 
 kubernetes-container-terminal .terminal-actions {
@@ -41,6 +39,34 @@ kubernetes-container-terminal .terminal-actions {
     z-index: 1;
 }
 
+kubernetes-container-terminal .terminal .xterm-viewport {
+    overflow-y: auto;
+}
+
+kubernetes-container-terminal .terminal .xterm-viewport::-webkit-scrollbar {
+  height: 10px;
+  overflow: visible;
+  width: 15px;
+}
+
+kubernetes-container-terminal .terminal .xterm-viewport::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+kubernetes-container-terminal .terminal .xterm-viewport::-webkit-scrollbar-thumb {
+    background-color: rgba(255,255,255,.25);
+    box-shadow: inset 1px 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(255,255,255,.07);
+}
+
+kubernetes-container-terminal .terminal .xterm-viewport::-webkit-scrollbar-thumb:active,
+kubernetes-container-terminal .terminal .xterm-viewport::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(255,255,255,.35);
+}
+
+kubernetes-container-terminal .terminal .xterm-viewport::-webkit-scrollbar-track {
+  background: transparent;
+}
+
 /* https://github.com/patternfly/patternfly/pull/135 */
 .spinner-white {
     border-bottom: 4px solid rgba(255, 255, 255, 0.25) !important;

diff --git a/container-terminal.js b/container-terminal.js
@@ -108,7 +108,10 @@
                         var term = new Terminal({
                             cols: scope.cols || defaultCols,
                             rows: scope.rows || defaultRows,
-                            screenKeys: scope.screenKeys || true
+                            cursorBlink: true,
+                            screenKeys: scope.screenKeys || true,
+                            applicationCursor: true, // Needed for proper scrollback behavior in applications like vi
+                            mouseEvents: true        // Needed for proper scrollback behavior in applications like vi
                         });
 
                         outer.empty();
@@ -121,10 +124,24 @@
                                 ws.send("0" + utf8_to_b64(data));
                         });
 
+                        var sizeViewport = function () {
+                          var cols = scope.cols || defaultCols;
+                          if (!term.charMeasure.width) {
+                            return;
+                          }
+                          var xtermViewport = document.getElementsByClassName("xterm-viewport")[0];
+                          // character width * number of columns + space for a scrollbar
+                          // TODO determine the max width of a scrollbar across browsers
+                          xtermViewport.style.width = (term.charMeasure.width * cols + 17) + "px";
+                        };
+
+                        term.charMeasure.on('charsizechanged', sizeViewport);
+
                         var sizeTerminal = function() {
                           var cols = scope.cols || defaultCols;
                           var rows = scope.rows || defaultRows;
                           term.resize(cols, rows);
+                          sizeViewport();
                           if (ws && ws.readyState === 1) {
                             ws.send("4" + window.btoa('{"Width":' + cols + ',"Height":' + rows + '}'));                
                           }

diff --git a/dist/container-terminal.css b/dist/container-terminal.css
@@ -1,6 +1,6 @@
 kubernetes-container-terminal {
     position: relative;
-    display: block;
+    display: inline-block;
 }
 
 kubernetes-container-terminal .terminal {
@@ -9,11 +9,9 @@ kubernetes-container-terminal .terminal {
     color: #F0F0F0;
     text-align: left;
     outline: medium none;
-    background-color: black;
-    border: 1px solid black;
-    padding: 10px;
-    display: inline-block; /* size DIV to contents */
+    border: 3px solid black;
     line-height: 1em;
+    display: inline-block;
 }
 
 @media (min-width: 568px) {
@@ -28,8 +26,8 @@ kubernetes-container-terminal .terminal-cursor {
 }
 
 kubernetes-container-terminal .terminal-wrapper {
-    display: inline-block;
     vertical-align: top;
+    display: inline-block;
 }
 
 kubernetes-container-terminal .terminal-actions {
@@ -41,6 +39,34 @@ kubernetes-container-terminal .terminal-actions {
     z-index: 1;
 }
 
+kubernetes-container-terminal .terminal .xterm-viewport {
+    overflow-y: auto;
+}
+
+kubernetes-container-terminal .terminal .xterm-viewport::-webkit-scrollbar {
+  height: 10px;
+  overflow: visible;
+  width: 15px;
+}
+
+kubernetes-container-terminal .terminal .xterm-viewport::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+kubernetes-container-terminal .terminal .xterm-viewport::-webkit-scrollbar-thumb {
+    background-color: rgba(255,255,255,.25);
+    box-shadow: inset 1px 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(255,255,255,.07);
+}
+
+kubernetes-container-terminal .terminal .xterm-viewport::-webkit-scrollbar-thumb:active,
+kubernetes-container-terminal .terminal .xterm-viewport::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(255,255,255,.35);
+}
+
+kubernetes-container-terminal .terminal .xterm-viewport::-webkit-scrollbar-track {
+  background: transparent;
+}
+
 /* https://github.com/patternfly/patternfly/pull/135 */
 .spinner-white {
     border-bottom: 4px solid rgba(255, 255, 255, 0.25) !important;

diff --git a/dist/container-terminal.js b/dist/container-terminal.js
@@ -108,7 +108,10 @@
                         var term = new Terminal({
                             cols: scope.cols || defaultCols,
                             rows: scope.rows || defaultRows,
-                            screenKeys: scope.screenKeys || true
+                            cursorBlink: true,
+                            screenKeys: scope.screenKeys || true,
+                            applicationCursor: true, // Needed for proper scrollback behavior in applications like vi
+                            mouseEvents: true        // Needed for proper scrollback behavior in applications like vi
                         });
 
                         outer.empty();
@@ -121,10 +124,24 @@
                                 ws.send("0" + utf8_to_b64(data));
                         });
 
+                        var sizeViewport = function () {
+                          var cols = scope.cols || defaultCols;
+                          if (!term.charMeasure.width) {
+                            return;
+                          }
+                          var xtermViewport = document.getElementsByClassName("xterm-viewport")[0];
+                          // character width * number of columns + space for a scrollbar
+                          // TODO determine the max width of a scrollbar across browsers
+                          xtermViewport.style.width = (term.charMeasure.width * cols + 17) + "px";
+                        };
+
+                        term.charMeasure.on('charsizechanged', sizeViewport);
+
                         var sizeTerminal = function() {
                           var cols = scope.cols || defaultCols;
                           var rows = scope.rows || defaultRows;
                           term.resize(cols, rows);
+                          sizeViewport();
                           if (ws && ws.readyState === 1) {
                             ws.send("4" + window.btoa('{"Width":' + cols + ',"Height":' + rows + '}'));                
                           }

diff --git a/index.html b/index.html
@@ -15,9 +15,10 @@
     </style>
     <link rel="stylesheet" href="bower_components/patternfly/dist/css/patternfly.css">
     <link rel="stylesheet" href="bower_components/patternfly/dist/css/patternfly-additions.css">
+    <link rel="stylesheet" href="bower_components/xterm.js/dist/xterm.css">
     <link rel="stylesheet" href="container-terminal.css">
     <script src="bower_components/angular/angular.js"></script>
-    <script src="bower_components/term.js/src/term.js"></script>
+    <script src="bower_components/xterm.js/dist/xterm.js"></script>
     <script src="container-terminal.js"></script>
 </head>
 <body ng-app="exampleApp">