Merge pull request #2849 from rhamilto/container-terminal-next

Automatic merge from submit-queue.

Bump kubernetes-container-terminal to v3.0.0

Requires kubernetes-ui/container-terminal#35

![screen shot 2018-02-23 at 10 37 13 am](https://user-images.githubusercontent.com/895728/36602271-99eb8a40-1885-11e8-91d1-a5e63c4fd55b.PNG)
![screen shot 2018-02-23 at 10 37 38 am](https://user-images.githubusercontent.com/895728/36602273-99f55296-1885-11e8-8e27-927979047c9b.PNG)

Known issues:

* [Default fonts are vertically offset on some Linux distributions](xtermjs/xterm.js#1170)
  ![screen shot 2018-02-23 at 9 32 32 am](https://user-images.githubusercontent.com/895728/36599221-bf750902-187c-11e8-8f3f-becafbcbb46b.PNG)
* Firefox on Windows incorrectly calculates the terminal width due to padding on div.terminal.xterm
  ![screen shot 2018-02-23 at 9 33 56 am](https://user-images.githubusercontent.com/895728/36599319-0d1b7aba-187d-11e8-9705-4956454e92ac.PNG)

Author: openshift-merge-robot

app/index.html

@@ -20,7 +20,7 @@
     <link rel="stylesheet" href="bower_components/angularjs-datatables/dist/plugins/bootstrap/datatables.bootstrap.min.css" />
     <link rel="stylesheet" href="bower_components/angular-patternfly/dist/styles/angular-patternfly.css" />
     <link rel="stylesheet" href="bower_components/kubernetes-label-selector/labelFilter.css" />
-    <link rel="stylesheet" href="bower_components/xterm.js/dist/xterm.css" />
+    <link rel="stylesheet" href="bower_components/xterm.js-next/xterm.css" />
     <link rel="stylesheet" href="bower_components/kubernetes-container-terminal/dist/container-terminal.css" />
     <link rel="stylesheet" href="bower_components/registry-image-widgets/dist/image-widgets.css" />
     <link rel="stylesheet" href="bower_components/ng-sortable/dist/ng-sortable.css" />
@@ -139,7 +139,7 @@ <h1>JavaScript Required</h1>
     <script src="bower_components/selectize/dist/js/selectize.js"></script>
     <script src="bower_components/kubernetes-label-selector/labelSelector.js"></script>
     <script src="bower_components/kubernetes-label-selector/labelFilter.js"></script>
-    <script src="bower_components/xterm.js/dist/xterm.js"></script>
+    <script src="bower_components/xterm.js-next/xterm.js"></script>
     <script src="bower_components/kubernetes-container-terminal/dist/container-terminal.js"></script>
     <script src="bower_components/registry-image-widgets/dist/image-widgets.js"></script>
     <script src="bower_components/kubernetes-object-describer/dist/object-describer.js"></script>

app/scripts/controllers/pod.js

@@ -147,10 +147,9 @@ angular.module('openshiftConsole')
           }, 50);
           return;
         }
-        var windowWidth = win.width();
         var windowHeight = win.height();
-        var termWidth = windowWidth - r.left - 54; // we want 54px right padding, includes 6px border within the container terminal
-        var termHeight = windowHeight - r.top - 36; // we want 36px bottom padding, includes 6px border within the container terminal
+        var termWidth = r.width - 17; // 17px is roughly the width of an average scrollbar
+        var termHeight = windowHeight - r.top - 36;
         $scope.terminalCols = Math.max(_.floor(termWidth / characterBoundingBox.width), 80);
         $scope.terminalRows = Math.max(_.floor(termHeight / characterBoundingBox.height), 24);
       });

app/styles/_container-terminal.less

@@ -46,9 +46,9 @@
     display: none;
     line-height: 1;
     position: absolute;
-    right: 25px;
+    right: 19px;
     top: 0;
-    z-index: 1;
+    z-index: 10;
     a {
       .style-terminal-action();
     }
@@ -59,11 +59,6 @@
       display: block;
     }
   }
-  .terminal-actions .btn {
-    background: none;
-    .btn-link();
-    .style-terminal-action();
-  }
   // so that &-:ms-fullscreen works correctly, these need to come after .fullscreen-toggle
   &:-moz-full-screen {
     .fullscreen();
@@ -80,21 +75,30 @@
 }
 
 kubernetes-container-terminal {
-  // Control what fonts are used in the container terminal since we need the terminal-font class for row/col character calculations
-  .terminal {
-    .terminal-font();
-  }
   .terminal-actions {
     top: 0;
-    right: 47px;
+    right: 25px;
+    .btn {
+      background: none;
+      .btn-link();
+      .style-terminal-action();
+    }
     .spinner {
       top: 5px;
     }
   }
 }
 
+// .terminal-font is used for row/col character calculations.
+// It must match what's in the xterm.js config in kubernetes-container-terminal.
+// However, the line-height is dependent on the font, so instead of a value
+// of 1, it gets the pixel value of the declared font as rendered inside of
+// xterm.js, which varies across browser and platform.  Our default monospace
+// font stack won't work in this instance because the fonts there render with
+// different line heights based on the browser (e.g., Menlo renders with a
+// line-height of 12px in Chrome for MacOS, but 14px in Firefox for MacOS).
 .terminal-font {
-  font-family: "Monospace Regular", "DejaVu Sans Mono", Menlo, Monaco, Consolas, monospace;
+  font-family: "Courier New", Courier, monospace;
   font-size: 12px;
-  line-height: 1em;
+  line-height: 14px;
 }

app/styles/_core.less

@@ -896,11 +896,6 @@ select:invalid {
   width: 12px;
 }
 
-.spinner.spinner-inverse {
-  border-color: rgba(0,153,211, .25);
-  border-top-color: rgba(0,153,211, .75);
-}
-
 .attention-message {
   background-color: lighten(@brand-primary, 50%);
   border: 1px solid darken(@brand-primary, 10%);
@@ -1032,10 +1027,6 @@ a.disabled-link {
   .empty-state-message {
     margin-top: 60px;
   }
-  kubernetes-container-terminal {
-    .text-center();
-    overflow: hidden;
-  }
   .original-cmd-msg {
     margin-bottom: 10px;
   }

bower.json

@@ -28,7 +28,7 @@
     "selectize": "0.12.1",
     "c3": "0.4.11",
     "kubernetes-label-selector": "2.1.1",
-    "kubernetes-container-terminal": "2.1.1",
+    "kubernetes-container-terminal": "3.0.0",
     "registry-image-widgets": "https://github.com/cockpit-project/registry-image-widgets.git#0.0.15",
     "kubernetes-object-describer": "1.0.4",
     "bootstrap-hover-dropdown": "2.1.3",

dist/scripts/scripts.js

@@ -4815,8 +4815,8 @@ var t = $(".container-terminal-wrapper").get(0);
 if (t) {
 var n = t.getBoundingClientRect();
 if (0 !== n.left || 0 !== n.top || 0 !== n.width || 0 !== n.height) {
-var o = w.width(), i = w.height(), s = o - n.left - 54, c = i - n.top - 36;
-r.terminalCols = Math.max(_.floor(s / C.width), 80), r.terminalRows = Math.max(_.floor(c / C.height), 24);
+var o = w.height(), i = n.width - 17, s = o - n.top - 36;
+r.terminalCols = Math.max(_.floor(i / C.width), 80), r.terminalRows = Math.max(_.floor(s / C.height), 24);
 } else a(function() {
 P(e + 1);
 }, 50);