Skip to content

Commit aa0807c

Browse files
author
Alberto Iannaccone
authored
Limit interface scale (#1502)
* limit interface scale * debounce interface scale updates * limit font-size + refactor * remove excessive settings duplicate * remove useless async * fix interface scale step * change mainMenuManager visibility to private * fix menu registration * update menu actions when autoScaleInterface changes
1 parent 61a11a0 commit aa0807c

File tree

4 files changed

+246
-65
lines changed

4 files changed

+246
-65
lines changed

Diff for: arduino-ide-extension/src/browser/arduino-ide-frontend-module.ts

+2
Original file line numberDiff line numberDiff line change
@@ -333,6 +333,7 @@ import { StartupTaskProvider } from '../electron-common/startup-task';
333333
import { DeleteSketch } from './contributions/delete-sketch';
334334
import { UserFields } from './contributions/user-fields';
335335
import { UpdateIndexes } from './contributions/update-indexes';
336+
import { InterfaceScale } from './contributions/interface-scale';
336337

337338
const registerArduinoThemes = () => {
338339
const themes: MonacoThemeJson[] = [
@@ -746,6 +747,7 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
746747
Contribution.configure(bind, UserFields);
747748
Contribution.configure(bind, DeleteSketch);
748749
Contribution.configure(bind, UpdateIndexes);
750+
Contribution.configure(bind, InterfaceScale);
749751

750752
bindContributionProvider(bind, StartupTaskProvider);
751753
bind(StartupTaskProvider).toService(BoardsServiceProvider); // to reuse the boards config in another window

Diff for: arduino-ide-extension/src/browser/contributions/edit-contributions.ts

-56
Original file line numberDiff line numberDiff line change
@@ -49,30 +49,6 @@ export class EditContributions extends Contribution {
4949
registry.registerCommand(EditContributions.Commands.USE_FOR_FIND, {
5050
execute: () => this.run('editor.action.previousSelectionMatchFindAction'),
5151
});
52-
registry.registerCommand(EditContributions.Commands.INCREASE_FONT_SIZE, {
53-
execute: async () => {
54-
const settings = await this.settingsService.settings();
55-
if (settings.autoScaleInterface) {
56-
settings.interfaceScale = settings.interfaceScale + 1;
57-
} else {
58-
settings.editorFontSize = settings.editorFontSize + 1;
59-
}
60-
await this.settingsService.update(settings);
61-
await this.settingsService.save();
62-
},
63-
});
64-
registry.registerCommand(EditContributions.Commands.DECREASE_FONT_SIZE, {
65-
execute: async () => {
66-
const settings = await this.settingsService.settings();
67-
if (settings.autoScaleInterface) {
68-
settings.interfaceScale = settings.interfaceScale - 1;
69-
} else {
70-
settings.editorFontSize = settings.editorFontSize - 1;
71-
}
72-
await this.settingsService.update(settings);
73-
await this.settingsService.save();
74-
},
75-
});
7652
/* Tools */ registry.registerCommand(
7753
EditContributions.Commands.AUTO_FORMAT,
7854
{ execute: () => this.run('editor.action.formatDocument') }
@@ -147,23 +123,6 @@ ${value}
147123
order: '3',
148124
});
149125

150-
registry.registerMenuAction(ArduinoMenus.EDIT__FONT_CONTROL_GROUP, {
151-
commandId: EditContributions.Commands.INCREASE_FONT_SIZE.id,
152-
label: nls.localize(
153-
'arduino/editor/increaseFontSize',
154-
'Increase Font Size'
155-
),
156-
order: '0',
157-
});
158-
registry.registerMenuAction(ArduinoMenus.EDIT__FONT_CONTROL_GROUP, {
159-
commandId: EditContributions.Commands.DECREASE_FONT_SIZE.id,
160-
label: nls.localize(
161-
'arduino/editor/decreaseFontSize',
162-
'Decrease Font Size'
163-
),
164-
order: '1',
165-
});
166-
167126
registry.registerMenuAction(ArduinoMenus.EDIT__FIND_GROUP, {
168127
commandId: EditContributions.Commands.FIND.id,
169128
label: nls.localize('vscode/findController/startFindAction', 'Find'),
@@ -220,15 +179,6 @@ ${value}
220179
when: 'editorFocus',
221180
});
222181

223-
registry.registerKeybinding({
224-
command: EditContributions.Commands.INCREASE_FONT_SIZE.id,
225-
keybinding: 'CtrlCmd+=',
226-
});
227-
registry.registerKeybinding({
228-
command: EditContributions.Commands.DECREASE_FONT_SIZE.id,
229-
keybinding: 'CtrlCmd+-',
230-
});
231-
232182
registry.registerKeybinding({
233183
command: EditContributions.Commands.FIND.id,
234184
keybinding: 'CtrlCmd+F',
@@ -315,12 +265,6 @@ export namespace EditContributions {
315265
export const USE_FOR_FIND: Command = {
316266
id: 'arduino-for-find',
317267
};
318-
export const INCREASE_FONT_SIZE: Command = {
319-
id: 'arduino-increase-font-size',
320-
};
321-
export const DECREASE_FONT_SIZE: Command = {
322-
id: 'arduino-decrease-font-size',
323-
};
324268
export const AUTO_FORMAT: Command = {
325269
id: 'arduino-auto-format', // `Auto Format` should belong to `Tool`.
326270
};
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,228 @@
1+
import { inject, injectable } from '@theia/core/shared/inversify';
2+
import {
3+
Contribution,
4+
Command,
5+
MenuModelRegistry,
6+
KeybindingRegistry,
7+
} from './contribution';
8+
import { ArduinoMenus, PlaceholderMenuNode } from '../menu/arduino-menus';
9+
import {
10+
CommandRegistry,
11+
DisposableCollection,
12+
MaybePromise,
13+
nls,
14+
} from '@theia/core/lib/common';
15+
16+
import { Settings } from '../dialogs/settings/settings';
17+
import { MainMenuManager } from '../../common/main-menu-manager';
18+
import debounce = require('lodash.debounce');
19+
20+
@injectable()
21+
export class InterfaceScale extends Contribution {
22+
@inject(MenuModelRegistry)
23+
private readonly menuRegistry: MenuModelRegistry;
24+
25+
@inject(MainMenuManager)
26+
private readonly mainMenuManager: MainMenuManager;
27+
28+
private readonly menuActionsDisposables = new DisposableCollection();
29+
private fontScalingEnabled: InterfaceScale.FontScalingEnabled = {
30+
increase: true,
31+
decrease: true,
32+
};
33+
34+
private currentSettings: Settings;
35+
private updateSettingsDebounced = debounce(
36+
async () => {
37+
await this.settingsService.update(this.currentSettings);
38+
await this.settingsService.save();
39+
},
40+
100,
41+
{ maxWait: 200 }
42+
);
43+
44+
override onStart(): MaybePromise<void> {
45+
const updateCurrent = (settings: Settings) => {
46+
this.currentSettings = settings;
47+
this.updateFontScalingEnabled();
48+
};
49+
this.settingsService.onDidChange((settings) => updateCurrent(settings));
50+
this.settingsService.settings().then((settings) => updateCurrent(settings));
51+
}
52+
53+
override registerCommands(registry: CommandRegistry): void {
54+
registry.registerCommand(InterfaceScale.Commands.INCREASE_FONT_SIZE, {
55+
execute: () => this.updateFontSize('increase'),
56+
isEnabled: () => this.fontScalingEnabled.increase,
57+
});
58+
registry.registerCommand(InterfaceScale.Commands.DECREASE_FONT_SIZE, {
59+
execute: () => this.updateFontSize('decrease'),
60+
isEnabled: () => this.fontScalingEnabled.decrease,
61+
});
62+
}
63+
64+
override registerMenus(registry: MenuModelRegistry): void {
65+
this.menuActionsDisposables.dispose();
66+
const increaseFontSizeMenuAction = {
67+
commandId: InterfaceScale.Commands.INCREASE_FONT_SIZE.id,
68+
label: nls.localize(
69+
'arduino/editor/increaseFontSize',
70+
'Increase Font Size'
71+
),
72+
order: '0',
73+
};
74+
const decreaseFontSizeMenuAction = {
75+
commandId: InterfaceScale.Commands.DECREASE_FONT_SIZE.id,
76+
label: nls.localize(
77+
'arduino/editor/decreaseFontSize',
78+
'Decrease Font Size'
79+
),
80+
order: '1',
81+
};
82+
83+
if (this.fontScalingEnabled.increase) {
84+
this.menuActionsDisposables.push(
85+
registry.registerMenuAction(
86+
ArduinoMenus.EDIT__FONT_CONTROL_GROUP,
87+
increaseFontSizeMenuAction
88+
)
89+
);
90+
} else {
91+
this.menuActionsDisposables.push(
92+
registry.registerMenuNode(
93+
ArduinoMenus.EDIT__FONT_CONTROL_GROUP,
94+
new PlaceholderMenuNode(
95+
ArduinoMenus.EDIT__FONT_CONTROL_GROUP,
96+
increaseFontSizeMenuAction.label,
97+
{ order: increaseFontSizeMenuAction.order }
98+
)
99+
)
100+
);
101+
}
102+
if (this.fontScalingEnabled.decrease) {
103+
this.menuActionsDisposables.push(
104+
this.menuRegistry.registerMenuAction(
105+
ArduinoMenus.EDIT__FONT_CONTROL_GROUP,
106+
decreaseFontSizeMenuAction
107+
)
108+
);
109+
} else {
110+
this.menuActionsDisposables.push(
111+
this.menuRegistry.registerMenuNode(
112+
ArduinoMenus.EDIT__FONT_CONTROL_GROUP,
113+
new PlaceholderMenuNode(
114+
ArduinoMenus.EDIT__FONT_CONTROL_GROUP,
115+
decreaseFontSizeMenuAction.label,
116+
{ order: decreaseFontSizeMenuAction.order }
117+
)
118+
)
119+
);
120+
}
121+
this.mainMenuManager.update();
122+
}
123+
124+
private updateFontScalingEnabled(): void {
125+
let fontScalingEnabled = {
126+
increase: true,
127+
decrease: true,
128+
};
129+
130+
if (this.currentSettings.autoScaleInterface) {
131+
fontScalingEnabled = {
132+
increase:
133+
this.currentSettings.interfaceScale + InterfaceScale.ZoomLevel.STEP <=
134+
InterfaceScale.ZoomLevel.MAX,
135+
decrease:
136+
this.currentSettings.interfaceScale - InterfaceScale.ZoomLevel.STEP >=
137+
InterfaceScale.ZoomLevel.MIN,
138+
};
139+
} else {
140+
fontScalingEnabled = {
141+
increase:
142+
this.currentSettings.editorFontSize + InterfaceScale.FontSize.STEP <=
143+
InterfaceScale.FontSize.MAX,
144+
decrease:
145+
this.currentSettings.editorFontSize - InterfaceScale.FontSize.STEP >=
146+
InterfaceScale.FontSize.MIN,
147+
};
148+
}
149+
150+
const isChanged = Object.keys(fontScalingEnabled).some(
151+
(key: keyof InterfaceScale.FontScalingEnabled) =>
152+
fontScalingEnabled[key] !== this.fontScalingEnabled[key]
153+
);
154+
if (isChanged) {
155+
this.fontScalingEnabled = fontScalingEnabled;
156+
this.registerMenus(this.menuRegistry);
157+
}
158+
}
159+
160+
private updateFontSize(mode: 'increase' | 'decrease'): void {
161+
if (this.currentSettings.autoScaleInterface) {
162+
mode === 'increase'
163+
? (this.currentSettings.interfaceScale += InterfaceScale.ZoomLevel.STEP)
164+
: (this.currentSettings.interfaceScale -=
165+
InterfaceScale.ZoomLevel.STEP);
166+
} else {
167+
mode === 'increase'
168+
? (this.currentSettings.editorFontSize += InterfaceScale.FontSize.STEP)
169+
: (this.currentSettings.editorFontSize -= InterfaceScale.FontSize.STEP);
170+
}
171+
this.updateFontScalingEnabled();
172+
this.updateSettingsDebounced();
173+
}
174+
175+
override registerKeybindings(registry: KeybindingRegistry): void {
176+
registry.registerKeybinding({
177+
command: InterfaceScale.Commands.INCREASE_FONT_SIZE.id,
178+
keybinding: 'CtrlCmd+=',
179+
});
180+
registry.registerKeybinding({
181+
command: InterfaceScale.Commands.DECREASE_FONT_SIZE.id,
182+
keybinding: 'CtrlCmd+-',
183+
});
184+
}
185+
}
186+
187+
export namespace InterfaceScale {
188+
export namespace Commands {
189+
export const INCREASE_FONT_SIZE: Command = {
190+
id: 'arduino-increase-font-size',
191+
};
192+
export const DECREASE_FONT_SIZE: Command = {
193+
id: 'arduino-decrease-font-size',
194+
};
195+
}
196+
197+
export namespace ZoomLevel {
198+
export const MIN = -8;
199+
export const MAX = 9;
200+
export const STEP = 1;
201+
202+
export function toPercentage(scale: number): number {
203+
return scale * 20 + 100;
204+
}
205+
export function fromPercentage(percentage: number): number {
206+
return (percentage - 100) / 20;
207+
}
208+
export namespace Step {
209+
export function toPercentage(step: number): number {
210+
return step * 20;
211+
}
212+
export function fromPercentage(percentage: number): number {
213+
return percentage / 20;
214+
}
215+
}
216+
}
217+
218+
export namespace FontSize {
219+
export const MIN = 8;
220+
export const MAX = 72;
221+
export const STEP = 2;
222+
}
223+
224+
export interface FontScalingEnabled {
225+
increase: boolean;
226+
decrease: boolean;
227+
}
228+
}

Diff for: arduino-ide-extension/src/browser/dialogs/settings/settings-component.tsx

+16-9
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,22 @@ import {
2323
LanguageInfo,
2424
} from '@theia/core/lib/common/i18n/localization';
2525
import SettingsStepInput from './settings-step-input';
26+
import { InterfaceScale } from '../../contributions/interface-scale';
27+
28+
const maxScale = InterfaceScale.ZoomLevel.toPercentage(
29+
InterfaceScale.ZoomLevel.MAX
30+
);
31+
const minScale = InterfaceScale.ZoomLevel.toPercentage(
32+
InterfaceScale.ZoomLevel.MIN
33+
);
34+
const scaleStep = InterfaceScale.ZoomLevel.Step.toPercentage(
35+
InterfaceScale.ZoomLevel.STEP
36+
);
37+
38+
const maxFontSize = InterfaceScale.FontSize.MAX;
39+
const minFontSize = InterfaceScale.FontSize.MIN;
40+
const fontSizeStep = InterfaceScale.FontSize.STEP;
2641

27-
const maxScale = 280;
28-
const minScale = -60;
29-
const scaleStep = 20;
30-
31-
const maxFontSize = 72;
32-
const minFontSize = 0;
33-
const fontSizeStep = 2;
3442
export class SettingsComponent extends React.Component<
3543
SettingsComponent.Props,
3644
SettingsComponent.State
@@ -554,8 +562,7 @@ export class SettingsComponent extends React.Component<
554562
};
555563

556564
private setInterfaceScale = (percentage: number) => {
557-
const interfaceScale = (percentage - 100) / 20;
558-
565+
const interfaceScale = InterfaceScale.ZoomLevel.fromPercentage(percentage);
559566
this.setState({ interfaceScale });
560567
};
561568

0 commit comments

Comments
 (0)