Merge pull request opt-out-tools#75 from opt-out-tools/ribicn-softerr…

…ific-update_to_tests_and_code

Taking out selenium tests so we can merge the rest of the PR

.eslintrc.yml

@@ -4,13 +4,17 @@ env:
   webextensions: true
   jest: true
 extends:
-  - airbnb-base
+  - plugin:jest/recommended
+plugins:
+  - jest
 globals:
   Atomics: readonly
   SharedArrayBuffer: readonly
   browser: readonly
 parserOptions:
   ecmaVersion: 2018
   sourceType: module
-rules: {}
+rules: {
+  no-console: off
+}
 

extension/content/opt-out-ext.js

@@ -1,17 +1,9 @@
 let selector;
 let option = 'text_crossed';
 let slider = '1';
-
-function updateOption(result) {
-  option = result.optOut.selector;
-  slider = result.optOut.slider;
-}
-
-function onError(error) {
-  console.log(`Error: ${error}`);
-}
-browser.storage.sync.get('optOut').then(updateOption, onError);
-
+const bodyColor = window.getComputedStyle(document.body, null).getPropertyValue('background-color');
+document.documentElement.style
+  .setProperty('--color', bodyColor);
 
 const root = document.getElementById('doc') || document.getElementById('react-root');
 
@@ -22,31 +14,56 @@ if (document.querySelector('body').classList.contains('logged-out')) {
   console.log('online');
   selector = '[data-testid="tweet"]';
 }
+/**
+ * @description Updates `option` and `slider` depending on the given result
+ * @param result
+ */
+const updateOption = (result) => {
+  option = result.optOut.selector;
+  slider = result.optOut.slider;
+};
+
+/**
+ * @description Function handles errors.
+ * @param error
+ */
+const onError = (error) => {
+  console.error(`Error: ${error}`);
+};
 
-/*
-Depending on `option` sets classes to tweet nodes
+/**
+ * @description Depending on `option` sets classes to tweet nodes
  */
