Rethink the Click to Load initialisation logic (#230)

- Avoid messaging the huge placeholder configuration Object to the
  platform, just to have it sent back again.
- Use the already available parentEntity of the current website,
  instead of asking the platform for it.
- Determine if "clicksBeforeSimpleVersion" has been exceeded here,
  instead of relying on the platform to determine that.
- Take care to remove entities from the placeholder configuration
  Object that are not also enabled in the feature configuration.
- Take care to reduce the number of messages sent during
  initialisation with the happy side-effect of fixing a race
  condition.
- Remove the now unused message handlers and rename the
  "enableSocialTracker" message to "unblockClickToLoadContent".

Author: kzar

Sources/ContentScopeScripts/dist/contentScope.js

@@ -1964,6 +1964,10 @@
   let appID;
 
   const titleID = 'DuckDuckGoPrivacyEssentialsCTLElementTitle';
+
+  // TODO: Remove these redundant data structures and refactor the related code.
+  //       There should be no need to have the entity configuration stored in two
+  //       places.
   const entities = [];
   const entityData = {};
 
@@ -3218,7 +3222,7 @@
                   if (this.replaceSettings.type === 'loginButton') {
                       isLogin = true;
                   }
-                  window.addEventListener('ddg-ctp-enableSocialTracker-complete', () => {
+                  window.addEventListener('ddg-ctp-unblockClickToLoadContent-complete', () => {
                       const parent = replacementElement.parentNode;
 
                       // If we allow everything when this element is clicked,
@@ -3310,7 +3314,7 @@
                           fbElement.addEventListener('error', onError, { once: true });
                       }
                   }, { once: true });
-                  enableSocialTracker({ entity: this.entity, action: 'block-ctl-fb', isLogin });
+                  unblockClickToLoadContent({ entity: this.entity, action: 'block-ctl-fb', isLogin });
               }
           }.bind(this);
           // If this is a login button, show modal if needed
@@ -3323,31 +3327,16 @@
       }
   }
 
