Show Chromium users how to pin extension in toolbar #2983

lenacohen · 2024-06-13T22:57:47Z

Encourage Chrome users to pin Privacy Badger to their toolbar by:

Adding information about how and why to pin the extension
Adding an arrow pointing to where they can click to pin the extension

Test by running branch in Chrome to see changes (make runch) and another browser to confirm nothing changed (make runff)

Seeking feedback on the design and language, especially for the arrow.

Also, following up on #2959 and d1a748c, I fixed a UI bug I noticed with the Share icons on narrow screens:

Part of #2781

ghostwords

Thank you! First impressions:

The nudge needs to support dark mode. The text is invisible at the moment.
The nudge would ideally account for scrollbars. My scrollbar doesn't autohide so the tail/pointer is off by the scrollbar's amount (I think). Not a blocking issue, but would be nice if we could handle this properly. Dunno yet if there is a good way for us to do so.
We should focus on teaching the user how to disable Privacy Badger. Something like, 'Pin ~~this extension~~Privacy Badger 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.~~ to the "Disable for this site" button.' But a bit more than this -- let's think about how to combine the "If you think Privacy Badger is breaking a page" text at the bottom with this nudge. The big idea is that we used to tell users about disabling Privacy Badger way down on the welcome page and now we want to do it at the top. Let's also review our previous work in Update first download page #2812 in light of all of this.
We should detect if the user goes through with pinning and auto-close the nudge then.
We should let the user close the nudge themselves with an "X" maybe.

ghostwords · 2024-06-18T15:35:47Z

src/skin/js/firstRun.js

@@ -15,4 +15,18 @@ $(function () {
      });
    }
  });
+
+  // Nudge Chrome users to pin the extension to their toolbar
+  if (navigator && navigator.userAgent && navigator.userAgent.match(/chrome/i)) {


Our goal here is to not show the nudge in browsers where we can auto-pin using the default_area property, right? That's only Firefox. All Chromium-based browsers (Edge, Opera, Brave, ...) should also get this prompt.

We should avoid checking the UA whenever possible because users change their UA or blank it out among other reasons.

browser.browserAction.getUserSettings() exists in Firefox and will async return an object with isOnToolbar set to true.
chrome.action.getUserSettings() exists in MV3 Chrome and will async return an object with isOnToolbar set to false.

We should probably use this to decide whether to show the nudge or not.

I thought this change was only for Chrome users but this is a good idea for how to target all browsers except for Firefox! Thank you!

One complication with including Edge, Opera, and Brave is that the icons that users need to click are a little different in each browser. For example, Opera has a box instead of a puzzle piece as the extension icon in the toolbar. To pin on Edge, users select an eye icon instead of a pin icon. So we might need to detect which browser the page is on and load a different image for each browser. That's what Daly did in this PR.

Let's discuss what approach to take for different browsers when we talk about a new design proposal?

lenacohen · 2024-06-24T22:03:28Z

I don't love the popup message but I'm still thinking about alternatives. I'm worried the "Disable for this site" reference needs more context or is too specific, since it's not all the popup has. Here's one alternative that's a bit longer:

Pin Privacy Badger to your toolbar for easy access to your tracker-blocking settings and the "Disable for this site" button.

ghostwords

Thank you! Left some feedback inline, plus:

Is the puzzle piece icon also unused?
The overlay should appear on the left w/ RTL locales. Let's flip the image in the overlay too.
Does running any new images through https://imageoptim.com/mac help save space?
We could also use a placeholder for "Disable for this site" in '... access to the "Disable for this site" button'. Then, we won't have to worry about having the translation here and in the popup being in sync.
I wonder if we should gray out the rest of the page to draw attention to, and to force interaction with the overlay. Kind of like what happens in the popup when badger.criticalError is set in the background process. I am not sure if we should, just concerned whether the overlay is too easy to ignore. The orange hero background, plus the "Take the tour" CTA button, plus the social sharing buttons vs. the gray overlay, you know?
Maybe the X should be smaller?

src/skin/firstRun.html

src/_locales/en_US/messages.json

src/skin/css/firstRun.css

src/skin/js/firstRun.js

src/skin/css/firstRun.css

src/skin/firstRun.html

lenacohen · 2024-06-28T20:33:41Z

Thank you! Left some feedback inline, plus:

Is the puzzle piece icon also unused?

The overlay should appear on the left w/ RTL locales. Let's flip the image in the overlay too.

Does running any new images through https://imageoptim.com/mac help save space?

We could also use a placeholder for "Disable for this site" in '... access to the "Disable for this site" button'. Then, we won't have to worry about having the translation here and in the popup being in sync.

I wonder if we should gray out the rest of the page to draw attention to, and to force interaction with the overlay. Kind of like what happens in the popup when badger.criticalError is set in the background process. I am not sure if we should, just concerned whether the overlay is too easy to ignore. The orange hero background, plus the "Take the tour" CTA button, plus the social sharing buttons vs. the gray overlay, you know?

Maybe the X should be smaller?

Thanks for the feedback! I removed the unused puzzle piece icon and ran the new images through imageoptim. I like the gray background while the nudge is showing!

ghostwords · 2024-06-28T20:58:58Z

src/skin/js/firstRun.js

+  // 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 isChromiumMv3 = chrome.action;


!!chrome.action to make a boolean

Booleans should get snake case names, same as integers.

ghostwords

Some more nits and a question.

ghostwords · 2024-06-28T21:01:58Z

src/skin/js/firstRun.js

+  // 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 isChromiumMv3 = chrome.action;


Booleans should get snake case names, same as integers.

src/_locales/en_US/messages.json

ghostwords · 2024-06-28T21:10:36Z

src/_locales/en_US/messages.json

@@ -359,6 +359,22 @@
        "message": "Privacy Policy",
        "description": "Shown at the bottom of the intro page."
    },
