debug UI

extension/src/js/background.js

@@ -1,11 +1,15 @@
 import { CONFIG } from "./config";
 const FETCH_ENDPOINT = CONFIG.serverEndpoint + "/fresh_tweets";
 
-async function refresh_tweet_pool(username, install_code) {
+async function refresh_tweet_pool(username, install_code, ideo) {
   console.log("Refreshing tweet pool..");
   const response = await fetch(FETCH_ENDPOINT, {
     method: "POST",
-    body: JSON.stringify({ username: username, password: install_code }),
+    body: JSON.stringify({
+      username: username,
+      password: install_code,
+      ideo: ideo,
+    }),
     headers: {
       "Content-Type": "application/json",
     },
@@ -28,6 +32,10 @@ async function refresh_tweet_pool(username, install_code) {
 chrome.runtime.onMessage.addListener((message) => {
   console.log("Received message", message);
   if (message.message == "fetch") {
-    refresh_tweet_pool(message.username, message.install_code).then(() => {});
+    refresh_tweet_pool(
+      message.username,
+      message.install_code,
+      message.ideo
+    ).then(() => {});
   }
 });

extension/src/js/content.js

@@ -45,7 +45,7 @@ chrome.storage.sync.get(
 const setupFeedObserver = function (exp_config, logger) {
   // The timeline is loaded with async JS
   // So, we want to trigger filtering logic whenever its modified
-  console.log(`Timeline Extension Loaded, ${exp_config}`);
+  console.log(`Timeline Extension Loaded, ${JSON.stringify(exp_config)}`);
   const container = document.documentElement || document.body;
   let observer;
   if (window.location.hostname.includes("twitter")) {

extension/src/js/fetch_tweets.js

@@ -1,12 +1,30 @@
 const fresh_tweets = [];
 let waiting = false;
+let timer = 0;
 
 chrome.runtime.onMessage.addListener((message) => {
   console.log("received message", message);
   if (message.message.name == "fresh_tweets") {
     fresh_tweets.push(...message.message.tweets);
     console.log("Got a new batch", fresh_tweets.length);
-    waiting = false;
+    if (fresh_tweets == null || fresh_tweets.length == 0) {
+      // Something is wrong with the server, no content is being served
+      // Start an exponential decay countdown to avoid overloading server with
+      // requests
+      console.log(
+        "Didn't get any responses - setting a timer for ",
+        Math.exp(timer) * 1000
+      );
+      setTimeout(() => {
+        console.log("Timer expired");
+        timer += 1;
+        waiting = false;
+      }, Math.exp(timer) * 1000);
+    } else {
+      console.log("Got a healthy batch - timer reset ");
+      timer = 0;
+      waiting = false;
+    }
   }
 });
 

extension/src/js/log.js

@@ -20,6 +20,7 @@ export const getLogger = function (workerID, installCode, treatment_group) {
     const response_json = await response.json();
     const status = response_json.status == 200;
     if (status) {
+      console.log("uploaded log");
       LOG.length = 0;
     }
   };

extension/src/js/popup.js

@@ -34,9 +34,10 @@ window.onload = function () {
       )
     );
 
-    document.getElementById("inject-rate").value = exp_config.inject_rate;
-    document.getElementById("inject-rate").addEventListener("change", (ev) => {
-      chrome.storage.sync.set({ inject_rate: ev.value });
+    const inject_slider = document.getElementById("inject-rate");
+    inject_slider.value = exp_config.inject_rate;
+    inject_slider.addEventListener("change", (ev) => {
+      chrome.storage.sync.set({ inject_rate: parseFloat(inject_slider.value) });
     });
   };
 

extension/src/js/twitter.js

@@ -36,10 +36,14 @@ const filterTweets = function (tweets, exp_config) {
     }
 
     // Value 0 is control group
-    if (treatment_group == 1 || treatment_group == 2) {
+    if (treatment_group == 1 || treatment_group == 3) {
       // Account-only blacklist
       if (labels.has(AUTHOR)) {
-        tweet.nodes.node.innerHTML = "";
+        if (exp_config.debug_mode) {
+          tweet.nodes.node.style.opacity = 0.1;
+        } else {
+          tweet.nodes.node.innerHTML = "";
+        }
         tweet.nodes.node.setAttribute("isHidden", true);
         tweet.data.isHidden = true;
       }
@@ -363,6 +367,9 @@ let injectTweets = function (tweets, exp_config) {
       if (new_tweet) {
         transformTweet(tweets[i], new_tweet);
         tweets[i].data.injectedTweet = new_tweet;
+        if (exp_config.debug_mode) {
+          tweets[i].nodes.node.style.backgroundColor = "seashell";
+        }
       }
     } else {
       seen_tweet_ids.add(tweets[i].data.id);
@@ -398,7 +405,6 @@ const monitorTweets = function (tweets, logger) {
             // isIntersecting is true when element and viewport are overlapping
             // isIntersecting is false when element and viewport don't overlap
             if (entries[0].isIntersecting === true) {
-              console.log("Logging view of ", tweet);
               logger.logEvent(tweet.data, "view");
             }
           },

extension/src/popup.html

@@ -38,6 +38,7 @@ <h1>Timeline Survey Study</h1>
 
             <input type="checkbox" id="debug-mode"></input>
             <label for="debug">Highlight changes in timeline</label>
+            <br />
 
             <input type="radio" id="ideo-none" name='ideo' value="0"></input>
             <label for="ideo-none">Fetch Ideology From Server (Default)</label>
@@ -46,7 +47,11 @@ <h1>Timeline Survey Study</h1>
             <input type="radio" id="ideo-con" name='ideo' value="1"></input>
             <label for="ideo-con">Mock Conservative Ideology</label>
 
-            <input type="range" id="inject-rate" min="0.1" max="1.0" step="0.1"></input>
+            <br />
+            <input type="range" id="inject-rate" min="0.1" max="1.0" step="0.1">
+            </input>
+            <label for="inject-rate">Injection Rate</label>
+            <br />
 
             <input type="radio" id="treat-control" name="treat" value="0"></input>
             <label for="treat-control">Control</label>