Add text resize feature, and change font of console screen to Hack.

ui/widgets/screen_console.css

@@ -19,6 +19,18 @@
 
 @charset "utf-8";
 
+@import "~hack-font/build/web/hack.css";
+
+#home-content > #home-content-preload-drop::before {
+  content: " ";
+  font-family: Hack, monospace;
+  font-weight: bold;
+}
+#home-content > #home-content-preload-drop::after {
+  content: " ";
+  font-family: Hack, monospace;
+}
+
 #home-content > .screen > .screen-screen > .screen-console {
   position: relative;
 }
@@ -132,4 +144,5 @@
 }
 
 #home-content > .screen > .screen-screen > .screen-console > .console-console {
+  font-family: Hack, monospace;
 }

ui/widgets/screen_console.vue

@@ -39,6 +39,23 @@
     >
       <h2 style="display:none;">Tool bar</h2>
 
+      <div class="console-toolbar-item">
+        <h3 class="tb-title">Text size</h3>
+
+        <ul class="hlst lst-nostyle">
+          <li>
+            <a class="tb-item" href="javascript:;" @click="fontSizeUp">
+              <span class="tb-key-icon icon icon-keyboardkey2">Increase +</span>
+            </a>
+          </li>
+          <li>
+            <a class="tb-item" href="javascript:;" @click="fontSizeDown">
+              <span class="tb-key-icon icon icon-keyboardkey2">Decrease -</span>
+            </a>
+          </li>
+        </ul>
+      </div>
+
       <div
         v-for="(keyType, keyTypeIdx) in screenKeys"
         :key="keyTypeIdx"
@@ -62,6 +79,7 @@
 </template>
 
 <script>
+import FontFaceObserver from "fontfaceobserver";
 import { Terminal } from "xterm";
 import { WebLinksAddon } from "xterm-addon-web-links";
 import { FitAddon } from "xterm-addon-fit";
@@ -71,15 +89,25 @@ import { consoleScreenKeys } from "./screen_console_keys.js";
 import "./screen_console.css";
 import "xterm/css/xterm.css";
 
+const termTypeFace = "Hack";
+const termFallbackTypeFace = "monospace";
+const termTypeFaceLoadTimeout = 10000;
+const termDefaultFontSize = 16;
+const termMinFontSize = 14;
+const termMaxFontSize = 36;
+
 class Term {
   constructor(control) {
     const resizeDelayInterval = 500;
 
     this.closed = false;
+    this.fontSize = termDefaultFontSize;
     this.term = new Terminal({
       allowTransparency: false,
       cursorBlink: true,
       cursorStyle: "block",
+      fontFamily: termTypeFace + ", " + termFallbackTypeFace,
+      fontSize: this.fontSize,
       logLevel: process.env.NODE_ENV === "development" ? "info" : "off"
     });
     this.fit = new FitAddon();
@@ -177,7 +205,7 @@ class Term {
     });
   }
 
