hterm: add a user-css-text field
This lets people stuff arbitrary CSS text directly in their prefs.
This way they don't have to create their own hosted CSS file on an
external website. This also simplifies webfont support.
We define a new "multiline-string" type to support this form.
Change-Id: Icf248e6e18a5e797dd6222f5c5f1eb90633b22b6
Reviewed-on: https://chromium-review.googlesource.com/485459
Reviewed-by: Brandon Gilmore <varz@google.com>
Tested-by: Mike Frysinger <vapier@chromium.org>
diff --git a/hterm/js/hterm_preference_manager.js b/hterm/js/hterm_preference_manager.js
index cc29682..bf97475 100644
--- a/hterm/js/hterm_preference_manager.js
+++ b/hterm/js/hterm_preference_manager.js
@@ -393,7 +393,11 @@
'user-css':
[hterm.PreferenceManager.categories.Appearance, '', 'url',
- 'URL of user stylesheet to include in the terminal document.']
+ 'URL of user stylesheet to include in the terminal document.'],
+
+ 'user-css-text':
+ [hterm.PreferenceManager.categories.Appearance, '', 'multiline-string',
+ 'Custom CSS text for styling the terminal.'],
};
hterm.PreferenceManager.prototype = {
diff --git a/hterm/js/hterm_scrollport.js b/hterm/js/hterm_scrollport.js
index 8fadbbd..115bbd3 100644
--- a/hterm/js/hterm_scrollport.js
+++ b/hterm/js/hterm_scrollport.js
@@ -308,6 +308,9 @@
this.userCssLink_ = doc.createElement('link');
this.userCssLink_.setAttribute('rel', 'stylesheet');
+ this.userCssText_ = doc.createElement('style');
+ doc.head.appendChild(this.userCssText_);
+
// TODO(rginda): Sorry, this 'screen_' isn't the same thing as hterm.Screen
// from screen.js. I need to pick a better name for one of them to avoid
// the collision.
@@ -443,7 +446,7 @@
* Defaults to null, meaning no custom css is loaded. Set it back to null or
* the empty string to remove a previously applied custom css.
*/
-hterm.ScrollPort.prototype.setUserCss = function(url) {
+hterm.ScrollPort.prototype.setUserCssUrl = function(url) {
if (url) {
this.userCssLink_.setAttribute('href', url);
@@ -454,6 +457,10 @@
}
};
+hterm.ScrollPort.prototype.setUserCssText = function(text) {
+ this.userCssText_.textContent = text;
+};
+
hterm.ScrollPort.prototype.focus = function() {
this.iframe_.focus();
this.screen_.focus();
diff --git a/hterm/js/hterm_terminal.js b/hterm/js/hterm_terminal.js
index 462369b..413fcce 100644
--- a/hterm/js/hterm_terminal.js
+++ b/hterm/js/hterm_terminal.js
@@ -533,8 +533,12 @@
},
'user-css': function(v) {
- terminal.scrollPort_.setUserCss(v);
- }
+ terminal.scrollPort_.setUserCssUrl(v);
+ },
+
+ 'user-css-text': function(v) {
+ terminal.scrollPort_.setUserCssText(v);
+ },
});
this.prefs_.readStorage(function() {
@@ -1274,7 +1278,8 @@
this.scrollPort_.setBackgroundSize(this.prefs_.get('background-size'));
this.scrollPort_.setBackgroundPosition(
this.prefs_.get('background-position'));
- this.scrollPort_.setUserCss(this.prefs_.get('user-css'));
+ this.scrollPort_.setUserCssUrl(this.prefs_.get('user-css'));
+ this.scrollPort_.setUserCssText(this.prefs_.get('user-css-text'));
this.div_.focus = this.focus.bind(this);
diff --git a/nassh/doc/FAQ.md b/nassh/doc/FAQ.md
index 896fbac..b00e523 100644
--- a/nassh/doc/FAQ.md
+++ b/nassh/doc/FAQ.md
@@ -553,6 +553,27 @@
you'll have to pick a different number to have any effect at all.
+### How do I use web fonts?
+
+ You can define it in the CSS file loaded via the 'user-css' field, or you can
+ inline the content in 'user-css-text'.
+
+ Here is an example using [Google Web Fonts](https://fonts.google.com/). Add
+ this line to your custom CSS, and add `"Roboto Mono"` to your 'font-family'
+ list.
+
+ @import url('https://fonts.googleapis.com/css?family=Roboto+Mono');
+
+ Here is an example for [Powerline Fonts](https://github.com/powerline/fonts/).
+ Add this text to your custom CSS, and add `"Anonymous Pro"` to your
+ 'font-family' list.
+
+ @font-face {
+ font-family: "Anonymous Pro";
+ src: url(https://cdn.rawgit.com/wernight/powerline-web-fonts/8040cf32c146c7cd4f776c1484d23dc40685c1bc/fonts/AnonymousPro.woff2) format("woff2");
+ }
+
+
### Can I quickly make temporarily changes to the font size?
Yes. The Ctrl-Plus, Ctrl-Minus and Ctrl-Zero keys can increase, decrease,
diff --git a/nassh/js/nassh_preferences_editor.js b/nassh/js/nassh_preferences_editor.js
index 5a7a4a7..775698a 100644
--- a/nassh/js/nassh_preferences_editor.js
+++ b/nassh/js/nassh_preferences_editor.js
@@ -243,6 +243,7 @@
break;
case 'string':
+ case 'multiline-string':
prefs.set(key, input.value);
break;
@@ -324,6 +325,7 @@
break;
case 'string':
+ case 'multiline-string':
if (prefValue == null)
input.value = '';
else
@@ -535,6 +537,13 @@
onchange = null;
break;
+ case 'multiline-string':
+ input = document.createElement('textarea');
+ // Save simple strings immediately.
+ oninput = onchangeCursorReset;
+ onchange = null;
+ break;
+
case 'color':
input.type = 'color';
break;
