Merge pull request #2069 from mneunomne/#2036

#2036
dhowe · Apr 1, 2022 · f4e343b · f4e343b
2 parents 5539fb2 + 1181931
commit f4e343b
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 48 deletions.
diff --git a/src/_locales/en/adnauseam.json b/src/_locales/en/adnauseam.json
@@ -187,6 +187,10 @@
     "message": "No Ads collected on this page (showing recent)",
     "description": "shown in menu when only 'recent' Ads are shown"
   },
+  "adnThisPageStrictBlocked": {
+    "message": "{{domain}} is currently strict blocked.",
+    "description": "shown in menu when the current page is strict blocked"
+  },
   "adnExportedAdsFilename": {
     "message": "AdNauseam_Export_{{datetime}}.json",
     "description": "English: AdNauseam file export"
@@ -249,7 +253,27 @@
   },
   "adnMenuResume": {
     "message": "Resume",
-    "description": "appears in ADN popup menu"
+    "description": "appears in ADN popup menu three state button"
+  },
+  "adnMenuDisable": {
+    "message": "Disable",
+    "description": "Disabled Adnauseam -> appears in ADN popup menu three state button"
+  },
+  "adnMenuActive": {
+    "message": "Active",
+    "description": "Make Adnauseam Active -> appears in ADN popup menu three state button"
+  },
+  "adnMenuStrict": {
+    "message": "Strict",
+    "description": "Activate Strict Block -> appears in ADN popup menu three state button"
+  },
+  "adnMenuDisableScopeDomain": {
+    "message": "on domain.com",
+    "description": "Disable AdNaueam Block On this Domain -> Popup option that appears inside ADN menu"
+  },
+  "adnMenuDisableScopePage": {
+    "message": "on this page",
+    "description": "Disable AdNaueam Block On This Page -> Popup option that appears inside ADN menu"
   },
   "adnMenuSettings": {
     "message": "Settings",
@@ -439,6 +463,10 @@
     "message": "Whitelists",
     "description": "appears as tab name in dashboard"
   },
+  "strictBlockListPageName": {
+    "message": "Strict Block List",
+    "description": "appears as tab name in dashboard"
+  },
   "eventLoggingPrompt": {
     "message": "Activate debugging mode",
     "description": "prompt for toggle"

diff --git a/src/css/menu.css b/src/css/menu.css
@@ -1114,4 +1114,10 @@ select {
         opacity: 0;
         margin-bottom: 0;
       }
-  }
+  }
+
+.fa-icon.info {
+  color: white;
+  fill: white;
+  opacity: 0.8;
+}
diff --git a/src/dashboard.html b/src/dashboard.html
@@ -23,7 +23,7 @@
         <a class="tabButton" data-pane="1p-filters.html" data-i18n="1pPageName"></a>
         <a class="tabButton" data-pane="dyna-rules.html" data-i18n="rulesPageName"></a>
         <a class="tabButton" data-pane="whitelist.html" data-i18n="whitelistPageName"></a>
-        <a class="tabButton" data-pane="strictblocklist.html" data-i18n="strictBlockListPageName">STRICT BLOCK LIST</a> 
+        <a class="tabButton" data-pane="strictblocklist.html" data-i18n="strictBlockListPageName"></a> 
         <a class="tabButton" data-pane="shortcuts.html" data-i18n="shortcutsPageName"></a>
         <a class="tabButton" data-pane="links.html" data-i18n="aboutPageName"></a>
         <a class="tabButton" data-pane="no-dashboard.html"></a>

diff --git a/src/js/adn/menu.js b/src/js/adn/menu.js
@@ -24,7 +24,7 @@
 (function () {
   'use strict';
 
-  let ads, page, settings; // remove? only if we can find an updated ad already in the DOM
+  let ads, page, settings, recent; // remove? only if we can find an updated ad already in the DOM
 
   const ad_list_height = 360;
 
@@ -66,6 +66,7 @@
   const renderPage = function (json) {
     page = json && json.pageUrl;
     settings = json && json.prefs;
+    recent = json && json.recent
 
     if (page) {
       // disable pause & resume buttons for options, vault, about/chrome
@@ -76,24 +77,10 @@
       }
     }
 
-    uDom("#alert-noads").addClass('hide'); // reset state
+    uDom("#alert-noads").addClass('hide'); // reset state of no ads showned
+    uDom("#alert-strictblock").addClass('hide'); // reset state of no ads showned
     uDom('#main').toggleClass('disabled', getIsDisabled());
 
-    // set button state
-    if (getIsDisabled()) {
-      // disabled 
-      uDom('#disable').prop('checked', true);
-    } else if (getIsStrictBlocked()) {
-      // strict blocked
-      uDom('#strict').prop('checked', true);
-      toggleStrictAlert(page, true)
-    } else {
-      // active
-      uDom('#active').prop('checked', true);
-    }
-
-
-    // disable 3 state toggle button
 
     if (typeof json !== 'undefined' && json !== null) {
       ads = json.data;
@@ -122,6 +109,20 @@
       }).then((data) => {
         renderNotifications(data.notifications)
         adjustBlockHeight(data.disableWarnings)
+
+        // set button state
+        if (getIsDisabled()) {
+          // disabled 
+          uDom('#disable').prop('checked', true);
+        } else if (getIsStrictBlocked()) {
+          // strict blocked
+          uDom('#strict').prop('checked', true);
+          toggleStrictAlert(page, true)
+        } else {
+          // active
+          uDom('#active').prop('checked', true);
+        }
+
       });
     });
   }
