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

Improve CI status widget icons and layout in sessions changes view (#302425)

Browse Source 
* fix: update CI status widget icons for pending state

* fix: update CI status widget action icon and add default case for check icon

* fix: improve CIStatusWidget layout handling and height management

* fix: use Codicon.loading instead of spinningLoading for ResourceLabel compatibility

The spinningLoading ThemeIcon (id: loading~spin) gets rendered as a single
CSS class 'codicon-loading~spin' by ResourceLabels, which doesn't match the
'.codicon-loading::before' CSS rule needed for the icon content. Using
Codicon.loading directly produces the class 'codicon-loading', which has both
the icon glyph and the spin animation defined in codicon-modifiers.css.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
Benjamin Christopher Simmonds
2026-03-17 14:18:05 +01:00
committed by GitHub
parent a9b6b5e181
commit 907d1f1619
3 changed files with 115 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/vs/sessions/contrib/changes/browser/changesView.ts
View File

@@ -458,6 +458,7 @@ export class ChangesViewPane extends ViewPane {
// CI Status widget beneath the card
this.ciStatusWidget = this._register(this.instantiationService.createInstance(CIStatusWidget, this.bodyContainer));
this._register(this.ciStatusWidget.onDidChangeHeight(() => this.layoutTree()));
this._register(this.onDidChangeBodyVisibility(visible => {
if (visible) {
@@ -1053,15 +1054,53 @@ export class ChangesViewPane extends ViewPane {
const overviewHeight = this.overviewContainer?.offsetHeight ?? 0;
const containerPadding = 8; // 4px top + 4px bottom from .chat-editing-session-container
const containerBorder = 2; // 1px top + 1px bottom border
const ciWidgetHeight = this.ciStatusWidget?.element.offsetHeight ?? 0;
const ciWidgetMargin = ciWidgetHeight > 0 ? 8 : 0; // margin-top on CI widget
const usedHeight = bodyPadding + actionsHeight + actionsMargin + overviewHeight + containerPadding + containerBorder + ciWidgetHeight + ciWidgetMargin;
const availableHeight = Math.max(0, bodyHeight - usedHeight);
const fixedUsed = bodyPadding + actionsHeight + actionsMargin + overviewHeight + containerPadding + containerBorder;
// Limit height to the content so the tree doesn't exceed its items
const contentHeight = this.tree.contentHeight;
const treeHeight = Math.min(availableHeight, contentHeight);
// Determine CI widget space needs
const ciWidget = this.ciStatusWidget;
const ciVisible = ciWidget?.visible ?? false;
const ciHeaderHeight = ciVisible ? CIStatusWidget.HEADER_HEIGHT : 0;
const ciMargin = ciVisible ? 8 : 0; // margin-top on CI widget
const ciDesiredHeight = ciWidget?.desiredHeight ?? 0;
const spaceForTreeAndCI = Math.max(0, bodyHeight - fixedUsed - ciMargin);
// Give the tree priority, then CI gets the rest (with min/max on CI body)
const treeContentHeight = this.tree.contentHeight;
let treeHeight: number;
let ciBodyHeight = 0;
if (!ciVisible) {
treeHeight = Math.min(spaceForTreeAndCI, treeContentHeight);
} else {
// Reserve space for the CI header
const spaceAfterCIHeader = Math.max(0, spaceForTreeAndCI - ciHeaderHeight);
// Give the tree what it needs first, up to available space
treeHeight = Math.min(spaceAfterCIHeader, treeContentHeight);
// Remaining goes to CI body
const remainingForCIBody = Math.max(0, spaceAfterCIHeader - treeHeight);
const ciDesiredBodyHeight = Math.max(0, ciDesiredHeight - ciHeaderHeight);
ciBodyHeight = Math.min(ciDesiredBodyHeight, remainingForCIBody);
// Ensure CI body gets at least MIN_BODY_HEIGHT if there's content
if (ciDesiredBodyHeight > 0 && ciBodyHeight < CIStatusWidget.MIN_BODY_HEIGHT) {
const minCIBody = Math.min(CIStatusWidget.MIN_BODY_HEIGHT, ciDesiredBodyHeight);
const needed = minCIBody - ciBodyHeight;
const canTake = Math.max(0, treeHeight - 0); // tree can shrink to 0
const taken = Math.min(needed, canTake);
treeHeight -= taken;
ciBodyHeight += taken;
}
// Cap CI body at MAX_BODY_HEIGHT
ciBodyHeight = Math.min(ciBodyHeight, CIStatusWidget.MAX_BODY_HEIGHT);
ciWidget!.layout(ciBodyHeight);
}
this.tree.layout(treeHeight, this.currentBodyWidth);
this.tree.getHTMLElement().style.height = `${treeHeight}px`;