From 605bde227c0fd4f88a4135566cb7ed56f4b49101 Mon Sep 17 00:00:00 2001 From: aamunger Date: Wed, 8 Mar 2023 14:44:15 -0800 Subject: [PATCH] cleaner element selection, add css shadow --- extensions/notebook-renderers/src/index.ts | 15 ++++++++------- extensions/notebook-renderers/src/textHelper.ts | 8 ++++++++ 2 files changed, 16 insertions(+), 7 deletions(-) diff --git a/extensions/notebook-renderers/src/index.ts b/extensions/notebook-renderers/src/index.ts index adcead00eb2..b8714ad2067 100644 --- a/extensions/notebook-renderers/src/index.ts +++ b/extensions/notebook-renderers/src/index.ts @@ -216,17 +216,15 @@ function getPreviousOutputWithMatchingMimeType(container: HTMLElement, mimeType: // if there is a scrollable output, it will be scrolled to the given value if provided or the bottom of the element function appendChildAndScroll(container: HTMLElement, child: HTMLElement, scrollTop?: number) { container.appendChild(child); - child.childNodes.forEach((node) => { - if (node instanceof HTMLElement && node.classList.contains(scrollableClass)) { - node.scrollTop = scrollTop !== undefined ? scrollTop : node.scrollHeight; - } - }); + const scrollableElement = child.querySelector(`.${scrollableClass}`); + if (scrollableElement) { + scrollableElement.scrollTop = scrollTop !== undefined ? scrollTop : scrollableElement.scrollHeight; + } } // Find the scrollTop of the existing scrollable output, return undefined if at the bottom or element doesn't exist function findScrolledHeight(outputContainer: HTMLElement, outputId: string): number | undefined { - const output = outputContainer.querySelector(`[output-item-id="${outputId}"]`); - const scrollableElement = output?.querySelector('.scrollable'); + const scrollableElement = outputContainer.querySelector(`[output-item-id="${outputId}"] .${scrollableClass}`); if (scrollableElement && scrollableElement.scrollHeight - scrollableElement.scrollTop - scrollableElement.clientHeight > 2) { // not scrolled to the bottom return scrollableElement.scrollTop; @@ -338,6 +336,9 @@ export const activate: ActivationFunction = (ctx) => { box-sizing: border-box; border-width: 1px; } + .output .scrollable.more-above { + box-shadow: var(--vscode-scrollbar-shadow) 0 6px 6px -6px inset + } .output-plaintext .code-bold, .output-stream .code-bold, .traceback .code-bold { diff --git a/extensions/notebook-renderers/src/textHelper.ts b/extensions/notebook-renderers/src/textHelper.ts index 1ee314160af..367c9eca768 100644 --- a/extensions/notebook-renderers/src/textHelper.ts +++ b/extensions/notebook-renderers/src/textHelper.ts @@ -54,6 +54,14 @@ function truncatedArrayOfString(id: string, buffer: string[], linesLimit: number function scrollableArrayOfString(id: string, buffer: string[], container: HTMLElement, trustHtml: boolean) { const scrollableDiv = document.createElement('div'); scrollableDiv.classList.add(scrollableClass); + scrollableDiv.onscroll = (e) => { + const target = e.target as HTMLElement; + if (target.scrollTop === 0) { + target.classList.remove('more-above'); + } else { + target.classList.add('more-above'); + } + }; if (buffer.length > 5000) { container.appendChild(generateViewMoreElement(id, false));