@@ -151,7 +152,7 @@
     const $items = uDom('#ad-list-items');
     $items.removeClass().empty();
 
-    let ads = json.data;
+    ads = json.data;
     if (ads) {
       if (json.recent) doRecent();
       for (let i = 0, j = ads.length; i < j; i++) {
@@ -372,11 +373,20 @@
   }
 
   const toggleStrictAlert = function (pageUrl, state) {
-    console.log("toggleStrictAlert", pageUrl)
+    console.log("toggleStrictAlert", pageUrl, state, ads)
+    let hostname = (new URL(pageUrl)).hostname;
+    uDom("#alert-strictblock .text").text(uDom("#alert-strictblock .text").text().replace("{{domain}}", hostname))
     if (state) {
-      uDom("#alert-noads").removeClass('hide');
-    } else {
+      uDom("#alert-strictblock").removeClass('hide');
       uDom("#alert-noads").addClass('hide');
+      uDom('#ad-list-items').addClass('recent-ads');
+    } else {
+      if (recent) {
+        uDom("#alert-noads").removeClass('hide');
+      } else {
+        uDom('#ad-list-items').removeClass('recent-ads');
+      }
+      uDom("#alert-strictblock").addClass('hide');
     }
   }
 
@@ -561,11 +571,13 @@
         onClickStrict();
         break;
       case 'disable':
+        toggleStrictAlert(popupData.pageURL, false)
         toggleEnabled(evt, false)
         // open dropdown menu
         onClickDisableArrow()
         break;
       case 'active':
+        toggleStrictAlert(popupData.pageURL, false)
         toggleEnabled(evt, true)
         break;
       default:
@@ -574,21 +586,31 @@
   }
 
   const onChangeDisabledScope = function (evt) {
-    console.log("onChangeDisabledScope", evt)
     var scope = uDom(".disable_type_radio:checked") ? uDom(".disable_type_radio:checked").val() : '' 
+    // first remove previous whichever previous scope from whitelist 
     vAPI.messaging.send(
       'adnauseam', {
       what: 'toggleEnabled',
       url: popupData.pageURL,
       scope: scope,
-      state: false,
+      state: true,
       tabId: popupData.tabId
+    }).then(() => {
+      // then re-add it with current scope
+      vAPI.messaging.send(
+        'adnauseam', {
+        what: 'toggleEnabled',
+        url: popupData.pageURL,
+        scope: scope,
+        state: false,
+        tabId: popupData.tabId
+      });
+      setTimeout(function () {
+        closePopup()
+      }, 500)
     });
-    setTimeout(function () {
-      closePopup()
-    }, 500)
   }
-
+  
   // keep in mind:
   // state == false -> disabled 
   // state == true -> active 
@@ -679,6 +701,8 @@
       'behind-the-scene' && !popupData.advancedUserEnabled)) {
       return;
     }
