Proper error messages when attempting to load an old tab. Fixes april#16

.
MauAraujo · Aug 14, 2018 · 7e29595 · 7e29595
1 parent b7ca3d5
commit 7e29595
Show file tree

Hide file tree

Showing 7 changed files with 89 additions and 24 deletions.
diff --git a/config/webpack.config.js b/config/webpack.config.js
@@ -11,6 +11,7 @@ module.exports = {
   },
   entry: {
     'background': path.resolve(__dirname, '..', 'src', 'background', 'entry.js'),
+    'content_script/index': path.resolve(__dirname, '..', 'src', 'content_script', 'entry.js'),
     'viewer/index': path.resolve(__dirname, '..', 'src', 'viewer', 'js', 'index.js'),
   },
   mode: production ? 'production' : 'development',
@@ -63,11 +64,17 @@ module.exports = {
         flatten: true
       },
       {
-        from: 'src/viewer/index.html',
-        to: 'viewer/index.html'
+        from: 'src/viewer/*.html',
+        to: 'viewer/',
+        flatten: true
       },
       {
         // todo: eventually switch to sass + loaders, but this is easier for now
+        from: 'src/content_script/*.css',
+        to: 'content_script/index.css',
+        flatten: true
+      },
+      {
         from: 'src/viewer/css/*.css',
         to: 'viewer/css/',
         flatten: true

diff --git a/src/background/handlers.js b/src/background/handlers.js
@@ -32,6 +32,15 @@ browser.runtime.onInstalled.addListener(async () => {
       } catch (e) {
         // pass
       }
+    } else {
+      // inject notification script to say you need to refresh
+      browser.tabs.insertCSS(tab.id, {
+        file: '/content_script/index.css',
+      });
+
+      browser.tabs.executeScript(tab.id, {
+        file: '/content_script/index.js',
+      });
     }
   });
 });
@@ -47,12 +56,19 @@ browser.webNavigation.onCompleted.addListener(
 // open the certificate viewer
 browser.pageAction.onClicked.addListener(
   details => {
-    // open the cert viewer page in the next tab over
-    browser.tabs.create({
-      index: details.index + 1,
-      url: `/viewer/index.html?tid=${String(details.id)}`,
-      windowId: details.windowId,
-    });
+    // open the cert viewer page in the next tab over, if we have the existing state
+    if (state.get(details.id) !== undefined) {
+      browser.tabs.create({
+        index: details.index + 1,
+        url: `/viewer/index.html?tid=${String(details.id)}`,
+        windowId: details.windowId,
+      });
+    } else {
+      // open popup to have people refresh the page
+      browser.tabs.sendMessage(details.id, {
+        action: 'notify',
+      });
+    }
   }
 );
 
@@ -76,11 +92,6 @@ chrome.runtime.onMessage.addListener(
 
       sendResponse(si);
     }
-
-    // this is a bit hackish for now, I could probably have a real error page
-    if (request.action === 'closeTab' && sender.envType === 'addon_child') {
-      browser.tabs.remove(sender.tab.id);
-    }
   }
 );
 
diff --git a/src/content_script/entry.js b/src/content_script/entry.js
@@ -0,0 +1 @@
+import './notification';
diff --git a/src/content_script/notification.css b/src/content_script/notification.css
@@ -0,0 +1,26 @@
+#certainly-something-notification {
+  /* slide in and out animation */
+  animation: slideDown 4s .5s 1 ease forwards;
+  transform: translateY(-50px);
+
+  background: #97d4fc;
+  box-shadow: 0 0 5px black;
+  font-size: 16px;
+  left: 0;
+  line-height: 2.5;
+  position: absolute;
+  right: 0;
+  text-align: center;
+  top: 0;
+  z-index: 5678;
+}
+
+@keyframes slideDown {
+  0%, 100% { 
+    transform: translateY(-50px);
+  }
+
+  10%, 90% {
+    transform: translateY(0px);
+  }
+}
diff --git a/src/content_script/notification.js b/src/content_script/notification.js
@@ -0,0 +1,16 @@
+const showNotification = async () => {
+  const notification = document.createElement('div');
+  notification.id = 'certainly-something-notification';
+  notification.textContent = 'Please refresh the page and try again.';
+
+  document.body.appendChild(notification);
+};
+
+// show the notification if the backend code doesn't have the TLS information
+browser.runtime.onMessage.addListener(async request => {
+  if (request.action === 'notify') {
+    await showNotification();
+  }
+
+  return(true);
+});
diff --git a/src/viewer/error.html b/src/viewer/error.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="css/chrome-extension.css">
+    <link rel="stylesheet" href="css/index.css">
+    <title></title>
+  </head>
+  <body class="browser-style">
+    Error loading certificate information. Please close this page, refresh your tab, and try again. Sorry!
+  </body>
+</html>
diff --git a/src/viewer/js/render.js b/src/viewer/js/render.js
@@ -68,15 +68,6 @@ const render = (securityInfo) => {
   postRender();
 }
 
-// closes the current tab of the viewer - can't use window.close()
-const closeTab = () => {
-  chrome.runtime.sendMessage(
-    {
-      'action': 'closeTab',
-    }
-  );
-};
-
 
 const handleDOMContentLoaded = () => {
   // get the tab id
@@ -89,9 +80,9 @@ const handleDOMContentLoaded = () => {
     },
     async response => {
       // close the tab if we don't get a response back
-      // this mostly happens because you can't disable the icon on moz-extension pages
+      // this shouldn't happen anymore, but lets redirect to an error page
       if (response === undefined) {
-        closeTab();
+        window.location.href = 'error.html';
         return;
       }