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

Author: franfaccin

src/features/click-to-load.js

@@ -1682,8 +1682,7 @@ export default class ClickToLoad extends ContentFeature {
         sharedStrings = localizedConfig.sharedStrings
         // update styles if asset config was sent
         styles = getStyles(this.assetConfig)
-        this.isMobileApp = this.platform.name === 'ios' || this.platform.name === 'android'
-        isMobileApp = this.isMobileApp
+        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

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

@@ -48,23 +48,29 @@
     padding: 0px 16px;
     border: 1px solid rgba(0, 0, 0, 0.12);
     border-radius: 8px;
-    @media (prefers-color-scheme: dark) {
+}
+@media (prefers-color-scheme: dark) {
+    .DuckDuckGoButton.tertiary {
         color: #ffffff;
         border: 1px solid rgba(255, 255, 255, 0.24);
     }
 }
 .DuckDuckGoButton.tertiary:hover {
     background: rgba(0, 0, 0, 0.06);
     border: 1px solid rgba(0, 0, 0, 0.18);
-    @media (prefers-color-scheme: dark) {
+}
+@media (prefers-color-scheme: dark) {
+    .DuckDuckGoButton.tertiary:hover {
         background: rgba(255, 255, 255, 0.18);
         border: 1px solid rgba(255, 255, 255, 0.24);
     }
 }
 .DuckDuckGoButton.tertiary:active {
     background: rgba(0, 0, 0, 0.12);
     border: 1px solid rgba(0, 0, 0, 0.36);
-    @media (prefers-color-scheme: dark) {
+}
+@media (prefers-color-scheme: dark) {
+    .DuckDuckGoButton.tertiary:active {
         background: rgba(255, 255, 255, 0.24);
         border: 1px solid rgba(255, 255, 255, 0.24);
     }
@@ -105,13 +111,17 @@
 }
 .ddg-toggle-button.active .ddg-toggle-button-bg {
     background: #3969ef;
-    @media (prefers-color-scheme: dark) {
+}
+@media (prefers-color-scheme: dark) {
+    .ddg-toggle-button.active .ddg-toggle-button-bg {
         background: #7295f6;
     }
 }
 .ddg-toggle-button.inactive .ddg-toggle-button-bg {
     background: #ababab;
-    @media (prefers-color-scheme: dark) {
+}
+@media (prefers-color-scheme: dark) {
+    .ddg-toggle-button.inactive .ddg-toggle-button-bg {
         background: #444444;
     }
 }
@@ -144,7 +154,9 @@
     line-height: 20px;
     color: rgba(0, 0, 0, 0.84);
     margin-left: 12px;
-    @media (prefers-color-scheme: dark) {
+}
+@media (prefers-color-scheme: dark) {
+    .ddg-toggle-button-label {
         color: rgba(255, 255, 255, 0.84);
     }
 }
@@ -157,34 +169,41 @@
     cursor: pointer;
     text-decoration: none;
     color: #3969ef;
-    @media (prefers-color-scheme: dark) {
+}
+@media (prefers-color-scheme: dark) {
+    .ddg-text-link {
         color: #7295f6;
     }
 }
 
 /* Styles for DDGCtlPlaceholderBlocked */
 .DuckDuckGoButton.ddg-ctl-unblock-btn {
     width: 100%;
-    @media (min-width: 480px) {
+}
+@media (min-width: 480px) {
+    .DuckDuckGoButton.ddg-ctl-unblock-btn {
         width: auto;
     }
 }
 
 .ddg-ctl-placeholder-card {
+    min-height: 180px;
+    height: 100%;
+    overflow: auto;
     box-sizing: border-box;
     padding: 16px;
     color: rgba(0, 0, 0, 0.84);
     background: #ffffff;
     border: 1px solid rgba(0, 0, 0, 0.12);
     border-radius: 12px;
-    max-width: 600px;
-    min-height: 180px;
     margin: auto;
     display: grid;
     justify-content: center;
     align-items: center;
     line-height: 1;
-    @media (prefers-color-scheme: dark) {
+}
+@media (prefers-color-scheme: dark) {
+    .ddg-ctl-placeholder-card {
         color: rgba(255, 255, 255, 0.84);
         background: #222222;
         border: 1px solid rgba(255, 255, 255, 0.24);
@@ -193,8 +212,8 @@
 .ddg-ctl-placeholder-card.slim-card {
     padding: 12px;
 }
-.ddg-ctl-placeholder-card.with-feedback-link {
-    @media (min-width: 480px) {
+@media (min-width: 480px) {
+    .ddg-ctl-placeholder-card.with-feedback-link {
         height: calc(100% - 30px);
         max-width: initial;
         min-height: initial;
@@ -207,11 +226,17 @@
     align-items: center;
     margin: auto;
     margin-bottom: 8px;
-    @media (min-width: 480px) {
+}
+@media (min-width: 480px) {
+    .ddg-ctl-placeholder-card-header {
         flex-direction: column;
         align-items: center;
         justify-content: center;
         margin-bottom: 12px;
+    }
+}
+@media (min-width: 720px) {
+    .ddg-ctl-placeholder-card-header {
         width: 70%;
     }
 }
@@ -230,7 +255,10 @@
     font-weight: 700;
     font-size: 16px;
     line-height: 24px;
-    @media (min-width: 480px) {
+}
+@media (min-width: 480px) {
+    .ddg-ctl-placeholder-card-title,
+    .ddg-ctl-placeholder-card-title .ddg-text-link {
         text-align: center;
     }
 }
@@ -240,11 +268,15 @@
     width: 48px;
     height: 48px;
     margin: 0 8px 0 0;
-    @media (min-width: 480px) {
+}
+@media (min-width: 480px) {
+    .ddg-ctl-placeholder-card-header-dax {
         align-self: inherit;
         margin: 0 0 12px 0;
     }
-    @media (min-width: 720px) {
+}
+@media (min-width: 720px) {
+    .ddg-ctl-placeholder-card-header-dax {
         width: 56px;
         height: 56px;
     }
@@ -262,7 +294,9 @@
 
     display: none;
     visibility: hidden;
-    @media (min-width: 720px) {
+}
+@media (min-width: 720px) {
+    .ddg-ctl-placeholder-card-body-text {
         display: block;
         visibility: visible;
     }
@@ -280,7 +314,9 @@
 .ddg-ctl-feedback-row {
     display: none;
     visibility: hidden;
-    @media (min-width: 480px) {
+}
+@media (min-width: 480px) {
+    .ddg-ctl-feedback-row {
         height: 30px;
         justify-content: flex-end;
         align-items: center;

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

@@ -73,7 +73,7 @@ export class DDGCtlPlaceholderBlocked extends HTMLElement {
      * Creates a placeholder for content blocked by Click to Load.
      * @returns {HTMLDivElement}
      */
-    createPlaceholder () {
+    createPlaceholder = () => {
         const { title, body, unblockBtnText, useSlimCard, withToggle, withFeedback } = this.params
 
         const container = document.createElement('div')
@@ -105,7 +105,7 @@ export class DDGCtlPlaceholderBlocked extends HTMLElement {
     /**
      * Creates a template string for Learn More link.
      */
-    createLearnMoreLink () {
+    createLearnMoreLink = () => {
         const { sharedStrings } = this.params
 
         return html`<a
@@ -122,7 +122,7 @@ export class DDGCtlPlaceholderBlocked extends HTMLElement {
      * Creates a Feedback Link container row
      * @returns {HTMLDivElement}
      */
-    createShareFeedbackLink () {
+    createShareFeedbackLink = () => {
         const { sharedStrings } = this.params
 
         const container = document.createElement('div')
@@ -138,7 +138,7 @@ export class DDGCtlPlaceholderBlocked extends HTMLElement {
     /**
      * Creates a template string for a toggle button with text.
      */
-    createToggleButton () {
+    createToggleButton = () => {
         const { withToggle, isMobileApp } = this.params
         if (!withToggle) return
 
@@ -164,9 +164,9 @@ export class DDGCtlPlaceholderBlocked extends HTMLElement {
     /**
      *
      * @param {HTMLElement} containerElement
-     * @param {HTMLElement} feedbackLink
+     * @param {HTMLElement?} feedbackLink
      */
-    setupEventListeners (containerElement, feedbackLink) {
+    setupEventListeners = (containerElement, feedbackLink) => {
         const { withToggle, withFeedback, originalElement, onButtonClick } = this.params
 
         containerElement
@@ -178,7 +178,7 @@ export class DDGCtlPlaceholderBlocked extends HTMLElement {
                 .querySelector('.ddg-toggle-button-container')
                 ?.addEventListener('click', withToggle.onClick)
         }
-        if (withFeedback) {
+        if (withFeedback && feedbackLink) {
             feedbackLink.querySelector('.ddg-ctl-feedback-link')?.addEventListener('click', withFeedback.onClick)
         }
     }