Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit ab5b7d0

Browse files
floriandurosflorianduros
committed
Add font migration to v3
1 parent 218bb2b commit ab5b7d0

File tree

4 files changed

+133
-26
lines changed

4 files changed

+133
-26
lines changed

‎src/settings/Settings.tsx

+12
Original file line numberDiff line numberDiff line change
@@ -526,6 +526,18 @@ export const SETTINGS: { [setting: string]: ISetting } = {
526526
supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG,
527527
default: false,
528528
},
529+
/**
530+
* With the transition to Compound we are moving to a base font size
531+
* of 16px. We're taking the opportunity to move away from the `baseFontSize`
532+
* setting that had a 5px offset.
533+
*
534+
*/
535+
"baseFontSizeV2": {
536+
displayName: _td("settings|appearance|font_size"),
537+
supportedLevels: [SettingLevel.DEVICE],
538+
default: "",
539+
controller: new FontSizeController(),
540+
},
529541
/**
530542
* Moving from `baseFontSizeV2` to `baseFontSizeV3` to replace the default 16px to --cpd-font-size-root
531543
* which is using the browser default font size.

‎src/settings/controllers/FontSizeController.ts

-2
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,6 @@ export default class FontSizeController extends SettingController {
2626
}
2727

2828
public onChange(level: SettingLevel, roomId: string, newValue: any): void {
29-
// TODO migrate fontV2 to fontV3
30-
3129
// In a distant past, `baseFontSize` was set on the account and config
3230
// level. This can be accessed only after the initial sync. If we end up
3331
// discovering that a logged in user has this kind of setting, we want to

‎src/settings/watchers/FontWatcher.ts

+95-21
Original file line numberDiff line numberDiff line change
@@ -55,36 +55,106 @@ export class FontWatcher implements IWatcher {
5555
this.updateFont();
5656
this.dispatcherRef = dis.register(this.onAction);
5757
/**
58-
* TODO To change before review
5958
* baseFontSize is an account level setting which is loaded after the initial
6059
* sync. Hence why we can't do that in the `constructor`
6160
*/
6261
await this.migrateBaseFontSize();
6362
}
6463

6564
/**
66-
* Migrating the old `baseFontSize` for Compound.
67-
* Everything will becomes slightly larger, and getting rid of the `SIZE_DIFF`
68-
* weirdness for locally persisted values
65+
* Migrate the base font size from the V1 and V2 version to the V3 version
66+
* @private
6967
*/
7068
private async migrateBaseFontSize(): Promise<void> {
71-
const legacyBaseFontSize = SettingsStore.getValue("baseFontSize");
72-
if (legacyBaseFontSize) {
73-
console.log("Migrating base font size for Compound, current value", legacyBaseFontSize);
74-
75-
// For some odd reason, the persisted value in user storage has an offset
76-
// of 5 pixels for all values stored under `baseFontSize`
77-
const LEGACY_SIZE_DIFF = 5;
78-
// Compound uses a base font size of `16px`, whereas the old Element
79-
// styles based their calculations off a `15px` root font size.
80-
const ROOT_FONT_SIZE_INCREASE = 1;
81-
82-
const baseFontSize = legacyBaseFontSize + ROOT_FONT_SIZE_INCREASE + LEGACY_SIZE_DIFF;
83-
84-
await SettingsStore.setValue("baseFontSizeV2", null, SettingLevel.DEVICE, baseFontSize);
85-
await SettingsStore.setValue("baseFontSize", null, SettingLevel.DEVICE, "");
86-
console.log("Migration complete, deleting legacy `baseFontSize`");
87-
}
69+
await this.migrateBaseFontV1toV3();
70+
await this.migrateBaseFontV2toV3();
71+
}
72+
73+
/**
74+
* Migrating from the V1 version of the base font size to the V3 version
75+
* The V3 is using the default browser font size as a base
76+
* Everything will become slightly larger, and getting rid of the `SIZE_DIFF`
77+
* weirdness for locally persisted values
78+
* @private
79+
*/
80+
private async migrateBaseFontV1toV3(): Promise<void> {
81+
const legacyBaseFontSize = SettingsStore.getValue<number>("baseFontSize");
82+
// No baseFontV1 found, nothing to migrate
83+
if (!legacyBaseFontSize) return;
84+
85+
console.log(
86+
"Migrating base font size -> base font size V2 -> base font size V3 for Compound, current value",
87+
legacyBaseFontSize,
88+
);
89+
90+
// Compute the new font size of the V2 version before migrating to V3
91+
const baseFontSizeV2 = this.computeBaseFontSizeV1toV2(legacyBaseFontSize);
92+
93+
// Compute the difference between the V2 and the V3 version
94+
const deltaV3 = this.computeFontSizeDeltaFromV2BaseFont(baseFontSizeV2);
95+
96+
await SettingsStore.setValue("baseFontSizeV3", null, SettingLevel.DEVICE, deltaV3);
97+
await SettingsStore.setValue("baseFontSize", null, SettingLevel.DEVICE, 0);
98+
console.log("Migration complete, deleting legacy `baseFontSize`");
99+
}
100+
101+
/**
102+
* Migrating from the V2 version of the base font size to the V3 version
103+
* @private
104+
*/
105+
private async migrateBaseFontV2toV3(): Promise<void> {
106+
const legacyBaseFontV2Size = SettingsStore.getValue<number>("baseFontSizeV2");
107+
// No baseFontV2 found, nothing to migrate
108+
if (!legacyBaseFontV2Size) return;
109+
110+
console.log("Migrating base font size V2 for Compound, current value", legacyBaseFontV2Size);
111+
112+
// Compute the difference between the V2 and the V3 version
113+
const deltaV3 = this.computeFontSizeDeltaFromV2BaseFont(legacyBaseFontV2Size);
114+
115+
await SettingsStore.setValue("baseFontSizeV3", null, SettingLevel.DEVICE, deltaV3);
116+
await SettingsStore.setValue("baseFontSizeV2", null, SettingLevel.DEVICE, 0);
117+
console.log("Migration complete, deleting legacy `baseFontSizeV2`");
118+
}
119+
120+
/**
121+
* Compute the V2 font size from the V1 font size
122+
* @param legacyBaseFontSize
123+
* @private
124+
*/
125+
private computeBaseFontSizeV1toV2(legacyBaseFontSize: number): number {
126+
// For some odd reason, the persisted value in user storage has an offset
127+
// of 5 pixels for all values stored under `baseFontSize`
128+
const LEGACY_SIZE_DIFF = 5;
129+
130+
// Compound uses a base font size of `16px`, whereas the old Element
131+
// styles based their calculations off a `15px` root font size.
132+
const ROOT_FONT_SIZE_INCREASE = 1;
133+
134+
// Compute the font size of the V2 version before migrating to V3
135+
return legacyBaseFontSize + ROOT_FONT_SIZE_INCREASE + LEGACY_SIZE_DIFF;
136+
}
137+
138+
/**
139+
* Compute the difference between the V2 font size and the default browser font size
140+
* @param legacyBaseFontV2Size
141+
* @private
142+
*/
143+
private computeFontSizeDeltaFromV2BaseFont(legacyBaseFontV2Size: number): number {
144+
const browserDefaultFontSize = this.getBrowserDefaultFontSize();
145+
146+
// Compute the difference between the V2 font size and the default browser font size
147+
return legacyBaseFontV2Size - browserDefaultFontSize;
148+
}
149+
150+
/**
151+
* Get the default font size of the browser
152+
* Fallback to 16px if the value is not found
153+
* @private
154+
* @returns {number} the value of ${@link DEFAULT_SIZE} in pixels
155+
*/
156+
private getBrowserDefaultFontSize(): number {
157+
return parseInt(window.getComputedStyle(document.documentElement).getPropertyValue("font-size"), 10) || 16;
88158
}
89159

