1808441 - Add Cookie Banner Promo on PB new tab

Status: VERIFIED FIXED

(Firefox :: Messaging System, task, P1)

Description

[Shane Hughes [:aminomancer]]

Description

As a private window user on desktop, I want to be informed of the availability of the new cookie banner management feature so I can decide to opt in.

Acceptance Criteria

On first launch of a private window following the roll-out, users who have not opted into cookie banner handling yet are exposed to a UI informing them about the availability of the feature. 

• The UI lets users enable cookie banner handling
• The message gets displayed a maximum of X times
• Telemetry helps count users prompted and engagement
• Priority of message vs Firefox Focus, Pin Private Browsing Window and VPN
• All locales, all regions

Figma prototype

Comment 1

[Shane Hughes [:aminomancer]]

Attachment: Bug 1808441 - Add Cookie Banner Promo on PB new tab. r=pdahiya,#omc-reviewers

Comment 2

[Shane Hughes [:aminomancer]]

Attachment: Technical Plan

Comment 3

[Shane Hughes [:aminomancer]]

Attachment: Pre-release Checklist

Comment 4

[Shane Hughes [:aminomancer]]

Hi Romain, I figured you probably have this covered already but just want to check if there will be an update to the copy for this promo. The prototype currently says "Firefox now tries to automatically reject cookies. If a reject option isn’t available, Firefox may accept all cookies to dismiss the banner." But with the new behavior after the privacy review (reject all, do nothing if banner can't be rejected), the disclaimer about possibly accepting cookies is no longer necessary/accurate. Thanks!

Edit: Don't worry about it, I found your doc and I can see the descriptions have been updated. Just give me a go ahead when the copy is final? Thanks

Comment 5

[Punam Dahiya [:pdahiya]]

Attachment: Cookie Banner Promo Screenshot.png

Comment 6

[Shane Hughes [:aminomancer]]

Hi Romain, just checking to confirm that the above looks right to you. (Figma prototype)

At a glance, there's a visual discrepancy between the implementation and the prototype: the promo and info cards are wider than the searchbar, whereas in the prototype, they are of equal width. I'm thinking equal width looks better, but since that's a general issue not specific to the promo card, it's probably better resolved in its own bug in Firefox::New Tab Page.

Also, the "Learn more" link is laid out vertically in our implementation, but inline in the prototype. I'm guessing it's just a CSS display issue. And finally, the space between the searchbar and the promo card, and the promo card and the info card, are inconsistent. I can file new bugs for those issues though.

Comment 7

[Punam Dahiya [:pdahiya]]

Also, the "Learn more" link is laid out vertically in our implementation, but inline in the prototype. I'm guessing it's just a CSS display issue. And finally, the space between the searchbar and the promo card, and the promo card and the info card, are inconsistent. I can file new bugs for those issues though.

Will be great to get feedback on Cookie banner specific final content and image. Promo and info (Learn More) section uses generic styles and layout and unless a blocker should be kept as is.

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/bda8206cac2f
Add Cookie Banner Promo on PB new tab. r=omc-reviewers,flod,pdahiya,emcminn

Comment 9

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/bda8206cac2f

Comment 10

[Romain Testard [:RT]]

(In reply to Shane Hughes [:aminomancer] from comment #6)

Hi Romain, just checking to confirm that the above looks right to you. (Figma prototype)

At a glance, there's a visual discrepancy between the implementation and the prototype: the promo and info cards are wider than the searchbar, whereas in the prototype, they are of equal width. I'm thinking equal width looks better, but since that's a general issue not specific to the promo card, it's probably better resolved in its own bug in Firefox::New Tab Page.

Also, the "Learn more" link is laid out vertically in our implementation, but inline in the prototype. I'm guessing it's just a CSS display issue. And finally, the space between the searchbar and the promo card, and the promo card and the info card, are inconsistent. I can file new bugs for those issues though.

Thanks Shane

• Regarding the "Learn more" link - I think in line is right given it's the current set-up on private new tab @misha can confirm
• Regarding the promo and info cards width - your implementation seems to align with the current private new tab set-up so I wonder if the width on Figma was intentional - @misha?
• I notice the call to action button color is different - @misha can you please confim which is the right one?
• the

Comment 11

[Shane Hughes [:aminomancer]]

Ah, nice catch. Thanks for pointing that out... the call to action button color is a bit of an oddity. Normally, private browsing windows get a dark theme, regardless of the user's settings. But the way that's handled is different from the actual dark theme. So, if you have light mode enabled and open a PBM window, some things will still be colored like they are in a normal light mode window. I'm sure this is a bug, since designs for private browsing seem to consistently use the dark color scheme, and everything else in PBM uses it. I'll file a bug.

Comment 12

[Marius Coman [:mcoman], Ecosystem QA]

I have verified this task using the steps provided here and I can confirm the following:

• The "Cookie Banner Promo" is displayed on the "Private Browsing" window if the browser.promo.cookiebanners.enabled pref is set to true in the "about:config" page.
• The cookiebanners.service.mode pref is set to 1 after the primary button from the "Cookie Banner Promo" is clicked.
• The "Cookie Banner Promo" is no longer displayed on new "Private Browsing" windows after the primary button was clicked.

Verified using the latest Firefox Nightly (112.0a1 Build ID - 20230221052246) installed on Windows 10 x64, macOS 12.6.1, and Ubuntu 22.04 x64.

Comment 13

[misha [:mbruk]]

(In reply to Romain Testard [:RT] from comment #10)

(In reply to Shane Hughes [:aminomancer] from comment #6)

Hi Romain, just checking to confirm that the above looks right to you. (Figma prototype)

At a glance, there's a visual discrepancy between the implementation and the prototype: the promo and info cards are wider than the searchbar, whereas in the prototype, they are of equal width. I'm thinking equal width looks better, but since that's a general issue not specific to the promo card, it's probably better resolved in its own bug in Firefox::New Tab Page.

Also, the "Learn more" link is laid out vertically in our implementation, but inline in the prototype. I'm guessing it's just a CSS display issue. And finally, the space between the searchbar and the promo card, and the promo card and the info card, are inconsistent. I can file new bugs for those issues though.

Thanks Shane

• Regarding the "Learn more" link - I think in line is right given it's the current set-up on private new tab @misha can confirm
• Regarding the promo and info cards width - your implementation seems to align with the current private new tab set-up so I wonder if the width on Figma was intentional - @misha?
• I notice the call to action button color is different - @misha can you please confim which is the right one?
• the

Thanks for catching this!
Regarding the "Learn more" link - in line is right :)

• Regarding the promo and info cards width - your implementation looks good
• I notice the call to action button color is different - the button should be our dark theme color!

Comment 14

[misha [:mbruk]]

(In reply to Shane Hughes [:aminomancer] from comment #6)

Hi Romain, just checking to confirm that the above looks right to you. (Figma prototype)

At a glance, there's a visual discrepancy between the implementation and the prototype: the promo and info cards are wider than the searchbar, whereas in the prototype, they are of equal width. I'm thinking equal width looks better, but since that's a general issue not specific to the promo card, it's probably better resolved in its own bug in Firefox::New Tab Page.

Also, the "Learn more" link is laid out vertically in our implementation, but inline in the prototype. I'm guessing it's just a CSS display issue. And finally, the space between the searchbar and the promo card, and the promo card and the info card, are inconsistent. I can file new bugs for those issues though.

not sure if this was already addressed but the illustration looks broken (the stop sign stroke, let me know if i can assist in exporting the graphic!)