Prefix all scrollbar classes with xterm-

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,