Enhancements

_locales/en/messages.json

@@ -160,6 +160,11 @@
   "no": {
     "message": "No",
     "description": ""
+  },
+
+  "clearCache": {
+    "message": "Clear browser cache and/or try hard-refresh",
+    "description": "Tells the user to clear browser cache or to try hard-refresh when TLS version in unknown"
   }
 
 }

background.js

@@ -1,64 +1,76 @@
 var versionIconMap = new Map();
-versionIconMap.set('TLSv1.3', 'icons/tlsv13.png'); 
-versionIconMap.set('TLSv1.2', 'icons/tlsv12.png'); 
-versionIconMap.set('TLSv1.1', 'icons/tlsv11.png'); 
-versionIconMap.set('TLSv1', 'icons/tlsv10.png'); 
+versionIconMap.set('TLSv1.3', 'icons/tlsv13.png');
+versionIconMap.set('TLSv1.2', 'icons/tlsv12.png');
+versionIconMap.set('TLSv1.1', 'icons/tlsv11.png');
+versionIconMap.set('TLSv1', 'icons/tlsv10.png');
 versionIconMap.set('unknown', 'icons/tlsunknown.png');
 
 var versionIconWarningMap = new Map();
-versionIconWarningMap.set('TLSv1.3', 'icons/tlsv13_warning.png'); 
-versionIconWarningMap.set('TLSv1.2', 'icons/tlsv12_warning.png'); 
-versionIconWarningMap.set('TLSv1.1', 'icons/tlsv11_warning.png'); 
-versionIconWarningMap.set('TLSv1', 'icons/tlsv10_warning.png'); 
+versionIconWarningMap.set('TLSv1.3', 'icons/tlsv13_warning.png');
+versionIconWarningMap.set('TLSv1.2', 'icons/tlsv12_warning.png');
+versionIconWarningMap.set('TLSv1.1', 'icons/tlsv11_warning.png');
+versionIconWarningMap.set('TLSv1', 'icons/tlsv10_warning.png');
 
 var versionComparisonMap = new Map();
-versionComparisonMap.set('TLSv1.3', 13); 
-versionComparisonMap.set('TLSv1.2', 12); 
-versionComparisonMap.set('TLSv1.1', 11); 
-versionComparisonMap.set('TLSv1', 10); 
+versionComparisonMap.set('TLSv1.3', 13);
+versionComparisonMap.set('TLSv1.2', 12);
+versionComparisonMap.set('TLSv1.1', 11);
+versionComparisonMap.set('TLSv1', 10);
 versionComparisonMap.set('unknown', 0);
 
 var tabMainProtocolMap = new Map();
 var tabMainDowngradedMap = new Map();
 var tabSubresourceProtocolMap = new Map();
 