+    // enable alert
+    toggleStrictAlert(popupData.pageURL, true)
     uDom('#main').removeClass('disabled')
     vAPI.messaging.send(
       'adnauseam', {

diff --git a/src/js/ublock.js b/src/js/ublock.js
@@ -129,11 +129,9 @@ const matchBucket = function(url, hostname, bucket, start) {
     if ( newState === undefined ) {
         newState = !currentState;
     }
-    /*
     if ( newState === currentState ) {
         return currentState;
     }
-    */
 
     const netWhitelist = this.netWhitelist;
     const pos = url.indexOf('#');
@@ -142,10 +140,6 @@ const matchBucket = function(url, hostname, bucket, start) {
     let key = targetHostname;
     let directive = scope === 'page' ? targetURL : targetHostname;
 
-    // if the button is "active" or "disable", remove page from strictBlock
-    // this.removePageFromStrictBlockList(this.netStrictBlockList, targetURL, targetHostname) 
-    // end ADN
-
     // Add to directive list
     if ( newState === false ) {
         let bucket = netWhitelist.get(key);

diff --git a/src/menu.html b/src/menu.html
@@ -9,6 +9,8 @@
   <link rel="stylesheet" href="css/fonts/stylesheet.css">
   <link rel="stylesheet" href="css/common.css">
   <link rel="stylesheet" href="css/menu.css">
+  <link rel="stylesheet" href="css/fa-icons.css">
+
 </head>
 
 <body class="active">
@@ -53,7 +55,7 @@ <h2 id="paused-no-hiding" data-i18n="adnNotHiding" class='hide'></h2>
 
         <div id="alert-strictblock" class="alert hide">
           <img src="img/alert.png" alt="alert">
-          <p data-i18n="adnShowingRecentAds"></p>
+          <p><span data-i18n="adnThisPageStrictBlocked" class="text"></span><span><a class="fa-icon info" href="https://github.com/dhowe/AdNauseam/wiki/Developer-FAQ#what-is-strict-blocking-and-when-should-i-use-it" target="_blank">question-circle</a></span></p>
         </div>
 
         <ul id='ad-list-items'></ul>
@@ -71,17 +73,17 @@ <h2 id="paused-no-hiding" data-i18n="adnNotHiding" class='hide'></h2>
           <!-- Active -->
           <span class="btn_radio_wrapper btn_radio_wrapper-center">
             <input type="radio" class="btn_radio adn_state_radio" value="active" name="state_btn" id="active" checked="checked"/>
-            <label class="btn_radio_label label_active label_middle" for="active_radio" id="active-lbl">active</label>
+            <label class="btn_radio_label label_active label_middle" for="active_radio" id="active-lbl" data-i18n="adnMenuActive">&nbsp;</label>
           </span>
           <!-- Strict Block -->
           <span class="btn_radio_wrapper btn_radio_wrapper-left">
             <input type="radio" class="btn_radio adn_state_radio" value="strict" name="state_btn" id="strict"/>
-            <label class="btn_radio_label label_strict label_left" for="strict_radio" id="strict-lbl">strict</label>
+            <label class="btn_radio_label label_strict label_left" for="strict_radio" id="strict-lbl" data-i18n="adnMenuStrict">&nbsp;</label>
           </span>
           <!-- Disabled -->
           <span class="btn_radio_wrapper btn_radio_wrapper-right">
             <input type="radio" class="btn_radio adn_state_radio" value="disable" name="state_btn" id="disable"/>
-            <label class="btn_radio_label label_disable label_right" for="disable_radio" id="disable-lbl">disable
+            <label class="btn_radio_label label_disable label_right" for="disable_radio" id="disable-lbl" data-i18n="adnMenuDisable">&nbsp;
               <span class="popup_arrow"><svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 7L6 4L10 7" stroke="#0076FF"/></svg></span>
             </label>
           </span>
@@ -93,19 +95,13 @@ <h2 id="paused-no-hiding" data-i18n="adnNotHiding" class='hide'></h2>
         <div class="inner-popup_wrapper hidden">
           <div class="inner-popup" id="disable-popup">
             <ul>
-              <!--
-              <li class="btn_radio_wrapper">
-                <input type="radio" class="btn_radio disable_type_radio" value="everywhere" name="disable_type" id="everywhere"/>
-                <label class="btn_radio_label label_disable_type" for="disable_type" id="everywhere-lbl">everywhere</label>  
-              </li>
-              -->
               <li class="btn_radio_wrapper">
                 <input type="radio" class="btn_radio disable_type_radio" value="" name="disable_type" id="on_domain" checked/>
-                <label class="btn_radio_label label_disable_type" for="disable_type" id="on_domain-lbl">on domain.com</label>  
+                <label class="btn_radio_label label_disable_type" for="disable_type" id="on_domain-lbl" data-i18n="adnMenuDisableScopeDomain">&nbsp;</label>  
               </li>
               <li class="btn_radio_wrapper">
                 <input type="radio" class="btn_radio disable_type_radio" value="page" name="disable_type" id="on_this_page"/>
-                <label class="btn_radio_label label_disable_type" for="disable_type" id="on_this_page-lbl">on this page</label>  
+                <label class="btn_radio_label label_disable_type" for="disable_type" id="on_this_page-lbl" data-i18n="adnMenuDisableScopePage">&nbsp;</label>  
               </li>
             </ul>
           </div>
@@ -159,6 +155,7 @@ <h2 id="paused-no-hiding" data-i18n="adnNotHiding" class='hide'></h2>
 
 
   </div>
+  <script src="js/fa-icons.js"></script>
   <script src="js/vapi.js"></script>
   <script src="js/vapi-common.js"></script>
   <script src="js/vapi-client.js"></script>