Add new Theme Color content feature

noisysocks · noisysocks · commit fb7d43612ec4 · 2025-04-03T16:22:59.000+11:00
diff --git a/injected/docs/theme-color.md b/injected/docs/theme-color.md
@@ -0,0 +1,30 @@
+---
+title: Theme Color Monitor
+---
+
+# Theme Color Monitor
+
+Reports the presence of the theme-color meta tag on page load.
+
+The theme-color meta tag is used by browsers to customize the UI color to match the website's branding. This feature reports the theme color value when it's found on initial page load.
+
+## Notifications
+
+### `themeColorFound`
+- {@link "Theme Color Messages".ThemeColorFoundNotification}
+- Sends initial theme color value on page load
+- If no theme-color meta tag is found, the themeColor value will be null
+
+**Example**
+
+```json
+{
+  "themeColor": "#ff0000",
+  "documentUrl": "https://example.com"
+}
+```
+
+## Remote Config
+
+### Enabled (default)
+{@includeCode ../integration-test/test-pages/theme-color/config/theme-color-enabled.json}
diff --git a/injected/integration-test/test-pages/theme-color/config/theme-color-absent.json b/injected/integration-test/test-pages/theme-color/config/theme-color-absent.json
@@ -0,0 +1,6 @@
+{
+  "features": {
+
+  },
+  "unprotectedTemporary": []
+}
diff --git a/injected/integration-test/test-pages/theme-color/config/theme-color-disabled.json b/injected/integration-test/test-pages/theme-color/config/theme-color-disabled.json
@@ -0,0 +1,9 @@
+{
+  "features": {
+    "themeColor": {
+      "state": "disabled",
+      "exceptions": []
+    }
+  },
+  "unprotectedTemporary": []
+}
diff --git a/injected/integration-test/test-pages/theme-color/config/theme-color-enabled.json b/injected/integration-test/test-pages/theme-color/config/theme-color-enabled.json
@@ -0,0 +1,9 @@
+{
+  "features": {
+    "themeColor": {
+      "state": "enabled",
+      "exceptions": []
+    }
+  },
+  "unprotectedTemporary": []
+}
diff --git a/injected/integration-test/test-pages/theme-color/index.html b/injected/integration-test/test-pages/theme-color/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Theme Color Test</title>
+    <meta name="theme-color" content="#ff0000">
+</head>
+<body>
+</body>
+</html>
diff --git a/injected/integration-test/test-pages/theme-color/media-queries.html b/injected/integration-test/test-pages/theme-color/media-queries.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Theme Color Media Queries Test</title>
+    <meta name="theme-color" content="#ff0000">
+    <meta name="theme-color" content="#00ff00" media="(min-width: 600px)">
+    <meta name="theme-color" content="#0000ff" media="(prefers-color-scheme: dark)">
+</head>
+<body>
+</body>
+</html>
diff --git a/injected/integration-test/test-pages/theme-color/no-theme-color.html b/injected/integration-test/test-pages/theme-color/no-theme-color.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>No Theme Color Test</title>
+</head>
+<body>
+</body>
+</html>
diff --git a/injected/integration-test/theme-color.spec.js b/injected/integration-test/theme-color.spec.js
@@ -0,0 +1,77 @@
+import { test, expect } from '@playwright/test';
+import { ResultsCollector } from './page-objects/results-collector.js';
+
+const HTML = '/theme-color/index.html';
+const CONFIG = './integration-test/test-pages/theme-color/config/theme-color-enabled.json';
+
+test('theme-color feature absent', async ({ page }, testInfo) => {
+    const CONFIG = './integration-test/test-pages/theme-color/config/theme-color-absent.json';
+    const themeColor = ResultsCollector.create(page, testInfo.project.use);
+    await themeColor.load(HTML, CONFIG);
+
+    const messages = await themeColor.waitForMessage('themeColorFound', 1);
+
+    expect(messages[0].payload.params).toStrictEqual({
+        themeColor: '#ff0000',
+        documentUrl: 'http://localhost:3220/theme-color/index.html',
+    });
+});
+
+test('theme-color (no theme color)', async ({ page }, testInfo) => {
+    const HTML = '/theme-color/no-theme-color.html';
+    const themeColor = ResultsCollector.create(page, testInfo.project.use);
+    await themeColor.load(HTML, CONFIG);
+
+    const messages = await themeColor.waitForMessage('themeColorFound', 1);
+
+    expect(messages[0].payload.params).toStrictEqual({
+        themeColor: null,
+        documentUrl: 'http://localhost:3220/theme-color/no-theme-color.html',
+    });
+});
+
+test('theme-color (viewport media query)', async ({ page }, testInfo) => {
+    // Use a desktop viewport
+    await page.setViewportSize({ width: 1280, height: 720 });
+
+    const HTML = '/theme-color/media-queries.html';
+    const themeColor = ResultsCollector.create(page, testInfo.project.use);
+    await themeColor.load(HTML, CONFIG);
+
+    const messages = await themeColor.waitForMessage('themeColorFound', 1);
+
+    expect(messages[0].payload.params).toStrictEqual({
+        themeColor: '#00ff00',
+        documentUrl: 'http://localhost:3220/theme-color/media-queries.html',
+    });
+});
+
+test('theme-color (color scheme media query)', async ({ page }, testInfo) => {
+    // Use a dark color scheme
+    await page.emulateMedia({ colorScheme: 'dark' });
+
+    const HTML = '/theme-color/media-queries.html';
+    const themeColor = ResultsCollector.create(page, testInfo.project.use);
+    await themeColor.load(HTML, CONFIG);
+
+    const messages = await themeColor.waitForMessage('themeColorFound', 1);
+
+    expect(messages[0].payload.params).toStrictEqual({
+        themeColor: '#0000ff',
+        documentUrl: 'http://localhost:3220/theme-color/media-queries.html',
+    });
+});
+
+test('theme-color feature disabled completely', async ({ page }, testInfo) => {
+    const CONFIG = './integration-test/test-pages/theme-color/config/theme-color-disabled.json';
+    const themeColor = ResultsCollector.create(page, testInfo.project.use);
+    await themeColor.load(HTML, CONFIG);
+
+    // this is here purely to guard against a false positive in this test.
+    // without this manual `wait`, it might be possible for the following assertion to
+    // pass, but just because it was too quick (eg: the first message wasn't sent yet)
+    await page.waitForTimeout(100);
+
+    const messages = await themeColor.outgoingMessages();
+    expect(messages).toHaveLength(0);
+});
diff --git a/injected/playwright.config.js b/injected/playwright.config.js
@@ -37,7 +37,11 @@ export default defineConfig({
         },
         {
             name: 'ios',
-            testMatch: ['integration-test/duckplayer-mobile.spec.js', 'integration-test/duckplayer-mobile-drawer.spec.js'],
+            testMatch: [
+                'integration-test/duckplayer-mobile.spec.js',
+                'integration-test/duckplayer-mobile-drawer.spec.js',
+                'integration-test/theme-color.spec.js',
+            ],
             use: { injectName: 'apple-isolated', platform: 'ios', ...devices['iPhone 13'] },
         },
         {
@@ -47,6 +51,7 @@ export default defineConfig({
                 'integration-test/duckplayer-mobile-drawer.spec.js',
                 'integration-test/web-compat-android.spec.js',
                 'integration-test/message-bridge-android.spec.js',
+                'integration-test/theme-color.spec.js',
             ],
             use: { injectName: 'android', platform: 'android', ...devices['Galaxy S5'] },
         },
diff --git a/injected/src/features.js b/injected/src/features.js
@@ -27,14 +27,15 @@ const otherFeatures = /** @type {const} */ ([
     'breakageReporting',
     'autofillPasswordImport',
     'favicon',
+    'themeColor',
 ]);
 
 /** @typedef {baseFeatures[number]|otherFeatures[number]} FeatureName */
 /** @type {Record<string, FeatureName[]>} */
 export const platformSupport = {
     apple: ['webCompat', ...baseFeatures],
-    'apple-isolated': ['duckPlayer', 'brokerProtection', 'performanceMetrics', 'clickToLoad', 'messageBridge', 'favicon'],
-    android: [...baseFeatures, 'webCompat', 'breakageReporting', 'duckPlayer', 'messageBridge'],
+    'apple-isolated': ['duckPlayer', 'brokerProtection', 'performanceMetrics', 'clickToLoad', 'messageBridge', 'favicon', 'themeColor'],
+    android: [...baseFeatures, 'webCompat', 'breakageReporting', 'duckPlayer', 'messageBridge', 'themeColor'],
     'android-broker-protection': ['brokerProtection'],
     'android-autofill-password-import': ['autofillPasswordImport'],
     windows: ['cookie', ...baseFeatures, 'windowsPermissionUsage', 'duckPlayer', 'brokerProtection', 'breakageReporting'],
diff --git a/injected/src/features/theme-color.js b/injected/src/features/theme-color.js
@@ -0,0 +1,44 @@
+import ContentFeature from '../content-feature.js';
+import { isBeingFramed } from '../utils.js';
+
+export class ThemeColor extends ContentFeature {
+    init() {
+        /**
+         * This feature never operates in a frame
+         */
+        if (isBeingFramed()) return;
+
+        window.addEventListener('DOMContentLoaded', () => {
+            // send once, immediately
+            this.send();
+        });
+    }
+
+    send() {
+        const themeColor = getThemeColor();
+        this.notify('themeColorFound', { themeColor, documentUrl: document.URL });
+    }
+}
+
+export default ThemeColor;
+
+/**
+ * Gets current theme color considering media queries
+ * Follows browser behavior by returning the last matching meta tag in document order
+ * @returns {string|null} The theme color value or null if not found
+ */
+function getThemeColor() {
+    const metaTags = document.head.querySelectorAll('meta[name="theme-color"]');
+    if (metaTags.length === 0) {
+        return null;
+    }
+
+    let lastMatchingTag = null;
+    for (const meta of metaTags) {
+        const mediaAttr = meta.getAttribute('media');
+        if (!mediaAttr || window.matchMedia(mediaAttr).matches) {
+            lastMatchingTag = meta;
+        }
+    }
+    return lastMatchingTag ? lastMatchingTag.getAttribute('content') : null;
+}
diff --git a/injected/src/messages/theme-color/themeColorFound.notify.json b/injected/src/messages/theme-color/themeColorFound.notify.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "title": "ThemeColorFound",
+  "required": ["themeColor", "documentUrl"],
+  "properties": {
+    "themeColor": {
+      "type": ["string", "null"],
+      "description": "The theme color value, or null if not present"
+    },
+    "documentUrl": {
+      "type": "string",
+      "description": "The URL of the document"
+    }
+  }
+}
diff --git a/injected/src/types/theme-color.ts b/injected/src/types/theme-color.ts
@@ -0,0 +1,37 @@
+/**
+ * These types are auto-generated from schema files.
+ * scripts/build-types.mjs is responsible for type generation.
+ * **DO NOT** edit this file directly as your changes will be lost.
+ *
+ * @module ThemeColor Messages
+ */
+
+/**
+ * Requests, Notifications and Subscriptions from the ThemeColor feature
+ */
+export interface ThemeColorMessages {
+  notifications: ThemeColorFoundNotification;
+}
+/**
+ * Generated from @see "../messages/theme-color/themeColorFound.notify.json"
+ */
+export interface ThemeColorFoundNotification {
+  method: "themeColorFound";
+  params: ThemeColorFound;
+}
+export interface ThemeColorFound {
+  /**
+   * The theme color value, or null if not present
+   */
+  themeColor: string | null;
+  /**
+   * The URL of the document
+   */
+  documentUrl: string;
+}
+
+declare module "../features/theme-color.js" {
+  export interface ThemeColor {
+    notify: import("@duckduckgo/messaging/lib/shared-types").MessagingBase<ThemeColorMessages>['notify']
+  }
+}
diff --git a/injected/src/utils.js b/injected/src/utils.js
@@ -703,7 +703,7 @@ export function isGloballyDisabled(args) {
  * @import {FeatureName} from "./features";
  * @type {FeatureName[]}
  */
-export const platformSpecificFeatures = ['windowsPermissionUsage', 'messageBridge', 'favicon'];
+export const platformSpecificFeatures = ['windowsPermissionUsage', 'messageBridge', 'favicon', 'themeColor'];
 
 export function isPlatformSpecificFeature(featureName) {
     return platformSpecificFeatures.includes(featureName);

-Original file line number
+Diff line change
@@ @@ -0,0 +1,6 @@ @@
 +{
 +  "features": {
++
 +  },
 +  "unprotectedTemporary": []
 +}