Add TypeScript types to element-hiding feature (#2016)

* Add TypeScript types to element-hiding feature

- Add JSDoc type definitions matching element-hiding.ts schema
- Cast getFeatureSetting return values to proper types with fallbacks
- Update function parameter types to use new JSDoc types
- Add type guards for union types (ElementHidingRule)
- Preserve all original comments from codebase
- Fix TypeScript compilation errors with proper null checks

This integrates the refactored schema types from privacy-configuration
into the content-scope-scripts element-hiding feature for better
type safety and maintainability.

* Restore missing comment

* Update element-hiding types and remove unnecessary selector guards

- Update TypeScript definitions to match new privacy configuration schema
- Split ElementHidingRuleWithSelector into ElementHidingRuleHide and ElementHidingRuleModify
- Make values required for modify rules, remove from hide rules
- Remove unnecessary 'selector' in rule guards from injectStyleTag() and hideAdNodes()
- Add type assertions to clarify that these functions only receive rules with selectors
- Improve code consistency and efficiency

* resolve fallback inconsistency over typedef on line 367

* Clarify mediaAndFormSelectors fallback logic

- Replace confusing self-referential fallback with explicit conditional
- Add comment explaining fallback to default value when setting is missing
- Make intent clear: fallback to hardcoded default, not preserve existing value
- Addresses feedback about unclear fallback pattern

* Remove null checks for modify rule values to surface configuration errors

- Remove if (rule.values) checks from modify-attr and modify-style cases
- Values property is required according to ElementHidingRuleModify typedef
- Null checks were masking configuration errors by silently ignoring malformed rules
- Now fails fast when values is missing, helping developers catch config issues early
- Fixes JSDoc type mismatch between required values property and null checks

* Fix mediaAndFormSelectors fallback to handle all falsy values

---------

Co-authored-by: euw-arasolofotsara1 <arasolofotsara@duckduckgo.com>

Author: icodebyamanda

injected/src/features/element-hiding.js

@@ -1,6 +1,58 @@
 import ContentFeature from '../content-feature';
 import { isBeingFramed, injectGlobalStyles } from '../utils';
 
+/**
+ * @typedef {Object} ElementHidingValue
+ * @property {string} property
+ * @property {string} value
+ */
+
+/**
+ * @typedef {Object} ElementHidingRuleHide
+ * @property {string} selector
+ * @property {'hide-empty' | 'hide' | 'closest-empty' | 'override'} type
+ */
+
+/**
+ * @typedef {Object} ElementHidingRuleModify
+ * @property {string} selector
+ * @property {'modify-style' | 'modify-attr'} type
+ * @property {ElementHidingValue[]} values
+ */
+
+/**
+ * @typedef {Object} ElementHidingRuleWithoutSelector
+ * @property {'disable-default'} type
+ */
+
+/**
+ * @typedef {ElementHidingRuleHide | ElementHidingRuleModify | ElementHidingRuleWithoutSelector} ElementHidingRule
+ */
+
+/**
+ * @typedef {Object} ElementHidingDomain
+ * @property {string | string[]} domain
+ * @property {ElementHidingRule[]} rules
+ */
+
+/**
+ * @typedef {Object} StyleTagException
+ * @property {string} domain
+ * @property {string} reason
+ */
+
+/**
+ * @typedef {Object} ElementHidingConfiguration
+ * @property {boolean} [useStrictHideStyleTag]
+ * @property {ElementHidingRule[]} rules
+ * @property {ElementHidingDomain[]} domains
+ * @property {number[]} [hideTimeouts]
+ * @property {number[]} [unhideTimeouts]
+ * @property {string} [mediaAndFormSelectors]
+ * @property {string[]} [adLabelStrings]
+ * @property {StyleTagException[]} [styleTagExceptions]
+ */
+
 let adLabelStrings = [];
 const parser = new DOMParser();
 let hiddenElements = new WeakMap();
@@ -18,7 +70,7 @@ let featureInstance;
 /**
  * Hide DOM element if rule conditions met
  * @param {HTMLElement} element
- * @param {Object} rule
+ * @param {ElementHidingRule} rule
  * @param {HTMLElement} [previousElement]
  */
 function collapseDomNode(element, rule, previousElement) {
@@ -67,7 +119,7 @@ function collapseDomNode(element, rule, previousElement) {
 /**
  * Unhide previously hidden DOM element if content loaded into it
  * @param {HTMLElement} element
- * @param {Object} rule
+ * @param {ElementHidingRule} rule
  */
 function expandNonEmptyDomNode(element, rule) {
     if (!element) {
@@ -185,9 +237,7 @@ function isDomNodeEmpty(node) {
 /**
  * Modify specified attribute(s) on element
  * @param {HTMLElement} element
- * @param {Object[]} values
- * @param {string} values[].property
- * @param {string} values[].value
+ * @param {ElementHidingValue[]} values
  */
 function modifyAttribute(element, values) {
     values.forEach((item) => {
@@ -199,9 +249,7 @@ function modifyAttribute(element, values) {
 /**
  * Modify specified style(s) on element
  * @param {HTMLElement} element
- * @param {Object[]} values
- * @param {string} values[].property
- * @param {string} values[].value
+ * @param {ElementHidingValue[]} values
  */
 function modifyStyle(element, values) {
     values.forEach((item) => {
@@ -212,9 +260,7 @@ function modifyStyle(element, values) {
 
 /**
  * Separate strict hide rules to inject as style tag if enabled
- * @param {Object[]} rules
- * @param {string} rules[].selector
- * @param {string} rules[].type
+ * @param {ElementHidingRule[]} rules
  */
 function extractTimeoutRules(rules) {
     if (!shouldInjectStyleTag) {
@@ -238,9 +284,7 @@ function extractTimeoutRules(rules) {
 
 /**
  * Create styletag for strict hide rules and append it to the document
- * @param {Object[]} rules
- * @param {string} rules[].selector
- * @param {string} rules[].type
+ * @param {ElementHidingRule[]} rules
  */
 function injectStyleTag(rules) {
     // if style tag already injected on SPA url change, don't inject again
@@ -253,9 +297,9 @@ function injectStyleTag(rules) {
 
     rules.forEach((rule, i) => {
         if (i !== rules.length - 1) {
-            selector = selector.concat(rule.selector, ',');
+            selector = selector.concat(/** @type {ElementHidingRuleHide | ElementHidingRuleModify} */ (rule).selector, ',');
         } else {
-            selector = selector.concat(rule.selector);
+            selector = selector.concat(/** @type {ElementHidingRuleHide | ElementHidingRuleModify} */ (rule).selector);
         }
     });
     const styleTagProperties = 'display:none!important;min-height:0!important;height:0!important;';
@@ -267,15 +311,13 @@ function injectStyleTag(rules) {
 
 /**
  * Apply list of active element hiding rules to page
- * @param {Object[]} rules
- * @param {string} rules[].selector
- * @param {string} rules[].type
+ * @param {ElementHidingRule[]} rules
  */
 function hideAdNodes(rules) {
     const document = globalThis.document;
 
     rules.forEach((rule) => {
-        const selector = forgivingSelector(rule.selector);
+        const selector = forgivingSelector(/** @type {ElementHidingRuleHide | ElementHidingRuleModify} */ (rule).selector);
         const matchingElementArray = [...document.querySelectorAll(selector)];
         matchingElementArray.forEach((element) => {
             // @ts-expect-error https://app.asana.com/0/1201614831475344/1203979574128023/f
@@ -317,14 +359,23 @@ export default class ElementHiding extends ContentFeature {
         }
 
         let activeRules;
+        /** @type {ElementHidingRule[]} */
         const globalRules = this.getFeatureSetting('rules');
-        adLabelStrings = this.getFeatureSetting('adLabelStrings');
-        shouldInjectStyleTag = this.getFeatureSetting('useStrictHideStyleTag');
+        /** @type {string[]} */
+        adLabelStrings = this.getFeatureSetting('adLabelStrings') || [];
+        /** @type {boolean} */
+        shouldInjectStyleTag = this.getFeatureSetting('useStrictHideStyleTag') || false;
+        /** @type {number[]} */
         hideTimeouts = this.getFeatureSetting('hideTimeouts') || hideTimeouts;
+        /** @type {number[]} */
         unhideTimeouts = this.getFeatureSetting('unhideTimeouts') || unhideTimeouts;
-        mediaAndFormSelectors = this.getFeatureSetting('mediaAndFormSelectors') || mediaAndFormSelectors;
+        /** @type {string} */
+        mediaAndFormSelectors = this.getFeatureSetting('mediaAndFormSelectors');
+        // Fall back to default value if setting is missing, null, empty, or other falsy values
+        if (!mediaAndFormSelectors) {
+            mediaAndFormSelectors = 'video,canvas,embed,object,audio,map,form,input,textarea,select,option,button';
+        }
 
-        // determine whether strict hide rules should be injected as a style tag
         if (shouldInjectStyleTag) {
             shouldInjectStyleTag = this.matchConditionalFeatureSetting('styleTagExceptions').length === 0;
         }
@@ -377,9 +428,7 @@ export default class ElementHiding extends ContentFeature {
 
     /**
      * Apply relevant hiding rules to page at set intervals
-     * @param {Object[]} rules
-     * @param {string} rules[].selector
-     * @param {string} rules[].type
+     * @param {ElementHidingRule[]} rules
      */
     applyRules(rules) {
         const timeoutRules = extractTimeoutRules(rules);