Merge pull request #3012

Welcome page updates: - Reworked text to focus on what's important - Updated screenshots - Added special text to popup when opened from welcome page
EFForg · Nov 13, 2024 · bcc300e · bcc300e
2 parents 6cdf97e + 6688740
commit bcc300e
Show file tree

Hide file tree

Showing 15 changed files with 110 additions and 78 deletions.
diff --git a/src/_locales/en_US/messages.json b/src/_locales/en_US/messages.json
@@ -31,6 +31,10 @@
         "message": "Privacy Badger doesn't work on special pages like this one. Try browsing somewhere else.",
         "description": "Shown in the popup for special browser pages such as the New Tab page and 'about:' pages."
     },
+    "popup_first_run_header": {
+        "message": "Great job opening the popup!",
+        "description": "Heading in the popup when opened from the intro page."
+    },
     "popup_disabled_site_header": {
         "message": "Privacy Badger is disabled on this site",
         "description": "Shown in the popup on disabled sites."
@@ -185,6 +189,10 @@
         "message": "Your Badger hasn't decided yet if these domains should get blocked",
         "description": "Popup domain slider list header text. Separates blocked domains from domains that haven't yet been seen perform tracking on enough sites."
     },
+    "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": "Tooltip for the 'not_yet_blocked_header' message"
+    },
     "non_tracker": {
         "message": "The domains below don't appear to be tracking you",
         "description": "Popup domain slider list header text. Separates domains with detected tracking from domains where no tracking has yet been detected."
@@ -295,46 +303,46 @@
         "message": "Take the tour",
         "description": "Intro page welcome button."
     },
-    "intro_learns": {
-        "message": "Learns automatically",
-        "description": "Intro page paragraph heading."
-    },
-    "intro_learns_paragraph": {
-        "message": "Instead of keeping lists of what to block, Privacy Badger automatically discovers trackers based on their behavior.",
-        "description": "Intro page paragraph."
-    },
     "intro_beyond_ads": {
         "message": "Catches sneaky trackers",
         "description": "Intro page paragraph heading."
     },
     "intro_beyond_ads_paragraph": {
-        "message": "Invisible tracking happens in all sorts of ways; ads are just the visible tip of the iceberg. Privacy Badger sends the <a href='https://globalprivacycontrol.org/' target='_blank'>Global Privacy Control signal</a>, to opt you out of data sharing and selling, and the <a href='https://www.eff.org/issues/do-not-track' target='_blank'>Do Not Track signal</a> to tell companies not to track you. If they ignore your wishes, Privacy Badger will learn to block them—whether they are advertisers or trackers of other kinds.",
-        "description": "Intro page paragraph."
+        "message": "Privacy Badger sends the <a href='https://globalprivacycontrol.org/' target='_blank'>Global Privacy Control signal</a>, to opt you out of data sharing and selling, and the <a href='https://www.eff.org/issues/do-not-track' target='_blank'>Do Not Track signal</a> to tell companies not to track you.",
+        "description": "Intro page paragraph"
+    },
+    "intro_beyond_ads_paragraph2": {
+        "message": "If they ignore these signals, Privacy Badger will learn to block them—whether they are advertisers or trackers of other kinds.",
+        "description": "Intro page paragraph"
     },
     "intro_not_an_adblocker": {
-        "message": "Not an ad blocker, I'm different",
+        "message": "Not an ad blocker",
         "description": "Intro page paragraph heading."
     },
-    "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. Also a tooltip for the 'not_yet_blocked_header' message."
+    "intro_learns_paragraph": {
+        "message": "Instead of keeping lists of what to block, Privacy Badger automatically discovers trackers based on their behavior.",
+        "description": "Intro page paragraph."
+    },
+    "intro_not_an_adblocker_paragraph2": {
+        "message": "Invisible tracking happens in all sorts of ways; ads are just the visible tip of the iceberg. Privacy Badger doesn't block ads unless they happen to be tracking you.",
+        "description": "Intro page paragraph"
     },
     "next_section": {
         "message": "next section",
         "description": "Image alt. text on a couple of \"scroll down\" arrow buttons on the intro page."
     },
