Skip to content

Commit a9da56d

Browse files
elianivaelianiva
committed
feat(ui): adjust roo font size
1 parent 13534cc commit a9da56d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+610
-382
lines changed

‎packages/types/src/vscode.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,8 @@ export const commandIds = [
5454
"acceptInput",
5555
"focusPanel",
5656
"toggleAutoApprove",
57+
"increaseFontSize",
58+
"decreaseFontSize",
5759
] as const
5860

5961
export type CommandId = (typeof commandIds)[number]

‎src/activate/registerCommands.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -233,6 +233,38 @@ const getCommandsMap = ({ context, outputChannel, provider }: RegisterCommandOpt
233233
action: "toggleAutoApprove",
234234
})
235235
},
236+
increaseFontSize: async () => {
237+
const config = vscode.workspace.getConfiguration(Package.name)
238+
const currentMultiplier = config.get<number>("fontSizeMultiplier") || 1.0
239+
const newMultiplier = Math.min(currentMultiplier + 0.1, 3.0)
240+
241+
await config.update("fontSizeMultiplier", newMultiplier, vscode.ConfigurationTarget.Global)
242+
243+
const visibleProvider = getVisibleProviderOrLog(outputChannel)
244+
if (visibleProvider) {
245+
visibleProvider.postMessageToWebview({
246+
type: "action",
247+
action: "fontSizeChanged",
248+
fontSizeMultiplier: newMultiplier,
249+
})
250+
}
251+
},
252+
decreaseFontSize: async () => {
253+
const config = vscode.workspace.getConfiguration(Package.name)
254+
const currentMultiplier = config.get<number>("fontSizeMultiplier") || 1.0
255+
const newMultiplier = Math.max(currentMultiplier - 0.1, 0.5)
256+
257+
await config.update("fontSizeMultiplier", newMultiplier, vscode.ConfigurationTarget.Global)
258+
259+
const visibleProvider = getVisibleProviderOrLog(outputChannel)
260+
if (visibleProvider) {
261+
visibleProvider.postMessageToWebview({
262+
type: "action",
263+
action: "fontSizeChanged",
264+
fontSizeMultiplier: newMultiplier,
265+
})
266+
}
267+
},
236268
})
237269

238270
export const openClineInNewTab = async ({ context, outputChannel }: Omit<RegisterCommandOptions, "provider">) => {

‎src/core/webview/ClineProvider.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1817,6 +1817,10 @@ export class ClineProvider
18171817
featureRoomoteControlEnabled,
18181818
} = await this.getState()
18191819

1820+
// Get font size multiplier from VSCode settings
1821+
const fontSizeMultiplier =
1822+
vscode.workspace.getConfiguration(Package.name).get<number>("fontSizeMultiplier") || 1.0
1823+
18201824
let cloudOrganizations: CloudOrganizationMembership[] = []
18211825

18221826
try {
@@ -1964,6 +1968,7 @@ export class ClineProvider
19641968
openRouterImageGenerationSelectedModel,
19651969
openRouterUseMiddleOutTransform,
19661970
featureRoomoteControlEnabled,
1971+
fontSizeMultiplier,
19671972
}
19681973
}
19691974

@@ -2195,6 +2200,8 @@ export class ClineProvider
21952200
return false
21962201
}
21972202
})(),
2203+
fontSizeMultiplier:
2204+
vscode.workspace.getConfiguration(Package.name).get<number>("fontSizeMultiplier") || 1.0,
21982205
}
21992206
}
22002207

‎src/core/webview/__tests__/ClineProvider.spec.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -557,6 +557,7 @@ describe("ClineProvider", () => {
557557
remoteControlEnabled: false,
558558
taskSyncEnabled: false,
559559
featureRoomoteControlEnabled: false,
560+
fontSizeMultiplier: 1,
560561
}
561562

562563
const message: ExtensionMessage = {

‎src/package.json‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,16 @@
179179
"command": "roo-cline.toggleAutoApprove",
180180
"title": "%command.toggleAutoApprove.title%",
181181
"category": "%configuration.title%"
182+
},
183+
{
184+
"command": "roo-cline.increaseFontSize",
185+
"title": "%command.increaseFontSize.title%",
186+
"category": "%configuration.title%"
187+
},
188+
{
189+
"command": "roo-cline.decreaseFontSize",
190+
"title": "%command.decreaseFontSize.title%",
191+
"category": "%configuration.title%"
182192
}
183193
],
184194
"menus": {
@@ -429,6 +439,13 @@
429439
"minimum": 1,
430440
"maximum": 200,
431441
"description": "%settings.codeIndex.embeddingBatchSize.description%"
442+
},
443+
"roo-cline.fontSizeMultiplier": {
444+
"type": "number",
445+
"default": 1,
446+
"minimum": 0.5,
447+
"maximum": 3,
448+
"description": "%settings.fontSizeMultiplier.description%"
432449
}
433450
}
434451
}

