Add modal overlay to nudge user to pin to toolbar

src/_locales/en_US/messages.json

@@ -359,17 +359,25 @@
         "message": "Privacy Policy",
         "description": "Shown at the bottom of the intro page."
     },
-    "intro_easy_to_manage": {
-        "message": "Easy to manage",
-        "description": "Intro page paragraph heading on Chrome."
-    },
-    "intro_easy_to_manage_paragraph": {
-        "message": "Pin this extension to your toolbar for easy access. The Privacy Badger icon will show you how many trackers it blocks on each page. Click on the icon to manage your privacy settings.",
-        "description": "Intro page paragraph on Chrome."
+    "intro_pin_nudge": {
+        "message": "First, $START_SPAN_TAG$pin Privacy Badger to your toolbar$END_SPAN_TAG$ for easy access to the \"$DISABLE_FOR_SITE$\" button.",
+        "description": "Part of a Chrome-only overlay on the intro page",
+        "placeholders": {
+            "start_span_tag": {
+                "content": "<span id='pin-nudge-cta'>"
+            },
+            "disable_for_site": {
+                "content": "$1",
+                "example": "Disable for this site"
+            },
+            "end_span_tag": {
+                "content": "</span>"
+            }
+        }
     },
-    "intro_pin_here": {
-        "message": "Pin extension here",
-        "description": "Shown on arrow pointing at Chrome extension icon"
+    "intro_pin_instructions": {
+        "message": "To pin Privacy Badger's icon, click on the puzzle piece icon in your browser toolbar. Then, click on the pin icon next to Privacy Badger.",
+        "description": "Alt text for pinning instructions image. Shown on the Chrome-only overlay of the intro page."
     },
     "share_button_title_facebook": {
         "message": "Share on Facebook",

src/lib/i18n.js

@@ -78,6 +78,17 @@ function setTextDirection() {
     ['.btn-silo', '.btn-silo div', '#allowlist-form > div > div > div', '#widget-site-exceptions-select-div', '#widget-site-exceptions-remove-button'].forEach((selector) => {
       toggle_css_value(selector, "float", "left", "right");
     });
+  } else if (document.location.pathname == "/skin/firstRun.html") {
+    $('#pin-nudge').css({
+      right: 'unset',
+      left: '15px'
+    });
+    $('#pin-image').css("transform", "scaleX(-1)");
+    $('#dismiss-nudge').css({
+      float: 'left',
+      right: 'unset',
+      left: '-5px'
+    });
   }
 }
 

src/skin/css/firstRun.css

@@ -410,7 +410,7 @@ header img {
 @media print, screen and (min-width: 40em) {
   header img {
     margin:1rem 0 0;
-    width:15rem;
+    width:12rem;
   }
 }
 header .title-bar h1 {
@@ -796,42 +796,69 @@ body {
   padding:4rem 0;
 }
 
+#overlay {
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+  background-color: #1f171769;
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+
 @keyframes bounce {
 	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
 	40% {transform: translateY(-20px);}
 	60% {transform: translateY(-5px);}
 }
 
-#pin-nudge-arrow {
+#dismiss-nudge {
+  float: right;
+  padding-bottom: 5px;
+  margin: 5px;
+  position: relative;
+  top: -5px;
+  right: -5px;
+}
+
+#dismiss-nudge img {
+  height: 20px;
+}
+
+#dismiss-nudge:hover img, #dismiss-nudge:focus img {
+  /* Calculated with https://codepen.io/sosuke/pen/Pjoqqp to match #F06A0A */
+  filter: invert(63%) sepia(46%) saturate(6632%) hue-rotate(356deg) brightness(95%) contrast(98%);
+}
+
+#pin-nudge-text {
+  line-height: 1.5;
+  width: 275px;
+  font-size: 17px;
+}
+
+#pin-nudge-cta {
+  font-family:"OpenSans-Bold",sans-serif;
+}
+
+#pin-image {
+  width: 275px;
+  border-radius: 8px;
+}
+
+#pin-nudge {
   background-color: #DFDFE6;
   position: fixed;
