From 60f549028f0644da05c9795871ee021b5e1b55b4 Mon Sep 17 00:00:00 2001 From: Jean Pierre Date: Fri, 12 May 2023 16:19:03 -0500 Subject: [PATCH 1/2] Ensure decorations in the top layer render on top of decorations in the bottom layer --- css/xterm.css | 6 +++++- src/browser/decorations/BufferDecorationRenderer.ts | 1 + 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/css/xterm.css b/css/xterm.css index 2746016b..555632a6 100644 --- a/css/xterm.css +++ b/css/xterm.css @@ -179,8 +179,12 @@ position: absolute; } +.xterm-screen .xterm-decoration-container .xterm-decoration.top-layer { + z-index: 7; +} + .xterm-decoration-overview-ruler { - z-index: 7; + z-index: 8; position: absolute; top: 0; right: 0; diff --git a/src/browser/decorations/BufferDecorationRenderer.ts b/src/browser/decorations/BufferDecorationRenderer.ts index e195c5ae..5d00d2ff 100644 --- a/src/browser/decorations/BufferDecorationRenderer.ts +++ b/src/browser/decorations/BufferDecorationRenderer.ts @@ -72,6 +72,7 @@ export class BufferDecorationRenderer extends Disposable { private _createElement(decoration: IInternalDecoration): HTMLElement { const element = document.createElement('div'); element.classList.add('xterm-decoration'); + element.classList.toggle('top-layer', decoration?.options?.layer === 'top'); element.style.width = `${Math.round((decoration.options.width || 1) * this._renderService.dimensions.css.cell.width)}px`; element.style.height = `${(decoration.options.height || 1) * this._renderService.dimensions.css.cell.height}px`; element.style.top = `${(decoration.marker.line - this._bufferService.buffers.active.ydisp) * this._renderService.dimensions.css.cell.height}px`; From ec227c757b1904379efcdfcb8bd58983e080b27e Mon Sep 17 00:00:00 2001 From: Daniel Imms <2193314+Tyriar@users.noreply.github.com> Date: Wed, 17 May 2023 06:57:13 -0700 Subject: [PATCH 2/2] Prefix class with xterm-decoration- --- css/xterm.css | 2 +- src/browser/decorations/BufferDecorationRenderer.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/css/xterm.css b/css/xterm.css index 555632a6..b14a6cf5 100644 --- a/css/xterm.css +++ b/css/xterm.css @@ -179,7 +179,7 @@ position: absolute; } -.xterm-screen .xterm-decoration-container .xterm-decoration.top-layer { +.xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer { z-index: 7; } diff --git a/src/browser/decorations/BufferDecorationRenderer.ts b/src/browser/decorations/BufferDecorationRenderer.ts index 5d00d2ff..fb77ce9c 100644 --- a/src/browser/decorations/BufferDecorationRenderer.ts +++ b/src/browser/decorations/BufferDecorationRenderer.ts @@ -72,7 +72,7 @@ export class BufferDecorationRenderer extends Disposable { private _createElement(decoration: IInternalDecoration): HTMLElement { const element = document.createElement('div'); element.classList.add('xterm-decoration'); - element.classList.toggle('top-layer', decoration?.options?.layer === 'top'); + element.classList.toggle('xterm-decoration-top-layer', decoration?.options?.layer === 'top'); element.style.width = `${Math.round((decoration.options.width || 1) * this._renderService.dimensions.css.cell.width)}px`; element.style.height = `${(decoration.options.height || 1) * this._renderService.dimensions.css.cell.height}px`; element.style.top = `${(decoration.marker.line - this._bufferService.buffers.active.ydisp) * this._renderService.dimensions.css.cell.height}px`;