digitalmethodsinitiative · stijn-uva · Oct 10, 2024
diff --git a/js/zs-background.js b/js/zs-background.js
@@ -60,6 +60,17 @@ window.zeeschuimer = {
             let path = enabled.length > 0 ? 'images/zeeschuimer-icon-active.png' : 'images/zeeschuimer-icon-inactive.png';
             browser.browserAction.setIcon({path: path})
         }, 500);
+
+        setInterval(async function () {
+            let scroll_speed = await browser.storage.local.get(['scroll-speed'])
+            scroll_speed = scroll_speed.hasOwnProperty('scroll-speed') ? parseInt(scroll_speed['scroll-speed']) : 0;
+
+            if(!scroll_speed) {
+                return;
+            }
+
+            window.scrollBy(0, scroll_speed * 10);
+        }, 100);
     },
 
     /**
@@ -231,7 +242,7 @@ browser.webRequest.onBeforeRequest.addListener(
 browser.webNavigation.onCommitted.addListener(
     zeeschuimer.nav_handler
 );
-
+/*
 browser.browserAction.onClicked.addListener(async () => {
     let tab = await zeeschuimer.has_tab();
     if (!tab) {
@@ -240,3 +251,4 @@ browser.browserAction.onClicked.addListener(async () => {
         browser.tabs.update(tab.id, {active: true});
     }
 });
+*/
diff --git a/js/zs-scroller.js b/js/zs-scroller.js
@@ -0,0 +1,15 @@
+let interval = null;
+
+async function handleMessage(request, sender, sendResponse) {
+    clearInterval(interval);
+    if(request.speed) {
+        interval = setInterval(function () {
+            if(window.scrollY < window.scrollMaxY) {
+                window.scrollBy(0, request.speed * 5);
+            }
+        }, 5);
+    }
+}
+
+// Assign handleMessages as listener for messages from the extension.
+browser.runtime.onMessage.addListener(handleMessage);
diff --git a/manifest.json b/manifest.json
@@ -19,9 +19,21 @@
 
   "browser_action": {
     "default_icon": "images/zeeschuimer-64.png",
-    "default_title": "Zeeschuimer Status"
+    "default_title": "Zeeschuimer Status",
+    "default_popup": "popup/popup.html"
   },
 
