Preview link target url on over

resources/index.html

@@ -30,7 +30,8 @@
 
 <div id="services">
     <div class="loader"></div>
+    <div id="url-preview" class="hidden"></div>
 </div>
 </body>
 
-</html>
+</html>

resources/js/index.js

@@ -17,6 +17,7 @@ let forwardButton;
 let backButton;
 let addButton;
 let emptyPage;
+let urlPreview;
 
 
 // Service context menu
@@ -117,6 +118,16 @@ ipcRenderer.on('data', (event, appData, brandIcons, solidIcons, actualServices,
 
     // Empty
     emptyPage = emptyUrl;
+
+    // Url preview element
+    urlPreview = document.getElementById("url-preview");
+    urlPreview.addEventListener('mouseover', () => {
+        if (urlPreview.classList.contains('right')) {
+            urlPreview.classList.remove('right');
+        } else {
+            urlPreview.classList.add('right');
+        }
+    });
 });
 
 function removeServiceFeatures(id) {
@@ -382,6 +393,16 @@ function loadService(serviceId, service) {
                 }
             }
         });
+
+        // Display target urls
+        service.view.addEventListener('update-target-url', (event) => {
+            if (event.url.length === 0) {
+                urlPreview.classList.add('hidden');
+            } else {
+                urlPreview.classList.remove('hidden');
+                urlPreview.innerHTML = event.url;
+            }
+        });
     }
 }
 

resources/style/index.css

@@ -179,11 +179,11 @@ body {
     flex-grow: 1;
 }
 
-#services > *:not(.loader) {
+#services > *:not(.loader):not(#url-preview) {
     height: 100%;
 }
 
-#services > :not(.active):not(.loader) {
+#services > :not(.active):not(.loader):not(#url-preview) {
     display: none;
 }
 
@@ -197,3 +197,40 @@ body {
     transform: translate(-50%, -50%);
     z-index: -1;
 }
+
+#url-preview {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    display: block;
+    padding: 2px 5px 1px 5px;
+
+    max-width: 48%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    font-family: monospace;
+
+    border-width: 1px 1px 0 0;
+    border-color: #232323;
+    border-style: solid;
+    border-radius: 0 5px 0 0;
+
+    background: #2b2b2b;
+
+    opacity: 1;
+    transition: 100ms ease opacity;
+    transition-delay: 200ms;
+}
+
+#url-preview.right {
+    left: auto;
+    right: 0;
+
+    border-width: 1px 0 0 1px;
+    border-radius: 5px 0 0 0;
+}
+
+#url-preview.hidden {
+    opacity: 0;
+}