mv element.io @types __mocks__/ debian docker module_system/ playwright res src test webapp Dockerfile .dockerignore .eslintignore .stylelintrc.cjs babel.config.cjs recorder-worklet-loader.cjs .modernizr.json components.json config.json config.sample.json package.json project.json tsconfig.json tsconfig.module_system.json jest.config.ts playwright.config.ts webpack.config.ts build_config.sample.yaml apps/web/

mkdir apps/web/scripts mv scripts/{cleanup.sh,ci_package.sh,copy-res.ts,deploy.py,package.sh} apps/web/scripts And a couple of gitignore tweaks Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2026-02-24 15:43:58 +00:00
parent e7509c92a1
commit 91a3cb03c1
3408 changed files with 28 additions and 32 deletions
@@ -0,0 +1,188 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 r00ster91 <r00ster91@proton.me>
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { sleep } from "matrix-js-sdk/src/utils";
+import { waitFor } from "jest-matrix-react";
+
+import SettingsStore from "../../../../src/settings/SettingsStore";
+import { SettingLevel } from "../../../../src/settings/SettingLevel";
+import { FontWatcher } from "../../../../src/settings/watchers/FontWatcher";
+import { Action } from "../../../../src/dispatcher/actions";
+import { untilDispatch } from "../../../test-utils";
+import defaultDispatcher from "../../../../src/dispatcher/dispatcher";
+
+async function setSystemFont(font: string | false): Promise<void> {
+    await SettingsStore.setValue("systemFont", null, SettingLevel.DEVICE, font || "");
+    await SettingsStore.setValue("useSystemFont", null, SettingLevel.DEVICE, !!font);
+    await untilDispatch(Action.UpdateSystemFont);
+    await sleep(1); // await the FontWatcher doing its action
+}
+
+async function setUseBundledEmojiFont(use: boolean): Promise<void> {
+    await SettingsStore.setValue("useBundledEmojiFont", null, SettingLevel.DEVICE, use);
+    await untilDispatch(Action.UpdateSystemFont);
+    await sleep(1); // await the FontWatcher doing its action
+}
+
+const getFontFamily = () => {
+    return document.body.style.getPropertyValue(FontWatcher.FONT_FAMILY_CUSTOM_PROPERTY);
+};
+const getEmojiFontFamily = () => {
+    return document.body.style.getPropertyValue(FontWatcher.EMOJI_FONT_FAMILY_CUSTOM_PROPERTY);
+};
+
+describe("FontWatcher", function () {
+    it("should load font on start()", async () => {
+        const watcher = new FontWatcher();
+        await setSystemFont("Font Name");
+        expect(getFontFamily()).toMatchInlineSnapshot(`""`);
+        await watcher.start();
+        expect(getFontFamily()).toMatchInlineSnapshot(`""Font Name", Twemoji"`);
+    });
+
+    it("should load font on Action.OnLoggedIn", async () => {
+        await setSystemFont("Font Name");
+        await new FontWatcher().start();
+        document.body.style.removeProperty(FontWatcher.FONT_FAMILY_CUSTOM_PROPERTY); // clear the fontFamily which was  by start which we tested already
+        defaultDispatcher.fire(Action.OnLoggedIn, true);
+        expect(getFontFamily()).toMatchInlineSnapshot(`""Font Name", Twemoji"`);
+    });
+
+    it("should reset font on Action.OnLoggedOut", async () => {
+        await setSystemFont("Font Name");
+        const watcher = new FontWatcher();
+        await watcher.start();
+        expect(getFontFamily()).toMatchInlineSnapshot(`""Font Name", Twemoji"`);
+        defaultDispatcher.fire(Action.OnLoggedOut, true);
+        expect(getFontFamily()).toMatchInlineSnapshot(`""`);
+    });
+
+    describe("Sets font as expected", () => {
+        let fontWatcher: FontWatcher;
+        beforeEach(async () => {
+            fontWatcher = new FontWatcher();
+            await fontWatcher.start();
+        });
+        afterEach(() => {
+            fontWatcher.stop();
+        });
+
+        it("encloses the fonts by double quotes and sets them as the system font", async () => {
+            await setSystemFont("Fira Sans Thin, Commodore 64");
+            expect(getFontFamily()).toMatchInlineSnapshot(`""Fira Sans Thin","Commodore 64", Twemoji"`);
+        });
+        it("does not add double quotes if already present and sets the font as the system font", async () => {
+            await setSystemFont(`"Commodore 64"`);
+            expect(getFontFamily()).toMatchInlineSnapshot(`""Commodore 64", Twemoji"`);
+        });
+        it("trims whitespace, encloses the fonts by double quotes, and sets them as the system font", async () => {
+            await setSystemFont(`  Fira Code  ,  "Commodore 64" `);
+            expect(getFontFamily()).toMatchInlineSnapshot(`""Fira Code","Commodore 64", Twemoji"`);
+        });
+    });
+
+    describe("Sets bundled emoji font as expected", () => {
+        let fontWatcher: FontWatcher;
+        beforeEach(async () => {
+            await setSystemFont(false);
+            fontWatcher = new FontWatcher();
+            await fontWatcher.start();
+        });
+        afterEach(() => {
+            fontWatcher.stop();
+        });
+
+        it("by default adds Twemoji font", async () => {
+            expect(getEmojiFontFamily()).toMatchInlineSnapshot(`"Twemoji"`);
+        });
+        it("does not add Twemoji font when disabled", async () => {
+            await setUseBundledEmojiFont(false);
+            expect(getEmojiFontFamily()).toMatchInlineSnapshot(`""`);
+        });
+        it("works in conjunction with useSystemFont", async () => {
+            await setSystemFont(`"Commodore 64"`);
+            await setUseBundledEmojiFont(true);
+            expect(getFontFamily()).toMatchInlineSnapshot(`""Commodore 64", Twemoji"`);
+        });
+    });
+
+    describe("Migrates baseFontSize", () => {
+        let watcher: FontWatcher | undefined;
+
+        beforeEach(() => {
+            document.documentElement.style.fontSize = "14px";
+            watcher = new FontWatcher();
+        });
+
+        afterEach(() => {
+            watcher!.stop();
+        });
+
+        it("should not run the migration", async () => {
+            await watcher!.start();
+            expect(SettingsStore.getValue("fontSizeDelta")).toBe(0);
+        });
+
+        it("should migrate from V1 font size to V3", async () => {
+            await SettingsStore.setValue("baseFontSize", null, SettingLevel.DEVICE, 13);
+            await watcher!.start();
+            // 13px (V1 font size) + 5px (V1 offset) + 1px (root font size increase) - 16px (default browser font size) = 3px
+            expect(SettingsStore.getValue("fontSizeDelta")).toBe(3);
+            // baseFontSize should be cleared
+            expect(SettingsStore.getValue("baseFontSize")).toBe(0);
+        });
+
+        it("should migrate from V2 font size to V3 using browser font size", async () => {
+            await SettingsStore.setValue("baseFontSizeV2", null, SettingLevel.DEVICE, 18);
+            await watcher!.start();
+            // 18px - 16px (default browser font size) = 2px
+            expect(SettingsStore.getValue("fontSizeDelta")).toBe(2);
+            // baseFontSize should be cleared
+            expect(SettingsStore.getValue("baseFontSizeV2")).toBe(0);
+        });
+
+        it("should migrate from V2 font size to V3 using fallback font size", async () => {
+            document.documentElement.style.fontSize = "";
+            await SettingsStore.setValue("baseFontSizeV2", null, SettingLevel.DEVICE, 18);
+            await watcher!.start();
+            // 18px - 16px (fallback) = 2px
+            expect(SettingsStore.getValue("fontSizeDelta")).toBe(2);
+            // baseFontSize should be cleared
+            expect(SettingsStore.getValue("baseFontSizeV2")).toBe(0);
+        });
+
+        it("should trigger migration when dispatched", async () => {
+            await watcher!.start();
+
+            await SettingsStore.setValue("baseFontSizeV2", null, SettingLevel.DEVICE, 18);
+            defaultDispatcher.fire(Action.MigrateBaseFontSize);
+
+            await waitFor(() => {
+                // 18px - 16px (default browser font size) = 2px
+                expect(SettingsStore.getValue("fontSizeDelta")).toBe(2);
+                // baseFontSizeV2 should be cleared
+                expect(SettingsStore.getValue("baseFontSizeV2")).toBe(0);
+            });
+        });
+    });
+
+    it("should update root font size with positive delta", async () => {
+        await new FontWatcher().start();
+
+        defaultDispatcher.dispatch({
+            action: Action.UpdateFontSizeDelta,
+            delta: 2,
+        });
+
+        await waitFor(() => {
+            const rootFontSize = document.querySelector<HTMLElement>(":root")!.style.fontSize;
+            expect(rootFontSize).toContain("2px");
+        });
+    });
+});
@@ -0,0 +1,208 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import SettingsStore from "../../../../src/settings/SettingsStore";
+import ThemeWatcher from "../../../../src/settings/watchers/ThemeWatcher";
+import { type SettingLevel } from "../../../../src/settings/SettingLevel";
+import { type SettingKey, type Settings } from "../../../../src/settings/Settings.tsx";
+
+function makeMatchMedia(values: any) {
+    class FakeMediaQueryList {
+        matches: false;
+        media?: null;
+        onchange?: null;
+        addListener() {}
+        removeListener() {}
+        addEventListener() {}
+        removeEventListener() {}
+        dispatchEvent() {
+            return true;
+        }
+
+        constructor(query: string) {
+            this.matches = values[query];
+        }
+    }
+
+    return function matchMedia(query: string) {
+        return new FakeMediaQueryList(query) as unknown as MediaQueryList;
+    };
+}
+
+function makeGetValue(values: any): any {
+    return function getValue<S extends SettingKey>(
+        settingName: S,
+        _roomId: string | null = null,
+        _excludeDefault = false,
+    ): Settings[S] {
+        return values[settingName];
+    };
+}
+
+function makeGetValueAt(values: any) {
+    return function getValueAt(
+        _level: SettingLevel,
+        settingName: string,
+        _roomId: string | null = null,
+        _explicit = false,
+        _excludeDefault = false,
+    ): any {
+        return values[settingName];
+    };
+}
+
+describe("ThemeWatcher", function () {
+    it("should choose a light theme by default", () => {
+        // Given no system settings
+        global.matchMedia = makeMatchMedia({});
+
+        // Then getEffectiveTheme returns light
+        const themeWatcher = new ThemeWatcher();
+        expect(themeWatcher.getEffectiveTheme()).toBe("light");
+    });
+
+    it("should choose default theme if system settings are inconclusive", () => {
+        // Given no system settings but we asked to use them
+        global.matchMedia = makeMatchMedia({});
+        SettingsStore.getValue = makeGetValue({
+            use_system_theme: true,
+            theme: "light",
+        });
+
+        // Then getEffectiveTheme returns light
+        const themeWatcher = new ThemeWatcher();
+        expect(themeWatcher.getEffectiveTheme()).toBe("light");
+    });
+
+    it("should choose a dark theme if that is selected", () => {
+        // Given system says light high contrast but theme is set to dark
+        global.matchMedia = makeMatchMedia({
+            "(prefers-contrast: more)": true,
+            "(prefers-color-scheme: light)": true,
+        });
+        SettingsStore.getValueAt = makeGetValueAt({ theme: "dark" });
+
+        // Then getEffectiveTheme returns dark
+        const themeWatcher = new ThemeWatcher();
+        expect(themeWatcher.getEffectiveTheme()).toBe("dark");
+    });
+
+    it("should choose a light theme if that is selected", () => {
+        // Given system settings say dark high contrast but theme set to light
+        global.matchMedia = makeMatchMedia({
+            "(prefers-contrast: more)": true,
+            "(prefers-color-scheme: dark)": true,
+        });
+        SettingsStore.getValueAt = makeGetValueAt({ theme: "light" });
+
+        // Then getEffectiveTheme returns light
+        const themeWatcher = new ThemeWatcher();
+        expect(themeWatcher.getEffectiveTheme()).toBe("light");
+    });
+
+    it("should choose a light-high-contrast theme if that is selected", () => {
+        // Given system settings say dark and theme set to light-high-contrast
+        global.matchMedia = makeMatchMedia({ "(prefers-color-scheme: dark)": true });
+        SettingsStore.getValueAt = makeGetValueAt({ theme: "light-high-contrast" });
+
+        // Then getEffectiveTheme returns light-high-contrast
+        const themeWatcher = new ThemeWatcher();
+        expect(themeWatcher.getEffectiveTheme()).toBe("light-high-contrast");
+    });
+
+    it("should choose a light theme if system prefers it (via default)", () => {
+        // Given system prefers lightness, even though we did not
+        // click "Use system theme" or choose a theme explicitly
+        global.matchMedia = makeMatchMedia({ "(prefers-color-scheme: light)": true });
+        SettingsStore.getValueAt = makeGetValueAt({});
+        SettingsStore.getValue = makeGetValue({ use_system_theme: true });
+
+        // Then getEffectiveTheme returns light
+        const themeWatcher = new ThemeWatcher();
+        expect(themeWatcher.getEffectiveTheme()).toBe("light");
+    });
+
+    it("should choose a dark theme if system prefers it (via default)", () => {
+        // Given system prefers darkness, even though we did not
+        // click "Use system theme" or choose a theme explicitly
+        global.matchMedia = makeMatchMedia({ "(prefers-color-scheme: dark)": true });
+        SettingsStore.getValueAt = makeGetValueAt({});
+        SettingsStore.getValue = makeGetValue({ use_system_theme: true });
+
+        // Then getEffectiveTheme returns dark
+        const themeWatcher = new ThemeWatcher();
+        expect(themeWatcher.getEffectiveTheme()).toBe("dark");
+    });
+
+    it("should choose a light theme if system prefers it (explicit)", () => {
+        // Given system prefers lightness
+        global.matchMedia = makeMatchMedia({ "(prefers-color-scheme: light)": true });
+        SettingsStore.getValueAt = makeGetValueAt({ use_system_theme: true });
+        SettingsStore.getValue = makeGetValue({ use_system_theme: true });
+
+        // Then getEffectiveTheme returns light
+        const themeWatcher = new ThemeWatcher();
+        expect(themeWatcher.getEffectiveTheme()).toBe("light");
+    });
+
+    it("should choose a dark theme if system prefers it (explicit)", () => {
+        // Given system prefers darkness
+        global.matchMedia = makeMatchMedia({ "(prefers-color-scheme: dark)": true });
+        SettingsStore.getValueAt = makeGetValueAt({ use_system_theme: true });
+        SettingsStore.getValue = makeGetValue({ use_system_theme: true });
+
+        // Then getEffectiveTheme returns dark
+        const themeWatcher = new ThemeWatcher();
+        expect(themeWatcher.getEffectiveTheme()).toBe("dark");
+    });
+
+    it("should choose a high-contrast theme if system prefers it", () => {
+        // Given system prefers high contrast and light
+        global.matchMedia = makeMatchMedia({
+            "(prefers-contrast: more)": true,
+            "(prefers-color-scheme: light)": true,
+        });
+        SettingsStore.getValueAt = makeGetValueAt({ use_system_theme: true });
+        SettingsStore.getValue = makeGetValue({ use_system_theme: true });
+
+        // Then getEffectiveTheme returns light-high-contrast
+        const themeWatcher = new ThemeWatcher();
+        expect(themeWatcher.getEffectiveTheme()).toBe("light-high-contrast");
+    });
+
+    it("should not choose a high-contrast theme if not available", () => {
+        // Given system prefers high contrast and dark, but we don't (yet)
+        // have a high-contrast dark theme
+        global.matchMedia = makeMatchMedia({
+            "(prefers-contrast: more)": true,
+            "(prefers-color-scheme: dark)": true,
+        });
+        SettingsStore.getValueAt = makeGetValueAt({ use_system_theme: true });
+        SettingsStore.getValue = makeGetValue({ use_system_theme: true });
+
+        // Then getEffectiveTheme returns dark
+        const themeWatcher = new ThemeWatcher();
+        expect(themeWatcher.getEffectiveTheme()).toBe("dark");
+    });
+
+    it("should identify custom dark themes as dark", () => {
+        SettingsStore.getValueAt = makeGetValueAt({ use_system_theme: false, theme: "custom-darkula" });
+        SettingsStore.getValue = makeGetValue({
+            custom_themes: [
+                {
+                    name: "darkula",
+                    is_dark: true,
+                },
+            ],
+        });
+
+        const themeWatcher = new ThemeWatcher();
+        expect(themeWatcher.getEffectiveTheme()).toBe("custom-darkula");
+        expect(themeWatcher.isUserOnDarkTheme()).toBe(true);
+    });
+});