Merge branch 'main' into jd/ext-detector

Author: jdorweiler

.cursorrules

@@ -1,16 +1,79 @@
-# Content Scope Scripts - Cursor Rules
-
-## Documentation References
-
-When asked about Content Scope Scripts topics, refer to these documentation files:
-
-- **API Reference**: `injected/docs/api-reference.md`
-- **Feature Development**: `injected/docs/features-guide.md`
-- **Platform Integration and engine support**: `injected/docs/platform-integration.md`
-- **Development Utilities**: `injected/docs/development-utilities.md`
-- **Testing**: `injected/docs/testing-guide.md`
-- **Favicon**: `injected/docs/favicon.md`
-- **Message Bridge**: `injected/docs/message-bridge.md`
-- **Test Pages**: `injected/docs/test-pages-guide.md`
-- **Documentation Index**: `injected/docs/README.md`
-- **High-level Overview**: `injected/README.md` 
+# Content Scope Scripts (C-S-S)
+
+Shared JavaScript projects powering privacy features and special pages in DuckDuckGo's native apps (macOS, Windows, iOS, Android).
+
+## Workspaces
+
+This is an npm workspace monorepo with four sub-projects:
+
+### `injected/` - Browser Privacy Features
+
+JavaScript features injected into web pages for privacy protections. Features extend `ConfigFeature` and integrate with remote configuration for per-site enable/disable.
+
+**Features** (in `injected/src/features/`):
+- `api-manipulation` - API behavior modifications
+- `autofill-import` - Credential import support
+- `breakage-reporting` - Site breakage reports
+- `broker-protection` - Data broker removal automation
+- `click-to-load` - Social embed blocking
+- `cookie` - Cookie management
+- `duck-player` / `duck-player-native` - YouTube privacy player
+- `element-hiding` - Hide page elements
+- `exception-handler` - Error handling
+- `favicon` - Favicon privacy
+- `fingerprinting-*` - Audio, battery, canvas, hardware, screen, storage fingerprint protection
+- `google-rejected` - Google rejection handling
+- `gpc` - Global Privacy Control
+- `harmful-apis` - Dangerous API restrictions
+- `message-bridge` - Page↔content script messaging
+- `navigator-interface` - Navigator API modifications
+- `performance-metrics` - Performance tracking
+- `referrer` - Referrer protection
+- `web-compat` - Site compatibility fixes
+- `web-interference-detection` / `web-telemetry` - Monitoring
+
+**Docs:** `injected/docs/README.md` (index to all docs)
+
+### `special-pages/` - Embedded Browser Pages
+
+Preact-based HTML/CSS/JS applications embedded in browsers. Each page lives in `special-pages/pages/<name>/`.
+
+**Pages:**
+- `duckplayer` - YouTube privacy player UI
+- `errorpage` - Browser error pages
+- `example` - Template for new pages
+- `history` - Browsing history viewer
+- `new-tab` - New Tab Page
+- `onboarding` - First-run experience
+- `release-notes` - Browser release notes
+- `special-error` - SSL/certificate error pages
+
+**Docs:** `special-pages/README.md`, plus `readme.md` in each page directory
+
+### `messaging/` - Web-Native Communication
+
+Abstraction layer for web↔native messaging: `notify` (fire-and-forget), `request` (async response), `subscribe` (push updates).
+
+**Docs:** `messaging/docs/messaging.md`
+
+### `types-generator/` - Schema to TypeScript
+
+Generates TypeScript types from JSON Schema files. Used by other workspaces.
+
+## Commands
+
+Run from root. Use `nvm use` to set the correct Node version.
+
+| Command | Purpose |
+|---------|---------|
+| `npm run build` | Build all workspaces |
+| `npm run test-unit` | Unit tests (all workspaces) |
+| `npm run test-int` | Integration tests (Playwright) |
+| `npm run lint` | ESLint + TypeScript + Prettier |
+| `npm run lint-fix` | Auto-fix lint issues |
+| `npm run serve` | Serve injected test pages (port 3220) |
+| `npm run serve-special-pages` | Serve special pages (port 3221) |
+
+## Notes
+
+- When running Playwright commands, use `--reporter list` to prevent the Shell tool from hanging

