Update first download page

src/_locales/en_US/messages.json

@@ -74,7 +74,7 @@
         "description": "Shown below the Donate button on the intro page."
     },
     "intro_not_an_adblocker": {
-        "message": "Not an ad blocker, I'm different",
+        "message": "Privacy Badger is not an ad blocker, it's different!",
         "description": "Intro page paragraph heading."
     },
     "report_success": {
@@ -105,10 +105,6 @@
         "message": "Click to return control of this domain to Privacy Badger",
         "description": "Tooltip shown when you hover over an undo arrow that appears when you move a domain slider away from its automatic setting."
     },
-    "next_section": {
-        "message": "next section",
-        "description": "Image alt. text on a couple of \"scroll down\" arrow buttons on the intro page."
-    },
     "extension_error_text": {
         "message": "Please <a href='https://www.eff.org/privacybadger#faq-I-found-a-bug!-What-do-I-do-now?' target='_blank'>tell us</a> about the following error:",
         "description": "Shown in the popup when there is a problem with the user's Privacy Badger extension that we want to encourage the user to tell us about."
@@ -130,9 +126,13 @@
         "description": "Checkbox label on the general settings page"
     },
     "intro_welcome": {
-        "message": "Privacy Badger automatically learns to block invisible trackers. Take a minute to see how.",
+        "message": "Check out what Privacy Badger can do.",
         "description": "Intro page welcome paragraph."
     },
+    "intro_instructions_open_popup": {
+        "message": "Give it a try, click on the Privacy Badger icon!",
+        "description": "instructions to open up the extensionn popup by clicking on the badger icon in the browser window, shown on first download page"
+    },
     "error_input": {
         "message": "What's Wrong?",
         "description": ""
@@ -248,8 +248,13 @@
         "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 '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."
+        "message": "To help other Privacy Badger users, please click $REPORT_ICON$ <span style='font-weight:bold'>'Report broken site'</span> when you encounter a site that's not working. 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.",
+        "placeholders": {
+            "report_icon": {
+                "content": "<span class=\"ui-icon ui-icon-mail-send\"></span>"
+            }
+        }
     },
     "options_title": {
         "message": "Privacy Badger Options",
@@ -323,10 +328,6 @@
         "message": "Advanced",
         "description": "Subheading on the general settings options page."
     },
-    "intro_next_button": {
-        "message": "Take the tour",
-        "description": "Intro page welcome button."
-    },
     "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.",
@@ -342,9 +343,13 @@
         "description": "Dropdown control setting on the Tracking Domains options page tab."
     },
     "firstRun_title": {
-        "message": "Thank you for installing Privacy Badger!",
+        "message": "Thanks for installing Privacy Badger!",
         "description": ""
     },
+    "firstRun_open_popup_title": {
+        "message": "Just one more thing: here's how to open Privacy Badger.",
+        "description": "title header that shows how to open the extension popup on the page the user first sees after downloading Privacy Badger"
+    },
     "import_select_file": {
         "message": "Please select a file to import.",
         "description": ""
@@ -353,14 +358,6 @@
         "message": "Center the slider to block cookies",
         "description": ""
     },
-    "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."
@@ -488,7 +485,7 @@
         "description": ""
     },
     "intro_privacy_note": {
-        "message": "Privacy Badger will NEVER share data about your browsing unless you choose to share it.",
+        "message": "Privacy Badger is ready to help protect your privacy! Privacy Badger will NEVER share data about your browsing unless you choose to share it.",
         "description": "Intro page paragraph."
     },
     "options_domain_list_trackers": {
@@ -513,7 +510,7 @@
         "description": "Shown on the Tracking Domains tab on the options page if all tracking domains have been removed."
     },
     "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!",
+        "message": "Instead of keeping lists of what to block, Privacy Badger learns automatically -- and discovers trackers based on their behavior.",
         "description": "Intro page paragraph."
     },
     "options_domain_status_filter": {
@@ -533,8 +530,13 @@
         "description": "Tooltip for an \"information\" icon next to the domain search input on the Tracking Domains options page tab."
     },
     "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."
+        "message": "If you think Privacy Badger is breaking a page (a video doesn't play, for example), you can click the $DISABLE_ICON$ <span style='font-weight:bold'>'Disable'</span> 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.",
+        "placeholders": {
+            "disable_icon": {
+                "content": "<span class=\"ui-icon ui-icon-power\"></span>"
+            }
+        }
     },
     "intro_link_policy": {
         "message": "Privacy Policy",

src/skin/css/firstRun.css

@@ -413,7 +413,7 @@ header img {
     width:15rem;
   }
 }