+    "intro_open_popup": {
+        "message": "Try opening Privacy Badger's popup",
+        "description": "Shown above an image of the Privacy Badger icon circled on the browser toolbar."
+    },
+    "intro_open_popup_alt": {
+        "message": "Browser toolbar with the Privacy Badger icon circled",
+        "description": "Alt text for toolbar icon image, which is shown below the intro_open_popup header."
+    },
     "intro_disable_button": {
         "message": "If you think Privacy Badger is breaking a page (a video doesn't play, for example), you can click the 'Disable' button to turn off Privacy Badger for that site.",
         "description": "Intro page paragraph. The quoted string ('Disable') should match the verb used for the 'popup_disable_for_site' message."
     },
-    "intro_report_button": {
-        "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."
-    },
-    "intro_privacy_note": {
-        "message": "Privacy Badger will NEVER share data about your browsing unless you choose to share it.",
-        "description": "Intro page paragraph."
-    },
     "intro_donate_heading": {
         "message": "Privacy is a team sport!",
         "description": "Part of the 'donate' section on the intro page."

diff --git a/src/js/popup.js b/src/js/popup.js
@@ -158,7 +158,7 @@ function showNagMaybe() {
 }
 
 /**
- * Init function. Showing/hiding popup.html elements and setting up event handler
+ * Sets up event handlers. Should be called once only!
  */
 function init() {
   showNagMaybe();
@@ -573,22 +573,33 @@ function createBreakageNote(domain, i18n_message_key) {
 }
 
 /**
- * Refresh the content of the popup window
+ * Populates the contents of popup.
  *
- * @param {Integer} tabId The id of the tab
+ * Could get called more than once (by tests).
+ *
+ * To attach event listeners, see init()
  */
 function refreshPopup() {
   window.SLIDERS_DONE = false;
 
   // must be a special browser page,
   if (POPUP_DATA.noTabData) {
-    // show the "nothing to do here" message
     $('#blockedResourcesContainer').hide();
-    $('#special-browser-page').show();
 
-    // hide inapplicable buttons
-    $('#deactivate_site_btn').hide();
-    $('#error').hide();
+    if (POPUP_DATA.fromWelcomePage) {
+      $('#first-run-page').show();
+
+      // disable Disable/Report buttons
+      $('#deactivate_site_btn').prop('disabled', true);
+      $('#error').prop('disabled', true);
+    } else {
+      // show the "nothing to do here" message
+      $('#special-browser-page').show();
+
+      // hide inapplicable Disable/Report buttons
+      $('#deactivate_site_btn').hide();
+      $('#error').hide();
+    }
 
     // activate tooltips
     $('.tooltip').tooltipster();
@@ -880,6 +891,9 @@ $(function () {
       tabUrl: tab.url
     }, (response) => {
       setPopupData(response);
+      if (tab.url == chrome.runtime.getURL('/skin/firstRun.html')) {
+        POPUP_DATA.fromWelcomePage = true;
+      }
       refreshPopup();
       init();
     });

diff --git a/src/lib/i18n.js b/src/lib/i18n.js
@@ -83,12 +83,13 @@ function setTextDirection() {
       right: 'unset',
       left: '15px'
     });
-    $('#pin-image').css("transform", "scaleX(-1)");
+    $('#pin-image').attr("src", "images/pinning-instructions-rtl.png");
     $('#dismiss-nudge').css({
       float: 'left',
       right: 'unset',
       left: '-5px'
     });
+    $('#toolbar-icon').css("transform", "scaleX(-1)");
   }
 }
 

diff --git a/src/skin/css/firstRun.css b/src/skin/css/firstRun.css
@@ -694,54 +694,66 @@ body {
 #intro {
   padding:2rem 0rem 4rem;
 }
+#pb-settings div {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+  background-image:linear-gradient(#DFDFE6, #DFDFE6 45%, #fff 45%);
+  font-size: 17px;
+  padding: 1rem;
+  margin: 2rem 0 3rem;
+  width: 100%;
+}
 @media print, screen and (min-width: 40em) {
   #intro {
     padding:4rem 0rem 14rem;
   }
 }
-[id*="pb-features-"],#pb-settings {
+#toolbar-icon, #disable-instructions {
+  max-width: 550px;
+  width: 90%;
+}
+[id*="pb-features-"] {
   display:-ms-flexbox;
   display:flex;
   -ms-flex-flow:row wrap;
   flex-flow:row wrap;
   padding:3rem 0 2rem;
 }
 @media print, screen and (min-width: 40em) {
-  [id*="pb-features-"],#pb-settings {
+  [id*="pb-features-"] {
     padding:3rem 0 5rem;
   }
 }