.github/workflows/build.yml

@@ -3,9 +3,13 @@ name: Release
 on:
     workflow_dispatch:
         inputs:
-            version:
+            version_bump:
                 required: true
-                description: 'Release version'
+                description: 'Version bump type'
+                type: choice
+                options:
+                    - major
+                    - minor
 
 jobs:
     release_pr:
@@ -39,6 +43,44 @@ jobs:
                     git checkout -b releases origin/releases
                   fi
 
+            - name: Calculate next version
+              id: version
+              run: |
+                  # Get the latest tag (no longer using v prefix, filter out legacy v-prefixed tags)
+                  LATEST_TAG=$(git tag | grep -E '^[0-9]+\.[0-9]+\.[0-9]+$' | sort -V | tail -1)
+
+                  # Stop build if no version tag is found
+                  if [ -z "$LATEST_TAG" ]; then
+                    echo "Error: No semantic version tags found in repository"
+                    echo "Expected format: X.Y.Z (e.g., 12.5.0)"
+                    exit 1
+                  fi
+
+                  echo "Latest tag found: $LATEST_TAG"
+
+                  # Extract version numbers (remove 'v' prefix if present for backwards compatibility)
+                  VERSION_WITHOUT_V=${LATEST_TAG#v}
+
+                  # Parse major and minor (ignore patch since we don't support it)
+                  MAJOR=$(echo $VERSION_WITHOUT_V | cut -d. -f1)
+                  MINOR=$(echo $VERSION_WITHOUT_V | cut -d. -f2)
+
+                  # Calculate next version based on input
+                  if [ "${{ github.event.inputs.version_bump }}" = "major" ]; then
+                    NEXT_MAJOR=$((MAJOR + 1))
+                    NEXT_MINOR=0
+                  else
+                    NEXT_MAJOR=$MAJOR
+                    NEXT_MINOR=$((MINOR + 1))
+                  fi
+
+                  # Create new version (always without v prefix)
+                  NEXT_VERSION="${NEXT_MAJOR}.${NEXT_MINOR}.0"
+
+                  echo "Next version: $NEXT_VERSION"
+                  echo "RELEASE_VERSION=$NEXT_VERSION" >> $GITHUB_ENV
+                  echo "version=$NEXT_VERSION" >> $GITHUB_OUTPUT
+
             - name: Collect commit ranges
               run: |
                   bash ./scripts/changelog.sh > ${{ github.workspace }}/CHANGELOG.txt
@@ -69,7 +111,7 @@ jobs:
             - name: Commit build files
               uses: stefanzweifel/git-auto-commit-action@v7
               with:
-                  commit_message: 'Release build ${{ github.event.inputs.version }} [ci release]'
+                  commit_message: 'Release build ${{ steps.version.outputs.version }} [ci release]'
                   commit_options: '--allow-empty'
                   skip_checkout: true
                   branch: 'releases'
@@ -87,5 +129,5 @@ jobs:
                   body_path: ${{ github.workspace }}/CHANGELOG.txt
                   draft: false
                   prerelease: false
-                  tag_name: ${{ github.event.inputs.version }}
+                  tag_name: ${{ steps.version.outputs.version }}
                   target_commitish: 'releases'

injected/src/features/breakage-reporting.js

@@ -16,6 +16,18 @@ export default class BreakageReporting extends ContentFeature {
                 referrer,
             };
 
+            const getOpener = this.getFeatureSettingEnabled('opener', 'enabled');
+            if (getOpener) {
+                result.opener = !!window.opener;
+            }
+            const getReloaded = this.getFeatureSettingEnabled('reloaded', 'enabled');
+            if (getReloaded) {
+                result.pageReloaded =
+                    (window.performance.navigation && window.performance.navigation.type === 1) ||
+                    /** @type {PerformanceNavigationTiming[]} */
+                    (window.performance.getEntriesByType('navigation')).map((nav) => nav.type).includes('reload');
+            }
+
             // Only run detectors if explicitly configured
             // Fetch interferenceTypes from webInterferenceDetection feature settings
             const detectorSettings = this.getFeatureSetting('interferenceTypes', 'webInterferenceDetection');

special-pages/.cursorrules

@@ -0,0 +1,57 @@
+# Special Pages
+
+Preact-based HTML/CSS/JS applications embedded in DuckDuckGo browsers. Each page is an isolated app with privileged native API access.
+
+## Structure
+
+```
+pages/<name>/
+├── app/              # Preact components (App.jsx, *.module.css)
+├── src/index.js      # Page class with messaging methods  
+├── messages/         # JSON schemas → auto-generates types/
+├── types/<name>.ts   # Generated types (DO NOT EDIT)
+├── public/           # Static assets, index.html, locales/
+└── integration-tests/
+```
+
+**Shared code:** `shared/` contains reusable components (`Button`, `Card`, `Switch`, `Text`), `Environment` class, `TranslationProvider`, and `createSpecialPageMessaging()`.
+
+## Messaging Pattern
+
+Pages communicate with native via `@duckduckgo/messaging`. Define schemas in `messages/`:
+- `*.request.json` + `*.response.json` → async request/response
+- `*.notify.json` → fire-and-forget notification
+- `*.subscribe.json` → push-based subscription
+
+## TypeScript
+
+JSDoc types in JavaScript files. Import types via `@typedef` after imports:
+
+```javascript
+/** @typedef {import('./types.js').MyType} MyType */
+```
+
+## Styling
+
+- Use CSS Modules (`*.module.css`)
+- Global styles: `shared/styles/`
+
+## Testing
+
+Run from `special-pages/` directory:
+
+| Command | Purpose |
+|---------|---------|
+| `npm run test-unit` | Unit tests |
+| `npm run test-int` | Integration tests (all platforms) |
+| `npm run test-int -- --project ios` | Single platform |
+| `npm run test.screenshots` | Screenshot tests only |
+
+Integration tests use Page Object pattern—see `integration-tests/<name>.js` for helpers.
+
+Top-level commands (`npm run build`, `npm run lint`) also work from this directory.
+
+## Notes
+
+- When running Playwright commands, use `--reporter list` to prevent the Shell tool from hanging
+- Types in `types/` are auto-generated from `messages/` schemas—never edit manually

special-pages/pages/errorpage/public/index.html

@@ -7,7 +7,7 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <link rel="stylesheet" href="style.css">
 </head>
-<body>
+<body data-theme-variant="$THEME_VARIANT$">
     <div class="content-container">
         <div class="error-container">
             <div class="header-container">
@@ -21,5 +21,16 @@ <h1 class="error-header">$HEADER$</h1>
             <img src="img/logo-horizontal.svg" alt="DuckDuckGo" class="watermark">
         </div>
     </div>
+    <script>
+        /**
+         * Called by native to update the page theme at runtime
+         * @param {{ themeVariant: string }} payload
+         */
+        window.onChangeTheme = function(payload) {
+            if (payload && payload.themeVariant) {
+                document.body.dataset.themeVariant = payload.themeVariant;
+            }
+        };
+    </script>
 </body>
 </html>

special-pages/pages/errorpage/public/style.css

@@ -65,4 +65,26 @@ body {
     .error-description, .error-header {
         color: rgb(210, 210, 210);
     }
-}
+}
+
+/* TODO: Use colour variables from design-tokens */
+
+/* Theme variants - light mode */
+[data-theme-variant="coolGray"] { background: #d2d5e3; }
+[data-theme-variant="slateBlue"] { background: #d2e5f3; }
+[data-theme-variant="green"] { background: #e3eee1; }
+[data-theme-variant="violet"] { background: #e7e4f5; }
+[data-theme-variant="rose"] { background: #f8ebf5; }
+[data-theme-variant="orange"] { background: #fcedd8; }
+[data-theme-variant="desert"] { background: #eee9e1; }
+
+/* Theme variants - dark mode */
+@media (prefers-color-scheme: dark) {
+    [data-theme-variant="coolGray"] { background: #2b2f45; }
+    [data-theme-variant="slateBlue"] { background: #1e3347; }
+    [data-theme-variant="green"] { background: #203b30; }
+    [data-theme-variant="violet"] { background: #2e2158; }
+    [data-theme-variant="rose"] { background: #5b194b; }
+    [data-theme-variant="orange"] { background: #54240c; }
+    [data-theme-variant="desert"] { background: #3c3833; }
+}

special-pages/pages/errorpage/readme.md

@@ -10,6 +10,34 @@ So far, the following platforms are supported
 
 - macOS
 
+### Theming
+
+The error page supports theming through two mechanisms:
+
+#### Template Variable: `$THEME_VARIANT$`
+
+Native performs string interpolation to replace `$THEME_VARIANT$` in the HTML with a theme variant name.
+
+If string interpolation is not performed (i.e., `$THEME_VARIANT$` is left as-is), the page falls back to the default styling.
+
+**Supported variants:** `default`, `coolGray`, `slateBlue`, `green`, `violet`, `rose`, `orange`, `desert`
+
+#### Callback: `window.onChangeTheme`
+
+Native can call `window.onChangeTheme(payload)` to update the theme at runtime.
+
+**Payload:**
+```json
+{
+  "themeVariant": "coolGray"
+}
+```
+
+**Example native usage:**
+```javascript
+window.onChangeTheme({ themeVariant: 'coolGray' });
+```
+
 ---
 
 ## Contributing
@@ -26,4 +54,3 @@ Don't edit the generated files directly - any changes you make will not be refle
 
 Instead, make your changes in `src/` and then run `npm run build` from the root folder
   - or to build the special pages only (faster), run `npm run postbuild` instead
-

special-pages/pages/history/public/index.html

@@ -11,6 +11,15 @@
             }
         }
     </style>
+    <script>
+        // $LOADING_COLOR$ is replaced by native via string interpolation.
+        // This script must be in <head> to block rendering and prevent flash of wrong color.
+        const loadingColor = "$LOADING_COLOR$";
+        const hasLoadingColor = !!loadingColor && !loadingColor.startsWith("$");
+        if (hasLoadingColor) {
+            document.documentElement.style.background = loadingColor;
+        }
+    </script>
     <title>History</title>
     <meta name="robots" content="noindex,nofollow">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

special-pages/pages/new-tab/app/components/Icons.js

@@ -602,35 +602,6 @@ export function CloseSmallIcon(props) {
     );
 }
 
-/**
- * @param {import('preact').JSX.SVGAttributes<SVGSVGElement>} props
- */
-export function NewBadgeIcon(props) {
-    return (
-        <svg xmlns="http://www.w3.org/2000/svg" width="42" height="16" viewBox="0 0 42 16" fill="none" {...props}>
-            <path
-                d="M0 3.99792C0 1.78879 1.79086 -0.0020752 4 -0.0020752H38C40.2091 -0.0020752 42 1.78879 42 3.99792V11.9979C42 14.2071 40.2091 15.9979 38 15.9979H4C1.79086 15.9979 0 14.2071 0 11.9979V3.99792Z"
-                fill="#F9BE1A"
-            />
-            <path
-                d="M13.0913 9.1073H13.1812V3.94617H14.8032V12.0497H13.3999L9.64893 6.86707H9.55908V12.0497H7.93604V3.94617H9.35107L13.0913 9.1073Z"
-                fill="black"
-                fill-opacity="0.96"
-            />
-            <path
-                d="M22.144 5.3446H18.4722V7.29871H21.936V8.60144H18.4722V10.6512H22.144V12.0497H16.7759V3.94617H22.144V5.3446Z"
-                fill="black"
-                fill-opacity="0.96"
-            />
-            <path
-                d="M26.4663 9.73621H26.5562L28.0337 3.94617H29.4653L30.9702 9.73621H31.0601L32.312 3.94617H34.064L31.9136 12.0497H30.3247L28.7915 6.59167H28.7017L27.1851 12.0497H25.5854L23.4399 3.94617H25.2036L26.4663 9.73621Z"
-                fill="black"
-                fill-opacity="0.96"
-            />
-        </svg>
-    );
-}
-
 /**
  * @param {import('preact').JSX.SVGAttributes<SVGSVGElement>} props
  */