90160
public stop(): void {
@@ -123,6 +193,10 @@ export class FontWatcher implements IWatcher {
123193
}
124194
};
125195

196+
/**
197+
* Set the root font size of the document
198+
* @param delta {number} the delta to add to the default font size
199+
*/
126200
private setRootFontSize = async (delta: number): Promise<void> => {
127201
// Check that the new delta doesn't exceed the limits
128202
const fontDelta = clamp(delta, FontWatcher.MIN_DELTA, FontWatcher.MAX_DELTA);

‎test/settings/watchers/FontWatcher-test.tsx

+26-3
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,7 @@ describe("FontWatcher", function () {
123123
let watcher: FontWatcher | undefined;
124124

125125
beforeEach(() => {
126+
document.documentElement.style.fontSize = "14px";
126127
watcher = new FontWatcher();
127128
});
128129

@@ -132,13 +133,35 @@ describe("FontWatcher", function () {
132133

133134
it("should not run the migration", async () => {
134135
await watcher!.start();
135-
expect(SettingsStore.getValue("baseFontSizeV2")).toBe(16);
136+
expect(SettingsStore.getValue("baseFontSizeV3")).toBe(0);
136137
});
137138

138-
it("should migrate to default font size", async () => {
139+
it("should migrate from V1 font size to V3", async () => {
139140
await SettingsStore.setValue("baseFontSize", null, SettingLevel.DEVICE, 13);
140141
await watcher!.start();
141-
expect(SettingsStore.getValue("baseFontSizeV2")).toBe(19);
142+
// 13px (V1 font size) + 5px (V1 offset) + 1px (root font size increase) - 14px (default browser font size) = 5px
143+
expect(SettingsStore.getValue("baseFontSizeV3")).toBe(5);
144+
// baseFontSize should be cleared
145+
expect(SettingsStore.getValue("baseFontSize")).toBe(0);
146+
});
147+
148+
it("should migrate from V2 font size to V3 using browser font size", async () => {
149+
await SettingsStore.setValue("baseFontSizeV2", null, SettingLevel.DEVICE, 18);
150+
await watcher!.start();
151+
// 18px - 14px (default browser font size) = 2px
152+
expect(SettingsStore.getValue("baseFontSizeV3")).toBe(4);
153+
// baseFontSize should be cleared
154+
expect(SettingsStore.getValue("baseFontSizeV2")).toBe(0);
155+
});
156+
157+
it("should migrate from V2 font size to V3 using fallback font size", async () => {
158+
document.documentElement.style.fontSize = "";
159+
await SettingsStore.setValue("baseFontSizeV2", null, SettingLevel.DEVICE, 18);
160+
await watcher!.start();
161+
// 18px - 16px (fallback) = 2px
162+
expect(SettingsStore.getValue("baseFontSizeV3")).toBe(2);
163+
// baseFontSize should be cleared
164+
expect(SettingsStore.getValue("baseFontSizeV2")).toBe(0);
142165
});
143166
});
144167
});

0 commit comments

Comments
 (0)