‎src/package.nls.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@
2727
"command.terminal.explainCommand.title": "Explain This Command",
2828
"command.acceptInput.title": "Accept Input/Suggestion",
2929
"command.toggleAutoApprove.title": "Toggle Auto-Approve",
30+
"command.increaseFontSize.title": "Increase Font Size",
31+
"command.decreaseFontSize.title": "Decrease Font Size",
3032
"configuration.title": "Roo Code",
3133
"commands.allowedCommands.description": "Commands that can be auto-executed when 'Always approve execute operations' is enabled",
3234
"commands.deniedCommands.description": "Command prefixes that will be automatically denied without asking for approval. In case of conflicts with allowed commands, the longest prefix match takes precedence. Add * to deny all commands.",
@@ -42,5 +44,6 @@
4244
"settings.useAgentRules.description": "Enable loading of AGENTS.md files for agent-specific rules (see https://agent-rules.org/)",
4345
"settings.apiRequestTimeout.description": "Maximum time in seconds to wait for API responses (0 = no timeout, 1-3600s, default: 600s). Higher values are recommended for local providers like LM Studio and Ollama that may need more processing time.",
4446
"settings.newTaskRequireTodos.description": "Require todos parameter when creating new tasks with the new_task tool",
45-
"settings.codeIndex.embeddingBatchSize.description": "The batch size for embedding operations during code indexing. Adjust this based on your API provider's limits. Default is 60."
47+
"settings.codeIndex.embeddingBatchSize.description": "The batch size for embedding operations during code indexing. Adjust this based on your API provider's limits. Default is 60.",
48+
"settings.fontSizeMultiplier.description": "Font size multiplier for the RooCode interface. Adjusts all font sizes proportionally (0.5-3.0, default: 1.0)"
4649
}

‎src/shared/ExtensionMessage.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,7 @@ export interface ExtensionMessage {
140140
| "focusInput"
141141
| "switchTab"
142142
| "toggleAutoApprove"
143+
| "fontSizeChanged"
143144
invoke?: "newChat" | "sendMessage" | "primaryButtonClick" | "secondaryButtonClick" | "setChatBoxMessage"
144145
state?: ExtensionState
145146
images?: string[]
@@ -205,6 +206,7 @@ export interface ExtensionMessage {
205206
queuedMessages?: QueuedMessage[]
206207
list?: string[] // For dismissedUpsells
207208
organizationId?: string | null // For organizationSwitchResult
209+
fontSizeMultiplier?: number // For fontSizeChanged action
208210
}
209211

210212
export type ExtensionState = Pick<
@@ -353,6 +355,7 @@ export type ExtensionState = Pick<
353355
remoteControlEnabled: boolean
354356
taskSyncEnabled: boolean
355357
featureRoomoteControlEnabled: boolean
358+
fontSizeMultiplier: number
356359
}
357360