-  async function initCTL (resp) {
-      for (const entity of Object.keys(resp)) {
-          entities.push(entity);
-          const { informationalModal, simpleVersion } = resp[entity];
-          const shouldShowLoginModal = !!informationalModal;
-
-          const currentEntityData = {
-              shouldShowLoginModal,
-              simpleVersion
-          };
-
-          if (shouldShowLoginModal) {
-              currentEntityData.modalIcon = informationalModal.icon;
-              currentEntityData.modalTitle = informationalModal.messageTitle;
-              currentEntityData.modalText = informationalModal.messageBody;
-              currentEntityData.modalAcceptText = informationalModal.confirmButtonText;
-              currentEntityData.modalRejectText = informationalModal.rejectButtonText;
-          }
-
-          entityData[entity] = currentEntityData;
-      }
-      await replaceClickToLoadElements(resp);
+  /**
+   * Initialise the Click to Load feature, once the necessary details have been
+   * returned by the platform.
+   * @returns {Promise}
+   */
+  async function initCTL () {
+      await replaceClickToLoadElements();
 
       window.addEventListener('ddg-ctp-replace-element', ({ target }) => {
-          replaceClickToLoadElements(resp, target);
+          replaceClickToLoadElements(target);
       }, { capture: true });
 
       // Inform surrogate scripts that CTP is ready
@@ -3506,14 +3495,12 @@
 
   /**
    * Replace the blocked CTP elements on the page with placeholders.
-   * @param {Object} config
-   *   The parsed Click to Play configuration.
    * @param {Element} [targetElement]
    *   If specified, only this element will be replaced (assuming it matches
    *   one of the expected CSS selectors). If omitted, all matching elements
    *   in the document will be replaced instead.
    */
-  async function replaceClickToLoadElements (config, targetElement) {
+  async function replaceClickToLoadElements (targetElement) {
       for (const entity of Object.keys(config)) {
           for (const widgetData of Object.values(config[entity].elementData)) {
               const selector = widgetData.selectors.join();
@@ -3540,7 +3527,7 @@
    *********************************************************/
 
   /**
-   * @typedef enableSocialTrackerRequest
+   * @typedef unblockClickToLoadContentRequest
    * @property {string} entity
    *   The entity to unblock requests for (e.g. "Facebook").
    * @property {bool} [isLogin=false]
@@ -3555,15 +3542,15 @@
   /**
    * Send a message to the background to unblock requests for the given entity for
    * the page.
-   * @param {enableSocialTrackerRequest} message
-   * @see {@event ddg-ctp-enableSocialTracker-complete} for the response handler.
+   * @param {unblockClickToLoadContentRequest} message
+   * @see {@event ddg-ctp-unblockClickToLoadContent-complete} for the response handler.
    */
-  function enableSocialTracker (message) {
-      sendMessage('enableSocialTracker', message);
+  function unblockClickToLoadContent (message) {
+      sendMessage('unblockClickToLoadContent', message);
   }
 
   function runLogin (entity) {
-      enableSocialTracker({ entity, isLogin: true });
+      unblockClickToLoadContent({ entity, isLogin: true });
       originalWindowDispatchEvent(
           createCustomEvent('ddg-ctp-run-login', {
               detail: {
@@ -4292,25 +4279,36 @@
       return { youTubePreview, shadowRoot }
   }
 
+  // Convention is that each function should be named the same as the sendMessage
+  // method we are calling into eg. calling `sendMessage('getClickToLoadState')`
+  // will result in a response routed to `updateHandlers.getClickToLoadState()`.
   const updateHandlers = {
-      // Convention is that each function should be named the same as the sendMessage method we are calling into
-      // eg. calling sendMessage('initClickToLoad') will result in a response routed to 'updateHandlers.initClickToLoad()'
-      initClickToLoad: function (resp) {
+      getClickToLoadState (response) {
+          devMode = response.devMode;
+          isYoutubePreviewsEnabled = response.youtubePreviewsEnabled;
+          const { clickToLoadClicks } = response;
+
+          for (const [entity, clickCount] of Object.entries(clickToLoadClicks)) {
+              if (entityData[entity]) {
+                  entityData[entity].simpleVersion =
+                      clickCount >= entityData[entity].maxClicks;
+              }
+          }
+
+          // TODO: Move the below init logic to the exported init() function,
+          //       somehow waiting for this response handler to have been called
+          //       first.
+
+          // Start Click to Load
           if (document.readyState === 'complete') {
-              initCTL(resp);
+              initCTL();
           } else {
               // Content script loaded before page content, so wait for load.
               window.addEventListener('load', (event) => {
-                  initCTL(resp);
+                  initCTL();
               });
           }
       },
-      getDevMode: function (resp) {
-          devMode = resp;
-      },
-      getYoutubePreviewsEnabled: function (resp) {
-          isYoutubePreviewsEnabled = resp;
-      },
       setYoutubePreviewsEnabled: function (resp) {
           if (resp?.messageType && typeof resp?.value === 'boolean') {
               originalWindowDispatchEvent(new OriginalCustomEvent(resp.messageType, { detail: resp.value }));
@@ -4321,17 +4319,49 @@
               originalWindowDispatchEvent(new OriginalCustomEvent('ddg-ctp-youTubeVideoDetails', { detail: resp }));
           }
       },
-      enableSocialTracker: function (resp) {
-          originalWindowDispatchEvent(new OriginalCustomEvent('ddg-ctp-enableSocialTracker-complete', { detail: resp }));
+      unblockClickToLoadContent () {
+          originalWindowDispatchEvent(new OriginalCustomEvent('ddg-ctp-unblockClickToLoadContent-complete'));
       }
   };
 
   function init$e (args) {
-      sendMessage('getDevMode');
-      sendMessage('getYoutubePreviewsEnabled');
-      sendMessage('initClickToLoad', config);
+      const websiteOwner = args?.site?.parentEntity;
+      const settings = args?.featureSettings?.clickToPlay || {};
+
+      for (const entity of Object.keys(config)) {
+          // Strip config entities that are first-party, or aren't enabled in the
+          // extension's clickToPlay settings.
+          // Note: To support legacy configurations consider `undefined` state as
+          //       "enabled".
+          if ((websiteOwner && entity === websiteOwner) ||
+              !settings[entity] ||
+              settings[entity].state === 'disabled') {
+              delete config[entity];
+              continue
+          }
+
+          // Populate the entities and entityData data structures.
+          // TODO: Remove them and this logic, they seem unnecessary.
 
-      // Listen for events from surrogates
+          entities.push(entity);
+
+          const shouldShowLoginModal = !!config[entity].informationalModal;
+          const maxClicks = config[entity].clicksBeforeSimpleVersion || 3;
+          const currentEntityData = { maxClicks, shouldShowLoginModal };
+
+          if (shouldShowLoginModal) {
+              const { informationalModal } = config[entity];
+              currentEntityData.modalIcon = informationalModal.icon;
+              currentEntityData.modalTitle = informationalModal.messageTitle;
+              currentEntityData.modalText = informationalModal.messageBody;
+              currentEntityData.modalAcceptText = informationalModal.confirmButtonText;
+              currentEntityData.modalRejectText = informationalModal.rejectButtonText;
+          }
+
+          entityData[entity] = currentEntityData;
+      }
+
+      // Listen for events from "surrogate" scripts.
       addEventListener('ddg-ctp', (event) => {
           if (!event.detail) return
           const entity = event.detail.entity;
@@ -4351,6 +4381,11 @@
               }
           }
       });
+
+      // Request the current state of Click to Load from the platform.
+      // Note: When the response is received, initCTL() is then called by the
+      //       response handler to finish starting up the feature.
+      sendMessage('getClickToLoadState');
   }
 
   function update$1 (args) {