diff --git a/css/xterm.css b/css/xterm.css index b775f651..2e1f3a32 100644 --- a/css/xterm.css +++ b/css/xterm.css @@ -218,12 +218,12 @@ /* Derived from vs/base/browser/ui/scrollbar/media/scrollbar.css */ /* xterm.js customization: Override xterm's cursor style */ -.xterm .xterm-scrollable-element > .scrollbar { +.xterm .xterm-scrollable-element > .xterm-scrollbar { cursor: default; } /* Arrows */ -.xterm .xterm-scrollable-element > .scrollbar > .scra { +.xterm .xterm-scrollable-element > .xterm-scrollbar > .xterm-scra { cursor: pointer; background-color: var(--vscode-scrollbarSliderBackground, rgba(100, 100, 100, 0.4)); mask-image: url("data:image/svg+xml;utf8,"); @@ -236,11 +236,11 @@ -webkit-mask-size: 100% 100%; } -.xterm .xterm-scrollable-element > .scrollbar > .scra.xterm-arrow-down { +.xterm .xterm-scrollable-element > .xterm-scrollbar > .xterm-scra.xterm-arrow-down { transform: rotate(180deg); } -.xterm .xterm-scrollable-element > .visible { +.xterm .xterm-scrollable-element > .xterm-visible { opacity: 1; /* Background rule added for IE9 - to allow clicks on dom node */ @@ -250,20 +250,20 @@ /* In front of peek view */ z-index: 11; } -.xterm .xterm-scrollable-element > .invisible { +.xterm .xterm-scrollable-element > .xterm-invisible { opacity: 0; pointer-events: none; } -.xterm .xterm-scrollable-element > .invisible.fade { +.xterm .xterm-scrollable-element > .xterm-invisible.xterm-fade { transition: opacity 800ms linear; } /* Scrollable Content Inset Shadow */ -.xterm .xterm-scrollable-element > .shadow { +.xterm .xterm-scrollable-element > .xterm-shadow { position: absolute; display: none; } -.xterm .xterm-scrollable-element > .shadow.top { +.xterm .xterm-scrollable-element > .xterm-shadow.xterm-shadow-top { display: block; top: 0; left: 3px; @@ -271,7 +271,7 @@ width: 100%; box-shadow: var(--vscode-scrollbar-shadow, #000) 0 6px 6px -6px inset; } -.xterm .xterm-scrollable-element > .shadow.left { +.xterm .xterm-scrollable-element > .xterm-shadow.xterm-shadow-left { display: block; top: 3px; left: 0; @@ -279,13 +279,13 @@ width: 3px; box-shadow: var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset; } -.xterm .xterm-scrollable-element > .shadow.top-left-corner { +.xterm .xterm-scrollable-element > .xterm-shadow.xterm-shadow-top-left-corner { display: block; top: 0; left: 0; height: 3px; width: 3px; } -.xterm .xterm-scrollable-element > .shadow.top.left { +.xterm .xterm-scrollable-element > .xterm-shadow.xterm-shadow-top.xterm-shadow-left { box-shadow: var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset; } diff --git a/src/browser/Viewport.ts b/src/browser/Viewport.ts index 56b6fc30..f036f619 100644 --- a/src/browser/Viewport.ts +++ b/src/browser/Viewport.ts @@ -84,13 +84,13 @@ export class Viewport extends Disposable { this._register(toDisposable(() => this._styleElement.remove())); this._register(EventUtils.runAndSubscribe(themeService.onChangeColors, () => { this._styleElement.textContent = [ - `.xterm .xterm-scrollable-element > .scrollbar > .slider {`, + `.xterm .xterm-scrollable-element > .xterm-scrollbar > .xterm-slider {`, ` background: ${themeService.colors.scrollbarSliderBackground.css};`, `}`, - `.xterm .xterm-scrollable-element > .scrollbar > .slider:hover {`, + `.xterm .xterm-scrollable-element > .xterm-scrollbar > .xterm-slider:hover {`, ` background: ${themeService.colors.scrollbarSliderHoverBackground.css};`, `}`, - `.xterm .xterm-scrollable-element > .scrollbar > .slider.active {`, + `.xterm .xterm-scrollable-element > .xterm-scrollbar > .xterm-slider.xterm-active {`, ` background: ${themeService.colors.scrollbarSliderActiveBackground.css};`, `}` ].join('\n'); diff --git a/src/browser/scrollable/abstractScrollbar.ts b/src/browser/scrollable/abstractScrollbar.ts index 18e9da4c..4870f665 100644 --- a/src/browser/scrollable/abstractScrollbar.ts +++ b/src/browser/scrollable/abstractScrollbar.ts @@ -63,7 +63,7 @@ export abstract class AbstractScrollbar extends Widget { this._scrollable = opts.scrollable; this._scrollByPage = opts.scrollByPage; this._scrollbarState = opts.scrollbarState; - this._visibilityController = this._register(new ScrollbarVisibilityController(opts.visibility, 'visible scrollbar ' + opts.extraScrollbarClassName, 'invisible scrollbar ' + opts.extraScrollbarClassName)); + this._visibilityController = this._register(new ScrollbarVisibilityController(opts.visibility, 'xterm-visible xterm-scrollbar ' + opts.extraScrollbarClassName, 'xterm-invisible xterm-scrollbar ' + opts.extraScrollbarClassName)); this._visibilityController.setIsNeeded(this._scrollbarState.isNeeded()); this._pointerMoveMonitor = this._register(new GlobalPointerMoveMonitor()); this._shouldRender = true; @@ -93,7 +93,7 @@ export abstract class AbstractScrollbar extends Widget { */ protected _createSlider(top: number, left: number, width: number | undefined, height: number | undefined): void { this.slider = new FastDomNode(document.createElement('div')); - this.slider.setClassName('slider'); + this.slider.setClassName('xterm-slider'); this.slider.setPosition('absolute'); this.slider.setTop(top); this.slider.setLeft(left); @@ -236,7 +236,7 @@ export abstract class AbstractScrollbar extends Widget { const initialPointerPosition = this._sliderPointerPosition(e); const initialPointerOrthogonalPosition = this._sliderOrthogonalPointerPosition(e); const initialScrollbarState = this._scrollbarState.clone(); - this.slider.toggleClassName('active', true); + this.slider.toggleClassName('xterm-active', true); this._pointerMoveMonitor.startMonitoring( e.target, @@ -256,7 +256,7 @@ export abstract class AbstractScrollbar extends Widget { this._setDesiredScrollPositionNow(initialScrollbarState.getDesiredScrollPositionFromDelta(pointerDelta)); }, () => { - this.slider.toggleClassName('active', false); + this.slider.toggleClassName('xterm-active', false); this._host.handleDragEnd(); } ); diff --git a/src/browser/scrollable/horizontalScrollbar.ts b/src/browser/scrollable/horizontalScrollbar.ts index 470410c4..299a3e47 100644 --- a/src/browser/scrollable/horizontalScrollbar.ts +++ b/src/browser/scrollable/horizontalScrollbar.ts @@ -25,7 +25,7 @@ export class HorizontalScrollbar extends AbstractScrollbar { scrollPosition.scrollLeft ), visibility: options.horizontal, - extraScrollbarClassName: 'horizontal', + extraScrollbarClassName: 'xterm-horizontal', scrollable: scrollable, scrollByPage: options.scrollByPage }); diff --git a/src/browser/scrollable/scrollableElement.ts b/src/browser/scrollable/scrollableElement.ts index 6f21ec52..7014c845 100644 --- a/src/browser/scrollable/scrollableElement.ts +++ b/src/browser/scrollable/scrollableElement.ts @@ -224,15 +224,15 @@ export class SmoothScrollableElement extends Widget { if (this._options.useShadows) { this._leftShadowDomNode = new FastDomNode(document.createElement('div')); - this._leftShadowDomNode.setClassName('shadow'); + this._leftShadowDomNode.setClassName('xterm-shadow'); this._domNode.appendChild(this._leftShadowDomNode.domNode); this._topShadowDomNode = new FastDomNode(document.createElement('div')); - this._topShadowDomNode.setClassName('shadow'); + this._topShadowDomNode.setClassName('xterm-shadow'); this._domNode.appendChild(this._topShadowDomNode.domNode); this._topLeftShadowDomNode = new FastDomNode(document.createElement('div')); - this._topLeftShadowDomNode.setClassName('shadow'); + this._topLeftShadowDomNode.setClassName('xterm-shadow'); this._domNode.appendChild(this._topLeftShadowDomNode.domNode); } else { this._leftShadowDomNode = null; @@ -289,7 +289,7 @@ export class SmoothScrollableElement extends Widget { public updateClassName(newClassName: string): void { this._options.className = newClassName; if (platform.isMac) { - this._options.className += ' mac'; + this._options.className += ' xterm-mac'; } this._domNode.className = 'xterm-scrollable-element ' + this._options.className; } @@ -481,12 +481,12 @@ export class SmoothScrollableElement extends Widget { const enableTop = scrollState.scrollTop > 0; const enableLeft = scrollState.scrollLeft > 0; - const leftClassName = (enableLeft ? ' left' : ''); - const topClassName = (enableTop ? ' top' : ''); - const topLeftClassName = (enableLeft || enableTop ? ' top-left-corner' : ''); - this._leftShadowDomNode!.setClassName(`shadow${leftClassName}`); - this._topShadowDomNode!.setClassName(`shadow${topClassName}`); - this._topLeftShadowDomNode!.setClassName(`shadow${topLeftClassName}${topClassName}${leftClassName}`); + const leftClassName = (enableLeft ? ' xterm-shadow-left' : ''); + const topClassName = (enableTop ? ' xterm-shadow-top' : ''); + const topLeftClassName = (enableLeft || enableTop ? ' xterm-shadow-top-left-corner' : ''); + this._leftShadowDomNode!.setClassName(`xterm-shadow${leftClassName}`); + this._topShadowDomNode!.setClassName(`xterm-shadow${topClassName}`); + this._topLeftShadowDomNode!.setClassName(`xterm-shadow${topLeftClassName}${topClassName}${leftClassName}`); } } @@ -566,7 +566,7 @@ function resolveOptions(opts: IScrollableElementCreationOptions): IScrollableEle result.verticalSliderSize = (typeof opts.verticalSliderSize !== 'undefined' ? opts.verticalSliderSize : result.verticalScrollbarSize); if (platform.isMac) { - result.className += ' mac'; + result.className += ' xterm-mac'; } return result; diff --git a/src/browser/scrollable/scrollbarArrow.ts b/src/browser/scrollable/scrollbarArrow.ts index 3b8f9adc..d543669c 100644 --- a/src/browser/scrollable/scrollbarArrow.ts +++ b/src/browser/scrollable/scrollbarArrow.ts @@ -36,7 +36,7 @@ export class ScrollbarArrow extends Widget { this._handleActivate = opts.handleActivate; this.bgDomNode = document.createElement('div'); - this.bgDomNode.className = 'arrow-background'; + this.bgDomNode.className = 'xterm-arrow-background'; this.bgDomNode.style.position = 'absolute'; this.bgDomNode.style.width = opts.bgWidth + 'px'; this.bgDomNode.style.height = opts.bgHeight + 'px'; diff --git a/src/browser/scrollable/scrollbarVisibilityController.ts b/src/browser/scrollable/scrollbarVisibilityController.ts index 84da4b9b..59d172bc 100644 --- a/src/browser/scrollable/scrollbarVisibilityController.ts +++ b/src/browser/scrollable/scrollbarVisibilityController.ts @@ -108,6 +108,6 @@ export class ScrollbarVisibilityController extends Disposable { return; } this._isVisible = false; - this._domNode?.setClassName(this._invisibleClassName + (withFadeAway ? ' fade' : '')); + this._domNode?.setClassName(this._invisibleClassName + (withFadeAway ? ' xterm-fade' : '')); } } diff --git a/src/browser/scrollable/verticalScrollbar.ts b/src/browser/scrollable/verticalScrollbar.ts index 5cecc87f..9efbe4d8 100644 --- a/src/browser/scrollable/verticalScrollbar.ts +++ b/src/browser/scrollable/verticalScrollbar.ts @@ -25,7 +25,7 @@ export class VerticalScrollbar extends AbstractScrollbar { scrollPosition.scrollTop ), visibility: options.vertical, - extraScrollbarClassName: 'vertical', + extraScrollbarClassName: 'xterm-vertical', scrollable: scrollable, scrollByPage: options.scrollByPage }); @@ -34,7 +34,7 @@ export class VerticalScrollbar extends AbstractScrollbar { const arrowSize = options.verticalScrollbarSize; const arrowDelta = 0; this._createArrow({ - className: 'scra xterm-arrow-up', + className: 'xterm-scra xterm-arrow-up', top: arrowDelta, left: arrowDelta, bgWidth: options.verticalScrollbarSize, @@ -42,7 +42,7 @@ export class VerticalScrollbar extends AbstractScrollbar { handleActivate: () => this._arrowScroll(-arrowSize) }); this._createArrow({ - className: 'scra xterm-arrow-down', + className: 'xterm-scra xterm-arrow-down', bottom: arrowDelta, left: arrowDelta, bgWidth: options.verticalScrollbarSize,