✨ Feat: Terminal tabs

GitSquared · GitSquared · commit bc66a57d02d1 · 2018-11-25T17:02:16.000+01:00
See #260
diff --git a/src/_boot.js b/src/_boot.js
@@ -163,6 +163,12 @@ app.on('ready', () => {
     };
     tty.ondisconnected = () => {
         signale.error("Lost connection to frontend");
+        Object.keys(extraTtys).forEach(key => {
+            if (extraTtys[key] !== null) {
+                extraTtys[key].close();
+                extraTtys[key] = null;
+            }
+        });
         signale.watch("Waiting for frontend connection...");
     };
 
@@ -213,7 +219,8 @@ app.on('ready', () => {
             });
             signale.success(`New terminal back-end initialized at ${port}`);
             term.onclosed = (code, signal) => {
-                tty.ondisconnected = () => {};
+                term.ondisconnected = () => {};
+                term.wss.close();
                 signale.complete(`TTY exited at ${port}`, code, signal);
                 extraTtys[term.port] = null;
                 delete term;
diff --git a/src/_renderer.js b/src/_renderer.js
@@ -169,7 +169,7 @@ initUI = () => {
     document.body.innerHTML += `<section class="mod_column" id="mod_column_left">
         <h3 class="title"><p>PANEL</p><p>SYSTEM</p></h3>
     </section>
-    <section id="main_shell" class="greeting" style="height:0%;width:0%;opacity:0;margin-bottom:30vh;">
+    <section id="main_shell" style="height:0%;width:0%;opacity:0;margin-bottom:30vh;">
         <h3 class="title" style="opacity:0;"><p>TERMINAL</p><p>MAIN SHELL</p></h3>
         <h1 id="main_shell_greeting"></h1>
     </section>
@@ -272,15 +272,32 @@ initGreeter = () => {
             setTimeout(() => {
                 greeter.remove();
                 setTimeout(() => {
-                    shellContainer.innerHTML += `<pre id="terminal"></pre>`;
-                    window.term = new Terminal({
-                        role: "client",
-                        parentId: "terminal",
-                        port: window.settings.port || 3000
-                    });
+                    shellContainer.innerHTML += `
+                        <ul id="main_shell_tabs">
+                            <li id="shell_tab0" onclick="window.focusShellTab(0);" class="active">MAIN SHELL</li>
+                            <li id="shell_tab1" onclick="window.focusShellTab(1);">EMPTY</li>
+                            <li id="shell_tab2" onclick="window.focusShellTab(2);">EMPTY</li>
+                            <li id="shell_tab3" onclick="window.focusShellTab(3);">EMPTY</li>
+                            <li id="shell_tab4" onclick="window.focusShellTab(4);">EMPTY</li>
+                        </ul>
+                        <div id="main_shell_innercontainer">
+                            <pre id="terminal0" class="active"></pre>
+                            <pre id="terminal1"></pre>
+                            <pre id="terminal2"></pre>
+                            <pre id="terminal3"></pre>
+                            <pre id="terminal4"></pre>
+                        </div>`;
+                    window.term = {
+                        0: new Terminal({
+                            role: "client",
+                            parentId: "terminal0",
+                            port: window.settings.port || 3000
+                        })
+                    };
+                    window.currentTerm = 0;
                     // Prevent losing hardware keyboard focus on the terminal when using touch keyboard
                     window.onmouseup = (e) => {
-                        window.term.term.focus();
+                        window.term[window.currentTerm].term.focus();
                     };
 
                     window.fsDisp = new FilesystemDisplay({
@@ -298,6 +315,8 @@ initGreeter = () => {
 };
 
 window.themeChanger = (theme) => {
+    window.focusShellTab(0);
+
     let src = path.join(themesDir, theme+".json" || settings.theme+".json");
     // Always get fresh theme files
     delete require.cache[src];
@@ -309,30 +328,33 @@ window.themeChanger = (theme) => {
     for (let i; i < 99999; i++) {
         clearInterval(i);
     }
-    window.term.socket.close();
-    delete window.term;
+    window.term[window.currentTerm].socket.close();
+    delete window.term[window.currentTerm];
     delete window.mods;
     delete window.fsDisp;
 
-    document.getElementById("terminal").innerHTML = "";
+    document.getElementById("terminal0").innerHTML = "";
     document.querySelectorAll(".mod_column").forEach((e) => {
         e.setAttribute("class", "mod_column");
     });
     document.querySelectorAll(".mod_column > div").forEach(e => {e.remove()});
     document.querySelectorAll("div.smoothie-chart-tooltip").forEach(e => {e.remove()});
 
-    window.term = new Terminal({
-        role: "client",
-        parentId: "terminal",
-        port: window.settings.port || 3000
-    });
+    window.term = {
+        0: new Terminal({
+            role: "client",
+            parentId: "terminal0",
+            port: window.settings.port || 3000
+        })
+    };
+    window.currentTerm = 0;
     initMods();
     window.fsDisp = new FilesystemDisplay({
         parentId: "filesystem"
     });
 
     setTimeout(() => {
-        window.term.fit();
+        window.term[window.currentTerm].fit();
     }, 2700);
 };
 
@@ -344,6 +366,67 @@ window.remakeKeyboard = (layout) => {
     });
 };
 
+window.focusShellTab = (number) => {
+    if (number !== window.currentTerm && window.term[number]) {
+        window.currentTerm = number;
+
+        document.querySelectorAll(`ul#main_shell_tabs > li:not(:nth-child(${number+1}))`).forEach(e => {
+            e.setAttribute("class", "");
+        });
+        document.getElementById("shell_tab"+number).setAttribute("class", "active");
+
+        document.querySelectorAll(`div#main_shell_innercontainer > pre:not(:nth-child(${number+1}))`).forEach(e => {
+            e.setAttribute("class", "");
+        });
+        document.getElementById("terminal"+number).setAttribute("class", "active");
+
+        window.term[number].fit();
+        window.term[number].term.focus();
+        window.term[number].resendCWD();
+    } else if (number > 0 && number <= 4 && window.term[number] !== null) {
+        window.term[number] = null;
+
+        document.getElementById("shell_tab"+number).innerText = "LOADING...";
+        ipc.send("ttyspawn", "true");
+        ipc.once("ttyspawn-reply", (e, r) => {
+            if (r.startsWith("ERROR")) {
+                document.getElementById("shell_tab"+number).innerText = "ERROR";
+            } else if (r.startsWith("SUCCESS")) {
+                let port = Number(r.substr(9));
+
+                window.term[number] = new Terminal({
+                    role: "client",
+                    parentId: "terminal"+number,
+                    port
+                });
+
+                window.term[number].onclose = e => {
+                    document.getElementById("shell_tab"+number).innerText = "EMPTY";
+                    document.getElementById("terminal"+number).innerHTML = "";
+                    delete window.term[number];
+                    window.focusShellTab(0);
+                };
+
+                document.getElementById("shell_tab"+number).innerText = "::"+port;
+                setTimeout(() => {
+                    window.focusShellTab(number);
+                }, 500);
+            }
+        });
+    }
+};
+
+// Global keyboard shortcuts
+const globalShortcut = electron.remote.globalShortcut;
+globalShortcut.register("CommandOrControl+Tab", () => {
+    if (window.currentTerm <= 3) {
+        window.focusShellTab(window.currentTerm+1);
+    } else {
+        window.focusShellTab(0);
+    }
+});
+
+
 // Prevent showing menu, exiting fullscreen or app with keyboard shortcuts
 window.onkeydown = e => {
     if (e.key === "Alt") {
@@ -362,3 +445,8 @@ window.onkeydown = e => {
 
 // Fix double-tap zoom on touchscreens
 require('electron').webFrame.setVisualZoomLevelLimits(1, 1);
+
+// Resize terminal with window
+window.onresize = () => {
+    window.term[window.currentTerm].fit();
+}
diff --git a/src/assets/css/main_shell.css b/src/assets/css/main_shell.css
@@ -4,11 +4,14 @@ section#main_shell {
     padding: 0.74vh;
     border: 0.18vh solid rgba(var(--color_r), var(--color_g), var(--color_b), 0.5);
     border-radius: 0.278vh;
-    transition: width .5s cubic-bezier(0.4, 0, 1, 1), height .5s cubic-bezier(0.4, 0, 1, 1);
-}
 
-section#main_shell.greeting {
     display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    overflow: hidden;
+
+    transition: width .5s cubic-bezier(0.4, 0, 1, 1), height .5s cubic-bezier(0.4, 0, 1, 1);
 }
 
 h1#main_shell_greeting {
@@ -35,13 +38,65 @@ section#main_shell > h3.title > p {
     width: 49.8%;
 }
 
