Make disable on site more prominent

src/_locales/en_US/messages.json

@@ -1,4 +1,34 @@
 {
+    "name": {
+        "message": "Privacy Badger",
+        "description": ""
+    },
+    "description": {
+        "message": "Privacy Badger automatically learns to block invisible trackers.",
+        "description": ""
+    },
+    "popup_disable_for_site": {
+        "message": "Disable for this site",
+        "description": "Button in the popup."
+    },
+    "popup_enable_for_site": {
+        "message": "Enable for this site",
+        "description": "Button in the popup, visible if Privacy Badger is disabled on the current site"
+    },
+    "report_broken_site": {
+        "message": "Report broken site",
+        "description": "Button in the popup."
+    },
+    "version": {
+        "message": "version $VERSION_STRING$",
+        "description": "Shows Privacy Badger's version in the popup. For example, \"version 2018.8.1\".",
+        "placeholders": {
+            "version_string": {
+                "content": "$1",
+                "example": "2018.8.1"
+            }
+        }
+    },
     "badger_status_block": {
         "message": "Blocked $DOMAIN$",
         "description": "Tooltip shown when you hover over a domain name with a red slider in the list of domains in the popup or under the Tracking Domains tab on the options page.",
@@ -37,7 +67,7 @@
     },
     "donate_to_eff": {
         "message": "Donate to EFF",
-        "description": "Button shown in the popup and on the intro page."
+        "description": "Link shown in the popup; also a button on the intro page"
     },
     "intro_donate_subheading": {
         "message": "Help us by donating and sharing your support for our tools",
@@ -218,8 +248,8 @@
         "description": "Tooltip that comes up when you hover over the 'tracking domains' link under the Tracking Domains tab on the options page."
     },
     "intro_report_button": {
-        "message": "Please don't forget to click on 'Did Privacy Badger break this site'. We respect your privacy so we don't send automatic reports.",
-        "description": "Intro page paragraph. The quoted message ('Did Privacy Badger break this site') should match the first part of the translation for the 'report_broken_site' message."
+        "message": "Please don't forget to click on 'Report broken site'. We respect your privacy so we don't send automatic reports.",
+        "description": "Intro page paragraph. The quoted message ('Report broken site') should match the translation for the 'report_broken_site' message."
     },
     "options_title": {
         "message": "Privacy Badger Options",
@@ -229,10 +259,6 @@
         "message": "This will automatically send the following information to EFF: the page you're currently visiting, your browser version, the version of Privacy Badger, and the state of all of the sliders on this page.",
         "description": ""
     },
-    "popup_enable_for_site": {
-        "message": "Enable Privacy Badger for this site",
-        "description": ""
-    },
     "options_domain_type_filter": {
         "message": "Filter by type:",
         "description": "Label for a dropdown control on the Tracking Domains options page tab."
@@ -301,16 +327,6 @@
         "message": "Take the tour",
         "description": "Intro page welcome button."
     },
-    "version": {
-        "message": "version $VERSION_STRING$",
-        "description": "Shows Privacy Badger's version in the popup. For example, \"version 2018.8.1\".",
-        "placeholders": {
-            "version_string": {
-                "content": "$1",
-                "example": "2018.8.1"
-            }
-        }
-    },
     "badger_status_cookieblock": {
         "message": "Blocked cookies from $DOMAIN$",
         "description": "Tooltip shown when you hover over a domain name with a yellow slider in the list of domains in the popup or under the Tracking Domains tab on the options page.",
@@ -333,10 +349,6 @@
         "message": "Please select a file to import.",
         "description": ""
     },
-    "report_broken_site": {
-        "message": "Did Privacy Badger break this site? Let us know!",
-        "description": "Button in the popup."
-    },
     "tooltip_cookieblock": {
         "message": "Center the slider to block cookies",
         "description": ""
@@ -475,10 +487,6 @@
         "message": "Move the slider right to allow a domain",
         "description": ""
     },
-    "popup_disable_for_site": {
-        "message": "Disable Privacy Badger for this site",
-        "description": "Button in the popup."
-    },
     "intro_privacy_note": {
         "message": "Privacy Badger will NEVER share data about your browsing unless you choose to share it.",
         "description": "Intro page paragraph."
@@ -504,10 +512,6 @@
         "message": "Privacy Badger hasn't detected any <a target='_blank' tabindex=-1 title='i18n_what_is_a_tracker' class='tooltip' href='https://www.eff.org/privacybadger#faq-What-is-a-third-party-tracker?'>tracking domains</a> yet. Keep browsing!",
         "description": "Shown on the Tracking Domains tab on the options page if all tracking domains have been removed."
     },
-    "name": {
-        "message": "Privacy Badger",
-        "description": ""
-    },
     "intro_not_an_adblocker_paragraph": {
         "message": "Privacy Badger starts blocking once it sees the same tracker on three different websites. Three strikes and it's out!",
         "description": "Intro page paragraph."
@@ -560,10 +564,6 @@
         "message": "Share on Facebook",
         "description": "Text that comes up when you hover over the social sharing buttons on the intro page."
     },
-    "description": {
-        "message": "Privacy Badger automatically learns to block invisible trackers.",
-        "description": ""
-    },
     "report_fail": {
         "message": "Oops. Something went wrong.",
         "description": ""

src/js/popup.js

@@ -173,11 +173,6 @@ function init() {
 
   $("#activate_site_btn").on("click", activateOnSite);
   $("#deactivate_site_btn").on("click", deactivateOnSite);
-  $("#donate").on("click", function() {
-    chrome.tabs.create({
-      url: "https://supporters.eff.org/donate/support-privacy-badger"
-    });
-  });
 
   $('#error_input').on('input propertychange', function() {
     // No easy way of sending message on popup close, send message for every change
@@ -393,16 +388,15 @@ function send_error(message) {
  * activate PB for site event handler
  */
 function activateOnSite() {
-  $("#activate_site_btn").toggle();
-  $("#deactivate_site_btn").toggle();
-  $("#blockedResourcesContainer").show();
+  $("#activate_site_btn").prop("disabled", true);
 
   chrome.runtime.sendMessage({
     type: "activateOnSite",
     tabHost: POPUP_DATA.tabHost,
     tabId: POPUP_DATA.tabId,
     tabUrl: POPUP_DATA.tabUrl
   }, () => {
+    // reload tab and close popup
     chrome.tabs.reload(POPUP_DATA.tabId);
     window.close();
   });
@@ -412,16 +406,15 @@ function activateOnSite() {
  * de-activate PB for site event handler
  */
 function deactivateOnSite() {
-  $("#activate_site_btn").toggle();
-  $("#deactivate_site_btn").toggle();
-  $("#blockedResourcesContainer").hide();
+  $("#deactivate_site_btn").prop("disabled", true);
 
   chrome.runtime.sendMessage({
     type: "deactivateOnSite",
     tabHost: POPUP_DATA.tabHost,
     tabId: POPUP_DATA.tabId,
     tabUrl: POPUP_DATA.tabUrl
   }, () => {
+    // reload tab and close popup
     chrome.tabs.reload(POPUP_DATA.tabId);
     window.close();
   });

src/lib/i18n.js

@@ -56,7 +56,7 @@ function setTextDirection() {
   // popup page
   if (ON_POPUP) {
     // fix floats
-    ['#badger-header-logo', '#header-image-stack', '#header-image-stack a', '#header-image-stack img', '#version'].forEach((selector) => {
+    ['#badger-header-logo', '#header-image-stack', '#header-image-stack a', '#header-image-stack img'].forEach((selector) => {
       toggle_css_value(selector, "float", "left", "right");
     });
     ['#fittslaw', '#options', '#help', '#share', '.overlay_close'].forEach((selector) => {

src/skin/popup.css

@@ -52,8 +52,9 @@ a { text-decoration: none }
 
 a:hover { color: #ec9329 }
 
-.clear {
-    clear: both;
+button {
+    /* needed for Firefox */
+    color: #333;
 }
 
 .clicker {
@@ -168,12 +169,15 @@ a:hover { color: #ec9329 }
 }
 
 /* body#main to avoid applying this to options page */
-body#main #blockedResourcesContainer {
+body#main #blockedResourcesContainer, #special-browser-page, #disabled-site-message {
     flex: 1;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }
+#special-browser-page, #disabled-site-message {
+    text-align: center;
+}
 
 button.cta-button, a.cta-button {
     background-color: #ff641c;
@@ -291,12 +295,12 @@ button.cta-button:hover, a.cta-button:hover {
     margin: 0;
 }
 /* body#main to avoid applying this to options page */
-body#main #pbInstructions a, #firstparty-protections-container a, #webrtc-deprecation-div a {
+body#main #pbInstructions a, #firstparty-protections-container a, #webrtc-deprecation-div a, #donate a {
     text-decoration: underline;
     color: black;
     font-weight: bold;
 }
-body#main #pbInstructions a:hover, #firstparty-protections-container a:hover, #webrtc-deprecation-div a:hover {
+body#main #pbInstructions a:hover, #firstparty-protections-container a:hover, #webrtc-deprecation-div a:hover, #donate a:hover {
     color: #ec9329;
 }
 #instructions-firstparty-description {
@@ -306,11 +310,6 @@ body#main #pbInstructions a:hover, #firstparty-protections-container a:hover, #w
     padding: 8px;
     font-size: 12px;
 }
-#special-browser-page, #disabled-site-message {
-    text-align: center;
-    margin: 40px 0;
-    padding: 0;
-}
 #no-third-parties {
     display: block;
     font-size: 12px;
@@ -334,12 +333,14 @@ body#main #pbInstructions a:hover, #firstparty-protections-container a:hover, #w
     /* fix overly bold text on macOS */
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    line-height: 16px;
     margin-top: 8px;
     padding: 10px;
     text-align: center;
     width: 49%;
 }
+.pbButton:not(:disabled):active {
+    transform: translateY(1px);
+}
 .pbButton:hover:enabled {
     border: 2px solid #F06A0A;
 }
@@ -348,8 +349,11 @@ body#main #pbInstructions a:hover, #firstparty-protections-container a:hover, #w
     color: #666;
     cursor: auto;
 }
-#donate {
-    width: 100%;
+#deactivate_site_btn, #activate_site_btn, #error {
+    font-size: 16px;
+}
+#error .ui-icon {
+    font-size: 12px;
 }
 
 #not-yet-blocked-header, #non-trackers-header {
@@ -439,11 +443,19 @@ div.overlay.active {
   font-size: 13px;
 }
 
-#version{
-  color: #707070;
-  font-size: 10px;
-  float: left;
+#version {
+    color: #707070;
+    font-size: 10px;
+    position: absolute;
+    bottom: 5px;
+}
+#donate {
+    font-size: 14px;
+    margin: 5px 0;
+    padding: 10px;
+    text-align: center;
 }
+
 .faded-bw-color-scheme {
     filter: grayscale(1) opacity(0.6);
 }
@@ -554,6 +566,7 @@ div.overlay.active {
     body#main #pbInstructions a,
     #firstparty-protections-container a,
     #webrtc-deprecation-div a,
+    #donate a,
     #pbInstructions,
     .toggle-header-title,
     #special-browser-page,

src/skin/popup.html

@@ -129,7 +129,6 @@ <h1 id="share_title" class="i18n_share_title overlay_title"></h1>
       <h2 id="title-name"><span class="i18n_name"></span></h2>
     </div>
   </div>
-  <div class='clear'></div>
 </div>
 
 <div id="firstparty-protections-container" style="display:none">
@@ -172,12 +171,16 @@ <h2 id="title-name"><span class="i18n_name"></span></h2>
 </div>
 
 <div id="siteControls">
-    <button id="deactivate_site_btn" class="i18n_popup_disable_for_site pbButton"></button>
-    <button id="activate_site_btn" class="i18n_popup_enable_for_site pbButton" style="display:none"></button>
-    <button id="error" class="i18n_report_broken_site pbButton"></button>
-    <button id="donate" class="pbButton" target="_blank"><span class="ui-icon ui-icon-heart" style="color:#ec1e1e"></span> <span class="i18n_donate_to_eff"></span></button>
+    <button id="deactivate_site_btn" class="pbButton"><span class="ui-icon ui-icon-power"></span> <span class="i18n_popup_disable_for_site"></span></button>
+    <button id="activate_site_btn" class="pbButton" style="display:none"><span class="ui-icon ui-icon-power"></span> <span class="i18n_popup_enable_for_site"></span></button>
+    <button id="error" class="pbButton"><span class="ui-icon ui-icon-mail-send"></span> <span class="i18n_report_broken_site"></span></button>
 </div>
-<span id="version" class="i18n_version"></span>
-<div class='clear'></div>
+
+<footer>
+  <div id="donate">
+    <a href="https://supporters.eff.org/donate/support-privacy-badger" target="_blank"><span class="ui-icon ui-icon-heart" style="color:#ec1e1e"></span> <span class="i18n_donate_to_eff"></span></a>
+  </div>
+  <div id="version" class="i18n_version"></div>
+</footer>
 </body>
 </html>