Skip to content

Commit

Permalink
Fix flickering when clearing edits session (#239171)
Browse files Browse the repository at this point in the history
This layout code needs to be cleaned up. Basically the view renders without the working set for an instant before the new model is initialized, then the working set comes back. The welcome view tries to center itself vertically, that's where the flicker comes from. I already fixed the same issue for followups in the chat view, we reserve some space for them. Applying the same to the working set's height.
  • Loading branch information
roblourens authored Jan 30, 2025
1 parent d9ea0ed commit 63c0355
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 4 deletions.
6 changes: 6 additions & 0 deletions src/vs/workbench/contrib/chat/browser/chatInputPart.ts
Original file line number Diff line number Diff line change
Expand Up @@ -256,6 +256,11 @@ export class ChatInputPart extends Disposable implements IHistoryNavigationWidge
return this._followupsHeight;
}

private _editSessionWidgetHeight: number = 0;
get editSessionWidgetHeight() {
return this._editSessionWidgetHeight;
}

private _inputEditor!: CodeEditorWidget;
private _inputEditorElement!: HTMLElement;

Expand Down Expand Up @@ -1514,6 +1519,7 @@ export class ChatInputPart extends Disposable implements IHistoryNavigationWidge

this._inputPartHeight = data.inputPartVerticalPadding + data.followupsHeight + inputEditorHeight + data.inputEditorBorder + data.attachmentsHeight + data.toolbarsHeight + data.chatEditingStateHeight;
this._followupsHeight = data.followupsHeight;
this._editSessionWidgetHeight = data.chatEditingStateHeight;

const initialEditorScrollWidth = this._inputEditor.getScrollWidth();
const newEditorWidth = width - data.inputPartHorizontalPadding - data.editorBorder - data.inputPartHorizontalPaddingInside - data.toolbarsWidth - data.sideToolbarWidth;
Expand Down
13 changes: 9 additions & 4 deletions src/vs/workbench/contrib/chat/browser/chatWidget.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1208,10 +1208,15 @@ export class ChatWidget extends Disposable implements IChatWidget {
this.tree.layout(listHeight, width);
this.tree.getHTMLElement().style.height = `${listHeight}px`;

// Push the welcome message down so it doesn't change position when followups appear
const followupsOffset = this.viewOptions.renderFollowups ? Math.max(100 - this.inputPart.followupsHeight, 0) : 0;
this.welcomeMessageContainer.style.height = `${listHeight - followupsOffset}px`;
this.welcomeMessageContainer.style.paddingBottom = `${followupsOffset}px`;
// Push the welcome message down so it doesn't change position when followups or working set appear
let extraOffset: number = 0;
if (this.viewOptions.renderFollowups) {
extraOffset = Math.max(100 - this.inputPart.followupsHeight, 0);
} else if (this.viewOptions.enableWorkingSet) {
extraOffset = Math.max(100 - this.inputPart.editSessionWidgetHeight, 0);
}
this.welcomeMessageContainer.style.height = `${listHeight - extraOffset}px`;
this.welcomeMessageContainer.style.paddingBottom = `${extraOffset}px`;
this.renderer.layout(width);

const lastItem = this.viewModel?.getItems().at(-1);
Expand Down

0 comments on commit 63c0355

Please sign in to comment.