Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New Tab Page Branded Wallpapers (desktop) #4075

Merged
merged 59 commits into from
Jan 27, 2020
Merged

New Tab Page Branded Wallpapers (desktop) #4075

merged 59 commits into from
Jan 27, 2020

Conversation

petemill
Copy link
Member

@petemill petemill commented Nov 26, 2019

Branded Wallpapers for New Tab Page (NTP).

Enables a new type of wallpaper for NTP that shows every 4th page view (or 2nd after any browser or profile startup). This wallpaper comes with a branding 'logo' and a destination URL. The wallpaper can have multiple backgrounds that are shown in sequence for each page view which shows this special wallpaper.

Fixes:

Follow-ups and fixes after this PR:

Enabling

The feature itself is behind a feature flag for now. Demo content for the feature is behind a second feature flag.

image

Data

Data is retrieved remotely via region-specific component. Component contains JSON file which describes the wallpaper image filenames, the logo image filename, the company name, image alt-text, and a destination url for clicking on the logo. The referenced image files are also contained within the component.

If the Demo feature flag is Enabled, then this remote component data will not be used. Instead, data built-in to the binary will be used.

If a CLI flag --ntp-branded-data-path is provided with a valid FS directory path, then that directory will be used and the remote component will not be used or fetched.

NTP Rewards widget changes:

The rewards widget has been changed to inform users about the Branded Wallpaper for the following states:

  • Pre opt-in Rewards
  • Post opt-in Rewards, pre opt-in Ads
  • Post opt-in Rewards, post opt-in Ads
    It also has been adapted to show itself for the above states even when the Rewards Widget is turned OFF. In this context, it will be shown as dismiss-able and only when there is a Branded Wallpaper being displayed.

NTP other front-end general changes:

Many front-end changes to the NTP were also made to accommodate a less rigid grid which allows items to be side-by-side more often (mostly so that the Logo widget can fold 'upwards' next to the Rewards widget). The grid also allows the space of all items to collapse when the user removes each one.

  • Changed the grid to be auto flow, so that items collapse when turned off. This required quite a bit of re-working of css for the Page and Widget components. Complication here was making sure footer elements were always at the bottom. Can't specify explicit row number when the rows are auto-generated by css, so had to go to back to a row count definition for different breakpoints. We'll need to increase that if we add more items. Though I expect a NTP redesign will come soon, from what I've seen from design team.
  • Also changed the grid row definitions to allow certain items to be side-by-side when the viewport height decreases, like the Branded Logo next to the Rewards Widget, etc. This was done via row-start, row-end and column span rules.
  • Tightened up space in the Page and the widgets to allow more to fit in the view at smaller viewports now that there are more things. The aim was for the Branded Logo to fit on as many screen sizes as possible without scroll.

Test plans (In progress...)

1. Without the feature flag, nothing happens

  1. Fresh or previous profile
  2. Refresh New Tab Page multiple times. You should not see a Sponsored Background Image
  3. Open NTP Preferences dialog. There should be no option for Sponsored Background Image

2. With the feature flag and demo feature flag, demo sponsored content is shown

  1. Fresh or previous profile
  2. Visit chrome://flags and turn on both above feature flags
  3. Relaunch browser
  4. Refresh NTP until sponsored background is shown. Internal demo sponsored background is the "Technikke" background with NO green lines.

3. Remote content is fetched

(only works whilst in pre-release phase)
0. Fresh or previous profile
0. System OS region set to "United States"

  1. Visit chrome://flags and turn on only the "Branded Wallpapers" feature flag
  2. Relaunch browser
  3. Refresh NTP until sponsored background is shown. Internal demo sponsored background is the "Technikke" background WITH green lines.

4. Blank Remote content is fetched and parsed

(only works whilst in pre-release phase)
0. Fresh or previous profile
0. System OS region set to "Canada"

  1. Visit chrome://flags and turn on only the "Branded Wallpapers" feature flag
  2. Relaunch browser
  3. Refresh NTP more than 5 times. NO sponsored background image should be seen.

5. Branded Wallpaper shows every 4th NTP view and on the 2nd after browser or profile startup

  1. Fresh or previous profile
  2. Visit chrome://flags and turn on BOTH above feature flags
  3. Relaunch browser, and each time the browser starts:
  4. On the 1st view of NTP, a regular background is shown
  5. On the 2nd view of NTP (either refresh or new Tab), a sponsored image is shown.
  6. On the 3rd - 5th views of NTP (either refresh or new Tab), a regular background is shown.
  7. On the 6th view of NTP (either refresh or new Tab), a sponsored image is shown.
  8. On the 7th - 9th views of NTP (either refresh or new Tab), a regular background is shown.
  9. On the 10th view of NTP (either refresh or new Tab), a sponsored image is shown.
  10. etc

