Prefix all scrollbar classes with xterm-

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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'><path d='M1.5 8.5 L5.5 2.5 L9.5 8.5 Z' fill='black'/></svg>");
@@ -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;
 }

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');

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();
       }
     );

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
     });

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;

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';

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' : ''));
   }
 }

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,