match style and show different message for first party protections on tab with no trackers

Author: ablanathtanalba

src/_locales/en_US/messages.json

@@ -119,6 +119,10 @@
         "message": "and is enforcing <a href='https://www.eff.org/deeplinks/2018/05/privacy-badger-rolls-out-new-ways-fight-facebook-tracking'>link tracking protections</a>.",
         "description": "message shown on a site where first party outgoing link tracking protections are enabled"
     },
+    "popup_info_firstparty_protections_no_trackers": {
+        "message": "<a href='https://www.eff.org/deeplinks/2018/05/privacy-badger-rolls-out-new-ways-fight-facebook-tracking'>Link tracking protections</a> are enforced.",
+        "description": "message shown on a site where first party outgoing link tracking protections are enabled, but there are no third party trackers detected."
+    },
     "options_domain_list_tab": {
         "message": "Tracking Domains",
         "description": "This is an options page tab heading."

src/js/popup.js

@@ -135,11 +135,6 @@ function init() {
     overlay.toggleClass('active');
   }
 
-  // show firstparty link tracking protection if we scrub links on this tab host
-  if (POPUP_DATA.tabHost == 'www.facebook.com' || POPUP_DATA.tabHost == 'www.google.com') {
-    $("#instructions_firstparty_protections").show();
-  }
-
   $("#error").on("click", function() {
     overlay.toggleClass('active');
   });
@@ -568,10 +563,20 @@ function refreshPopup() {
     // show "no trackers" message
     $("#instructions_no_trackers").show();
 
+    // show first party protections message if link tracker cleaning is enabled on this tabHost
+    if (POPUP_DATA.tabHost == 'www.facebook.com' || POPUP_DATA.tabHost == 'www.google.com') {
+      $("#instructions_firstparty_protections_no_trackers").show();
+    }
+
   } else if (POPUP_DATA.trackerCount == 1) {
     // hide multiple trackers message
     $("#instructions-many-trackers").hide();
 
+    // show first party protections message if link tracker cleaning is enabled on this tabHost
+    if (POPUP_DATA.tabHost == 'www.facebook.com' || POPUP_DATA.tabHost == 'www.google.com') {
+      $("#instructions_firstparty_protections").show();
+    }
+
     // show singular "tracker" message
     $("#instructions_one_tracker").show();
 
@@ -582,6 +587,11 @@ function refreshPopup() {
         "<a target='_blank' title='" + _.escape(chrome.i18n.getMessage("what_is_a_tracker")) + "' class='tooltip' href='https://privacybadger.org/#What-is-a-third-party-tracker'>"
       ]
     )).find(".tooltip").tooltipster();
+
+    // show first party protections message if link tracker cleaning is enabled on this tabHost
+    if (POPUP_DATA.tabHost == 'www.facebook.com' || POPUP_DATA.tabHost == 'www.google.com') {
+      $("#instructions_firstparty_protections").show();
+    }
   }
 
   function renderDomains() {

src/skin/popup.css

@@ -291,12 +291,12 @@ font-size: 16px;
 #pbInstructions :not(#options_domain_list_trackers):not(#options_domain_list_one_tracker):not(#options_domain_list_no_trackers) a:hover {
     color: #ec9329
 }
-#instructions_no_trackers, #special-browser-page, #disabled-site-message {
+#instructions_no_trackers, #special-browser-page, #disabled-site-message, #instructions_firstparty_protections_no_trackers {
     text-align: center;
     margin: 45px 0;
     padding: 0;
 }
-#instructions_no_trackers, #no-third-parties {
+#instructions_no_trackers, #no-third-parties, #instructions_firstparty_protections_no_trackers {
     display: block;
 }
 #no-third-parties {

src/skin/popup.html

@@ -106,6 +106,7 @@ <h2 id="title-name"><span class="i18n_name"></span></h2>
     <span id="instructions_no_trackers" style="display:none">
       <span class="i18n_popup_instructions_no_trackers"></span>
       <span id="no-third-parties" class="i18n_popup_blocked" style="display:none"></span>
+      <span id="instructions_firstparty_protections_no_trackers" class="i18n_popup_info_firstparty_protections_no_trackers" style="display:none"></span>
     </span>
     <span id="instructions_firstparty_protections" class="i18n_popup_info_firstparty_protections" style="display:none"></span>
   </p>