morehumaninternet · will-weiss · Jan 20, 2021 · shachar-langer · Jan 22, 2021 · shachar-langer
diff --git a/build.js b/build.js
@@ -30,6 +30,7 @@ const pink = chalk.hex('#fa759e')
 const green = chalk.hex('#6FCF97')
 const gold = chalk.hex('#FFCA00')
 const lightBlue = chalk.hex('#4a81bc')
+const purple = chalk.hex('#00f000')
 const normalText = blue
 const emphasis = pink.bold
 
@@ -46,6 +47,7 @@ const commands = [
     command: `npm run scss -- ${watchFlag}`
   },
   bundleCommand('popup', gold),
+  bundleCommand('not-a-webpage', gold),
   bundleCommand('background', lightBlue),
 ]
 

diff --git a/html/not-a-webpage.html b/html/not-a-webpage.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <title>Roar</title>
+    <meta charset="UTF-8">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <link href="../bundled/popup.css" rel="stylesheet">
+  </head>
+  <body>
+    <div id="app-container">
+      <div class="app">
+        <div class="alert whole-page">
+          <div className="alert-message">
+            <div>Roar does not work on this tab because it is not a web page.</div>
+            <div>Please open Roar on a web page to try again.</div>
+          </div>
+          <button id="close-btn" class="close-btn">
+            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <g id="Close Button">
+                <circle id="Ellipse 1" cx="13" cy="13" r="13" />
+                <path d="M18.6386 6.23385L19.7662 7.36141C20.0779 7.6732 20.0779 8.17797 19.7662 8.48896L8.48896 19.7662C8.17717 20.0779 7.6724 20.0779 7.36141 19.7662L6.23385 18.6386C5.92205 18.3268 5.92205 17.822 6.23385 17.511L17.511 6.23385C17.822 5.92205 18.3276 5.92205 18.6386 6.23385Z" />
+                <path d="M19.7662 18.6386L18.6386 19.7662C18.3268 20.0779 17.822 20.0779 17.511 19.7662L6.23385 8.48896C5.92205 8.17717 5.92205 7.6724 6.23385 7.36141L7.36141 6.23385C7.6732 5.92205 8.17797 5.92205 8.48896 6.23385L19.7662 17.511C20.0779 17.822 20.0779 18.3276 19.7662 18.6386Z" />
+              </g>
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  </body>
+  <script type="text/javascript" src="../bundled/not-a-webpage.js"></script>
+</html>
diff --git a/html/popup.html b/html/popup.html
@@ -8,7 +8,13 @@
   </head>
   <body>
     <div id="app-container">
-      <div class="app"></div>
+      <div class="app">
+        <div class="authenticating">
+          <div class="authenticating-spinner">
+
+          </div>
+        </div>
+      </div>
     </div>
     <script type="text/javascript" src="../bundled/popup.js"></script>
   </body>

diff --git a/scss/components/authenticating.scss b/scss/components/authenticating.scss
@@ -1,6 +1,7 @@
 .authenticating {
   background-color: var(--background-color);
 
+  min-height: 388px;
   height: 100%;
   width: 100%;
 

diff --git a/src/background/run.ts b/src/background/run.ts
@@ -13,6 +13,7 @@
 import { AppStore, create } from './store'
 import { listeners } from './listeners'
 import * as apiHandlers from './api-handlers'
+import { activeTab } from '../selectors'
 import { monitorChrome } from './monitorChrome'
 
 declare global {
@@ -30,6 +31,17 @@ export function run(backgroundWindow: Window): void {
     store.on(listener, listeners[listener]!)
   }
 
+  store.subscribe(() => {
+    const state = store.getState()
+    const feedbackTarget = activeTab(state)
+    if (feedbackTarget) {
+      if (feedbackTarget.feedbackTargetType === 'tab' && !feedbackTarget.parsedUrl) {
+        return browser.browserAction.setPopup({ popup: '/html/not-a-webpage.html' })
+      }
+    }
+    return browser.browserAction.setPopup({ popup: '/html/popup.html' })
+  })
+
   // Monitor various events managed by the chrome API, dispatching relevant information to the store
   // see https://developer.chrome.com/docs/extensions/reference/
   monitorChrome()

diff --git a/src/not-a-webpage/index.ts b/src/not-a-webpage/index.ts
@@ -0,0 +1 @@
+document.getElementById('close-btn')!.addEventListener('click', () => window.close())
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		document.getElementById('close-btn')!.addEventListener('click', () => window.close())