terminal: support setting line height for xterm.js
Note that line-height is a bit different from the existing
line-height-padding-size.
Bug: b/236205389
Change-Id: Ibc52735a7925029b6d341122ee38c512e80c199f
Reviewed-on: https://chromium-review.googlesource.com/c/apps/libapps/+/3949412
Tested-by: kokoro <noreply+kokoro@google.com>
Reviewed-by: Joel Hockey <joelhockey@chromium.org>
diff --git a/terminal/js/terminal.js b/terminal/js/terminal.js
index 9a9bf5c..ca5a19e 100644
--- a/terminal/js/terminal.js
+++ b/terminal/js/terminal.js
@@ -7,8 +7,7 @@
* @suppress {moduleLoad}
*/
-import {composeTmuxUrl, definePrefs, getOSInfo, watchColors}
- from './terminal_common.js';
+import {composeTmuxUrl, getOSInfo, watchColors} from './terminal_common.js';
import {createEmulator} from './terminal_emulator.js';
import {terminalImport} from './terminal_import.js';
import {LaunchInfo, getTerminalInfoTracker} from './terminal_info.js';
@@ -193,8 +192,6 @@
};
term.onTerminalReady = function() {
- const prefs = term.getPrefs();
- definePrefs(prefs);
terminal.watchBackgroundImage(term);
const prefKey = 'settings.accessibility';
diff --git a/terminal/js/terminal_common.js b/terminal/js/terminal_common.js
index 4860b5c..670be4f 100644
--- a/terminal/js/terminal_common.js
+++ b/terminal/js/terminal_common.js
@@ -50,6 +50,8 @@
export const SUPPORTED_FONT_SIZES = [10, 11, 12, 13, 14, 16, 18, 20];
export const SUPPORTED_LINE_HEIGHT_PADDINGS = [-2, -1.5, -1, -0.5, 0, 0.5, 1,
1.5, 2, 3, 4, 5];
+export const SUPPORTED_LINE_HEIGHT = [1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8,
+ 1.9, 2];
export const TERMINAL_EMULATORS = new Map([
['xterm.js', {lib: 'xterm.js', webgl: true}],
@@ -187,6 +189,7 @@
prefs.definePreference('theme-variations', {});
prefs.definePreference('terminal-emulator',
TERMINAL_EMULATORS.keys().next().value);
+ prefs.definePreference('line-height', 1);
}
/**
diff --git a/terminal/js/terminal_emulator.js b/terminal/js/terminal_emulator.js
index d02f39b..53752dc 100644
--- a/terminal/js/terminal_emulator.js
+++ b/terminal/js/terminal_emulator.js
@@ -12,8 +12,8 @@
// TODO(b/236205389): support option smoothScrollDuration?
import {LitElement, css, html} from './lit.js';
-import {FontManager, ORIGINAL_URL, TERMINAL_EMULATORS, delayedScheduler,
- fontManager, getOSInfo, sleep} from './terminal_common.js';
+import {FontManager, ORIGINAL_URL, TERMINAL_EMULATORS, definePrefs,
+ delayedScheduler, fontManager, getOSInfo, sleep} from './terminal_common.js';
import {ICON_COPY} from './terminal_icons.js';
import {TerminalTooltip} from './terminal_tooltip.js';
import {Terminal, Unicode11Addon, WebLinksAddon, WebglAddon}
@@ -326,6 +326,7 @@
this.profileId_ = profileId;
/** @type {!hterm.PreferenceManager} */
this.prefs_ = new hterm.PreferenceManager(storage, profileId);
+ definePrefs(this.prefs_);
this.enableWebGL_ = enableWebGL;
// TODO: we should probably pass the initial prefs to the ctor.
@@ -708,6 +709,7 @@
this.updateTheme_({foreground: v});
setHtermColorCSSVariable('foreground-color', v);
},
+ 'line-height': (v) => this.updateOption_('lineHeight', v, true),
});
for (const name of ['keybindings-os-defaults', 'pass-ctrl-n', 'pass-ctrl-t',
@@ -1046,6 +1048,8 @@
decorate(div) {
super.decorate(div);
+ definePrefs(this.getPrefs());
+
const fontManager = new FontManager(this.getDocument());
fontManager.loadPowerlineCSS().then(() => {
const prefs = this.getPrefs();
diff --git a/terminal/js/terminal_settings_app.js b/terminal/js/terminal_settings_app.js
index f68b4ba..792b7ea 100644
--- a/terminal/js/terminal_settings_app.js
+++ b/terminal/js/terminal_settings_app.js
@@ -11,8 +11,9 @@
import {getIndexeddbFileSystem} from './nassh_fs.js';
import {LitElement, createRef, css, html, ref, when} from './lit.js';
-import {SUPPORTED_FONT_SIZES, SUPPORTED_LINE_HEIGHT_PADDINGS,
- TERMINAL_EMULATORS, getOSInfo} from './terminal_common.js';
+import {SUPPORTED_FONT_SIZES, SUPPORTED_LINE_HEIGHT,
+ SUPPORTED_LINE_HEIGHT_PADDINGS, TERMINAL_EMULATORS, getOSInfo, isXtermJs}
+ from './terminal_common.js';
import './terminal_dropdown.js';
import './terminal_file_editor.js';
import {ICON_OPEN_IN_NEW} from './terminal_icons.js';
@@ -200,6 +201,8 @@
const profileCategory =
getOSInfo().multi_profile ? 'profile-category' : '';
+ const xtermJs = isXtermJs(window.preferenceManager);
+
return html`
<div id="left-panel">
<h1>${msg('PREFERENCES_HEADER_TERMINAL')}</h1>
@@ -285,18 +288,31 @@
preference="color-palette-overrides">
</terminal-settings-ansi-colors>
</li>
- <li class="setting-container"
- title="${msg('HTERM_PREF_LINE_HEIGHT_PADDING_SIZE')}">
- <h4>${msg('HTERM_NAME_PREF_LINE_HEIGHT_PADDING_SIZE')}</h4>
- <!-- TODO(easy): Support text field entry. -->
- <terminal-settings-dropdown
- preference="line-height-padding-size"
- title="${msg('HTERM_PREF_FONT_SIZE')}"
- .options="${SUPPORTED_LINE_HEIGHT_PADDINGS.map(
- (value) => ({value}))}"
- >
- </terminal-settings-dropdown>
- </li>
+
+ ${when(xtermJs, () => html`
+ <li class="setting-container"
+ title="${msg('TERMINAL_PREF_LINE_HEIGHT')}">
+ <h4>${msg('TERMINAL_NAME_PREF_LINE_HEIGHT')}</h4>
+ <terminal-settings-dropdown
+ preference="line-height"
+ .options="${SUPPORTED_LINE_HEIGHT.map(
+ (value) => ({value}))}"
+ >
+ </terminal-settings-dropdown>
+ </li>
+ `, () => html`
+ <li class="setting-container"
+ title="${msg('HTERM_PREF_LINE_HEIGHT_PADDING_SIZE')}">
+ <h4>${msg('HTERM_NAME_PREF_LINE_HEIGHT_PADDING_SIZE')}</h4>
+ <!-- TODO(easy): Support text field entry. -->
+ <terminal-settings-dropdown
+ preference="line-height-padding-size"
+ .options="${SUPPORTED_LINE_HEIGHT_PADDINGS.map(
+ (value) => ({value}))}"
+ >
+ </terminal-settings-dropdown>
+ </li>
+ `)}
</ul>
</section>