Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-04-23 10:08:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

Refactor button label adaptation to track body width using observable value

Browse Source
This commit is contained in:
Osvaldo Ortega
2026-02-26 15:48:17 -08:00
parent bdc3d86e37
commit b28e79dfa4
1 changed files with 5 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/vs/sessions/contrib/changesView/browser/changesView.ts
View File

@@ -191,7 +191,7 @@ export class ChangesViewPane extends ViewPane {
// Track current body dimensions for list layout // Track current body dimensions for list layout
private currentBodyHeight = 0; private currentBodyHeight = 0;
private currentBodyWidth = 0; private readonly bodyWidthObs = observableValue<number>(this, 0);
// View mode (list vs tree) // View mode (list vs tree)
private readonly viewModeObs: ReturnType<typeof observableValue<ChangesViewMode>>; private readonly viewModeObs: ReturnType<typeof observableValue<ChangesViewMode>>;
@@ -544,16 +544,6 @@ export class ChangesViewPane extends ViewPane {
return files > 0; return files > 0;
})); }));
// Track container width to adapt button labels
const actionsContainerWidth = observableValue<number>(this, this.bodyContainer.clientWidth);
const resizeObserver = new ResizeObserver(entries => {
for (const entry of entries) {
actionsContainerWidth.set(entry.contentRect.width, undefined);
}
});
resizeObserver.observe(this.bodyContainer);
this.renderDisposables.add({ dispose: () => resizeObserver.disconnect() });
// Check if a PR exists when the active session changes // Check if a PR exists when the active session changes
this.renderDisposables.add(autorun(reader => { this.renderDisposables.add(autorun(reader => {
const sessionResource = activeSessionResource.read(reader); const sessionResource = activeSessionResource.read(reader);
@@ -566,9 +556,9 @@ export class ChangesViewPane extends ViewPane {
this.renderDisposables.add(autorun(reader => { this.renderDisposables.add(autorun(reader => {
const { isSessionMenu, added, removed } = topLevelStats.read(reader); const { isSessionMenu, added, removed } = topLevelStats.read(reader);
const sessionResource = activeSessionResource.read(reader); const sessionResource = activeSessionResource.read(reader);
const containerWidth = actionsContainerWidth.read(reader); const bodyWidth = this.bodyWidthObs.read(reader);
const menuId = isSessionMenu ? MenuId.ChatEditingSessionChangesToolbar : MenuId.ChatEditingWidgetToolbar; const menuId = isSessionMenu ? MenuId.ChatEditingSessionChangesToolbar : MenuId.ChatEditingWidgetToolbar;
const useShortPrLabel = containerWidth < 150; const useShortPrLabel = bodyWidth < 150;
reader.store.add(scopedInstantiationService.createInstance( reader.store.add(scopedInstantiationService.createInstance(
MenuWorkbenchButtonBar, MenuWorkbenchButtonBar,
@@ -789,14 +779,14 @@ export class ChangesViewPane extends ViewPane {
const contentHeight = this.tree.contentHeight; const contentHeight = this.tree.contentHeight;
const treeHeight = Math.min(availableHeight, contentHeight); const treeHeight = Math.min(availableHeight, contentHeight);
this.tree.layout(treeHeight, this.currentBodyWidth); this.tree.layout(treeHeight, this.bodyWidthObs.get());
this.tree.getHTMLElement().style.height = `${treeHeight}px`; this.tree.getHTMLElement().style.height = `${treeHeight}px`;
} }
protected override layoutBody(height: number, width: number): void { protected override layoutBody(height: number, width: number): void {
super.layoutBody(height, width); super.layoutBody(height, width);
this.currentBodyHeight = height; this.currentBodyHeight = height;
this.currentBodyWidth = width; this.bodyWidthObs.set(width, undefined);
this.layoutTree(); this.layoutTree();
} }