Youtube Click To Load - UI Implementation

[franfaccin]

Reviewer:
CC: @kzar

Description:

1. This PR adds the UI implementation for YouTube Click to Load.
2. This also adds "Enable YouTube Previews" to the Settings page.
3. It also syncs the UI between Facebook CTL and YouTube CTL (adds "Share Feedback" link and updates the modal UI for both CTL)
4. This does not fully implements the working feature of blocking and displaying the YT previews. This will be done in a following PR.

Test
Build steps: https://github.com/duckduckgo/duckduckgo-privacy-extension/blob/develop/CONTRIBUTING.md#building-the-extension

Steps to test this PR:

1. Access any website with embedded YouTube content on Chrome or Firefox. You can also use our test page for this https://privacy-test-pages.glitch.me/privacy-protections/youtube-click-to-load/
2. All YouTube videos show be available
3. Follow build steps and load the extension into Chrome or Firefox and refresh your test page.
4. All YouTube videos should be blocked and display the blocked content dialog with a "Share Feedback" link bellow it.
   1. Press "Play" should play the video
   2. Press "Previews disabled for additional privacy" should open a modal
   3. Press the "X" or "No thanks" should close the modal with no changes
   4. Press the "Enable Previews" button should close the modal. (Replacing blocked content with preview not implemented in this PR - please refresh the page)
   5. Press "Learn More" should open Help Pages for embedded content.
5. Enable YT Previews and refresh the page. With YT Previews enabled, all embedded videos should display the video preview with "Share Feedback" link bellow it.
   1. Press "Play" should play the video.
   2. Press "Learn More" should open Help Pages for embedded content.
   3. Press the "Previews enabled" and refresh the page should show the blocked content ui again on all videos. (Replacing the preview with the blocked content ui not implemented in this PR - please refresh the page)
6. ...

Automated tests:

• Unit tests
• Integration tests

Reviewer Checklist:

• Ensure the PR solves the problem
• Review every line of code
• Ensure the PR does no harm by testing the changes thoroughly
• Get help if you're uncomfortable with any of the above!
• Determine if there are any quick wins that improve the implementation

PR Author Checklist:

• Get advice or leverage existing code
• Agree on technical approach with reviewer (if the changes are nuanced)
• Ensure that there is a testing strategy (and documented non-automated tests)
• Ensure there is a documented monitoring strategy (if necessary)
• Consider systems implications

[kzar]

This looks great, thanks 🥇.

I've left a bunch of comments, mostly nits. But IMO let's focus on getting it into a state fit for landing (close as possible, without breaking any existing functionality), so we can do the remaining follow-up work later when one of us has time.

I'm going to test this now, will comment back if I notice any issues.

[kzar]

@franfaccin Oh, I've noticed this is breaking the integration tests too. I recommend running those locally with the npm run test-int command, but first I recommend editing the integration-test/config.json file so that only the CTL integration tests are being run. Also, it's sometimes useful to edit integration-test/helpers/harness.js to set headless: false (instead of headless: 'chrome') in puppeteerOps - that way you can see what's going on in the test browser.

[kzar]

To get the integration tests running a bit more, you just need to update the integration test configuration:

diff --git a/integration-test/data/configs/click-to-load-youtube.json b/integration-test/data/configs/click-to-load-youtube.json
index 558f6497..83c6f7a0 100644
--- a/integration-test/data/configs/click-to-load-youtube.json
+++ b/integration-test/data/configs/click-to-load-youtube.json
@@ -37,10 +37,19 @@
                 ],
                 "replaceSettings": {
                     "type": "youtube-video-ctl",
-                    "buttonText": "Unblock Video",
-                    "infoTitle": "DuckDuckGo blocked this video to prevent YouTube from tracking you",
-                    "infoText": "We blocked YouTube from tracking you when the page loaded. If you unblock this Video, YouTube will know your activity.",
-                    "simpleInfoText": "We blocked YouTube from tracking you when the page loaded. If you unblock this Video, YouTube will know your activity."
+                    "buttonText": "Unblock video",
+                    "infoTitle": "DuckDuckGo blocked this YouTube video to prevent Google from tracking you",
+                    "infoText": "We blocked Google (which owns YouTube) from tracking you when the page loaded. If you unblock this video, Google will know your activity.",
+                    "simpleInfoText": "We blocked Google (which owns YouTube) from tracking you when the page loaded. If you unblock this video, Google will know your activity.",
+                    "previewToggleText": "Previews disabled for additional privacy",
+                    "placeholder": {
+                        "previewToggleEnabledText": "Previews enabled",
+                        "previewInfoText": "Turn previews off for additional privacy from DuckDuckGo.",
+                        "videoPlayIcon": {
+                            "lightMode": "video_play_light.svg",
+                            "darkMode": "video_play_dark.svg"
+                        }
+                    }
                 },
                 "clickAction": {
                     "type": "youtube-video-ctl"
@@ -59,9 +68,9 @@
             }
         },
         "informationalModal": {
-            "icon": "blocked_video.svg",
+            "icon": "blocked_youtube_video.svg",
             "messageTitle": "Enable YouTube previews and reduce privacy?",
-            "messageBody": "Showing previews will allow Google (which owns YouTube) to see some of your device’s information, but is still more private than playing the video. Learn More",
+            "messageBody": "Showing previews will allow Google (which owns YouTube) to see some of your device’s information, but is still more private than playing the video.",
             "confirmButtonText": "Enable Previews",
             "rejectButtonText": "No Thanks"
         },

But you'll see some tests are still failing. Those failures are real, the requests to Google for the video details are still being made in the background, even when video previews are disabled! I'm not sure what's causing that though, I don't have time to look into it.

Edit: Also, please could you add a TODO comment in the YouTube CTL integration tests, to mention that we need to add tests for enabling previews?

[kzar]

Thanks for addressing all of those comments.

I've looked into the test failures briefly again today and tested out your changes. Two things:

1. Some tests are correct to fail, since we are making requests to YouTube that are unexpected. It seems that even when video previews are disabled, we're still fetching the video details.
2. Not related to the test failures, but clicking to unblock a video when previews are disabled results in the video auto-playing. I don't think that's correct, I thought videos should only auto-play if previews are enabled, but please correct me if we changed the decision on that.

How to verify above:

1. Do fresh install of the extension in Chrome (previews should be disabled by default).
2. Navigate to chrome://extensions, select to inspect the background page for the extension, switch to the network panel there.
3. In a new tab load the test page.
4. You'll see requests to https://www.youtube.com/oembed in the background page even though previews are disabled.
5. Click to unblock a video, notice how it auto-plays.

Shout when you've addressed the above and I'll take a more careful pass of the changes + have another look at any remaining test failures!

[kzar]

LGTM 👍