+var translationElementMap = new Map();
+translationElementMap.set("popupTitleResources", "popup-button-resources-text");
+
 async function detectTheme() {
     var themeInfo = await browser.theme.getCurrent();
     if (themeInfo.colors && themeInfo.colors.icons === "rgb(249, 249, 250, 0.7)") {
         versionIconMap.set('TLSv1.3', 'icons/tlsv13_dark.png');
-        versionIconWarningMap.set('TLSv1.3', 'icons/tlsv13_dark_warning.png'); 
+        versionIconWarningMap.set('TLSv1.3', 'icons/tlsv13_dark_warning.png');
     } else {
         versionIconMap.set('TLSv1.3', 'icons/tlsv13.png');
-        versionIconWarningMap.set('TLSv1.3', 'icons/tlsv13_warning.png'); 
+        versionIconWarningMap.set('TLSv1.3', 'icons/tlsv13_warning.png');
     }
 }
 
 detectTheme();
 
 
 async function updateIcon(tabId, protocolVersion, warning) {
-    if (warning) {
-        browser.pageAction.setIcon({
-            tabId: tabId, path: versionIconWarningMap.get(protocolVersion)
-        });
+    if (!protocolVersion) {
+        if (tabId >= 0) {
+            browser.pageAction.setTitle({ tabId: tabId, title: browser.i18n.getMessage('clearCache') });
+        }
     } else {
-        browser.pageAction.setIcon({
-            tabId: tabId, path: versionIconMap.get(protocolVersion)
-        }); 
+        if (warning) {
+            browser.pageAction.setIcon({
+                tabId: tabId, path: versionIconWarningMap.get(protocolVersion)
+            });
+        } else {
+            browser.pageAction.setIcon({
+                tabId: tabId, path: versionIconMap.get(protocolVersion)
+            });
+        }
+        browser.pageAction.setTitle({ tabId: tabId, title: protocolVersion});
+        browser.pageAction.setPopup({tabId: tabId, popup: "/popup/popup.html"});
     }
-    browser.pageAction.setTitle({tabId: tabId, title: protocolVersion});
-    browser.pageAction.setPopup({tabId: tabId, popup: "/popup/popup.html"});
 }
 
 async function loadSavedSecurityInfoAndUpdateIcon(details) {
-    securityInfo = tabMainProtocolMap.get(details.tabId);
-    cached_version = securityInfo !== "undefined" ? securityInfo.protocolVersion : undefined;
+    const securityInfo = tabMainProtocolMap.get(details.tabId);
+    cached_version = securityInfo ? securityInfo.protocolVersion : undefined;
+
     if (typeof cached_version !== "undefined" && cached_version !== "unknown") {
         if (tabMainDowngradedMap.has(details.tabId)) {
             await updateIcon(details.tabId, cached_version, tabMainDowngradedMap.get(details.tabId));
         } else {
             await updateIcon(details.tabId, cached_version, false);
         }
+    } else {
+        await updateIcon(details.tabId, undefined, false);
     }
 }
 

popup/popup-primary.js

@@ -21,7 +21,7 @@ function updatePopupSecurityInfo(securityInfo, hostname) {
 async function updateProtocolDetails(securityInfo, hostname) {
   const textTlsProtocolVersion = document.getElementById('popup-primary-protcol-tls-version');
   textTlsProtocolVersion.textContent = securityInfo.protocolVersion;
-  textTlsProtocolVersion.style.color = protocolColorMap.get(securityInfo.protocolVersion);
+  textTlsProtocolVersion.classList.add(protocolColorMap.get(securityInfo.protocolVersion));
   if(securityInfo.protocolVersion === 'TLSv1' || securityInfo.protocolVersion === 'SSLv3') {
     setCheckmarkIconRed('popup-primary-icon-protocol');
   } else if (securityInfo.protocolVersion === 'TLSv1.1') {

popup/popup-resources.js

@@ -17,7 +17,7 @@ function createLink(text, target) {
 
 function insertTableRow(host, securityInfo) {
     var row = table.insertRow(-1);
-    row.setAttribute('bgcolor', protocolColorMap.get(securityInfo.protocolVersion));
+    row.classList.add('bg-' + protocolColorMap.get(securityInfo.protocolVersion));
 
     addCell(row, document.createTextNode(host), securityInfo.cipherSuite);
     addCell(row, document.createTextNode(securityInfo.protocolVersion), securityInfo.cipherSuite);
@@ -38,7 +38,7 @@ function clearTable() {
     const i18n_protocol = browser.i18n.getMessage("popupTitleProtocol");
     const i18n_kex = browser.i18n.getMessage("popupTitleKeyExchange");
     const i18n_signature = browser.i18n.getMessage("popupTitleSignature");
-    var header = '<tr><th>' + i18n_host + '</th><th>' + i18n_protocol + '</th><th>' + i18n_kex + '</th><th>' + i18n_signature + '</th><th>HSTS</th><th>EV</th><th>SSL Labs</th></tr>'; 
+    var header = '<tr><th>' + i18n_host + '</th><th>' + i18n_protocol + '</th><th>' + i18n_kex + '</th><th>' + i18n_signature + '</th><th>HSTS</th><th>EV</th><th>SSL Labs</th></tr>';
     table.innerHTML = header;
 
 }
@@ -65,6 +65,6 @@ async function showWarningMessage(protocolVersion) {
     const warningText = document.getElementById('warning-text');
     const warningBadge = document.getElementById('popup-button-resources-icon');
     warningText.textContent = localized_text;
-    warning.style.display = 'block'; 
-    warningBadge.style.display = 'inline'; 
+    warning.style.display = 'block';
+    warningBadge.style.display = 'inline';
 }

popup/popup.css

@@ -1,4 +1,4 @@
-html{
+html {
   --color-green: green;
   --color-red: #eb3b5a;
   --color-black: #000;
@@ -17,37 +17,34 @@ html{
   color: var(--color-orange);
 }
 body {
- background: white;
- font-size: 10px;
- padding: 6px;
+  background: white;
+  font-size: 10px;
+  padding: 6px;
 }
-
 #popup-button-resources-icon {
   display: none;
   vertical-align: middle;
   height: 12px;
   padding-left: 4px;
 }
-
 .popup-primary td {
   valign: middle;
 }
 .popup-primary img {
   vertical-align: middle;
   height: 15px;
 }
-
 .popup-primary-cipher-table {
-  margin:0;
-  padding:0;
+  margin: 0;
+  padding: 0;
 }
-
 /* Style the tab */
+
 .tab {
   overflow: hidden;
 }
-
 /* Style the buttons inside the tab */
+
 .tab button {
   background-color: #fff;
   float: left;
@@ -58,42 +55,42 @@ body {
   transition: 0.3s;
   border-bottom: 1px solid #ddd;
 }
-
 /* Change background color of buttons on hover */
+
 .tab button:hover {
   background-color: #ddd;
 }
-
 /* Create an active/current tablink class */
+
 .tab button.active {
   background-color: #fff;
   border-left: 1px solid #ddd;
   border-top: 1px solid #ddd;
   border-right: 1px solid #ddd;
   border-bottom: none;
 }
-
 /* Style the tab content */
+
 .tab-content {
   display: none;
   padding: 6px 12px;
 }
-
 .popup-primary-checkmark-column {
   vertical-align: top;
 }
-
 .selectable {
   user-select: all;
 }
-
 /* Legacy */
-.protocol-table table, th, td, tr {
+
+.protocol-table table,
+th,
+td,
+tr {
   border: 0px;
   padding: 0 10px 0 10px;
   font-size: 14px;
 }
-
 .warning {
   display: none;
   border-color: #e9a000;
@@ -102,26 +99,58 @@ body {
   font-size: 14px;
   font-weight: bold;
 }
-
 .warning-triangle {
-  float:left;
+  float: left;
   height: 75px;
   width: 75px;
   padding: 5px 10px 10px 10px;
 }
-
 .warning-text {
   padding: 15px 10px 10px 10px;
 }
-
 .warning-triangle img {
   max-width: 100%;
   max-height: 100%;
 }
+/* TLS Classes */
 
+.tls-1-3 {
+  color: #26de81;
+}
+.tls-1-2 {
+  color: #fbc02d;
+}
+.tls-1-1,
+.tls-1 {
+  color: #ff0000;
+}
+.bg-tls-1-3 {
+  background-color: #75ff98;
+}
+.bg-tls-1-2 {
+  background-color: #ffca45;
+}
+.bg-tls-1-1,
+.bg-tls-1 {
+  background-color: #ff7e7e;
+}
+#subresource-table tr td:last-child a {
+  color: #050095;
+}
+#subresource-table tr.bg-tls-1-3 td:last-child {
+  background-color: #c6ffd5;
+}
+#subresource-table tr.bg-tls-1-2 td:last-child {
+  background-color: #ffe7ae;
+}
+#subresource-table tr.bg-tls-1-1 td:last-child,
+#subresource-table tr.bg-tls-1 td:last-child {
+  background-color: #ffc8c8;
+}
 /* Dark Mode */
+
 @media (prefers-color-scheme: dark) {
-  html{
+  html {
     --color-green: #30e60b;
     --color-black: #fff;
   }
@@ -130,22 +159,32 @@ body {
     color: #e7e8e7;
   }
   a {
-    color: #1aa8f5;
+    color: #b0d0ff;
+  }
+  .tls-1-3 {
+    color: #75ff98;
+  }
+  .tls-1-2 {
+    color: #ffca45;
+  }
+  .tls-1-1,
+  .tls-1 {
+    color: #ff7e7e;
   }
   .tab button {
-    background-color: #222;
+    background-color: #353637;
     border-bottom: 1px solid #fff;
-    color: #a3a3a3;
+    color: #ddd;
   }
   .tab button:hover {
-    background-color: #000;
+    background-color: #1e1f20;
   }
   .tab button.active {
-    background-color: #000;
+    background-color: #1e1f20;
     border-color: #fff;
     color: #fff;
   }
-  #subresource-table tr:not(:first-child){
+  #subresource-table tr:not(:first-child) {
     color: #000;
   }
 }

popup/popup.js

@@ -1,8 +1,8 @@
 var protocolColorMap = new Map();
-protocolColorMap.set('TLSv1.3', '#26de81'); 
-protocolColorMap.set('TLSv1.2', '#fbc02d'); 
-protocolColorMap.set('TLSv1.1', '#ff0000'); 
-protocolColorMap.set('TLSv1', '#ff0000'); 
+protocolColorMap.set('TLSv1.3', 'tls-1-3');
+protocolColorMap.set('TLSv1.2', 'tls-1-2');
+protocolColorMap.set('TLSv1.1', 'tls-1-1');
+protocolColorMap.set('TLSv1', 'tls-1');
 
 function request(resource, key) {
     const request = browser.runtime.sendMessage({