-[id*="pb-features-"] div,#pb-settings div {
+[id*="pb-features-"] div {
   width:calc(100% - 1.875rem);
   margin-right:.9375rem;
   margin-left:.9375rem;
   text-align:center;
 }
 @media print, screen and (min-width: 40em) {
-  [id*="pb-features-"] div,#pb-settings div {
+  [id*="pb-features-"] div {
     width:calc(33.33333% - 1.875rem);
     margin-right:.9375rem;
     margin-left:.9375rem;
   }
 
 }
-[id*="pb-features-"] h3,#pb-settings h3 {
+[id*="pb-features-"] h3 {
   font-size:1.5rem;
   text-align:center;
   margin-top:1rem;
 }
 @media print, screen and (min-width: 40em) {
-    [id*="pb-features-"] h3, #pb-settings h3 {
+    [id*="pb-features-"] h3 {
         text-align: start;
         font-size: 1.9375rem;
     }
 }
-[id*="pb-features-"] .text, [id*="pb-features-"] p, #pb-settings .text, #pb-settings p {
+[id*="pb-features-"] .text, [id*="pb-features-"] p {
     text-align: start;
 }
-#pb-settings {
-  background-image:linear-gradient(#EC9329, #EC9329 30%, #fff 30%);
-}
 [id*="pb-donate"] {
   display:-ms-flexbox;
   display:flex;
@@ -795,13 +807,13 @@ body {
   width: 100%;
   height: 100%;
   z-index: 999;
-  background-color: #1f171769;
+  background-color: #1f171782;
   position: fixed;
   top: 0;
   left: 0;
 }
 
-@keyframes bounce {
+@keyframes custom-bounce {
 	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
 	40% {transform: translateY(-20px);}
 	60% {transform: translateY(-5px);}
@@ -848,8 +860,8 @@ body {
   padding: 25px;
   z-index: 1000;
   border-radius: 8px;
-  box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 20px, rgba(0, 0, 0, 0.35) 0px 25px 30px;
-  animation: bounce 2s ease 1;
+  box-shadow: rgba(0, 0, 0, 0.30) 0px 0px 20px, rgba(0, 0, 0, 0.40) 0px 25px 30px;
+  animation: custom-bounce 2s ease 1;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -895,11 +907,7 @@ body {
     color: #000;
   }
 
-  #pb-settings {
-    background-image: linear-gradient(#EC9329, #EC9329 30%, #222 30%);
-  }
-
-  #pb-donate {
+  #pb-settings div, #pb-donate {
     background-image: linear-gradient(#333, #333 45%, #222 45%);
   }
 

diff --git a/src/skin/firstRun.html b/src/skin/firstRun.html
@@ -37,7 +37,7 @@ <h1 class="i18n_name"></h1>
         </a>
         <p id="pin-nudge-text"></p>
       </div>
-      <img id="pin-image" src="images/pinning-instructions.png" alt="i18n_intro_pin_instructions">
+      <img id="pin-image" src="images/pinning-instructions-numbered.png" alt="i18n_intro_pin_instructions">
     </div>
 
     <!-- intro -->
@@ -55,49 +55,44 @@ <h3 class="i18n_firstRun_title"></h3>
 
     <!-- privacy badger features -->
     <div id="pb-features-1" class="align-center">
-      <div>
-        <img src="images/learns-trackers.png" alt="">
+      <div class="small-12 large-3 cell">
+        <img src="images/popup-screenshot.png" alt="">
       </div>
-      <div>
-        <h3 class="i18n_intro_learns"></h3>
-        <p class="i18n_intro_learns_paragraph"></p>
+      <div class="cell">
+        <h3 class="i18n_intro_beyond_ads"></h3>
+        <p class="i18n_intro_beyond_ads_paragraph"></p>
+        <p class="i18n_intro_beyond_ads_paragraph2"></p>
       </div>
     </div>
     <div id="pb-features-2" class="align-center">
       <div class="cell hide-for-small-only">
-        <h3 class="i18n_intro_beyond_ads"></h3>
-        <p class="i18n_intro_beyond_ads_paragraph"></p>
+        <h3 class="i18n_intro_not_an_adblocker"></h3>
+        <p class="i18n_intro_learns_paragraph"></p>
+        <p class="i18n_intro_not_an_adblocker_paragraph2"></p>
       </div>
       <div class="small-12 large-3 cell">
-        <img src="images/catches-trackers.png" alt="">
-      </div>
-      <div class="cell hide-for-large hide-for-medium">
-        <h3 class="i18n_intro_beyond_ads"></h3>
-        <p class="i18n_intro_beyond_ads_paragraph"></p>
-      </div>
-    </div>
-    <div id="pb-features-3" class="align-center">
-      <div class="cell">
         <img src="images/not-ad-blocker.png" alt="">
       </div>
-      <div class="cell">
+      <div class="cell hide-for-large hide-for-medium">
         <h3 class="i18n_intro_not_an_adblocker"></h3>
-        <p class="i18n_intro_not_an_adblocker_paragraph"></p>
+        <p class="i18n_intro_learns_paragraph"></p>
+        <p class="i18n_intro_not_an_adblocker_paragraph2"></p>
       </div>
     </div>
+
     <div class="caret-down align-center">
       <a href="#pb-settings" class="scroll-it"><img src="images/carrot-down.svg" alt="i18n_next_section"></a>
     </div>
 
     <!-- privacy badger settings -->
-    <div id="pb-settings" class="align-center">
-      <div class="text">
-        <img src="images/disable-badger.png" alt="">
-        <p class="i18n_intro_disable_button text"></p>
-        <p class="i18n_intro_report_button"></p>
-        <p class="i18n_intro_privacy_note"></p>
+    <div id="pb-settings" class="small-12 medium-10 align-center text-center cell">
+      <div>
+        <h3 class="i18n_intro_open_popup"></h3>
+        <img src="images/toolbar-icon-circled.png" alt="i18n_intro_open_popup_alt" id="toolbar-icon">
+        <p class="i18n_intro_disable_button" id="disable-instructions"></p>
       </div>
     </div>
+
     <div class="caret-down align-center">
       <a href="#pb-donate" class="scroll-it"><img src="images/carrot-down.svg" alt="i18n_next_section"></a>
     </div>

diff --git a/src/skin/images/catches-trackers.png b/src/skin/images/catches-trackers.png
diff --git a/src/skin/images/disable-badger.png b/src/skin/images/disable-badger.png
diff --git a/src/skin/images/learns-trackers.png b/src/skin/images/learns-trackers.png
diff --git a/src/skin/images/pinning-instructions-numbered.png b/src/skin/images/pinning-instructions-numbered.png
diff --git a/src/skin/images/pinning-instructions-rtl.png b/src/skin/images/pinning-instructions-rtl.png
diff --git a/src/skin/images/pinning-instructions.png b/src/skin/images/pinning-instructions.png
diff --git a/src/skin/images/popup-screenshot.png b/src/skin/images/popup-screenshot.png
diff --git a/src/skin/images/toolbar-icon-circled.png b/src/skin/images/toolbar-icon-circled.png
diff --git a/src/skin/popup.css b/src/skin/popup.css
@@ -194,13 +194,13 @@ a.removeOrigin:hover {
 }
 
 /* body#main to avoid applying this to options page */
-body#main #blockedResourcesContainer, #special-browser-page, #disabled-site-message {
+body#main #blockedResourcesContainer, #special-browser-page, #disabled-site-message, #first-run-page {
     flex: 1;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }
-#special-browser-page, #disabled-site-message {
+#special-browser-page, #disabled-site-message, #first-run-page {
     text-align: center;
 }
 
@@ -300,7 +300,7 @@ button.cta-button:hover, a.cta-button:hover {
 #fittslaw {
     float: right;
 }
-#pbInstructions, #special-browser-page, #disabled-site-message, .toggle-header-title {
+#pbInstructions, #special-browser-page, #disabled-site-message, .toggle-header-title, #first-run-page {
     color: #505050;
     font-size: 16px;
     margin: 0;
@@ -620,6 +620,7 @@ a.overlay-close:hover {
     #pbInstructions,
     .toggle-header-title,
     #special-browser-page,
+    #first-run-page,
     #disabled-site-message {
         color: #ddd;
     }