matrix/matrix-react-sdk
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-07-28 15:22:05 +03:00
Code Activity

Use browser's font size instead of hardcoded 16px as root font size (#12246)

Browse Source 
* WIP Use browser font size instead of hardcoded 16px

* Add font migration to v3

* Remove custom font size input

* Use a dropdown instead of a slider

* Add margin to the font size dropdown

* Fix `UpdateFontSizeDelta` action typo

* Fix `fontScale`in `Call.ts`

* Rename `baseFontSizeV3` to `fontSizeDelta`

* Update playwright test

* Add `default` next to the browser font size

* Remove remaining `TODO`

* Remove falsy `private`

* Improve doc

* Update snapshots after develop merge

* Remove commented import
This commit is contained in:
Florian Duros
2024-02-21 12:23:07 +01:00
committed by GitHub
parent 36a8d503df
commit 6d55ce0217
17 changed files with 453 additions and 366 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
test/components/views/settings/FontScalingPanel-test.tsx
View File

@ -15,11 +15,10 @@ limitations under the License.
*/
import React from "react";
import { fireEvent, render, waitFor } from "@testing-library/react";
import { render } from "@testing-library/react";
import * as TestUtils from "../../../test-utils";
import FontScalingPanel from "../../../../src/components/views/settings/FontScalingPanel";
import SettingsStore from "../../../../src/settings/SettingsStore";
describe("FontScalingPanel", () => {
it("renders the font scaling UI", () => {
@ -27,19 +26,4 @@ describe("FontScalingPanel", () => {
const { asFragment } = render(<FontScalingPanel />);
expect(asFragment()).toMatchSnapshot();
});
it("should clamp custom font size when disabling it", async () => {
jest.spyOn(SettingsStore, "setValue").mockResolvedValue(undefined);
TestUtils.stubClient();
const { container, getByText } = render(<FontScalingPanel />);
fireEvent.click(getByText("Use custom size"));
await waitFor(() => {
expect(container.querySelector("input[checked]")).toBeDefined();
});
fireEvent.change(container.querySelector("#font_size_field")!, { target: { value: "25" } });
fireEvent.click(getByText("Use custom size"));
await waitFor(() => {
expect(container.querySelector("#font_size_field")).toHaveValue(21);
});
});
});

188
test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap
View File

@ -18,6 +18,117 @@ exports[`FontScalingPanel renders the font scaling UI 1`] = `
<div
class="mx_SettingsSubsection_content mx_SettingsSubsection_contentStretch"
>
<div
class="mx_Field mx_Field_select mx_FontScalingPanel_Dropdown"
>
<select
id="mx_Field_1"
label="Font size"
placeholder="Font size"
type="text"
>
<option
value="-7"
>
9
</option>
<option
value="-6"
>
10
</option>
<option
value="-5"
>
11
</option>
<option
value="-4"
>
12
</option>
<option
value="-3"
>
13
</option>
<option
value="-2"
>
14
</option>
<option
value="-1"
>
15
</option>
<option
value="0"
>
16 (default)
</option>
<option
value="1"
>
17
</option>
<option
value="2"
>
18
</option>
<option
value="4"
>
20
</option>
<option
value="6"
>
22
</option>
<option
value="8"
>
24
</option>
<option
value="10"
>
26
</option>
<option
value="12"
>
28
</option>
<option
value="14"
>
30
</option>
<option
value="16"
>
32
</option>
<option
value="18"
>
34
</option>
<option
value="20"
>
36
</option>
</select>
<label
for="mx_Field_1"
>
Font size
</label>
</div>
<div
class="mx_FontScalingPanel_preview mx_EventTilePreview_loader"
>
@ -33,83 +144,6 @@ exports[`FontScalingPanel renders the font scaling UI 1`] = `
/>
</div>
</div>
<div
class="mx_FontScalingPanel_fontSlider"
>
<div
class="mx_FontScalingPanel_fontSlider_smallText"
>
Aa
</div>
<div
class="mx_Slider"
>
<input
aria-label="Font size"
autocomplete="off"
max="21"
min="11"
step="1"
type="range"
value="16"
/>
<output
class="mx_Slider_selection"
style="left: calc(2px + 50% + 1.2em - 1.2em);"
>
<span
class="mx_Slider_selection_label"
>
16
</span>
</output>
</div>
<div
class="mx_FontScalingPanel_fontSlider_largeText"
>
Aa
</div>
</div>
<span
class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
>
<input
id="checkbox_QgU2PomxwK"
type="checkbox"
/>
<label
for="checkbox_QgU2PomxwK"
>
<div
class="mx_Checkbox_background"
>
<div
class="mx_Checkbox_checkmark"
/>
</div>
<div>
Use custom size
</div>
</label>
</span>
<div
class="mx_Field mx_Field_input mx_AppearanceUserSettingsTab_checkboxControlledField"
>
<input
autocomplete="off"
disabled=""
id="font_size_field"
label="Font size"
placeholder="16"
type="number"
value="16"
/>
<label
for="font_size_field"
>
Font size
</label>
</div>
</div>
</div>
</DocumentFragment>

188
test/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
View File

@ -247,6 +247,117 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
<div
class="mx_SettingsSubsection_content mx_SettingsSubsection_contentStretch"
>
<div
class="mx_Field mx_Field_select mx_FontScalingPanel_Dropdown"
>
<select
id="mx_Field_1"
label="Font size"
placeholder="Font size"
type="text"
>
<option
value="-7"
>
9
</option>
<option
value="-6"
>
10
</option>
<option
value="-5"
>
11
</option>
<option
value="-4"
>
12
</option>
<option
value="-3"
>
13
</option>
<option
value="-2"
>
14
</option>
<option
value="-1"
>
15
</option>
<option
value="0"
>
16 (default)
</option>
<option
value="1"
>
17
</option>
<option
value="2"
>
18
</option>
<option
value="4"
>
20
</option>
<option
value="6"
>
22
</option>
<option
value="8"
>
24
</option>
<option
value="10"
>
26
</option>
<option
value="12"
>
28
</option>
<option
value="14"
>
30
</option>
<option
value="16"
>
32
</option>
<option
value="18"
>
34
</option>
<option
value="20"
>
36
</option>
</select>
<label
for="mx_Field_1"
>
Font size
</label>
</div>
<div
class="mx_FontScalingPanel_preview mx_EventTilePreview_loader"
>
@ -262,83 +373,6 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
/>
</div>
</div>
<div
class="mx_FontScalingPanel_fontSlider"
>
<div
class="mx_FontScalingPanel_fontSlider_smallText"
>
Aa
</div>
<div
class="mx_Slider"
>
<input
aria-label="Font size"
autocomplete="off"
max="21"
min="11"
step="1"
type="range"
value="16"
/>
<output
class="mx_Slider_selection"
style="left: calc(2px + 50% + 1.2em - 1.2em);"
>
<span
class="mx_Slider_selection_label"
>
16
</span>
</output>
</div>
<div
class="mx_FontScalingPanel_fontSlider_largeText"
>
Aa
</div>
</div>
<span
class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
>
<input
id="checkbox_QgU2PomxwK"
type="checkbox"
/>
<label
for="checkbox_QgU2PomxwK"
>
<div
class="mx_Checkbox_background"
>
<div
class="mx_Checkbox_checkmark"
/>
</div>
<div>
Use custom size
</div>
</label>
</span>
<div
class="mx_Field mx_Field_input mx_AppearanceUserSettingsTab_checkboxControlledField"
>
<input
autocomplete="off"
disabled=""
id="font_size_field"
label="Font size"
placeholder="16"
type="number"
value="16"
/>
<label
for="font_size_field"
>
Font size
</label>
</div>
</div>
</div>
<div

7
test/models/Call-test.ts
View File

@ -710,8 +710,8 @@ describe("ElementCall", () => {
const originalGetValue = SettingsStore.getValue;
SettingsStore.getValue = <T>(name: string, roomId?: string, excludeDefault?: boolean) => {
switch (name) {
case "baseFontSizeV2":
return 12 as T;
case "fontSizeDelta":
return 4 as T;
case "useSystemFont":
return true as T;
case "systemFont":
@ -720,13 +720,14 @@ describe("ElementCall", () => {
return originalGetValue<T>(name, roomId, excludeDefault);
}
};
document.documentElement.style.fontSize = "12px";
await ElementCall.create(room);
const call = Call.get(room);
if (!(call instanceof ElementCall)) throw new Error("Failed to create call");
const urlParams = new URLSearchParams(new URL(call.widget.url).hash.slice(1));
expect(urlParams.get("fontScale")).toBe("0.75");
expect(urlParams.get("fontScale")).toBe("1.5");
expect(urlParams.getAll("font")).toEqual(["OpenDyslexic", "DejaVu Sans"]);
SettingsStore.getValue = originalGetValue;

29
test/settings/watchers/FontWatcher-test.tsx
View File

@ -123,6 +123,7 @@ describe("FontWatcher", function () {
let watcher: FontWatcher | undefined;
beforeEach(() => {
document.documentElement.style.fontSize = "14px";
watcher = new FontWatcher();
});
@ -132,13 +133,35 @@ describe("FontWatcher", function () {
it("should not run the migration", async () => {
await watcher!.start();
expect(SettingsStore.getValue("baseFontSizeV2")).toBe(16);
expect(SettingsStore.getValue("fontSizeDelta")).toBe(0);
});
it("should migrate to default font size", async () => {
it("should migrate from V1 font size to V3", async () => {
await SettingsStore.setValue("baseFontSize", null, SettingLevel.DEVICE, 13);
await watcher!.start();
expect(SettingsStore.getValue("baseFontSizeV2")).toBe(19);
// 13px (V1 font size) + 5px (V1 offset) + 1px (root font size increase) - 14px (default browser font size) = 5px
expect(SettingsStore.getValue("fontSizeDelta")).toBe(5);
// 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 - 14px (default browser font size) = 2px
expect(SettingsStore.getValue("fontSizeDelta")).toBe(4);
// 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);
});
});
});