+    "intro_pin_nudge": {
+        "message": "$START_SPAN_TAG$First, pin Privacy Badger to your toolbar$END_SPAN_TAG$ for easy access to the \"$DISABLE_FOR_SITE$\" button.",


Should "First," be bolded? Not sure, just wondering which one looks/reads better.

I originally thought it looked better with "First" bolded but now I think the opposite! What do you think? I don't have a strong preference

src/skin/firstRun.html

src/skin/js/firstRun.js

lenacohen changed the title ~~Nudge Chrome users to pin extension in toolbar~~ Show Chrome users how to pin extension in toolbar Jun 13, 2024

lenacohen requested a review from ghostwords June 13, 2024 22:58

ghostwords added the translations label Jun 13, 2024

lenacohen added the ui User interface modifications; related to but not the same as the "ux" label label Jun 14, 2024

ghostwords reviewed Jun 17, 2024

View reviewed changes

ghostwords reviewed Jun 18, 2024

View reviewed changes

lenacohen changed the title ~~Show Chrome users how to pin extension in toolbar~~ Show Chromium users how to pin extension in toolbar Jun 24, 2024

lenacohen requested a review from ghostwords June 24, 2024 22:03

ghostwords reviewed Jun 27, 2024

View reviewed changes

src/skin/firstRun.html Show resolved Hide resolved

lenacohen requested a review from ghostwords June 28, 2024 20:34

ghostwords reviewed Jun 28, 2024

View reviewed changes

lenacohen requested a review from ghostwords July 1, 2024 17:18

lenacohen force-pushed the nudge-users-to-pin branch from 02e971d to 89e214d Compare July 2, 2024 15:25

Add modal overlay to nudge Chromium users to pin to toolbar

70b51c2

lenacohen force-pushed the nudge-users-to-pin branch from 89e214d to dd8ca9e Compare July 2, 2024 17:47

Fix layout bug with social share icons on narrow screens

0822745

lenacohen force-pushed the nudge-users-to-pin branch from dd8ca9e to 0822745 Compare July 2, 2024 19:23

ghostwords approved these changes Jul 2, 2024

View reviewed changes

ghostwords merged commit 83ffd80 into master Jul 2, 2024
0 of 2 checks passed

ghostwords deleted the nudge-users-to-pin branch July 2, 2024 21:09

ghostwords mentioned this pull request Jul 18, 2024

Skip rendering pin reminder when already pinned in MV3 Chrome #2999

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Show Chromium users how to pin extension in toolbar #2983

Show Chromium users how to pin extension in toolbar #2983

lenacohen commented Jun 13, 2024 •

edited by ghostwords

Loading

ghostwords left a comment •

edited

Loading

ghostwords Jun 18, 2024

lenacohen Jun 18, 2024

lenacohen commented Jun 24, 2024

ghostwords left a comment •

edited

Loading

lenacohen commented Jun 28, 2024

ghostwords Jun 28, 2024

ghostwords Jun 28, 2024

ghostwords left a comment

ghostwords Jun 28, 2024

ghostwords Jun 28, 2024

lenacohen Jul 1, 2024

ghostwords Jul 1, 2024

Show Chromium users how to pin extension in toolbar #2983

Show Chromium users how to pin extension in toolbar #2983

Conversation

lenacohen commented Jun 13, 2024 • edited by ghostwords Loading

ghostwords left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lenacohen commented Jun 24, 2024

ghostwords left a comment • edited Loading

Choose a reason for hiding this comment

lenacohen commented Jun 28, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ghostwords left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lenacohen commented Jun 13, 2024 •

edited by ghostwords

Loading

ghostwords left a comment •

edited

Loading

ghostwords left a comment •

edited

Loading