-  init(root, callbacks) {
+  open(root, callbacks) {
     this.term.open(root);
 
     this.term.textarea.addEventListener("focus", callbacks.focus);
@@ -220,6 +248,32 @@ class Term {
     this.refit();
   }
 
+  init(root, callbacks) {
+    const self = this;
+
+    return Promise.all([
+      new FontFaceObserver(termTypeFace).load(null, termTypeFaceLoadTimeout),
+      new FontFaceObserver(termTypeFace, { weight: "bold" }).load(
+        null,
+        termTypeFaceLoadTimeout
+      )
+    ])
+      .then(() => {
+        self.open(root, callbacks);
+      })
+      .catch(() => {
+        callbacks.warn(
+          "Unable to load remote font, using " +
+            termFallbackTypeFace +
+            " instead"
+        );
+
+        self.term.setOption("fontFamily", termFallbackTypeFace);
+
+        self.open(root, callbacks);
+      });
+  }
+
   dispatch(event) {
     try {
       this.term.textarea.dispatchEvent(event);
@@ -244,6 +298,26 @@ class Term {
     }
   }
 
+  fontSizeUp() {
+    if (this.fontSize >= termMaxFontSize) {
+      return;
+    }
+
+    this.fontSize += 2;
+    this.term.setOption("fontSize", this.fontSize);
+    this.refit();
+  }
+
+  fontSizeDown() {
+    if (this.fontSize <= termMinFontSize) {
+      return;
+    }
+
+    this.fontSize -= 2;
+    this.term.setOption("fontSize", this.fontSize);
+    this.refit();
+  }
+
   focus() {
     try {
       this.term.focus();
@@ -332,8 +406,8 @@ export default {
       deep: true
     }
   },
-  mounted() {
-    this.init();
+  async mounted() {
+    await this.init();
   },
   beforeDestroy() {
     this.deinit();
@@ -342,19 +416,28 @@ export default {
     triggerActive() {
       this.active ? this.activate() : this.deactivate();
     },
-    init() {
+    async init() {
       let self = this;
 
-      this.term.init(this.$el.getElementsByClassName("console-console")[0], {
-        focus(e) {
-          document.addEventListener("keyup", self.localKeypress);
-          document.addEventListener("keydown", self.localKeypress);
-        },
-        blur(e) {
-          document.removeEventListener("keyup", self.localKeypress);
-          document.removeEventListener("keydown", self.localKeypress);
+      await this.term.init(
+        this.$el.getElementsByClassName("console-console")[0],
+        {
+          focus(e) {
+            document.addEventListener("keyup", self.localKeypress);
+            document.addEventListener("keydown", self.localKeypress);
+          },
+          blur(e) {
+            document.removeEventListener("keyup", self.localKeypress);
+            document.removeEventListener("keydown", self.localKeypress);
+          },
+          warn(msg) {
+            self.$emit("warning", msg);
+          },
+          info(msg) {
+            self.$emit("info", msg);
+          }
         }
-      });
+      );
 
       this.triggerActive();
       this.runRunner();
@@ -421,6 +504,12 @@ export default {
 
       this.term.dispatch(new KeyboardEvent("keydown", key));
       this.term.dispatch(new KeyboardEvent("keyup", key));
+    },
+    fontSizeUp() {
+      this.term.fontSizeUp();
+    },
+    fontSizeDown() {
+      this.term.fontSizeDown();
     }
   }
 };

ui/widgets/screens.css

@@ -0,0 +1,52 @@
+/*
+// Sshwifty - A Web SSH client
+//
+// Copyright (C) 2019 Rui NI <nirui@gmx.com>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+@charset "utf-8";
+
+#home-content > .screen {
+  display: flex;
+  justify-content: top;
+  flex-direction: column;
+  font-size: 1em;
+}
+
+#home-content > .screen > .screen-error {
+  display: block;
+  padding: 10px;
+  background: #b44;
+  color: #fff;
+  font-size: 0.75em;
+  flex: 0 0;
+}
+
+#home-content > .screen > .screen-error.screen-error-level-error {
+  background: #b44;
+}
+
+#home-content > .screen > .screen-error.screen-error-level-warning {
+  background: #b82;
+}
+
+#home-content > .screen > .screen-error.screen-error-level-info {
+  background: #28b;
+}
+
+#home-content > .screen > .screen-screen {
+  flex: auto;
+}

ui/widgets/screens.vue

@@ -30,8 +30,12 @@
     >
       <h1 style="display:none;">Main Interface</h1>
 
-      <div v-if="screenInfo.indicator.error.length > 0" class="screen-error">
-        {{ screenInfo.indicator.error }}
+      <div
+        v-if="screenInfo.indicator.message.length > 0"
+        class="screen-error"
+        :class="'screen-error-level-' + screenInfo.indicator.level"
+      >
+        {{ screenInfo.indicator.message }}
       </div>
 
       <div class="screen-screen" style="position: relative">
@@ -44,6 +48,8 @@
           :style="'background-color: ' + screenInfo.control.activeColor()"
           style="top: 0; right: 0; left: 0; bottom: 0; padding： 0; margin: 0; position: absolute; overflow: hidden"
           @stopped="stopped(idx, $event)"
+          @warning="warning(idx, $event)"
+          @info="info(idx, $event)"
           @updated="updated(idx)"
         ></component>
       </div>
@@ -54,6 +60,8 @@
 <script>
 import ConsoleScreen from "./screen_console.vue";
 
+import "./screens.css";
+
 export default {
   components: {
     ConsoleScreen
@@ -81,6 +89,12 @@ export default {
     stopped(index, stopErr) {
       this.$emit("stopped", index, stopErr);
     },
+    warning(index, msg) {
+      this.$emit("warning", index, msg);
+    },
+    info(index, msg) {
+      this.$emit("info", index, msg);
+    },
     updated(index) {
       this.$emit("updated", index);
     }

ui/widgets/tab_list.vue

@@ -24,7 +24,9 @@
       :key="tabInfo.id"
       :class="{
         active: tab === idx,
-        error: tabInfo.indicator.error.length > 0,
+        error:
+          tabInfo.indicator.message.length > 0 &&
+          tabInfo.indicator.level === 'error',
         updated: tabInfo.indicator.updated && tab !== idx
       }"
       :style="