6. Multiple background images are shown in succession

  1. Fresh or previous profile
  2. Visit chrome://flags and turn on BOTH above feature flags
  3. Relaunch browser, and each time the browser starts:
  4. The first sponsored image shown is the Record, the second is the Record Player, and the third is the Hand. The 3 images then repeat in the same order.

7. Opting out works

  1. Fresh or previous profile
  2. Visit chrome://flags and turn on BOTH above feature flags
  3. Relaunch the browser
  4. On the NTP, open the Settings dialog and UNCHECK "Show Sponsored Images".
  5. With multiple refreshes of the NTP, a sponsored image is never seen.

8. Re-opting-in works

  1. Fresh or previous profile
  2. Visit chrome://flags and turn on BOTH above feature flags
  3. Relaunch the browser
  4. On the NTP, open the Settings dialog and UNCHECK "Show Sponsored Images".
  5. With multiple refreshes of the NTP, a sponsored image is never seen.
  6. On the NTP, open the Settings dialog and CHECK "Show Sponsored Images".
  7. After some NTP refreshes, a sponsored image IS seen.

9. NTP Grid items fit side-by-side

different for different window widths

image

image

10. The space for hidden grid items collapses

Window is wider than ~980px
On any NTP page (sponsored or not)

  • In NTP settings dialog, turn off stats
    -> Top sites should move up
  • Turn off clock
    -> Rewards widget should move up
  • Try all variations
    -> Footer does not move above other elements (😬 totally possible if calculations are incorrect 😬 )
    On Sponsored Wallpaper NTP
  • Whenever the left column is shorter than the right column, and the page height is decreased, the logo should move up to be next to the right column[1]
    Window is smaller than 800px
  • Single-column items move up when higher items are turned off
  • Footer is always at the bottom

[1]
image

All items collapse to single column when there is not enough space for 2 columns

Branded wallpaper logo is clickable

On any sponsored Image, clicking the logo will open the destination site (brave.com for demo ads) in the current tab.

Test plans for Rewards Widget when Sponsored Images are shown

The plans below are part of the following flow-chart (suggest right-click and "Open Image in New Tab").

0bca5fc3-db76-4ff2-b694-c2afeac07ad9

11. Rewards widget shows opt-in state (rewards)

  • Rewards OFF
  • Rewards widget ON
  • Sponsored Image being shown
    -> Displays wallpaper-related opt-in "to get paid" state (always)

12. Rewards widget shows opt-in state (ads)

  • Rewards widget ON
  • Rewards ON
  • Rewards Ads OFF
  • Sponsored Image being shown
    -> Displays wallpaper-related opt-in-to-ads to get "paid" state (once)
    -> Does not show on subsequent page views when dismissed

13. Rewards widget shows opt-in state even when disabled

  • Rewards OFF
  • Rewards widget OFF
  • Sponsored Image being shown
    -> Displays opt-in state (once)
    -> Does not show on subsequent page views when dismissed

14. Rewards widget shows post-opt-in state

  • Rewards ON
  • Ads ON
  • Rewards widget ON
  • Sponsored Image being shown
    -> Displays "You are being paid" notification
    -> Does not show on subsequent page views when dismissed

15. Rewards widget shows post-opt-in state

  • Rewards ON
  • Ads ON
  • Rewards widget OFF
  • Sponsored Image being shown
    -> Displays "You are being paid" notification
    -> Does not show on subsequent page views when dismissed

16. Ads not supported in region

    1. Be in a region which does not support ads
    1. Fresh or previous profile
    1. Visit chrome://flags and turn on BOTH above feature flags
  • --> The opt-out for Branded Wallpapers should NOT be shown in the NTP settings modal
  • --> A sponsored image should never be shown on the NTP

17. Toggling Rewards resets notification state

If a notification has been dismissed, turning rewards OFF, ON or OFF and ON, should bring back the notification until it is dismissed again.

18. Toggling Ads resets notification state

If a notification has been dismissed, turning ads OFF, ON or OFF and ON, should bring back the notification until it is dismissed again.

