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

Author: franfaccin

src/features/click-to-load.js

@@ -2,7 +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 { DDGCtlPlaceholderBlocked } from './click-to-load/components/ctl-placeholder-blocked.js'
+import { DDGCtlPlaceholderBlockedElement } from './click-to-load/components/ctl-placeholder-blocked.js'
 
 /**
  * @typedef {'darkMode' | 'lightMode' | 'loginMode' | 'cancelMode'} displayMode
@@ -550,7 +550,12 @@ function createPlaceholderElementAndReplace (widget, trackingElement) {
     // Facebook
     if (widget.replaceSettings.type === 'dialog') {
         if (isMobileApp) {
-            const mobileBlockedPlaceholder = new DDGCtlPlaceholderBlocked({
+            /**
+             * 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,
                 isMobileApp,
                 title: widget.replaceSettings.infoTitle, // Card title text
@@ -621,7 +626,12 @@ function replaceYouTubeCTL (trackingElement, widget) {
         const oldPlaceholder = widget.placeholderElement
 
         if (isMobileApp) {
-            const mobileBlockedPlaceholder = new DDGCtlPlaceholderBlocked({
+            /**
+             * 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,
                 isMobileApp,
                 title: widget.replaceSettings.infoTitle, // Card title text
@@ -641,11 +651,11 @@ function replaceYouTubeCTL (trackingElement, widget) {
                 },
                 onButtonClick: widget.clickFunction.bind(widget)
             })
-            mobileBlockedPlaceholder.appendChild(makeFontFaceStyleElement())
-            mobileBlockedPlaceholder.id = trackingElement.id
-            resizeElementToMatch(oldPlaceholder || trackingElement, mobileBlockedPlaceholder)
-            replaceTrackingElement(widget, trackingElement, mobileBlockedPlaceholder)
-            showExtraUnblockIfShortPlaceholder(null, mobileBlockedPlaceholder)
+            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)

src/features/click-to-load/assets/ctl-placeholder-block.css

@@ -1,13 +1,18 @@
+:host,
 * {
     font-family: DuckDuckGoPrivacyEssentials, system, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto,
         Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
     box-sizing: border-box;
+    font-weight: normal;
+    font-style: normal;
+    margin: 0;
+    padding: 0;
+    text-align: left;
 }
 
 :host,
 .DuckDuckGoSocialContainer {
     display: inline-block;
-    box-sizing: border-box;
     border: 0;
     padding: 0;
     margin: auto;
@@ -20,7 +25,6 @@
 /* Button */
 .DuckDuckGoButton {
     border-radius: 8px;
-    box-sizing: border-box;
     padding: 11px 22px;
     margin: 0px auto;
     border-color: #3969ef;
@@ -189,7 +193,6 @@
 .ddg-ctl-placeholder-card {
     height: 100%;
     overflow: auto;
-    box-sizing: border-box;
     padding: 16px;
     color: rgba(0, 0, 0, 0.84);
     background: #ffffff;
@@ -223,26 +226,26 @@
     align-items: center;
     margin: auto;
     margin-bottom: 8px;
+    text-align: left;
 }
 .DuckDuckGoSocialContainer:not(.size-sm) .ddg-ctl-placeholder-card-header {
     flex-direction: column;
     align-items: center;
     justify-content: center;
     margin-bottom: 12px;
-    text-align: left;
+    width: 80%;
+    text-align: center;
 }
 
-.DuckDuckGoSocialContainer:not(.size-sm) .ddg-ctl-placeholder-card-header,
+.DuckDuckGoSocialContainer:not(.size-sm) .ddg-ctl-placeholder-card-header .ddg-ctl-placeholder-card-title,
 .DuckDuckGoSocialContainer:not(.size-sm) .ddg-ctl-placeholder-card-header .ddg-text-link {
     text-align: center;
-    width: 80%;
 }
 
 /* Show Learn More link in the header on mobile and
  * tablet size screens and hide it on desktop size */
 .DuckDuckGoSocialContainer.size-lg .ddg-ctl-placeholder-card-header .ddg-learn-more {
     display: none;
-    visibility: hidden;
 }
 
 .ddg-ctl-placeholder-card-title,
@@ -279,34 +282,28 @@
     margin: 0 auto 12px;
 
     display: none;
-    visibility: hidden;
 }
 .DuckDuckGoSocialContainer.size-lg .ddg-ctl-placeholder-card-body-text {
     width: 80%;
     display: block;
-    visibility: visible;
 }
 
 .ddg-ctl-placeholder-card-footer {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: flex-start;
-    justify-self: flex-end;
-    margin-top: auto;
+    align-self: end;
 }
 
 .ddg-ctl-feedback-row {
     display: none;
-    visibility: hidden;
 }
 .DuckDuckGoSocialContainer:not(.size-sm) .ddg-ctl-feedback-row {
     height: 30px;
     justify-content: flex-end;
     align-items: center;
     display: flex;
-    display: flex;
-    visibility: visible;
 }
 
 .ddg-ctl-feedback-link {
@@ -316,4 +313,9 @@
     line-height: 12px;
     color: #ababab;
     text-decoration: none;
+    display: inline;
+    background-color: transparent;
+    border: 0;
+    padding: 0;
+    cursor: pointer;
 }