358361
export interface ClineSayTool {

‎webview-ui/src/App.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ const App = () => {
7979
cloudOrganizations,
8080
renderContext,
8181
mdmCompliant,
82+
fontSizeMultiplier,
8283
} = useExtensionState()
8384

8485
// Create a persistent state manager
@@ -140,6 +141,15 @@ const App = () => {
140141
const message: ExtensionMessage = e.data
141142

142143
if (message.type === "action" && message.action) {
144+
// Handle fontSizeChanged action
145+
if (message.action === "fontSizeChanged" && message.fontSizeMultiplier !== undefined) {
146+
document.documentElement.style.setProperty(
147+
"--roo-font-size-multiplier",
148+
message.fontSizeMultiplier.toString(),
149+
)
150+
return
151+
}
152+
143153
// Handle switchTab action with tab parameter
144154
if (message.action === "switchTab" && message.tab) {
145155
const targetTab = message.tab as Tab
@@ -224,6 +234,13 @@ const App = () => {
224234
console.debug("App initialized with source map support")
225235
}, [])
226236

237+
// Initialize font size multiplier when the component mounts or when it changes
238+
useEffect(() => {
239+
if (fontSizeMultiplier !== undefined) {
240+
document.documentElement.style.setProperty("--roo-font-size-multiplier", fontSizeMultiplier.toString())
241+
}
242+
}, [fontSizeMultiplier])
243+
227244
// Focus the WebView when non-interactive content is clicked (only in editor/tab mode)
228245
useAddNonInteractiveClickListener(
229246
useCallback(() => {

‎webview-ui/src/components/chat/BrowserSessionRow.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -262,7 +262,7 @@ const BrowserSessionRow = memo((props: BrowserSessionRowProps) => {
262262
alignItems: "center",
263263
justifyContent: "center",
264264
color: "var(--vscode-descriptionForeground)",
265-
fontSize: "12px",
265+
fontSize: "calc(12px * var(--roo-font-size-multiplier, 1))",
266266
}}>
267267
<div
268268
style={{
@@ -318,7 +318,10 @@ const BrowserSessionRow = memo((props: BrowserSessionRowProps) => {
318318
}}>
319319
<span
320320
className="codicon codicon-globe"
321-
style={{ fontSize: "80px", color: "var(--vscode-descriptionForeground)" }}
321+
style={{
322+
fontSize: "calc(80px * var(--roo-font-size-multiplier, 1))",
323+
color: "var(--vscode-descriptionForeground)",
324+
}}
322325
/>
323326
</div>
324327
)}

‎webview-ui/src/components/chat/ChatRow.tsx‎

Lines changed: 29 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -277,7 +277,11 @@ export const ChatRowContent = ({
277277
}}>
278278
<span
279279
className={`codicon codicon-${iconName}`}
280-
style={{ color, fontSize: 16, marginBottom: "-1.5px" }}
280+
style={{
281+
color,
282+
fontSize: "calc(16px * var(--roo-font-size-multiplier, 1))",
283+
marginBottom: "-1.5px",
284+
}}
281285
/>
282286
</div>
283287
)
@@ -821,7 +825,7 @@ export const ChatRowContent = ({
821825
backgroundColor: "var(--vscode-badge-background)",
822826
borderBottom: "1px solid var(--vscode-editorGroup-border)",
823827
fontWeight: "bold",
824-
fontSize: "var(--vscode-font-size)",
828+
fontSize: "calc(var(--vscode-font-size) * var(--roo-font-size-multiplier, 1))",
825829
color: "var(--vscode-badge-foreground)",
826830
display: "flex",
827831
alignItems: "center",
@@ -858,7 +862,7 @@ export const ChatRowContent = ({
858862
backgroundColor: "var(--vscode-badge-background)",
859863
borderBottom: "1px solid var(--vscode-editorGroup-border)",
860864
fontWeight: "bold",
861-
fontSize: "var(--vscode-font-size)",
865+
fontSize: "calc(var(--vscode-font-size) * var(--roo-font-size-multiplier, 1))",
862866
color: "var(--vscode-badge-foreground)",
863867
display: "flex",
864868
alignItems: "center",
@@ -904,11 +908,20 @@ export const ChatRowContent = ({
904908
padding: "10px 12px",
905909
}}>
906910
<div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
907-
<span style={{ fontWeight: "500", fontSize: "var(--vscode-font-size)" }}>
911+
<span
912+
style={{
913+
fontWeight: "500",
914+
fontSize:
915+
"calc(var(--vscode-font-size) * var(--roo-font-size-multiplier, 1))",
916+
}}>
908917
/{slashCommandInfo.command}
909918
</span>
910919
{slashCommandInfo.source && (
911-
<VSCodeBadge style={{ fontSize: "calc(var(--vscode-font-size) - 2px)" }}>
920+
<VSCodeBadge
921+
style={{
922+
fontSize:
923+
"calc((var(--vscode-font-size) - 2px) * var(--roo-font-size-multiplier, 1))",
924+
}}>
912925
{slashCommandInfo.source}
913926
</VSCodeBadge>
914927
)}
@@ -1014,7 +1027,7 @@ export const ChatRowContent = ({
10141027
backgroundColor: "var(--vscode-badge-background)",
10151028
borderBottom: "1px solid var(--vscode-editorGroup-border)",
10161029
fontWeight: "bold",
1017-
fontSize: "var(--vscode-font-size)",
1030+
fontSize: "calc(var(--vscode-font-size) * var(--roo-font-size-multiplier, 1))",
10181031
color: "var(--vscode-badge-foreground)",
10191032
display: "flex",
10201033
alignItems: "center",
@@ -1326,15 +1339,17 @@ export const ChatRowContent = ({
13261339
<span
13271340
style={{
13281341
fontWeight: "500",
1329-
fontSize: "var(--vscode-font-size)",
1342+
fontSize:
1343+
"calc(var(--vscode-font-size) * var(--roo-font-size-multiplier, 1))",
13301344
}}>
13311345
/{slashCommandInfo.command}
13321346
</span>
13331347
{slashCommandInfo.args && (
13341348
<span
13351349
style={{
13361350
color: "var(--vscode-descriptionForeground)",
1337-
fontSize: "var(--vscode-font-size)",
1351+
fontSize:
1352+
"calc(var(--vscode-font-size) * var(--roo-font-size-multiplier, 1))",
13381353
}}>
13391354
{slashCommandInfo.args}
13401355
</span>
@@ -1344,15 +1359,19 @@ export const ChatRowContent = ({
13441359
<div
13451360
style={{
13461361
color: "var(--vscode-descriptionForeground)",
1347-
fontSize: "calc(var(--vscode-font-size) - 1px)",
1362+
fontSize:
1363+
"calc((var(--vscode-font-size) - 1px) * var(--roo-font-size-multiplier, 1))",
13481364
}}>
13491365
{slashCommandInfo.description}
13501366
</div>
13511367
)}
13521368
{slashCommandInfo.source && (
13531369
<div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
13541370
<VSCodeBadge
1355-
style={{ fontSize: "calc(var(--vscode-font-size) - 2px)" }}>
1371+
style={{
1372+
fontSize:
1373+
"calc((var(--vscode-font-size) - 2px) * var(--roo-font-size-multiplier, 1))",
1374+
}}>
13561375
{slashCommandInfo.source}
13571376
</VSCodeBadge>
13581377
</div>

0 commit comments

Comments
 (0)