-  top: 25px;
-  right: 25px;
-  padding: 12px 20px 12px 10px;
+  top: 15px;
+  right: 15px;
+  padding: 25px;
   z-index: 1000;
   border-radius: 8px;
-  font-family:"OpenSans-Bold",sans-serif;
-  box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.15);
-  animation: bounce 2s ease infinite;
+  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;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
+  align-items: center;
   gap: 10px;
-  text-transform: uppercase;
-  font-size: 14px;
-}
-
-#arrow-point {
-  height: 20px;
-  width: 20px;
-  background-color: #DFDFE6;
-  transform: rotate(45deg) translateY(-50%);
-  position: absolute;
-  top: 0px;
-  right: 85px;
-}
-
-#puzzle-icon {
-  height: 20px;
 }
 
 #pb-privacy-policy, #pb-privacy-policy a {
@@ -886,4 +913,17 @@ body {
     border-left: 0.4275rem solid #555;
     color: #fff;
   }
+
+  #pin-nudge {
+    background-color: #555;
+  }
+
+  #dismiss-nudge img {
+    filter: invert(0.85);
+  }
+
+  #dismiss-nudge:hover img, #dismiss-nudge:focus img {
+    /* Calculated with https://codepen.io/sosuke/pen/Pjoqqp to match #F06A0A */
+    filter: invert(63%) sepia(46%) saturate(6632%) hue-rotate(356deg) brightness(95%) contrast(98%);;
+  }
 }

src/skin/firstRun.html

@@ -28,6 +28,18 @@ <h1 class="i18n_name"></h1>
       </div>
     </header>
 
+    <!-- Overlay nudging users to pin their extension (only shown on chromium browsers) -->
+    <div id="overlay" style="display:none;"></div>
+    <div id="pin-nudge" style="display:none;" role="dialog">
+      <div>
+        <a href="" id="dismiss-nudge" role="button" aria-label="i18n_report_close">
+          <img src="../icons/close.svg" alt="">
+        </a>
+        <p id="pin-nudge-text"></p>
+      </div>
+      <img id="pin-image" src="images/pinning-instructions.png" alt="i18n_intro_pin_instructions">
+    </div>
+
     <!-- intro -->
     <div id="intro" class="grid-x grid-padding-x align-center">
       <div class="small-12 medium-10 text-center cell">
@@ -41,29 +53,8 @@ <h3 class="i18n_firstRun_title"></h3>
       </div>
     </div>
 
-    <!-- arrow showing users where to pin their extension, only shown on chrome -->
-    <div id="pin-nudge-arrow" class="pin-nudge">
-      <img src="images/puzzle-piece.png" id="puzzle-icon">
-      <div class="i18n_intro_pin_here"></div>
-      <div id="arrow-point"></div>
-    </div>
-
     <!-- privacy badger features -->
-    <div id="pb-features-1" class="align-center pin-nudge">
-      <div class="cell hide-for-small-only">
-        <!-- instructions on how to open the popup, only shown on chrome -->
-        <h3 class="i18n_intro_easy_to_manage"></h3>
-        <p class="i18n_intro_easy_to_manage_paragraph"></p>
-      </div>
-      <div class="small-12 large-3 cell">
-        <img src="images/pinning-instructions-2.png" alt="">
-      </div>
-      <div class="cell hide-for-large hide-for-medium">
-        <h3 class="i18n_intro_easy_to_manage"></h3>
-        <p class="i18n_intro_easy_to_manage_paragraph"></p>
-      </div>
-    </div>
-    <div id="pb-features-2" class="align-center">
+    <div id="pb-features-1" class="align-center">
       <div>
         <img src="images/learns-trackers.png" alt="">
       </div>
@@ -72,7 +63,7 @@ <h3 class="i18n_intro_learns"></h3>
         <p class="i18n_intro_learns_paragraph"></p>
       </div>
     </div>
-    <div id="pb-features-3" class="align-center">
+    <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>
@@ -85,7 +76,7 @@ <h3 class="i18n_intro_beyond_ads"></h3>
         <p class="i18n_intro_beyond_ads_paragraph"></p>
       </div>
     </div>