-const styleTweet = function (element, selectedOption, sliderValue) {
-  if ((selectedOption === 'text_white') && (sliderValue === '1')) element.classList.add('opt-out-tw');
-  else element.classList.remove('opt-out-tw');
-  if ((selectedOption === 'text_crossed') && (sliderValue === '1')) element.classList.add('opt-out-tc');
-  else element.classList.remove('opt-out-tc');
-  if ((selectedOption === 'text_removed') && (sliderValue === '1')) element.classList.add('opt-out-trem');
-  else element.classList.remove('opt-out-trem');
+const styleTweet = (element, selectedOption, sliderValue) => {
+  element.classList.remove('opt-out-tw', 'opt-out-tc', 'opt-out-trem');
+  if (sliderValue === '1') {
+    switch (selectedOption) {
+      case 'text_white':
+        element.classList.add('opt-out-tw');
+        break;
+      case 'text_crossed':
+        element.classList.add('opt-out-tc');
+        break;
+      case 'text_removed':
+        element.classList.add('opt-out-trem');
+        break;
+    }
+  }
 };
 
-/*
-function which calls server for given node, and depending on the response,
-applies pre-defined action
+/**
+ * @description function which calls server for given node, and depending on the response,
+ * applies pre-defined action
+ * @param node
  */
-const checkText = function (node) {
+const checkText = (node) => {
   console.log('Sending Request');
   const link = 'https://api.optoutools.com/predict';
   const xhr = new XMLHttpRequest();
   xhr.open('POST', link, true);
   xhr.setRequestHeader('Content-type', 'application/json;charset=UTF-8');
   xhr.withCredentials = true;
-  xhr.onreadystatechange = function (e) {
+  xhr.onreadystatechange = (e) => {
     if (xhr.readyState !== 4) {
       return;
     }
@@ -75,25 +92,10 @@ const checkText = function (node) {
     }),
   );
 };
-
-/*
- * Predefines action and changes it depending on user action
+/**
+ * @description get every tweet and process unprocessed ones.
  */
-browser.runtime.onMessage.addListener((message) => {
-  if ((option !== message.selector) || (slider !== message.slider)) {
-    option = message.selector;
-    slider = message.slider;
-    const posts = document.querySelectorAll('.processed-true');
-    posts.forEach((post) => {
-      const tweetText = post.querySelector(
-        `${selector} > div ~ div > div ~ div`,
-      ); // selecting text inside tweet
-      styleTweet(tweetText, option, slider);
-    });
-  }
-});
-
-const processTweets = function () {
+const processTweets = () => {
   const posts = document.querySelectorAll(selector); // selecting tweet object
   posts.forEach((post) => {
     if (post.classList.contains('processed-true')) return;
@@ -102,13 +104,39 @@ const processTweets = function () {
   });
 };
 
-const checkTweetList = function (mutationsList) {
+/**
+ * @description for every change in DOM run processTweets
+ * @param mutationsList
+ */
+const checkTweetList = (mutationsList) => {
   mutationsList.forEach((mutation) => {
     if (mutation.type === 'childList') {
       processTweets();
     }
   });
 };
 
+
 const checkTweetListObserver = new MutationObserver(checkTweetList);
+
+// MAIN FUNCTION
+
+browser.storage.sync.get('optOut').then(updateOption, onError);
+/**
+ * Adds listener which on new message received from popup goes over tweets and applies new style
+ */
+browser.runtime.onMessage.addListener((message) => {
+  if ((option !== message.selector) || (slider !== message.slider)) {
+    option = message.selector;
+    slider = message.slider;
+    const posts = document.querySelectorAll('.processed-true');
+    posts.forEach((post) => {
+      const tweetText = post.querySelector(
+        `${selector} > div ~ div > div ~ div`,
+      ); // selecting text inside tweet
+      styleTweet(tweetText, option, slider);
+    });
+  }
+});
+
 checkTweetListObserver.observe(root, { childList: true, subtree: true });

extension/content/opt-out.css

@@ -1,5 +1,11 @@
+:root {
+    --color: rgb(255, 255, 255);
+}
 .opt-out-tw {
-    color: white;
+    color: var(--color, white);
+}
+.opt-out-tw a {
+    color: var(--color, white);
 }
 
 .opt-out-tc {

extension/manifest.json

@@ -20,7 +20,7 @@
   "browser_action": {
     "default_icon": "icons/icon-48.png",
     "default_title": "Opt-Out-Ext",
-    "default_popup": "popup/set_view_mod.html"
+    "default_popup": "popup/popup.html"
   },
   "icons": {
     "48": "icons/icon-48.png",

extension/popup/set_view_mod.css → extension/popup/assets/styles.css

@@ -17,14 +17,14 @@ h2 {
 
 #slider {
     width: 100%;
-    background: #d3d3d3; 
+    background: #d3d3d3;
     height: 10px;
     border-radius: 5px;
     margin-bottom: 24px;
 }
 
 #slider::-moz-range-thumb {
-    width: 50px; 
+    width: 50px;
     height: 50px;
     cursor: pointer;
     border: none;
@@ -37,7 +37,7 @@ h2 {
 }
 
 #slider::-webkit-slider-thumb {
-    width: 50px; 
+    width: 50px;
     height: 50px;
     cursor: pointer;
     border: none;

extension/popup/functions/onError.js

@@ -0,0 +1,10 @@
+/**
+ * @description Display the popup's error message, and hide the normal UI.
+ *
+ * @param error - contains error message
+ */
+export default function (error) {
+  document.querySelector('#popup-content').classList.add('hidden');
+  document.querySelector('#error-content').classList.remove('hidden');
+  console.error(`Failed to execute opt-out content script: ${error.message}`);
+}

extension/popup/functions/updateOptions.js

@@ -0,0 +1,12 @@
+import updateSliderKnob from './updateSliderKnob.js';
+
+/**
+ * @description Updates slider and option states, from values provided by result, and sets them in popup
+ * @param result {object}
+ */
+export default function (result) {
+  document.querySelector(`#${result.optOut.selector}`).checked = true;
+  const slider = document.querySelector('#slider');
+  slider.value = result.optOut.slider;
+  updateSliderKnob(slider);
+}

extension/popup/functions/updateSliderKnob.js

@@ -0,0 +1,8 @@
+/**
+ * @description Updates slider's knob css image depending on the current value
+ *
+ * @param slider
+ */
+export default function (slider) {
+  (slider.value === '1') ? slider.classList.remove('slider-angry') : slider.classList.add('slider-angry');
+}

extension/popup/popup-main.js

@@ -0,0 +1,37 @@
+import updateOptions from './functions/updateOptions.js';
+import onError from './functions/onError.js';
+import updateSliderKnob from './functions/updateSliderKnob.js';
+
+/**
+ * @description get input values, send them to storage and send message for update to background
+ * script
+ * @param tabs
+ */
+function setChecks(tabs) {
+  const slider = document.getElementById('slider');
+  const optionValue = document.querySelector('input[name="text_options"]:checked').value || 'tc';
+  const popupSettings = {
+    slider: slider.value,
+    selector: optionValue,
+  };
+
+  updateSliderKnob(slider);
+  browser.storage.sync.set({ optOut: popupSettings });
+  browser.tabs.sendMessage(tabs[0].id, popupSettings);
+}
+
+/**
+ * When the popup loads, inject a content script into the active tab,
+ * and add a click handler.
+ * If we couldn't inject the script, handle the error.
+ */
+document.addEventListener('DOMContentLoaded', browser.storage.sync.get('optOut').then(updateOptions, onError));
+document.addEventListener('input', () => {
+  browser.tabs
+    .query({
+      active: true,
+      url: 'https://twitter.com/*',
+      currentWindow: true,
+    })
+    .then(setChecks, onError);
+});

extension/popup/set_view_mod.html → extension/popup/popup.html

@@ -4,7 +4,7 @@
 <head>
     <meta charset="utf-8">
     <title>Title</title>
-    <link rel="stylesheet" href="set_view_mod.css"/>
+    <link rel="stylesheet" href="assets/styles.css"/>
 </head>
 
 <body>
@@ -26,7 +26,7 @@ <h2>How should it be hidden?</h2>
         </label>
         <label for="text_white">
             <input type="radio" id="text_white" name="text_options" value="text_white">
-            <span>White text</span>
+            <span>Make text invisible</span>
         </label>
         <label for="text_removed">
             <input type="radio" id="text_removed" name="text_options" value="text_removed">
@@ -42,7 +42,7 @@ <h2>How should it be hidden?</h2>
         <p>Check your internet connection</p>
     </div>
 
-    <script src="set_view_mod.js"></script>
+    <script type="module" src="popup-main.js"></script>
 
 
 </body>