From 55013f97995517a098b74c20def2e0a96b056c04 Mon Sep 17 00:00:00 2001 From: Connor Peet Date: Fri, 2 Aug 2024 10:40:26 -0700 Subject: [PATCH] testing: fix markdown messages not displaying At the time markdown messages were rendered, the output element was not in the DOM, so its height was always 0. It was also missing a couple of style adjustments. Additionally it tweaks the diff height before we fall back to nested scrollbars -- a limit of 1000px was very low. I had this commit on a branch from earlier but it never made it to PR :x Refs #224575 --- src/vs/workbench/contrib/testing/browser/media/testing.css | 3 ++- .../testing/browser/testResultsView/testResultsOutput.ts | 5 ++--- .../browser/testResultsView/testResultsViewContent.ts | 7 +++++++ 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/vs/workbench/contrib/testing/browser/media/testing.css b/src/vs/workbench/contrib/testing/browser/media/testing.css index ce342efcf5454..f559f6a82648c 100644 --- a/src/vs/workbench/contrib/testing/browser/media/testing.css +++ b/src/vs/workbench/contrib/testing/browser/media/testing.css @@ -252,7 +252,8 @@ .test-output-peek-message-container .preview-text { padding: 8px 12px 8px 20px; - height: calc(100% - 16px); + line-height: normal; + white-space: normal; } .test-output-peek-message-container .preview-text p:first-child { diff --git a/src/vs/workbench/contrib/testing/browser/testResultsView/testResultsOutput.ts b/src/vs/workbench/contrib/testing/browser/testResultsView/testResultsOutput.ts index 365c450fc5794..350ba92818fae 100644 --- a/src/vs/workbench/contrib/testing/browser/testResultsView/testResultsOutput.ts +++ b/src/vs/workbench/contrib/testing/browser/testResultsView/testResultsOutput.ts @@ -180,7 +180,7 @@ export class DiffContentProvider extends Disposable implements IPeekOutputRender } editor.layout(dimensions); - const height = Math.min(1000, Math.max(editor.getOriginalEditor().getContentHeight(), editor.getModifiedEditor().getContentHeight())); + const height = Math.min(10000, Math.max(editor.getOriginalEditor().getContentHeight(), editor.getModifiedEditor().getContentHeight())); editor.layout({ height, width: dimensions.width }); return height; } @@ -219,7 +219,6 @@ export class MarkdownTestMessagePeek extends Disposable implements IPeekOutputRe const rendered = this._register(this.markdown.value.render(message.message, {})); - rendered.element.style.height = '100%'; rendered.element.style.userSelect = 'text'; rendered.element.classList.add('preview-text'); this.container.appendChild(rendered.element); @@ -232,7 +231,7 @@ export class MarkdownTestMessagePeek extends Disposable implements IPeekOutputRe return undefined; } - this.element.style.width = `${dimension.width}px`; + this.element.style.width = `${dimension.width - 32}px`; return this.element.clientHeight; } diff --git a/src/vs/workbench/contrib/testing/browser/testResultsView/testResultsViewContent.ts b/src/vs/workbench/contrib/testing/browser/testResultsView/testResultsViewContent.ts index 70ef07f40fecc..c88b992c380b4 100644 --- a/src/vs/workbench/contrib/testing/browser/testResultsView/testResultsViewContent.ts +++ b/src/vs/workbench/contrib/testing/browser/testResultsView/testResultsViewContent.ts @@ -74,6 +74,7 @@ class MessageStackFrame extends CustomStackFrame { } public override render(container: HTMLElement): IDisposable { + this.message.style.visibility = 'visible'; container.appendChild(this.message); return toDisposable(() => this.message.remove()); } @@ -320,7 +321,13 @@ export class TestResultsViewContent extends Disposable { } private async prepareTopFrame(subject: InspectSubject, callFrames: ITestMessageStackFrame[]) { + // ensure the messageContainer is in the DOM so renderers can calculate the + // dimensions before it's rendered in the list. + this.messageContainer.style.visibility = 'hidden'; + this.stackContainer.appendChild(this.messageContainer); + const topFrame = this.currentTopFrame = this.instantiationService.createInstance(MessageStackFrame, this.messageContainer, this.followupWidget, subject); + topFrame.showHeader.set(callFrames.length > 0, undefined); const provider = await findAsync(this.contentProviders, p => p.update(subject));