-header .title-bar h1 {
+header .title-bar h1, .title-bar h3{
   color:white;
   font-family:"ChunkFive",serif;
 }
@@ -681,9 +681,18 @@ body {
 #intro {
   padding:2rem 0rem 4rem;
 }
+#intro h3 {
+  margin-top: 2rem;
+}
+.how-to-open-popup-image {
+  margin-left: 1rem;
+  margin-right: 1rem;
+  margin-bottom: 20px;
+  display: inline-block;
+}
 @media print, screen and (min-width: 40em) {
   #intro {
-    padding:4rem 0rem 14rem;
+    padding:4rem 0rem 4rem;
   }
 }
 [id*="pb-features-"],#pb-settings {
@@ -729,6 +738,9 @@ body {
 #pb-settings {
   background-image:linear-gradient(#EC9329, #EC9329 30%, #fff 30%);
 }
+#pb-settings img {
+        margin-bottom: 1rem;
+}
 [id*="pb-donate"] {
   display:-ms-flexbox;
   display:flex;

src/skin/firstRun.html

@@ -8,6 +8,7 @@
   <link type="text/css" href="css/firstRun.css" rel="stylesheet" />
   <script type="text/javascript" src="/lib/vendor/jquery-3.5.1.js"></script>
   <script type="text/javascript" src="/lib/vendor/jquery.smooth-scroll.js"></script>
+  <link type="text/css" href="/lib/vendor/jquery-ui-iconfont-2.3.2/jquery-ui-1.12.icon-font.css" rel="stylesheet" />
   <script type="text/javascript" src="/lib/i18n.js"></script>
   <script type="text/javascript" src="js/firstRun.js"></script>
 </head>
@@ -26,29 +27,48 @@
       <div class="title-bar small-12 text-center cell">
         <h1 class="i18n_name"></h1>
       </div>
+      <div class="title-bar small-12 text-center cell">
+        <h3 class="i18n_firstRun_title"></h3>
+      </div>
     </header>
 
     <!-- intro -->
-    <div id="intro" class="grid-x grid-padding-x align-center">
+    <div id="intro" class="align-center">
       <div class="small-12 medium-10 text-center cell">
-        <h3 class="i18n_firstRun_title"></h3>
+        <h3 class="i18n_firstRun_open_popup_title"></h3>
       </div>
-      <div class="small-12 medium-10 large-4 text cell">
-        <p class="i18n_intro_welcome"></p>
+      <div class="small-12 medium-10 large-4 text-center">
+        <p class="i18n_intro_instructions_open_popup"></p>
       </div>
-      <div class="small-12 text-center cell">
-        <a href="#pb-features-1" class="i18n_intro_next_button button large scroll-it"></a>
+      <!-- instructions on how to open the popup, based on browser -->
+      <div class="text-center">
+        <img class="how-to-open-popup-image" src="" id="how-to-open-popup-1">
+        <img class="how-to-open-popup-image" src="" id="how-to-open-popup-2">
+        <img class="how-to-open-popup-image" src="" id="how-to-open-popup-3">
+      </div>
+      <div class="small-12 medium-10 large-4 text-center">
+        <h3 class="i18n_intro_welcome"></h3>
+      </div>
+    </div>
+
+    <!-- privacy badger settings -->
+    <div id="pb-settings" class="align-center">
+      <div class="text-center">
+        <img id="report-and-disable-in-popup" src="images/disable-and-report-feature-highlight.png" alt="">
+        <p class="i18n_intro_privacy_note"></p>
+        <p class="i18n_intro_disable_button text"></p>
+        <p class="i18n_intro_report_button"></p>
       </div>
     </div>
 
     <!-- privacy badger features -->
-    <div id="pb-features-1" class="align-center">
-      <div>
-        <img src="images/learns-trackers.png" alt="">
+    <div id="pb-features-3" class="align-center">
+      <div class="cell">
+        <img src="images/badger-student.png" alt="">
       </div>
-      <div>
-        <h3 class="i18n_intro_learns"></h3>
-        <p class="i18n_intro_learns_paragraph"></p>
+      <div class="cell">
+        <h3 class="i18n_intro_not_an_adblocker"></h3>
+        <p class="i18n_intro_not_an_adblocker_paragraph"></p>
       </div>
     </div>
     <div id="pb-features-2" class="align-center">
@@ -57,43 +77,18 @@ <h3 class="i18n_intro_beyond_ads"></h3>
         <p class="i18n_intro_beyond_ads_paragraph"></p>
       </div>
       <div class="small-12 large-3 cell">
-        <img src="images/catches-trackers.png" alt="">
+        <img src="images/not-ad-blocker.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">
-        <h3 class="i18n_intro_not_an_adblocker"></h3>
-        <p class="i18n_intro_not_an_adblocker_paragraph"></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>
-    </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>
 
     <!-- donate ask -->
     <div id="pb-donate" class="align-center">
       <div class="text-center">
-        <img src="images/pb-logo-outline.svg" alt="">
+        <img src="../icons/badger-bw-noborder.svg" alt="">
         <h3 class="i18n_intro_donate_heading"></h3>
         <p class="i18n_intro_donate1 text"></p>
       </div>

src/skin/js/firstRun.js

@@ -19,6 +19,81 @@ $(window).on("load", function () {
       }
     }
   });
