Add clickable centered block to support new tab page sponsored images

[rebron]

Description

New tab page sponsored images contain visual interest that's centered on the user's screen. Oftentimes users will want to clickthrough on that item instead of clicking through on the bottom left call out.

We need a clickable centered block to allow users to clickthrough on sponsored images. The centered block will be removed altogether when the viewport is minimized.

Clicking through the center block should change the mouseover/hover icon to show that the center is clickable. Further, the clickable space should maintain ample space for the widgets to reduce any mis-clicks.

Steps for new feature:

1. Visit a new tab page sponsored image by creating a new tab page.
2. Hover onto the center of the sponsored image, between widgets and above Brave News.
3. Click on image and it should direct you to the proper destination url (similar to clicking the bottom left call out).

Expected result:

Reproduces how often:

n/a

Brave version (brave://version info)

Targeting 1.49.x

Version/Channel Information:

• Can you reproduce this issue with the current release? n/a
• Can you reproduce this issue with the beta channel? n/a
• Can you reproduce this issue with the nightly channel? n/a

Other Additional Information:

• Does the issue resolve itself when disabling Brave Shields? n/a
• Does the issue resolve itself when disabling Brave Rewards? n/a
• Is the issue reproducible on the latest version of Chrome? n/a

Miscellaneous Information:

[MadhaviSeelam]

Verification PASSED using

Brave | 1.50.91 Chromium: 111.0.5563.64 (Official Build) beta (64-bit)
-- | --
Revision | c710e93d5b63b7095afe8c2c17df34408078439d-refs/branch-heads/5563@{#995}
OS | Windows 11 Version 22H2 (Build 22621.1265)

Case 1: New Install

1. Install 1.50.91
2. launched Brave
3. opened a new-tab page
4. added few top sites to NTP
5. visited a new tab page to load a sponsored image
6. click box/clickable area is shown to new tab page sponsored images in between the NTP grid and the widgets on the right
7. hovered and clicked onto the center of the sponsored image, between top sites and widgets and above Brave News.
8. it redirected to the proper destination url (similar to clicking the bottom left call out) - https://brave.com/brave-ads/?source=sponsoredimage20230315
9. confirmed destination URL is shown bottom left - https://brave.com/brave-ads/?source=sponsoredimage20230315
10. clicked anywhere in the clickable area to redirect to destination URL - https://brave.com/brave-ads/?source=sponsoredimage20230315
11. If widgets are showing and the screen is in one column mode, we don't add the clickbox
12. If widgets are not visible, the clickbox/clickable area is shown
13. clicked on the bottom left link or image to confirm it's working as expected
14. clickable centered block is not shown on non NTPSI pages

Confirmed able to hover and click centered block with widgets on the right, Brave talk & Brave Rewards and top sites are visible

2023-03-15_11h59_03.mp4

Confirmed if widgets on the right (Brave talk and Rewards) are hidden, clickable area doesn't expand in a normal window #### Confirmed no click box is available with widgets on the right are hidden in minimized viewport

Widgets.mp4

Confirmed if topsites are hidden, clickable area expands to left in normal window and clickable area is available above Brave news in minimized viewport if widgets on the right are hidden

Confirmed if topsites are hidden and widgets on the right not hidden in a minimized view port, clickable area is not available

topsites.hidden.mp4

Case 2: Upgrade:

1. Installed 1.49.120
2. launch Brave
3. open a NTP SI page
4. added few top sites
5. close the browser
6. rename the profile to Brave-Beta
7. install 1.50.99
8. relaunch Brave

Confirmed functionality worked as expected as in Case 1

2023-03-15_14h05_43.mp4

[stephendonner]

Verification PASSED using

Brave	1.50.92 Chromium: 111.0.5563.64 (Official Build) beta (x86_64)
Revision	c710e93d5b63b7095afe8c2c17df34408078439d-refs/branch-heads/5563@{#995}
OS	macOS Version 11.7.4 (Build 20G1120)

Case 1: New install - PASSED

1. installed 1.50.92
2. launched Brave
3. opened a new-tab page
4. added few top sites to NTP
5. visited a new tab page to load a sponsored image
6. click box/clickable area is shown to new tab page sponsored images in between the NTP grid and the widgets on the right
7. hovered and clicked onto the center of the sponsored image, between top sites and widgets and above Brave News.
8. it redirected to the proper destination url (similar to clicking the bottom left call out) - https://search.brave.com/?brave-creative-id=ee855d01-3203-4a07-963c-5b59fd2b63be&source=sponsoredimage20230317
9. confirmed destination URL is shown bottom left - https://search.brave.com/?brave-creative-id=ee855d01-3203-4a07-963c-5b59fd2b63be&source=sponsoredimage20230317
10. clicked anywhere in the clickable area to redirect to destination URL - https://search.brave.com/?brave-creative-id=ee855d01-3203-4a07-963c-5b59fd2b63be&source=sponsoredimage20230317
11. If widgets are showing and the screen is in one column mode, we don't add the clickbox
12. If widgets are not visible, the clickbox/clickable area is shown
13. clicked on the bottom left link or image to confirm it's working as expected
14. clickable centered block is not shown on non NTPSI pages

default spaces	no widgets	no topsites	no widgets nor topsites

Case 2: Upgrade - PASSED

1. installed 1.49.120
2. launched Brave
3. opened a NTP SI page
4. added a few top sites
5. closed the browser
6. renamed the profile to Brave-Beta
7. installed 1.50.92
8. relaunched Brave

Confirmed functionality worked as expected as in Case 1

---

Verification passed on

Brave	1.50.93 Chromium: 111.0.5563.64 (Official Build) beta (64-bit)
Revision	c710e93d5b63b7095afe8c2c17df34408078439d-refs/branch-heads/5563@{#995}
OS	Ubuntu 18.04 LTS

Case 1: New install - PASSED

1. installed 1.50.x
2. launched Brave
3. opened a new-tab page
4. added few top sites to NTP
5. visited a new tab page to load a sponsored image
6. click box/clickable area is shown to new tab page sponsored images in between the NTP grid and the widgets on the right
7. hovered and clicked onto the center of the sponsored image, between top sites and widgets and above Brave News.
8. it redirected to the proper destination url (similar to clicking the bottom left call out)
9. confirmed destination URL is shown bottom left
10. clicked anywhere in the clickable area to redirect to destination URL
11. If widgets are showing and the screen is in one column mode, we don't add the clickbox
12. If widgets are not visible, the clickbox/clickable area is shown
13. clicked on the bottom left link or image to confirm it's working as expected
14. clickable centered block is not shown on non NTPSI pages

Default:

Top sites:

all widgets hidden

Case 2: Upgrade - PASSED

1. installed 1.49.120
2. launched Brave
3. opened a NTP SI page
4. added a few top sites
5. closed the browser
6. renamed the profile to Brave-Beta
7. installed 1.50.9x
8. relaunched Brave

Confirmed functionality worked as expected as in Case 1

[kjozwiak]

Removing QA Pass labels as this will need to get re-checked via 1.49.x.

[kjozwiak]

The above requires 1.49.127 or higher for 1.49.x verification 👍

[btlechowski]

Verification passed on

Brave	1.49.128 Chromium: 111.0.5563.110 (Official Build) (64-bit)
Revision	3da375c9e9e5ad9b556af5df708a6e6c01d8cfb1-refs/branch-heads/5563@{#1202}
OS	Ubuntu 18.04 LTS

Case 1: New install - PASSED

1. installed 1.50.x
2. launched Brave
3. opened a new-tab page
4. added few top sites to NTP
5. visited a new tab page to load a sponsored image
6. click box/clickable area is shown to new tab page sponsored images in between the NTP grid and the widgets on the right
7. hovered and clicked onto the center of the sponsored image, between top sites and widgets and above Brave News.
8. it redirected to the proper destination url (similar to clicking the bottom left call out)
9. confirmed destination URL is shown bottom left
10. clicked anywhere in the clickable area to redirect to destination URL
11. If widgets are showing and the screen is in one column mode, we don't add the clickbox
12. If widgets are not visible, the clickbox/clickable area is shown
13. clicked on the bottom left link or image to confirm it's working as expected
14. clickable centered block is not shown on non NTPSI pages

Default:

Top sites:

all widgets hidden

Case 2: Upgrade - PASSED

1. installed 1.49.120
2. launched Brave
3. opened a NTP SI page
4. added a few top sites
5. closed the browser
6. renamed the profile to Brave-Beta
7. installed 1.50.9x
8. relaunched Brave

Confirmed functionality worked as expected as in Case 1

[LaurenWags]

Verified with

Brave | 1.49.128 Chromium: 111.0.5563.110 (Official Build) (x86_64)
-- | --
Revision | 3da375c9e9e5ad9b556af5df708a6e6c01d8cfb1-refs/branch-heads/5563@{#1202}
OS | macOS Version 12.6.3 (Build 21G419)

Encountered #29246 while testing.

Case 1: New install - PASSED with follow up issue logged

1. installed 1.49.128
2. launched Brave
3. opened a new-tab page
4. added few top sites to NTP
5. visited a new tab page to load a sponsored image
6. click box/clickable area is shown to new tab page sponsored images in between the NTP grid and the widgets on the right
7. hovered and clicked onto the center of the sponsored image, between top sites and widgets and above Brave News.
8. it redirected to the proper destination url (similar to clicking the bottom left call out) - https://search.brave.com/?brave-creative-id=1c68fb02-ba45-4491-be5f-e6c5ac4de063&source=sponsoredimage20230322
9. confirmed destination URL is shown bottom left - https://search.brave.com/?brave-creative-id=1c68fb02-ba45-4491-be5f-e6c5ac4de063&source=sponsoredimage20230322
10. clicked anywhere in the clickable area to redirect to destination URL - https://search.brave.com/?brave-creative-id=1c68fb02-ba45-4491-be5f-e6c5ac4de063&source=sponsoredimage20230322
11. If widgets are showing and the screen is in one column mode, we don't add the click box
12. If widgets are not visible, the click box/clickable area is shown
13. clicked on the bottom left link or image to confirm it's working as expected
14. clickable centered block is not shown on non NTPSI pages

Wide view	Narrow (single column) view

Videos for verifications were made but were too big to upload to GH, available on the drive if needed.

Case 2: Upgrade - PASSED

1. installed 1.49.120
2. launched Brave
3. opened a NTP SI page
4. added a few top sites
5. closed the browser
6. updated to 1.49.128

Confirmed functionality worked as expected as in Case 1

1.49.120 Chromium: 111.0.5563.64	1.49.128 Chromium: 111.0.5563.110

[stephendonner]

Verification PASSED using

Brave	1.49.128 Chromium: 111.0.5563.110 (Official Build) (64-bit)
Revision	3da375c9e9e5ad9b556af5df708a6e6c01d8cfb1-refs/branch-heads/5563@{#1202}
OS	Windows 10 Version 22H2 (Build 19045.2728)

NOTE: pressed for time on the 1.49.x maintenance release, didn't include videos

Case 1: New install - PASSED

1. installed 1.49.128
2. launched Brave
3. opened a new-tab page
4. added few top sites to NTP
5. visited a new tab page to load a sponsored image
6. click box/clickable area is shown to new tab page sponsored images in between the NTP grid and the widgets on the right
7. hovered and clicked onto the center of the sponsored image, between top sites and widgets and above Brave News.
8. it redirected to the proper destination url (similar to clicking the bottom left call out) - https://search.brave.com/?brave-creative-id=ee855d01-3203-4a07-963c-5b59fd2b63be&source=sponsoredimage20230317
9. confirmed destination URL is shown bottom left - https://search.brave.com/?brave-creative-id=ee855d01-3203-4a07-963c-5b59fd2b63be&source=sponsoredimage20230317
10. clicked anywhere in the clickable area to redirect to destination URL - https://search.brave.com/?brave-creative-id=ee855d01-3203-4a07-963c-5b59fd2b63be&source=sponsoredimage20230317
11. If widgets are showing and the screen is in one column mode, we don't add the clickbox
12. If widgets are not visible, the clickbox/clickable area is shown
13. clicked on the bottom left link or image to confirm it's working as expected
14. clickable centered block is not shown on non NTPSI pages

default spaces	no widgets	no topsites	no widgets nor topsites

Case 2: Upgrade - PASSED

1. installed 1.49.120
2. launched Brave
3. opened a NTP SI page
4. added a few top sites
5. closed the browser
6. renamed the profile to Brave-Beta
7. installed 1.49.128
8. relaunched Brave

Confirmed functionality worked as expected as in Case 1

1.49.120	1.49.128