From afb1c5131e212f6481c3295e14a05cc085e68825 Mon Sep 17 00:00:00 2001
From: Alice Gaudon <alice@gaudon.pro>
Date: Tue, 19 May 2020 07:00:14 +0200
Subject: [PATCH] Add status icon to inform user about secure/not secure
 connection

---
 resources/index.html      | 17 ++++++++--
 resources/js/index.js     | 18 ++++++++++-
 resources/style/index.css | 67 ++++++++++++++++++++++++++++++++++++++-
 3 files changed, 97 insertions(+), 5 deletions(-)
diff --git a/resources/index.html b/resources/index.html
index e297f01..067ab61 100644
--- a/resources/index.html
+++ b/resources/index.html
@@ -18,10 +18,21 @@
 <body>
 <div id="navigation">
     <div id="history">
-        <button id="home"><i class="fas fa-home"></i></button>
-        <button id="back"><i class="fas fa-arrow-left"></i></button>
+        <button id="status">
+            <i class="fas fa-question unknown active">
+                <span class="tip">Unknown protocol</span>
+            </i>
+            <i class="fas fa-lock https">
+                <span class="tip">Secured via TLS (https)</span>
+            </i>
+            <i class="fas fa-lock-open http">
+                <span class="tip">Vulnerable connection (http)</span>
+            </i>
+        </button>
+        <button id="home" class="disabled"><i class="fas fa-home"></i></button>
+        <button id="back" class="disabled"><i class="fas fa-arrow-left"></i></button>
         <button id="forward" class="disabled"><i class="fas fa-arrow-right"></i></button>
-        <button id="reload"><i class="fas fa-redo"></i></button>
+        <button id="reload" class="disabled"><i class="fas fa-redo"></i></button>
     </div>
 
     <div id="service-buttons">
diff --git a/resources/js/index.js b/resources/js/index.js
index c60f5d7..c0beaeb 100644
--- a/resources/js/index.js
+++ b/resources/js/index.js
@@ -16,7 +16,7 @@ const icons = [];
 
 let services = [];
 let selectedService = null;
-let homeButton, forwardButton, backButton, reloadButton;
+let statusButton, homeButton, forwardButton, backButton, reloadButton;
 let addButton;
 let emptyPage;
 let urlPreview;
@@ -364,6 +364,8 @@ function reorderService(serviceId, targetId) {
 }
 
 document.addEventListener('DOMContentLoaded', () => {
+    statusButton = document.getElementById('status');
+
     homeButton = document.getElementById('home');
     homeButton.addEventListener('click', () => goHome());
 
@@ -594,16 +596,30 @@ function updateNavigation() {
         // Update history navigation
         let view = services[selectedService].view;
 
+        homeButton.classList.remove('disabled');
+
         if (view && view.canGoForward()) forwardButton.classList.remove('disabled');
         else forwardButton.classList.add('disabled');
 
         if (view && view.canGoBack()) backButton.classList.remove('disabled');
         else backButton.classList.add('disabled');
+
+        reloadButton.classList.remove('disabled');
+
+        updateStatusButton();
     }
 
     updateWindowTitle();
 }
 
+function updateStatusButton() {
+    for (const c of statusButton.children) {
+        const protocol = services[selectedService].view.getURL().split('://')[0];
+        if (c.classList.contains(protocol)) c.classList.add('active');
+        else c.classList.remove('active');
+    }
+}
+
 function updateWindowTitle() {
     if (selectedService === null) {
         ipcRenderer.send('updateWindowTitle', null);
diff --git a/resources/style/index.css b/resources/style/index.css
index 9e49385..41349b3 100644
--- a/resources/style/index.css
+++ b/resources/style/index.css
@@ -143,10 +143,14 @@ body {
 }
 
 #history {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     padding: 2px;
 }
 
-#history button {
+#history button,
+#history .status {
     display: inline;
     width: 24px;
     height: 24px;
@@ -158,6 +162,8 @@ body {
 
     color: #fff;
     cursor: pointer;
+
+    border-radius: 3px;
 }
 
 #history button i {
@@ -186,6 +192,65 @@ body {
     background-color: #fff4;
 }
 
+#history #status {
+    background: transparent;
+}
+
+#history #status .unknown {
+    opacity: 0.4;
+}
+
+#history #status .https {
+    color: #009800;
+}
+
+#history #status .http {
+    color: #e20000;
+}
+
+#history #status > :not(.active) {
+    display: none;
+}
+
+#history #status > * .tip {
+    position: absolute;
+    z-index: 1;
+    left: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    display: none;
+    margin-left: 8px;
+
+    background-color: #000;
+    padding: 8px;
+    border-radius: 4px;
+    white-space: nowrap;
+    color: #fff;
+    text-transform: none;
+    font-family: sans-serif;
+    font-size: 16px;
+    font-weight: 100;
+}
+
+#history #status > * .tip::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translate(-100%, -50%);
+    display: inline-block;
+    width: 0;
+    height: 0;
+    border: 0 solid transparent;
+    border-top-width: 4px;
+    border-bottom-width: 4px;
+    border-right: 7px solid black;
+}
+
+#history #status:focus > * .tip {
+    display: block;
+}
+
 #navigation #add-button:not(:hover) {
     opacity: 0.75;
 }