-section#main_shell pre {
+ul#main_shell_tabs {
+    margin: 0;
+    margin-top: -0.70vh;
+    margin-left: -0.74vh;
+    padding: 0;
+    width: calc(100% + 1.48vh);
+    display: flex;
+    box-sizing: border-box;
+    border-bottom: 0.18vh solid rgba(var(--color_r), var(--color_g), var(--color_b), 0.5);
+    border-top-left-radius: 0.278vh;
+    border-top-right-radius: 0.278vh;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-evenly;
+    flex-wrap: nowrap;
+    overflow: hidden;
+}
+
+ul#main_shell_tabs > li {
+    cursor: pointer;
+    display: block;
+    font-family: var(--font_main);
+    font-weight: normal;
+    width: 100%;
+    padding-top: 0.7vh;
+    padding-bottom: 0.4vh;
+    text-align: center;
+    box-sizing: border-box;
+
+    background: var(--color_light_black);
+}
+ul#main_shell_tabs > li:not(:first-child) {
+    border-left: 0.18vh solid rgba(var(--color_r), var(--color_g), var(--color_b), 0.5);
+}
+
+ul#main_shell_tabs > li.active {
+    background: rgb(var(--color_r), var(--color_g), var(--color_b));
+    color: var(--color_light_black);
+    font-weight: bold;
+}
+
+div#main_shell_innercontainer, div#main_shell_innercontainer pre {
     height: 100%;
     width: 100%;
     margin: 0vh;
     overflow: hidden;
 }
 