src/features/click-to-load/components/ctl-placeholder-blocked.js

@@ -2,7 +2,13 @@ import { html } from '../../../dom-utils'
 import css from '../assets/ctl-placeholder-block.css'
 import { logoImg as daxImg } from '../ctl-assets'
 
-export class DDGCtlPlaceholderBlocked extends HTMLElement {
+/**
+ * The custom HTML element (Web Component) template with the placeholder for blocked
+ * embedded content. The constructor gets a list of parameters with the
+ * content and event handlers for this template.
+ * This is currently only used in our Mobile Apps, but can be expanded in the future.
+ */
+export class DDGCtlPlaceholderBlockedElement extends HTMLElement {
     static CUSTOM_TAG_NAME = 'ddg-ctl-placeholder-blocked'
 
     /**
@@ -99,12 +105,14 @@ export class DDGCtlPlaceholderBlocked extends HTMLElement {
                 class="ddg-ctl-placeholder-card${useSlimCard ? ' slim-card' : ''}${withFeedback ? ' with-feedback-link' : ''}"
             >
                 <div class="ddg-ctl-placeholder-card-header">
-                    <img class="ddg-ctl-placeholder-card-header-dax" src=${daxImg} />
+                    <img class="ddg-ctl-placeholder-card-header-dax" src=${daxImg} alt="DuckDuckGo Dax" />
                     <div class="ddg-ctl-placeholder-card-title">${title}. ${learnMoreLink}</div>
                 </div>
                 <div class="ddg-ctl-placeholder-card-body">
                     <div class="ddg-ctl-placeholder-card-body-text">${body} ${learnMoreLink}</div>
-                    <button class="DuckDuckGoButton tertiary ddg-ctl-unblock-btn"><div>${unblockBtnText}</div></button>
+                    <button class="DuckDuckGoButton tertiary ddg-ctl-unblock-btn" type="button">
+                        <div>${unblockBtnText}</div>
+                    </button>
                 </div>
                 ${withToggle
         ? html`<div class="ddg-ctl-placeholder-card-footer">${this.createToggleButton()}</div> `
@@ -142,7 +150,7 @@ export class DDGCtlPlaceholderBlocked extends HTMLElement {
         container.classList.add('ddg-ctl-feedback-row')
 
         container.innerHTML = html`
-            <a class="ddg-ctl-feedback-link" target="_blank" href="#">${sharedStrings.shareFeedback}</a>
+            <button class="ddg-ctl-feedback-link" type="button">${sharedStrings.shareFeedback}</button>
         `.toString()
 
         return container
@@ -239,4 +247,4 @@ export class DDGCtlPlaceholderBlocked extends HTMLElement {
     }
 }
 
-customElements.define(DDGCtlPlaceholderBlocked.CUSTOM_TAG_NAME, DDGCtlPlaceholderBlocked)
+customElements.define(DDGCtlPlaceholderBlockedElement.CUSTOM_TAG_NAME, DDGCtlPlaceholderBlockedElement)