From 3f352ec1373d2b10b74fbcfbe69aa25f65ef7fe2 Mon Sep 17 00:00:00 2001 From: chabou Date: Thu, 20 Oct 2016 00:55:06 +0200 Subject: [PATCH] Prevent Hterm to share same preferences between instances (#906) * Add a random profileId to hterm instance to differentiate PreferenceManager used internally * Use getPrefs() method instead of accessing prefs_ private property directly --- lib/components/term.js | 74 +++++++++++++++++++++++------------------- 1 file changed, 41 insertions(+), 33 deletions(-) diff --git a/lib/components/term.js b/lib/components/term.js index 487f98e3..1378e362 100644 --- a/lib/components/term.js +++ b/lib/components/term.js @@ -1,6 +1,7 @@ /* global Blob,URL,requestAnimationFrame */ import React from 'react'; import Color from 'color'; +import uuid from 'uuid'; import hterm from '../hterm'; import Component from '../component'; import {getColorList} from '../utils/colors'; @@ -20,7 +21,7 @@ export default class Term extends Component { componentDidMount() { const {props} = this; - this.term = props.term || new hterm.Terminal(); + this.term = props.term || new hterm.Terminal(uuid.v4()); // the first term that's created has unknown size // subsequent new tabs have size @@ -28,30 +29,32 @@ export default class Term extends Component { this.term.realizeSize_(props.cols, props.rows); } - this.term.prefs_.set('font-family', props.fontFamily); - this.term.prefs_.set('font-size', props.fontSize); - this.term.prefs_.set('font-smoothing', props.fontSmoothing); - this.term.prefs_.set('cursor-color', this.validateColor(props.cursorColor, 'rgba(255,255,255,0.5)')); - this.term.prefs_.set('enable-clipboard-notice', false); - this.term.prefs_.set('foreground-color', props.foregroundColor); - this.term.prefs_.set('background-color', 'transparent'); - this.term.prefs_.set('color-palette-overrides', getColorList(props.colors)); - this.term.prefs_.set('user-css', this.getStylesheet(props.customCSS)); - this.term.prefs_.set('scrollbar-visible', false); - this.term.prefs_.set('receive-encoding', 'raw'); - this.term.prefs_.set('send-encoding', 'raw'); - this.term.prefs_.set('alt-sends-what', 'browser-key'); + const prefs = this.term.getPrefs(); + + prefs.set('font-family', props.fontFamily); + prefs.set('font-size', props.fontSize); + prefs.set('font-smoothing', props.fontSmoothing); + prefs.set('cursor-color', this.validateColor(props.cursorColor, 'rgba(255,255,255,0.5)')); + prefs.set('enable-clipboard-notice', false); + prefs.set('foreground-color', props.foregroundColor); + prefs.set('background-color', 'transparent'); + prefs.set('color-palette-overrides', getColorList(props.colors)); + prefs.set('user-css', this.getStylesheet(props.customCSS)); + prefs.set('scrollbar-visible', false); + prefs.set('receive-encoding', 'raw'); + prefs.set('send-encoding', 'raw'); + prefs.set('alt-sends-what', 'browser-key'); if (props.bell === 'SOUND') { - this.term.prefs_.set('audible-bell-sound', this.props.bellSoundURL); + prefs.set('audible-bell-sound', this.props.bellSoundURL); } else { - this.term.prefs_.set('audible-bell-sound', ''); + prefs.set('audible-bell-sound', ''); } if (props.copyOnSelect) { - this.term.prefs_.set('copy-on-select', true); + prefs.set('copy-on-select', true); } else { - this.term.prefs_.set('copy-on-select', false); + prefs.set('copy-on-select', false); } this.term.onTerminalReady = () => { @@ -83,23 +86,26 @@ export default class Term extends Component { if (this.props.onWheel) { this.props.onWheel(e); } - this.term.prefs_.set('scrollbar-visible', true); + const prefs = this.term.getPrefs(); + prefs.set('scrollbar-visible', true); clearTimeout(this.scrollbarsHideTimer); if (!this.scrollMouseEnter) { this.scrollbarsHideTimer = setTimeout(() => { - this.term.prefs_.set('scrollbar-visible', false); + prefs.set('scrollbar-visible', false); }, 1000); } } handleScrollEnter() { clearTimeout(this.scrollbarsHideTimer); - this.term.prefs_.set('scrollbar-visible', true); + const prefs = this.term.getPrefs(); + prefs.set('scrollbar-visible', true); this.scrollMouseEnter = true; } handleScrollLeave() { - this.term.prefs_.set('scrollbar-visible', false); + const prefs = this.term.getPrefs(); + prefs.set('scrollbar-visible', false); this.scrollMouseEnter = false; } @@ -219,24 +225,26 @@ export default class Term extends Component { this.clear(); } + const prefs = this.term.getPrefs(); + if (this.props.fontSize !== nextProps.fontSize) { - this.term.prefs_.set('font-size', nextProps.fontSize); + prefs.set('font-size', nextProps.fontSize); } if (this.props.foregroundColor !== nextProps.foregroundColor) { - this.term.prefs_.set('foreground-color', nextProps.foregroundColor); + prefs.set('foreground-color', nextProps.foregroundColor); } if (this.props.fontFamily !== nextProps.fontFamily) { - this.term.prefs_.set('font-family', nextProps.fontFamily); + prefs.set('font-family', nextProps.fontFamily); } if (this.props.fontSmoothing !== nextProps.fontSmoothing) { - this.term.prefs_.set('font-smoothing', nextProps.fontSmoothing); + prefs.set('font-smoothing', nextProps.fontSmoothing); } if (this.props.cursorColor !== nextProps.cursorColor) { - this.term.prefs_.set('cursor-color', this.validateColor(nextProps.cursorColor, 'rgba(255,255,255,0.5)')); + prefs.set('cursor-color', this.validateColor(nextProps.cursorColor, 'rgba(255,255,255,0.5)')); } if (this.props.cursorShape !== nextProps.cursorShape) { @@ -244,23 +252,23 @@ export default class Term extends Component { } if (this.props.colors !== nextProps.colors) { - this.term.prefs_.set('color-palette-overrides', getColorList(nextProps.colors)); + prefs.set('color-palette-overrides', getColorList(nextProps.colors)); } if (this.props.customCSS !== nextProps.customCSS) { - this.term.prefs_.set('user-css', this.getStylesheet(nextProps.customCSS)); + prefs.set('user-css', this.getStylesheet(nextProps.customCSS)); } if (this.props.bell === 'SOUND') { - this.term.prefs_.set('audible-bell-sound', this.props.bellSoundURL); + prefs.set('audible-bell-sound', this.props.bellSoundURL); } else { - this.term.prefs_.set('audible-bell-sound', ''); + prefs.set('audible-bell-sound', ''); } if (this.props.copyOnSelect) { - this.term.prefs_.set('copy-on-select', true); + prefs.set('copy-on-select', true); } else { - this.term.prefs_.set('copy-on-select', false); + prefs.set('copy-on-select', false); } }