+div#main_shell_innercontainer pre {
+    z-index: -999;
+    opacity: 0;
+    position: absolute;
+}
+
+div#main_shell_innercontainer pre.active {
+    z-index: inherit;
+    opacity: 1;
+}
+
 .terminal .xterm-viewport {
     overflow: hidden;
     cursor: default;
diff --git a/src/classes/filesystem.class.js b/src/classes/filesystem.class.js
@@ -55,8 +55,11 @@ class FilesystemDisplay {
             <h2 id="fs_disp_error">CANNOT ACCESS CURRENT WORKING DIRECTORY</h2>`;
         };
 
-        window.term.oncwdchange = (cwd) => {
+        window.term[window.currentTerm].oncwdchange = (cwd) => {
             if (cwd) {
+                if (this._fsWatcher) {
+                    this._fsWatcher.close();
+                }
                 if (cwd.startsWith("FALLBACK |-- ")) {
                     this.readFS(cwd.slice(13));
                     this._noTracking = true;
@@ -210,9 +213,9 @@ class FilesystemDisplay {
                     hidden = " hidden";
                 }
 
-                let cmd = `window.term.write('\\'${e.name}'\\')`;
+                let cmd = `window.term[window.currentTerm].write('\\'${e.name}'\\')`;
                 if (e.type === "dir" || e.type === "up" || e.type.endsWith("Dir")) {
-                    cmd = `window.term.writelr('cd \\'${e.name.replace("\\", "\\\\")}\\'')`;
+                    cmd = `window.term[window.currentTerm].writelr('cd \\'${e.name.replace("\\", "\\\\")}\\'')`;
                 }
 
                 if (e.type === "up" && this._noTracking) {
@@ -229,7 +232,7 @@ class FilesystemDisplay {
                     cmd = `window.remakeKeyboard('${e.name.slice(0, -5)}')`;
                 }
                 if (e.type === "edex-settings" && process.env.editor) {
-                    cmd = `window.term.writelr('${process.env.editor} \\'${e.name.slice(0, -5)}\\'')`;
+                    cmd = `window.term[window.currentTerm].writelr('${process.env.editor} \\'${e.name.slice(0, -5)}\\'')`;
                 }
 
                 let icon = "";
diff --git a/src/classes/keyboard.class.js b/src/classes/keyboard.class.js
@@ -195,13 +195,13 @@ class Keyboard {
                         break;
                 }
             } else if (cmd === "\n") {
-                term.writelr("");
-            } else if (cmd === ctrlseq[19] && window.term.term.hasSelection()) {
-                window.term.clipboard.copy();
-            } else if (cmd === ctrlseq[20] && window.term.clipboard.didCopy) {
-                window.term.clipboard.paste();
+                window.term[window.currentTerm].writelr("");
+            } else if (cmd === ctrlseq[19] && window.term[window.currentTerm].term.hasSelection()) {
+                window.term[window.currentTerm].clipboard.copy();
+            } else if (cmd === ctrlseq[20] && window.term[window.currentTerm].clipboard.didCopy) {
+                window.term[window.currentTerm].clipboard.paste();
             } else {
-                term.write(cmd);
+                window.term[window.currentTerm].write(cmd);
             }
         };
 
@@ -226,7 +226,7 @@ class Keyboard {
                         });
 
                         // Keep focus on the terminal
-                        term.term.focus();
+                        window.term[window.currentTerm].term.focus();
                         e.preventDefault();
                     };
                     key.onmouseup = () => {
@@ -265,7 +265,7 @@ class Keyboard {
                         pressKey(key);
 
                         // Keep focus on the terminal
-                        term.term.focus();
+                        window.term[window.currentTerm].term.focus();
                         e.preventDefault();
                     };
                     key.onmouseup = (e) => {
@@ -291,7 +291,7 @@ class Keyboard {
                         }, 100);
                     };
                 }
-                
+
                 // See #229
                 key.onmouseleave = () => {
                     clearTimeout(key.holdTimeout);
diff --git a/src/classes/terminal.class.js b/src/classes/terminal.class.js
