Fixes for broken functionality

-updated .gitignore file
-restored functionality for switching options by restoring restoreOptions function to set_view_mode.js
-restored style subselector in restoreOptions in order to save options to sync storage
-set values for radio buttons in html popup file
-modified listenForClick to work with radio buttons instead of checkboxes
-changed setting sync.storage and browser.message to object from string
-updated option values in massage to match option selector names
-added default option text-crossed and set update from sync.storage onLoad
-added slider functionality to storage.sync
-merged changing of styles to range knob

.gitignore

@@ -1 +1,40 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
 node_modules/
+
+# profiling files
+chrome-profiler-events.json
+speed-measure-plugin.json
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db
+

extension/content/opt-out-ext.js

@@ -1,5 +1,17 @@
 let selector;
-let option = 'tw';
+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 root = document.getElementById('doc') || document.getElementById('react-root');
 
@@ -14,12 +26,12 @@ if (document.querySelector('body').classList.contains('logged-out')) {
 /*
 Depending on `option` sets classes to tweet nodes
  */
-const styleTweet = function (element, selectedOption) {
-  if (selectedOption.includes('tw')) element.classList.add('opt-out-tw');
+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.includes('tc')) element.classList.add('opt-out-tc');
+  if ((selectedOption === 'text_crossed') && (sliderValue === '1')) element.classList.add('opt-out-tc');
   else element.classList.remove('opt-out-tc');
-  if (selectedOption.includes('tr')) element.classList.add('opt-out-trem');
+  if ((selectedOption === 'text_removed') && (sliderValue === '1')) element.classList.add('opt-out-trem');
   else element.classList.remove('opt-out-trem');
 };
 
@@ -48,7 +60,7 @@ const checkText = function (node) {
         const tweetText = node.querySelector(
           `${selector} > div ~ div > div ~ div`,
         );
-        styleTweet(tweetText, option);
+        styleTweet(tweetText, option, slider);
       } else {
         node.classList.add('processed-false');
       }
@@ -68,14 +80,15 @@ const checkText = function (node) {
  * Predefines action and changes it depending on user action
  */
 browser.runtime.onMessage.addListener((message) => {
-  if (option !== message.command) {
-    option = message.command;
+  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);
+      styleTweet(tweetText, option, slider);
     });
   }
 });
@@ -96,5 +109,6 @@ const checkTweetList = function (mutationsList) {
     }
   });
 };
+
 const checkTweetListObserver = new MutationObserver(checkTweetList);
 checkTweetListObserver.observe(root, { childList: true, subtree: true });

extension/popup/set_view_mod.html

@@ -16,20 +16,20 @@ <h2>How much misogyny do you want to remove?</h2>
         </div>
         <div>
             <label for="slider">
-                <input type="range" id="slider" name="slider" min="0" max="1" value="1" list="tickmarks">
+                <input type="range" id="slider" name="slider" min="0" max="1" value="1">
             </label>
         </div>
         <h2>How should it be hidden?</h2>
         <label for="text_crossed">
-            <input type="radio" id="text_crossed" name="text_options">
+            <input type="radio" id="text_crossed" name="text_options" value="text_crossed" checked>
             <span>Crossed through</span>
         </label>
         <label for="text_white">
-            <input type="radio" id="text_white" name="text_options"checked>
+            <input type="radio" id="text_white" name="text_options" value="text_white">
             <span>White text</span>
         </label>
         <label for="text_removed">
-            <input type="radio" id="text_removed" name="text_options">
+            <input type="radio" id="text_removed" name="text_options" value="text_removed">
             <span>Completely removed</span>
         </label>
         <p class="link">
@@ -44,7 +44,7 @@ <h2>How should it be hidden?</h2>
 
     <script src="set_view_mod.js"></script>
 
-    
+
 </body>
 
 </html>

extension/popup/set_view_mod.js

@@ -1,7 +1,17 @@
-import restoreOptions from './reset';
+function restoreOptions() {
+  function setCurrentChoice(result) {
+    document.querySelector(`#${result.optOut.selector}`).checked = true;
+    document.querySelector('#slider').value = result.optOut.slider;
+  }
 
-const slider = document.getElementById('slider');
+  function onError(error) {
+    console.log(`Error: ${error}`);
+  }
 
+  browser.storage.sync.get('optOut').then(setCurrentChoice, onError);
+}
+
+// const slider = document.getElementById('slider');
 /**
  * There was an error executing the script.
  * Display the popup's error message, and hide the normal UI.
@@ -13,17 +23,23 @@ function reportExecuteScriptError(error) {
 }
 
 function listenForClicks() {
-  function setChecks(tabs) {
-    let msg = 'tc';
-    if (document.getElementById('text_white').checked) msg = 'tw';
-    if (document.getElementById('text_crossed').checked) msg = 'tc';
-    if (document.getElementById('text_removed').checked) msg = 'tr';
-
-    browser.storage.sync.set({ style: msg });
+  function setSliderKnobCSS(slider, sliderStatus) {
+    // Todo: fix with CSS value only style
+    // eslint-disable-next-line no-unused-expressions
+    (sliderStatus === '1') ? slider.classList.remove('slider-angry') : slider.classList.add('slider-angry');
+  }
 
-    browser.tabs.sendMessage(tabs[0].id, {
-      command: slider.value < 0.5 ? [] : [msg],
-    });
+  function setChecks(tabs) {
+    const slider = document.getElementById('slider');
+    const sliderStatus = slider.value;
+    setSliderKnobCSS(slider, sliderStatus);
+    const optionValue = document.querySelector('input[name="text_options"]:checked').value || 'tc';
+    const popupSettings = {
+      slider: sliderStatus,
+      selector: optionValue,
+    };
+    browser.storage.sync.set({ optOut: popupSettings });
+    browser.tabs.sendMessage(tabs[0].id, popupSettings);
   }
 
   function reportError(error) {
@@ -43,12 +59,4 @@ function listenForClicks() {
  * If we couldn't inject the script, handle the error.
  */
 document.addEventListener('DOMContentLoaded', restoreOptions);
-document.addEventListener('click', listenForClicks);
-
-slider.addEventListener('input', (evt) => {
-  if (evt.target.value < 1) {
-    slider.classList.add('slider-angry');
-  } else {
-    slider.classList.remove('slider-angry');
-  }
-});
+document.addEventListener('input', listenForClicks);