From ac5c14adca65f70faaf8d76739f98db868f9c0b4 Mon Sep 17 00:00:00 2001
From: Benjamin Woodruff <github@benjam.info>
Date: Mon, 15 Jan 2018 09:36:02 -0800
Subject: [PATCH] Use xterm.js's fit addon when calling fitResize (#2594)

xterm.js doesn't use `this.term.charMeasure.width` when rendering. It
actually uses:

`Math.floor(this._terminal.charMeasure.width * window.devicePixelRatio)`

This is important, because character widths may be non-integer values,
which means that we can end up with an empty space on the right side of
the terminal window.

Instead of trying to match xterm's behavior, it's probably better if we
just use xterm's `fit` addon. This seems to behave better for me.

We might not want to land this as-is, becuase this addon forces an
annoying hard-coded 17px margin on the right side to compensate for a
scrollbar (see xtermjs/xterm.js#400), but at least for my use-cases,
this is still better than it was.
---
 lib/components/term.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/lib/components/term.js b/lib/components/term.js
index 8b31a59d..a349efc4 100644
--- a/lib/components/term.js
+++ b/lib/components/term.js
@@ -1,12 +1,15 @@
 /* global Blob,URL,requestAnimationFrame */
 import React from 'react';
 import {Terminal} from 'xterm';
+import * as fit from 'xterm/lib/addons/fit/fit';
 import {clipboard} from 'electron';
 import * as Color from 'color';
 import {PureComponent} from '../base-components';
 import terms from '../terms';
 import processClipboard from '../utils/paste';
 
+Terminal.applyAddon(fit);
+
 // map old hterm constants to xterm.js
 const CURSOR_STYLES = {
   BEAM: 'bar',
@@ -195,10 +198,7 @@ export default class Term extends PureComponent {
     if (!this.termWrapperRef) {
       return;
     }
-    const termRect = this.termWrapperRef.getBoundingClientRect();
-    const cols = Math.floor(termRect.width / this.term.charMeasure.width);
-    const rows = Math.floor(termRect.height / this.term.charMeasure.height);
-    this.resize(cols, rows);
+    this.term.fit();
   }
 
   keyboardHandler(e) {
@@ -286,7 +286,7 @@ export default class Term extends PureComponent {
       >
         {this.props.customChildrenBefore}
         <div ref={this.onTermWrapperRef} className={css('fit', 'wrapper')}>
-          <div ref={this.onTermRef} className={css('term')} />
+          <div ref={this.onTermRef} className={css('fit', 'term')} />
         </div>
         {this.props.customChildren}
       </div>