-    <div id="pb-features-4" class="align-center">
+    <div id="pb-features-3" class="align-center">
       <div class="cell">
         <img src="images/not-ad-blocker.png" alt="">
       </div>

src/skin/js/firstRun.js

@@ -16,14 +16,63 @@ $(function () {
     }
   });
 
-  // Nudge Chrome users to pin the extension to their toolbar
-  if (navigator && navigator.userAgent && navigator.userAgent.match(/chrome/i)) {
-    $(".pin-nudge").show();
-
-    $(window).scroll(function () {
-      if ($(window).scrollTop() > $(document).height() * 0.5) {
-        $("#pin-nudge-arrow").fadeOut();
-      }
-    });
+  function hideNudgeOverlay() {
+    $("body").css('overflow', 'auto');
+    $("#pin-nudge").fadeOut();
+    $("#overlay").fadeOut();
+    document.removeEventListener("click", clickHandler);
+    document.removeEventListener("keydown", keydownHandler);
+  }
+
+  function clickHandler(e) {
+    // Hide the pin nudge when a user clicks outside the popup
+    if (!document.getElementById('pin-nudge').contains(e.target)) {
+      hideNudgeOverlay();
+    }
+  }
+
+  function keydownHandler(e) {
+    // Hide the pin nudge when a user presses 'Esc'
+    if (e.keyCode === 27) {
+      hideNudgeOverlay();
+    } else if (e.keyCode === 9) {
+      // Trap focus within the popup
+      $("#dismiss-nudge").trigger("focus");
+      e.preventDefault();
+    }
+  }
+
+  // Don't show the pin nudge in Firefox because extensions are pinned automatically
+  // chrome.action is only available in MV3 and chrome.browserAction is only available in <= MV2
+  // chrome.browserAction.getUserSettings doesn't exist in MV2 but does in Firefox
+  let is_chromium_mv3 = !!chrome.action;
+  let is_chromium_mv2 = chrome.browserAction && !chrome.browserAction.getUserSettings;
+  if (is_chromium_mv2 || is_chromium_mv3) {
+    $("#pin-nudge-text").html(chrome.i18n.getMessage("intro_pin_nudge", [chrome.i18n.getMessage("popup_disable_for_site")]));
+    $("#pin-nudge").show();
+    $("#overlay").show();
+    $("body").css('overflow', 'hidden');
+    document.addEventListener("click", clickHandler);
+    document.addEventListener("keydown", keydownHandler);
+  }
+
+  $("#dismiss-nudge").on("click", function (e) {
+    e.preventDefault();
+    hideNudgeOverlay();
+  });
+
+  let interval_id;
+  // Auto-dismiss the nudge once user pins Privacy Badger
+  async function checkIsPinned() {
+    let userSettings = await chrome.action.getUserSettings();
+    if (userSettings.isOnToolbar) {
+      hideNudgeOverlay();
+      clearInterval(interval_id);
+    }
+  }
+
+  // For Chromium, we can only check if PB is pinned in MV3
+  if (is_chromium_mv3) {
+    interval_id = setInterval(() => checkIsPinned(), 1000);
   }
 });

src/skin/popup.html

@@ -39,10 +39,9 @@
   <div id="instruction-outer">
   </div>
   <div id="instruction">
-    <a href="" id="fittslaw" role="button" aria-label="i18n_report_close"><svg width="26" height="22" fill="white">
-      <line x1="5" y1="5" x2="20" y2="20" style="stroke:rgb(22,22,22);stroke-width:3;fill:transparent"/>
-      <line x1="5" y1="20" x2="20" y2="5" style="stroke:rgb(22,22,22);stroke-width:3;fill:transparent"/>
-    </svg></a>
+    <a href="" id="fittslaw" role="button" aria-label="i18n_report_close">
+      <img src="../icons/close.svg" alt="">
+    </a>
 
     <div id="instruction-text">
       <div class="flex-wrapper">