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

Enhance CI Status Widget: Adjust header height, improve accessibility, and refine styles

Browse Source 
Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
mrleemurray
2026-03-31 14:48:52 +01:00
parent 9a1e226c62
commit 2caf5f7a9c
2 changed files with 24 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/vs/sessions/contrib/changes/browser/ciStatusWidget.ts
View File

@@ -148,7 +148,7 @@ class CICheckListRenderer implements IListRenderer<ICICheckListItem, ICICheckTem
*/
export class CIStatusWidget extends Disposable {
static readonly HEADER_HEIGHT = 30;
static readonly HEADER_HEIGHT = 38;
static readonly MIN_BODY_HEIGHT = 84; // at least 3 checks (3 * 28)
static readonly PREFERRED_BODY_HEIGHT = 112; // preferred 4 checks (4 * 28)
static readonly MAX_BODY_HEIGHT = 240; // at most ~8 checks
@@ -229,6 +229,10 @@ export class CIStatusWidget extends Disposable {
this._chevronNode = dom.append(this._headerNode, $('.group-chevron'));
this._chevronNode.classList.add(...ThemeIcon.asClassNameArray(Codicon.chevronDown));
this._headerNode.setAttribute('role', 'button');
this._headerNode.setAttribute('aria-expanded', 'true');
this._headerNode.tabIndex = 0;
this._register(dom.addDisposableListener(this._headerNode, dom.EventType.CLICK, e => {
// Don't toggle when clicking the action bar
if (dom.isAncestor(e.target as HTMLElement, this._headerActionBarContainer)) {
@@ -236,6 +240,12 @@ export class CIStatusWidget extends Disposable {
}
this._toggleCollapsed();
}));
this._register(dom.addDisposableListener(this._headerNode, dom.EventType.KEY_DOWN, e => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
this._toggleCollapsed();
}
}));
// Body (list of checks)
this._bodyNode = dom.append(this._domNode, $('.ci-status-widget-body'));
@@ -273,6 +283,7 @@ export class CIStatusWidget extends Disposable {
this._model = model;
if (!model) {
this._checkCount = 0;
this._setCollapsed(false);
this._renderBody([]);
this._renderHeaderActions([]);
this._domNode.style.display = 'none';
@@ -376,12 +387,18 @@ export class CIStatusWidget extends Disposable {
}
private _toggleCollapsed(): void {
this._collapsed = !this._collapsed;
this._updateChevron();
this._setCollapsed(!this._collapsed);
this._onDidToggleCollapsed.fire(this._collapsed);
// Also fires onDidChangeHeight so the SplitView pane updates its min/max constraints
this._onDidChangeHeight.fire();
}
private _setCollapsed(collapsed: boolean): void {
this._collapsed = collapsed;
this._updateChevron();
this._headerNode.setAttribute('aria-expanded', String(!collapsed));
}
private _updateChevron(): void {
this._chevronNode.className = 'group-chevron';
this._chevronNode.classList.add(

6
src/vs/sessions/contrib/changes/browser/media/ciStatusWidget.css
View File

@@ -19,7 +19,9 @@
display: flex;
align-items: center;
gap: 6px;
padding: 8px 0;
padding: 6px 2px;
margin-top: 2px;
border-radius: 8px;
min-height: 22px;
font-weight: 500;
cursor: pointer;
@@ -70,7 +72,7 @@
.ci-status-widget.has-fix-actions:hover .ci-status-widget-counts,
.ci-status-widget.has-fix-actions:focus-within .ci-status-widget-counts {
display: none;
visibility: hidden;
}
.ci-status-widget-count-badge {