Add URL copy/paster to left sidebar

app/renderer/css/main.css

@@ -267,6 +267,10 @@ body {
     margin-bottom: 5px;
 }
 
+.invalid-input-value:focus {
+    border: #ef5350 2px solid;
+}
+
 
 /*******************
   *   Webview Area  *
@@ -331,6 +335,7 @@ webview.focus {
 #dnd-tooltip,
 #back-tooltip,
 #reload-tooltip,
+#url-tooltip,
 #setting-tooltip {
     font-family: sans-serif;
     background: #222c31;
@@ -349,6 +354,7 @@ webview.focus {
 #dnd-tooltip:after,
 #back-tooltip:after,
 #reload-tooltip:after,
+#url-tooltip:after,
 #setting-tooltip:after {
     content: " ";
     border-top: 8px solid transparent;
@@ -415,6 +421,23 @@ webview.focus {
     display: none !important;
 }
 
+.url-container {
+    position: absolute;
+    margin-left: 53px;
+    margin-top: 5px;
+}
+
+.url-input-value {
+    flex-grow: 1;
+    margin-left: 2px;
+    font-size: 14px;
+    border-radius: 4px;
+    padding: 6px 8px;
+    border: #ededed 2px solid;
+    background: #fff;
+    max-width: 450px;
+}
+
 
 /* Full screen Popup container  */
 

app/renderer/js/main.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const { ipcRenderer, remote } = require('electron');
+const { ipcRenderer, remote, clipboard } = require('electron');
 const isDev = require('electron-is-dev');
 
 const { session, app, Menu, dialog } = remote;
@@ -31,18 +31,23 @@ class ServerManagerView {
 
 		const $actionsContainer = document.getElementById('actions-container');
 		this.$reloadButton = $actionsContainer.querySelector('#reload-action');
+		this.$urlButton = $actionsContainer.querySelector('#url-action');
 		this.$settingsButton = $actionsContainer.querySelector('#settings-action');
 		this.$webviewsContainer = document.getElementById('webviews-container');
 		this.$backButton = $actionsContainer.querySelector('#back-action');
 		this.$dndButton = $actionsContainer.querySelector('#dnd-action');
 
 		this.$addServerTooltip = document.getElementById('add-server-tooltip');
 		this.$reloadTooltip = $actionsContainer.querySelector('#reload-tooltip');
+		this.$urlTooltip = $actionsContainer.querySelector('#url-tooltip');
 		this.$settingsTooltip = $actionsContainer.querySelector('#setting-tooltip');
 		this.$serverIconTooltip = document.getElementsByClassName('server-tooltip');
 		this.$backTooltip = $actionsContainer.querySelector('#back-tooltip');
 		this.$dndTooltip = $actionsContainer.querySelector('#dnd-tooltip');
 
+		this.$urlField = document.getElementById('url-input-container').children[0];
+		this.urlEnabled = false;
+
 		this.$sidebar = document.getElementById('sidebar');
 
 		this.$fullscreenPopup = document.getElementById('fullscreen-popup');
@@ -228,6 +233,9 @@ class ServerManagerView {
 		this.$addServerButton.addEventListener('click', () => {
 			this.openSettings('AddServer');
 		});
+		this.$urlButton.addEventListener('click', () => {
+			this.toggleUrlContainer();
+		});
 		this.$settingsButton.addEventListener('click', () => {
 			this.openSettings('General');
 		});
@@ -236,12 +244,55 @@ class ServerManagerView {
 		});
 
 		this.sidebarHoverEvent(this.$addServerButton, this.$addServerTooltip, true);
+		this.sidebarHoverEvent(this.$urlButton, this.$urlTooltip);
 		this.sidebarHoverEvent(this.$settingsButton, this.$settingsTooltip);
 		this.sidebarHoverEvent(this.$reloadButton, this.$reloadTooltip);
 		this.sidebarHoverEvent(this.$backButton, this.$backTooltip);
 		this.sidebarHoverEvent(this.$dndButton, this.$dndTooltip);
 	}
 
+	isURLSaved(url) {
+		for (let i = 0; i < this.tabs.length; ++i) {
+			const tabURL = this.tabs[i].webview.props.url;
+			if (url === tabURL) {
+				return i;
+			}
+		}
+		return -1;
+	}
+
+	initURLShortcut() {
+		this.$urlField.addEventListener('keypress', event => {
+			if (event.keyCode === 13) {
+				const url = this.$urlField.value;
+				const urlIndex = this.isURLSaved(url);
+				if (urlIndex >= 0) {
+					this.activateTab(urlIndex);
+				} else {
+					this.$urlField.classList.add('invalid-input-value');
+				}
+			}
+		});
+
+		this.$urlField.addEventListener('input', () => {
+			this.$urlField.classList.remove('invalid-input-value');
+		});
+	}
+
+	toggleUrlContainer() {
+		if (this.urlEnabled) {
+			this.$urlField.type = 'hidden';
+		} else {
+			this.initURLShortcut();
+			this.$urlField.value = this.tabs[this.activeTabIndex].webview.props.url;
+			const { height } = this.$urlButton.getBoundingClientRect();
+			this.$urlField.style.height = (height / 2) + 'px';
+			this.$urlField.type = 'url';
+			clipboard.writeText(this.$urlField.value);
+		}
+		this.urlEnabled = !this.urlEnabled;
+	}
+
 	initDNDButton() {
 		const dnd = ConfigUtil.getConfigItem('dnd', false);
 		this.toggleDNDButton(dnd);
@@ -423,7 +474,9 @@ class ServerManagerView {
 				this.tabs[this.activeTabIndex].deactivate();
 			}
 		}
-
+		if (this.urlEnabled) {
+			this.toggleUrlContainer();
+		}
 		try {
 			this.tabs[index].webview.canGoBackButton();
 		} catch (err) {

app/renderer/main.html

@@ -24,6 +24,10 @@
       </div>
     </div>
     <div id="actions-container">
+      <div class="action-button" id="url-action">
+        <i class="material-icons md-48">link</i>
+        <span id="url-tooltip" style="display:none">Link</span>
+      </div>
       <div class="action-button" id="dnd-action">
         <i class="material-icons md-48">notifications</i>
         <span id="dnd-tooltip" style="display:none">Do Not Disturb</span>
@@ -40,6 +44,9 @@
         <i class="material-icons md-48">settings</i>
         <span id="setting-tooltip" style="display:none">Settings</span>
       </div>
+      <div class="url-container" id="url-input-container">
+        <input type="hidden" class="url-input-value" autofocus="autofocus" onfocus="this.select()" />
+      </div>
     </div>
   </div>
   <div id="main-container">