ashpie/tabs
ashpie
/
tabs
1
0
Fork 0
Code Issues 12 Pull Requests Releases 49 Wiki Activity

Add status icon to inform user about secure/not secure connection

This commit is contained in:
Alice Gaudon 2020-05-19 07:00:14 +02:00
parent 3ee17f8dd4
commit afb1c5131e
3 changed files with 97 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
resources/index.html
View File

@ -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">

18
resources/js/index.js
View File

@ -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);

67
resources/style/index.css
View File

@ -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;
}