+
+  // detect user's browser and replace images for walkthru on how to open the popup
+  function setPopupWalkthroughToBrowserType() {
+    // paths to the various images specific to each browser type
+    let browserImageSrcMap = {
+      chrome1: "images/extension-icon-in-chrome-1.png",
+      chrome2: "images/extension-icon-in-chrome-2.png",
+      chrome3: "images/extension-icon-in-chrome-3.png",
+      edge: "images/extension-icon-in-edge.png",
+      firefox: "images/extension-icon-in-firefox.png",
+      firefoxAndroid1: "images/firefox-android-searchbar.png",
+      firefoxAndroid2: "images/firefox-android-addons-menu.png",
+      firefoxAndroid3: "images/firefox-android-extension-icon.png",
+      opera1: "images/extension-icon-in-opera-1.png",
+      opera2: "images/extension-icon-in-opera-2.png",
+      opera3: "images/extension-icon-in-opera-3.png"
+    };
+
+    // determine browser type by user agent
+    let browser;
+    if (navigator && navigator.userAgent) {
+      const ua = navigator.userAgent;
+      if (ua.match(/Android.+Firefox/i)) {
+        browser = 'firefox-on-android';
+      } else if (ua.match(/Firefox/i)) {
+        browser = 'firefox';
+      } else if (ua.match(/OPR|opera/i)) {
+        browser = 'opera';
+      } else if (ua.match(/chrome\/.+edge?\//i)) {
+        browser = 'edge';
+      } else if (ua.match(/chrome/i)) {
+        browser = 'chrome';
+      }
+    }
+
+    let popupWalkthruImg1 = $("#how-to-open-popup-1");
+    let popupWalkthruImg2 = $("#how-to-open-popup-2");
+    let popupWalkthruImg3 = $("#how-to-open-popup-3");
+
+    // helper function to quickly set the image src paths to ones defined in browserImageSrcMap
+    function setSrcs (path1, path2, path3) {
+      popupWalkthruImg1.attr('src', path1);
+      popupWalkthruImg2.attr('src', path2);
+      popupWalkthruImg3.attr('src', path3);
+    }
+
+    // set popup-walkthrough images on page based on browser type
+    switch (browser) {
+    case 'chrome':
+      setSrcs(browserImageSrcMap.chrome1, browserImageSrcMap.chrome2, browserImageSrcMap.chrome3);
+      break;
+    case 'edge':
+      setSrcs('', browserImageSrcMap.edge, '');
+      break;
+    case 'firefox':
+      setSrcs('', browserImageSrcMap.firefox, '');
+      break;
+    case 'firefox-on-android':
+      setSrcs(browserImageSrcMap.firefoxAndroid1, browserImageSrcMap.firefoxAndroid2, browserImageSrcMap.firefoxAndroid3);
+      // unlike all other cases, flip the report and disable buttons image
+      $("#report-and-disable-in-popup").attr("src", "images/firefox-android-report-disable-buttons.png");
+      // change images and how they stack based on size of screen
+      if (window.innerWidth > 600) {
+        popupWalkthruImg1.attr("src", "images/firefox-android-window.png");
+      } else {
+        popupWalkthruImg1.css({"max-width":"80%", "min-width":"380px", "margin-bottom":"60px"});
+        popupWalkthruImg2.css("margin-bottom", "60px");
+      }
+      break;
+    case 'opera':
+      setSrcs(browserImageSrcMap.opera1, browserImageSrcMap.opera2, browserImageSrcMap.opera3);
+      break;
+    }
+  }
+  setPopupWalkthroughToBrowserType();
 });