Improve narrow YouTube Click to Load placeholders (#422)

When the YouTube Click to Load placeholders are very narrow, the
information text takes up too much space and some of the other
elements are lost. Let's tweak narrow placeholders, to hide that
information text and move the "Learn more" link. This isn't the best
approach (using @container queries[1] might be better), but this code
is going to be refactored shortly anyway.

1 - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries

Author: kzar

src/features/click-to-load.js

@@ -589,6 +589,7 @@ function replaceYouTubeCTL (trackingElement, widget) {
         resizeElementToMatch(oldPlaceholder || trackingElement, blockingDialog)
         replaceTrackingElement(widget, trackingElement, blockingDialog)
         showExtraUnblockIfShortPlaceholder(shadowRoot, blockingDialog)
+        hideInfoTextIfNarrowPlaceholder(shadowRoot, blockingDialog, 460)
     }
 }
 
@@ -628,6 +629,44 @@ function showExtraUnblockIfShortPlaceholder (shadowRoot, placeholder) {
     }
 }
 
+/**
+ * Hide the info text (and move the "Learn More" link) if the placeholder is too
+ * narrow.
+ * @param {ShadowRoot} shadowRoot
+ * @param {HTMLElement} placeholder Placeholder for tracking element
+ * @param {number} narrowWidth
+ *    Maximum placeholder width (in pixels) for the placeholder to be considered
+ *    narrow.
+ */
+function hideInfoTextIfNarrowPlaceholder (shadowRoot, placeholder, narrowWidth) {
+    const { width: placeholderWidth } = placeholder.getBoundingClientRect()
+    if (placeholderWidth > 0 && placeholderWidth <= narrowWidth) {
+        const buttonContainer =
+              shadowRoot.querySelector('.DuckDuckGoButton.primary')?.parentElement
+        const contentTitle = shadowRoot.getElementById('contentTitle')
+        const infoText = shadowRoot.getElementById('infoText')
+        /** @type {HTMLElement?} */
+        const learnMoreLink = shadowRoot.getElementById('learnMoreLink')
+
+        // These elements will exist, but this check keeps TypeScript happy.
+        if (!buttonContainer || !contentTitle || !infoText || !learnMoreLink) {
+            return
+        }
+
+        // Remove the information text.
+        infoText.remove()
+        learnMoreLink.remove()
+
+        // Append the "Learn More" link to the title.
+        contentTitle.innerText += '. '
+        learnMoreLink.style.removeProperty('font-size')
+        contentTitle.appendChild(learnMoreLink)
+
+        // Improve margin/padding, to ensure as much is displayed as possible.
+        buttonContainer.style.removeProperty('margin')
+    }
+}
+
 /**
  * Replace the blocked CTL elements on the page with placeholders.
  * @param {HTMLElement} [targetElement]
@@ -749,6 +788,7 @@ function getLearnMoreLink (mode = 'lightMode') {
     linkElement.href = 'https://help.duckduckgo.com/duckduckgo-help-pages/privacy/embedded-content-protection/'
     linkElement.target = '_blank'
     linkElement.textContent = sharedStrings.learnMore
+    linkElement.id = 'learnMoreLink'
     return linkElement
 }
 
@@ -1302,10 +1342,14 @@ function createContentBlock (widget, button, textButton, img, bottomRow) {
     const contentTitle = document.createElement('div')
     contentTitle.style.cssText = styles.contentTitle
     contentTitle.textContent = widget.replaceSettings.infoTitle
+    contentTitle.id = 'contentTitle'
     contentRow.appendChild(contentTitle)
     const contentText = document.createElement('div')
     contentText.style.cssText = styles.contentText
-    contentText.textContent = widget.replaceSettings.infoText + ' '
+    const contentTextSpan = document.createElement('span')
+    contentTextSpan.id = 'infoText'
+    contentTextSpan.textContent = widget.replaceSettings.infoText + ' '
+    contentText.appendChild(contentTextSpan)
     contentText.appendChild(getLearnMoreLink())
     contentRow.appendChild(contentText)
     element.appendChild(contentRow)

unit-test/verify-artifacts.js

@@ -6,7 +6,7 @@ import { cwd } from '../scripts/script-utils.js'
 const ROOT = join(cwd(import.meta.url), '..')
 const BUILD = join(ROOT, 'build')
 const APPLE_BUILD = join(ROOT, 'Sources/ContentScopeScripts/dist')
-const CSS_OUTPUT_SIZE = 551000
+const CSS_OUTPUT_SIZE = 560000
 const CSS_OUTPUT_SIZE_CHROME = CSS_OUTPUT_SIZE * 1.45 // 45% larger for Chrome MV2 due to base64 encoding
 
 const checks = {