@petemill petemill self-assigned this Nov 26, 2019
@petemill petemill force-pushed the ntp-sbw branch 2 times, most recently from 5c4de7a to 26905bc Compare November 27, 2019 20:51
@petemill petemill force-pushed the ntp-sbw branch 3 times, most recently from 05ed1ab to 32b76ae Compare December 5, 2019 18:14
@petemill petemill added CI/skip-android Do not run CI builds for Android CI/skip-ios Do not run CI builds for iOS CI/skip-linux labels Dec 5, 2019
@petemill petemill force-pushed the ntp-sbw branch 3 times, most recently from b4640ac to 4c3165e Compare December 12, 2019 08:36
@petemill petemill changed the title [wip] NTP SBW NTP SBW Dec 17, 2019
@petemill petemill force-pushed the ntp-sbw branch 3 times, most recently from 1a00222 to 59c61b8 Compare December 17, 2019 05:31
@petemill
Copy link
Member Author

Tagging the following for review:

@cezaraugusto - multiple NTP changes to tighten the grid, allow space collapsing and allow more automatic side-by-side placement. Please check out the layout changes especially.

@ryanml - NTP Rewards widget updates to allow for multiple overlapping but offset notifications, and for messaging and control about the branded wallpaper

@simonhong who will be adding a remote component fetcher to the backend

@petemill petemill added CI/skip-ios Do not run CI builds for iOS and removed CI/skip-android Do not run CI builds for Android CI/skip-ios Do not run CI builds for iOS CI/skip-linux labels Dec 17, 2019
@bsclifton
Copy link
Member

This has had a lot of testing last week and over the weekend. Lots of fixes, per review feedback. I believe this is ready for merge 😄 Going to merge and start a Nightly build so we can verify the feature

@bsclifton bsclifton merged commit 3895ee8 into master Jan 27, 2020
@bsclifton bsclifton deleted the ntp-sbw branch January 27, 2020 06:20
@bsclifton
Copy link
Member

Should be noted: last CI ran perfectly; there were some lint warnings which @petemill addressed and a network-audit failure which is a known and documented issue. Since CI was in great shape, I cancelled the new CI that was kicked off with rebase

@tmancey
Copy link
Collaborator

tmancey commented Jan 27, 2020

LGTM++

@LaurenWags
Copy link
Member

Verified using a mix of 1.5.62 and 1.5.63

Brave 1.5.63 Chromium: 79.0.3945.130 (Official Build) nightly (64-bit)
Revision e22de67c28798d98833a7137c0e22876237fc40a-refs/branch-heads/3945@{#1047}
OS macOS Version 10.14.6 (Build 18G103)

Additional testing done was as follows:

  • logged text update needed on Dashboard Settings brave-browser#7947
  • Upgrade Cases:
    1. Background images toggled off. Upgrade to 1.5.62. Enable SNTP from flags, relaunch. Confirmed SNTP is visible in Dashboard Settings but no SNTP images are shown to user.
    2. Rewards widget is toggled off. Upgrade to 1.5.62. Enable SNTP from flags, relaunch. Confirmed SNTP introductory message is shown appropriately (based on flow chart from description).
    3. Both Background images and Rewards widgets are toggled off. Upgrade to 1.5.62. Enable SNTP from flags, relaunch. Confirmed SNTP is visible in Dashboard Settings but no SNTP images are shown to user. No messages shown to user where Rewards widget would be. Confirmed I am able to re-enable Background Images and when I do, Sponsored Images are on by default.

@btlechowski
Copy link

Verification passed on

Brave 1.5.62 Chromium: 79.0.3945.130 (Official Build) nightly (64-bit)
Revision e22de67c28798d98833a7137c0e22876237fc40a-refs/branch-heads/3945@{#1047}
OS Windows 7 Service Pack 1 (Build 7601.24544)

Verification passed on

Brave 1.5.62 Chromium: 79.0.3945.130 (Official Build) nightly (64-bit)
Revision e22de67c28798d98833a7137c0e22876237fc40a-refs/branch-heads/3945@{#1047}
OS Windows 10 OS Version 1909 (Build 18363.592)

Verified test plan from: #4075 (comment)

@petemill petemill added this to the 1.5.x - Nightly milestone Jan 28, 2020
@GeetaSarvadnya
Copy link

GeetaSarvadnya commented Jan 28, 2020

Verified in Linux Mint 17 - Cinnamon 64bit

Brave 1.5.63 Chromium: 79.0.3945.130 (Official Build) nightly (64-bit)
Revision e22de67c28798d98833a7137c0e22876237fc40a-refs/branch-heads/3945@{#1047}
OS Linux

petemill pushed a commit that referenced this pull request Jan 29, 2020
New Tab Page Branded Wallpapers (desktop)
This was referenced Jan 29, 2020
petemill pushed a commit that referenced this pull request Jan 29, 2020
New Tab Page Branded Wallpapers (desktop)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet