Click to load: mobile block placeholder (#525)

* Add mobile blocked content placeholder to CTL

* Add styles for YouTube Click to Load blocked placeholder

* Fix media-queries for Firefox | Change DDGCtlPlaceholderBlocked to use arrow functions and keep reference on Firefox

* Rollback translation changes

* Fix text alignment

* Update resizing of new templates | Fix issue with inline parent elements

* - Add container to element inside shadow root to improve layouting.
This container is set to copy the styles from the root element outside
the shadow root.

- Add Web Component lifecycle functions to update the styles from the
Placeholder Blocked template when connected to the DOM and when the
root elements gets its styles updated.

- Use CSS classes to set the size and show/hide content instead of media queries.
That because the size of the placeholder isn't related to the size of the screen.

- Minor style adjustments.

* Remove "inset" reset

* Attend PR comments:
- Add comment explaining new custom element
- Rename DDGCtlPlaceholderBlocked -> DDGCtlPlaceholderBlockedElement
- General fixes to CSS - reset styles from host element, clean up styles, etc

* Style updates to attend Design Review
- Introduce size-xs to show only the unblock button when there isn't enough height
to show our placeholder copy -> pending review
- Update CSS selectors to directly target size-md and size-lg when necessary.
- Update the placeholder size after style updates from the parent element, because we
change the root element height based on the parent size after injecting it on the page,
and that might change our placeholder to a different size.

* Fix issue with size var assignment

* Define custom element params type | Move ternaries out of template | Introduce toggle size param and decouple it from platform logic

* Create CSS variables for Design System colors | Use CSS vars and media query to automatically update values to dark theme

* Move CSS vars to separate file | Move params definitions to top of constructor and split localized copy in different params

* Add comment about using arrow functions on CTL class

* Fix lint issues

* Reduce min height to show only unblock button to 110px

---------

Co-authored-by: francielefaccin <[email protected]>

Author: franfaccin

src/features/click-to-load.js

@@ -2,6 +2,7 @@ import { createCustomEvent, sendMessage, originalWindowDispatchEvent } from '../
 import { logoImg, loadingImages, closeIcon } from './click-to-load/ctl-assets.js'
 import { getStyles, getConfig } from './click-to-load/ctl-config.js'
 import ContentFeature from '../content-feature.js'
+import { DDGCtlPlaceholderBlockedElement } from './click-to-load/components/ctl-placeholder-blocked.js'
 
 /**
  * @typedef {'darkMode' | 'lightMode' | 'loginMode' | 'cancelMode'} displayMode
@@ -47,6 +48,10 @@ const readyToDisplayPlaceholders = new Promise(resolve => {
 let afterPageLoadResolver
 const afterPageLoad = new Promise(resolve => { afterPageLoadResolver = resolve })
 
+// Used to choose between extension/desktop flow or mobile apps flow.
+// Updated on ClickToLoad.init()
+let isMobileApp
+
 /*********************************************************
  *  Widget Replacement logic
  *********************************************************/
@@ -544,17 +549,42 @@ function createPlaceholderElementAndReplace (widget, trackingElement) {
 
     // Facebook
     if (widget.replaceSettings.type === 'dialog') {
-        const icon = widget.replaceSettings.icon
-        const button = makeButton(widget.replaceSettings.buttonText, widget.getMode())
-        const textButton = makeTextButton(widget.replaceSettings.buttonText, widget.getMode())
-        const { contentBlock, shadowRoot } = createContentBlock(
-            widget, button, textButton, icon
-        )
-        button.addEventListener('click', widget.clickFunction(trackingElement, contentBlock))
-        textButton.addEventListener('click', widget.clickFunction(trackingElement, contentBlock))
+        if (isMobileApp) {
+            /**
+             * Creates a custom HTML element with the placeholder element for blocked
+             * embedded content. The constructor gets a list of parameters with the
+             * content and event handlers for this HTML element.
+             */
+            const mobileBlockedPlaceholder = new DDGCtlPlaceholderBlockedElement({
+                devMode,
+                title: widget.replaceSettings.infoTitle, // Card title text
+                body: widget.replaceSettings.infoText, // Card body text
+                unblockBtnText: widget.replaceSettings.buttonText, // Unblock button text
+                useSlimCard: false, // Flag for using less padding on card (ie YT CTL on mobile)
+                originalElement: trackingElement, // The original element this placeholder is replacing.
+                learnMore: { // Localized strings for "Learn More" link.
+                    readAbout: sharedStrings.readAbout,
+                    learnMore: sharedStrings.learnMore
+                },
+                onButtonClick: widget.clickFunction.bind(widget)
+            })
+            mobileBlockedPlaceholder.appendChild(makeFontFaceStyleElement())
+
+            replaceTrackingElement(widget, trackingElement, mobileBlockedPlaceholder)
+            showExtraUnblockIfShortPlaceholder(null, mobileBlockedPlaceholder)
+        } else {
+            const icon = widget.replaceSettings.icon
+            const button = makeButton(widget.replaceSettings.buttonText, widget.getMode())
+            const textButton = makeTextButton(widget.replaceSettings.buttonText, widget.getMode())
+            const { contentBlock, shadowRoot } = createContentBlock(
+                widget, button, textButton, icon
+            )
+            button.addEventListener('click', widget.clickFunction(trackingElement, contentBlock))
+            textButton.addEventListener('click', widget.clickFunction(trackingElement, contentBlock))
 
-        replaceTrackingElement(widget, trackingElement, contentBlock)
-        showExtraUnblockIfShortPlaceholder(shadowRoot, contentBlock)
+            replaceTrackingElement(widget, trackingElement, contentBlock)
+            showExtraUnblockIfShortPlaceholder(shadowRoot, contentBlock)
+        }
     }
 
     // YouTube
@@ -597,11 +627,49 @@ function replaceYouTubeCTL (trackingElement, widget) {
         // Block YouTube embedded video and display blocking dialog
         widget.autoplay = false
         const oldPlaceholder = widget.placeholderElement
-        const { blockingDialog, shadowRoot } = createYouTubeBlockingDialog(trackingElement, widget)
-        resizeElementToMatch(oldPlaceholder || trackingElement, blockingDialog)
-        replaceTrackingElement(widget, trackingElement, blockingDialog)
-        showExtraUnblockIfShortPlaceholder(shadowRoot, blockingDialog)
-        hideInfoTextIfNarrowPlaceholder(shadowRoot, blockingDialog, 460)
+
+        if (isMobileApp) {
+            /**
+             * Creates a custom HTML element with the placeholder element for blocked
+             * embedded content. The constructor gets a list of parameters with the
+             * content and event handlers for this HTML element.
+             */
+            const mobileBlockedPlaceholderElement = new DDGCtlPlaceholderBlockedElement({
+                devMode,
+                title: widget.replaceSettings.infoTitle, // Card title text
+                body: widget.replaceSettings.infoText, // Card body text
+                unblockBtnText: widget.replaceSettings.buttonText, // Unblock button text
+                useSlimCard: true, // Flag for using less padding on card (ie YT CTL on mobile)
+                originalElement: trackingElement, // The original element this placeholder is replacing.
+                learnMore: { // Localized strings for "Learn More" link.
+                    readAbout: sharedStrings.readAbout,
+                    learnMore: sharedStrings.learnMore
+                },
+                withToggle: { // Toggle config to be displayed in the bottom of the placeholder
+                    isActive: false, // Toggle state
+                    dataKey: 'yt-preview-toggle', // data-key attribute for button
+                    label: widget.replaceSettings.previewToggleText, // Text to be presented with toggle
+                    size: isMobileApp ? 'lg' : 'md',
+                    onClick: () => sendMessage('setYoutubePreviewsEnabled', true) // Toggle click callback
+                },
+                withFeedback: {
+                    label: sharedStrings.shareFeedback,
+                    onClick: () => openShareFeedbackPage()
+                },
+                onButtonClick: widget.clickFunction.bind(widget)
+            })
+            mobileBlockedPlaceholderElement.appendChild(makeFontFaceStyleElement())
+            mobileBlockedPlaceholderElement.id = trackingElement.id
+            resizeElementToMatch(oldPlaceholder || trackingElement, mobileBlockedPlaceholderElement)
+            replaceTrackingElement(widget, trackingElement, mobileBlockedPlaceholderElement)
+            showExtraUnblockIfShortPlaceholder(null, mobileBlockedPlaceholderElement)
+        } else {
+            const { blockingDialog, shadowRoot } = createYouTubeBlockingDialog(trackingElement, widget)
+            resizeElementToMatch(oldPlaceholder || trackingElement, blockingDialog)
+            replaceTrackingElement(widget, trackingElement, blockingDialog)
+            showExtraUnblockIfShortPlaceholder(shadowRoot, blockingDialog)
+            hideInfoTextIfNarrowPlaceholder(shadowRoot, blockingDialog, 460)
+        }
     }
 }
 
@@ -610,7 +678,7 @@ function replaceYouTubeCTL (trackingElement, widget) {
  * its parent is too short for the normal unblock button to be visible.
  * Note: This does not take into account the placeholder's vertical
  *       position in the parent element.
- * @param {ShadowRoot} shadowRoot
+ * @param {ShadowRoot?} shadowRoot
  * @param {HTMLElement} placeholder Placeholder for tracking element
  */
 function showExtraUnblockIfShortPlaceholder (shadowRoot, placeholder) {
@@ -628,22 +696,25 @@ function showExtraUnblockIfShortPlaceholder (shadowRoot, placeholder) {
     const { height: placeholderHeight } = placeholder.getBoundingClientRect()
     const { height: parentHeight } = placeholder.parentElement.getBoundingClientRect()
 
-    if ((placeholderHeight > 0 && placeholderHeight <= 200) ||
-        (parentHeight > 0 && parentHeight <= 230)) {
-        /** @type {HTMLElement?} */
-        const titleRowTextButton = shadowRoot.querySelector(`#${titleID + 'TextButton'}`)
-        if (titleRowTextButton) {
-            titleRowTextButton.style.display = 'block'
+    if (
+        (placeholderHeight > 0 && placeholderHeight <= 200) ||
+        (parentHeight > 0 && parentHeight <= 230)
+    ) {
+        if (shadowRoot) {
+            /** @type {HTMLElement?} */
+            const titleRowTextButton = shadowRoot.querySelector(`#${titleID + 'TextButton'}`)
+            if (titleRowTextButton) {
+                titleRowTextButton.style.display = 'block'
+            }
         }
-
         // Avoid the placeholder being taller than the containing element
         // and overflowing.
         /** @type {HTMLElement?} */
-        const innerDiv = shadowRoot.querySelector('.DuckDuckGoSocialContainer')
-        if (innerDiv) {
-            innerDiv.style.minHeight = 'initial'
-            innerDiv.style.maxHeight = parentHeight + 'px'
-            innerDiv.style.overflow = 'hidden'
+        const blockedDiv = shadowRoot?.querySelector('.DuckDuckGoSocialContainer') || placeholder
+        if (blockedDiv) {
+            blockedDiv.style.minHeight = 'initial'
+            blockedDiv.style.maxHeight = parentHeight + 'px'
+            blockedDiv.style.overflow = 'hidden'
         }
     }
 }
@@ -1652,6 +1723,7 @@ export default class ClickToLoad extends ContentFeature {
         sharedStrings = localizedConfig.sharedStrings
         // update styles if asset config was sent
         styles = getStyles(this.assetConfig)
+        isMobileApp = this.platform.name === 'ios' || this.platform.name === 'android'
 
         for (const entity of Object.keys(config)) {
             // Strip config entities that are first-party, or aren't enabled in the