@@ -589,6 +589,7 @@ function replaceYouTubeCTL (trackingElement, widget) {
589
589
resizeElementToMatch ( oldPlaceholder || trackingElement , blockingDialog )
590
590
replaceTrackingElement ( widget , trackingElement , blockingDialog )
591
591
showExtraUnblockIfShortPlaceholder ( shadowRoot , blockingDialog )
592
+ hideInfoTextIfNarrowPlaceholder ( shadowRoot , blockingDialog , 460 )
592
593
}
593
594
}
594
595
@@ -628,6 +629,48 @@ function showExtraUnblockIfShortPlaceholder (shadowRoot, placeholder) {
628
629
}
629
630
}
630
631
632
+ /**
633
+ * Hide the info text (and move the "Learn More" link) if the placeholder is too
634
+ * narrow.
635
+ * @param {ShadowRoot } shadowRoot
636
+ * @param {HTMLElement } placeholder Placeholder for tracking element
637
+ * @param {number } narrowWidth
638
+ * Maximum placeholder width (in pixels) for the placeholder to be considered
639
+ * narrow.
640
+ */
641
+ function hideInfoTextIfNarrowPlaceholder ( shadowRoot , placeholder , narrowWidth ) {
642
+ const { width : placeholderWidth } = placeholder . getBoundingClientRect ( )
643
+ if ( placeholderWidth > 0 && placeholderWidth <= narrowWidth ) {
644
+ const buttonContainer =
645
+ shadowRoot . querySelector ( '.DuckDuckGoButton.primary' ) ?. parentElement
646
+ const contentTitle = shadowRoot . getElementById ( 'contentTitle' )
647
+ const infoText = shadowRoot . getElementById ( 'infoText' )
648
+ /** @type {HTMLElement? } */
649
+ const innerDiv = shadowRoot . querySelector ( '.DuckDuckGoSocialContainer' )
650
+ /** @type {HTMLElement? } */
651
+ const learnMoreLink = shadowRoot . querySelector ( '.learnMoreLink' )
652
+
653
+ // These elements will exist, but this check keeps TypeScript happy.
654
+ if ( ! buttonContainer || ! contentTitle || ! infoText || ! innerDiv ||
655
+ ! learnMoreLink ) {
656
+ return
657
+ }
658
+
659
+ // Remove the information text.
660
+ infoText . remove ( )
661
+ learnMoreLink . remove ( )
662
+
663
+ // Append the "Learn More" link to the title.
664
+ contentTitle . innerText += '. '
665
+ learnMoreLink . style . removeProperty ( 'font-size' )
666
+ contentTitle . appendChild ( learnMoreLink )
667
+
668
+ // Improve margin/padding, to ensure as much is displayed as possible.
669
+ buttonContainer . style . removeProperty ( 'margin' )
670
+ innerDiv . style . height = 'calc(100% - 80px)'
671
+ }
672
+ }
673
+
631
674
/**
632
675
* Replace the blocked CTL elements on the page with placeholders.
633
676
* @param {HTMLElement } [targetElement]
@@ -749,6 +792,7 @@ function getLearnMoreLink (mode = 'lightMode') {
749
792
linkElement . href = 'https://help.duckduckgo.com/duckduckgo-help-pages/privacy/embedded-content-protection/'
750
793
linkElement . target = '_blank'
751
794
linkElement . textContent = sharedStrings . learnMore
795
+ linkElement . classList . add ( 'learnMoreLink' )
752
796
return linkElement
753
797
}
754
798
@@ -1302,10 +1346,14 @@ function createContentBlock (widget, button, textButton, img, bottomRow) {
1302
1346
const contentTitle = document . createElement ( 'div' )
1303
1347
contentTitle . style . cssText = styles . contentTitle
1304
1348
contentTitle . textContent = widget . replaceSettings . infoTitle
1349
+ contentTitle . id = 'contentTitle'
1305
1350
contentRow . appendChild ( contentTitle )
1306
1351
const contentText = document . createElement ( 'div' )
1307
1352
contentText . style . cssText = styles . contentText
1308
- contentText . textContent = widget . replaceSettings . infoText + ' '
1353
+ const contentTextSpan = document . createElement ( 'span' )
1354
+ contentTextSpan . id = 'infoText'
1355
+ contentTextSpan . textContent = widget . replaceSettings . infoText + ' '
1356
+ contentText . appendChild ( contentTextSpan )
1309
1357
contentText . appendChild ( getLearnMoreLink ( ) )
1310
1358
contentRow . appendChild ( contentText )
1311
1359
element . appendChild ( contentRow )
0 commit comments