+  "content_scripts": [
+    {
+      "matches": [
+        "<all_urls>"
+      ],
+      "js": [
+        "js/zs-scroller.js"
+      ]
+    }
+  ],
+
   "permissions": [
     "webRequest", "webRequestBlocking", "webNavigation", "<all_urls>", "storage", "downloads", "activeTab", "tabs",
     "unlimitedStorage"

diff --git a/popup/interface.html b/popup/interface.html
@@ -8,71 +8,8 @@
     <!--<script src="../js/webtorrent.min.js"></script>
     <script src="../js/ponyfill-2.0.2.js"></script>
     <script src="../js/streamsaver-2.0.3.js"></script>-->
+    <link rel="stylesheet" href="style.css">
     <style>
-        :root {
-            --neutral: #d9c398;
-            --neutral-contrast: #3C3C3B;
-            --neutral-contrast-alt: #5d6c4c;
-            --accent-alt: #b45d3d;
-            --accent: #e0ba5f;
-        }
-
-        *[aria-hidden=true] {
-            display: none;
-        }
-
-        *[aria-hidden=false] {
-            display: auto;
-        }
-
-        @font-face {
-            font-family: 'Open Sans';
-            src: url("../fonts/OpenSans-Regular.ttf")
-        }
-
-        @font-face {
-            font-family: 'Open Sans';
-            font-weight: bold;
-            src: url("../fonts/OpenSans-Bold.ttf")
-        }
-
-        @font-face {
-            font-family: 'Open Sans';
-            font-style: italic;
-            src: url("../fonts/OpenSans-Italic.ttf")
-        }
-
-        @font-face {
-            font-family: 'Open Sans';
-            font-weight: bold;
-            font-style: italic;
-            src: url("../fonts/OpenSans-BoldItalic.ttf")
-        }
-
-        @font-face {
-            font-family: 'Lobster Two';
-            src: url("../fonts/LobsterTwo-Regular.ttf")
-        }
-
-        @font-face {
-            font-family: 'Lobster Two';
-            font-weight: bold;
-            src: url("../fonts/LobsterTwo-Bold.ttf")
-        }
-
-        @font-face {
-            font-family: 'Lobster Two';
-            font-style: italic;
-            src: url("../fonts/LobsterTwo-Italic.ttf")
-        }
-
-        @font-face {
-            font-family: 'Lobster Two';
-            font-weight: bold;
-            font-style: italic;
-            src: url("../fonts/LobsterTwo-BoldItalic.ttf")
-        }
-
         html {
             background: #FFF;
             margin: 0;
@@ -83,12 +20,9 @@
         }
 
         body {
-            font-family: 'Open Sans', sans-serif;
-            color: var(--neutral-contrast);
             max-width: 800px;
             padding: 2em 0 0 0;
             margin: 0 auto;
-            background: var(--neutral);
             min-height: calc(100% - 2em);
             border: 0 solid var(--neutral-contrast);
             border-width: 0 2px;
@@ -353,11 +287,6 @@
             top: 3px;
             filter: grayscale(1) contrast(0.5);
             transition: .2s;
-            border-radius: 3px;
-        }
-
-        *[data-enabled='1'] .platform-icon img {
-            filter: grayscale(0) contrast(1);
         }
 
         button.loading, button.loading:hover {
@@ -451,5 +380,6 @@ <h2><span>Import from NDJSON</span></h2>
     </nav>
 </footer>
 <script type="text/javascript" src="tooltips.js"></script>
+<script type="text/javascript" src="lib.js"></script>
 <script type="text/javascript" src="interface.js"></script>
 </body>
diff --git a/popup/interface.js b/popup/interface.js
@@ -1,4 +1,3 @@
-const background = browser.extension.getBackgroundPage();
 var have_4cat = false;
 var xhr;
 var is_uploading = false;
@@ -20,40 +19,6 @@ window.isSecureContext && window.addEventListener('beforeunload', evt => {
     fileStream = undefined;
 })*/
 
-/**
- * Create DOM element
- *
- * Convenience function because we can't use innerHTML very well in an
- * extension context.
- *
- * @param tag  Tag of element
- * @param attributes  Element attributes
- * @param content  Text content of attribute
- * @param prepend_icon  Font awesome icon ID to prepend to content
- * @returns {*}
- */
-function createElement(tag, attributes={}, content=undefined, prepend_icon=undefined) {
-    let element = document.createElement(tag);
-    for(let attribute in attributes) {
-        element.setAttribute(attribute, attributes[attribute]);
-    }
-    if (content && typeof(content) === 'object' && 'tagName' in content) {
-        element.appendChild(content);
-    } else if(content !== undefined) {
-        element.textContent = content;
-    }
-
-    if(prepend_icon) {
-        const icon_element = document.createElement('i');
-        icon_element.classList.add('fa')
-        icon_element.classList.add('fa-' + prepend_icon);
-        element.textContent = ' ' + element.textContent;
-        element.prepend(icon_element);
-    }
-
-    return element;
-}
-
 /**
  * Get URL of 4CAT instance to connect to
  *
@@ -141,24 +106,6 @@ function activate_buttons() {
     });
 }
 
-/**
- * Toggle data capture for a platform
- *
- * Callback; platform depends on the button this callback is called through.
- *
- * @param e
- * @returns {Promise<void>}
- */
-async function toggle_listening(e) {
-    let platform = e.target.getAttribute('name');
-    let now = await background.browser.storage.local.get([platform]);
-    let current = !!parseInt(now[platform]);
-    let updated = current ? 0 : 1;
-    e.target.parentNode.parentNode.parentNode.parentNode.setAttribute('data-enabled', updated);
-
-    await background.browser.storage.local.set({[platform]: String(updated)});
-}
-
 
 /**
  * Update favicon depending on whether capture is enabled
@@ -189,10 +136,10 @@ async function get_stats() {
     for (let platform in response) {
         let row_id = "stats-" + platform.replace(/[^a-zA-Z0-9]/g, "");
         let new_num_items = parseInt(response[platform]);
+        let toggle_field = 'zs-enabled-' + platform;
+        let enabled = await background.browser.storage.local.get([toggle_field])
+        enabled = enabled.hasOwnProperty(toggle_field) && !!parseInt(enabled[toggle_field]);
         if(!document.querySelector("#" + row_id)) {
-            let toggle_field = 'zs-enabled-' + platform;
-            let enabled = await background.browser.storage.local.get([toggle_field])
-            enabled = enabled.hasOwnProperty(toggle_field) && !!parseInt(enabled[toggle_field]);
             let row = createElement("tr", {"id": row_id, 'data-enabled': enabled ? '1' : '0'});
 
             // checkbox stuff
@@ -224,8 +171,13 @@ async function get_stats() {
 
             row.appendChild(actions);
             document.querySelector("#item-table tbody").appendChild(row);
-        } else if(new_num_items !== parseInt(document.querySelector("#" + row_id + " .num-items").innerText)) {
-            document.querySelector("#" + row_id + " .num-items").innerText = new Intl.NumberFormat().format(new_num_items);
+        } else {
+            if (new_num_items !== parseInt(document.querySelector("#" + row_id + " .num-items").innerText)) {
+                document.querySelector("#" + row_id + " .num-items").innerText = new Intl.NumberFormat().format(new_num_items);
+            }
+            document.querySelector("#" + row_id).setAttribute('data-enabled', enabled ? '1' : '0');
+            document.querySelector("#" + row_id + " input[type=checkbox]").checked = enabled;
+
         }
     }
 

diff --git a/popup/lib.js b/popup/lib.js
@@ -0,0 +1,65 @@
+const background = browser.extension.getBackgroundPage();
+
+/**
+ * Create DOM element
+ *
+ * Convenience function because we can't use innerHTML very well in an
+ * extension context.
+ *
+ * @param tag  Tag of element
+ * @param attributes  Element attributes
+ * @param content  Text content of attribute
+ * @param prepend_icon  Font awesome icon ID to prepend to content
+ * @returns {*}
+ */
+function createElement(tag, attributes={}, content=undefined, prepend_icon=undefined) {
+    let element = document.createElement(tag);
+    for(let attribute in attributes) {
+        element.setAttribute(attribute, attributes[attribute]);
+    }
+    if (content && typeof(content) === 'object' && 'tagName' in content) {
+        element.appendChild(content);
+    } else if(content !== undefined) {
+        element.textContent = content;
+    }
+
+    if(prepend_icon) {
+        const icon_element = document.createElement('i');
+        icon_element.classList.add('fa')
+        icon_element.classList.add('fa-' + prepend_icon);
+        element.textContent = ' ' + element.textContent;
+        element.prepend(icon_element);
+    }
+
+    return element;
+}
+
+/**
+ * Toggle data capture for a platform
+ *
+ * Callback; platform depends on the button this callback is called through.
+ *
+ * @param e
+ * @returns {Promise<void>}
+ */
+async function toggle_listening(e) {
+    let platform = e.target.getAttribute('name');
+    let now = await background.browser.storage.local.get([platform]);
+    let current = !!parseInt(now[platform]);
+    let updated = current ? 0 : 1;
+    await background.browser.storage.local.set({[platform]: String(updated)});
+
+    closest_parent(e.target, '*[data-enabled]').setAttribute('data-enabled', updated);
+}
+
+
+
+function closest_parent(node, selector) {
+    while(node && node.parentNode) {
+        if(node.matches(selector)) {
+            return node;
+        }
+        node = node.parentNode;
+    }
+    return null;
+}