Avoids CSP issues

Author: eamodio

src/webviews/apps/plus/timeline/components/scroller.ts

@@ -16,7 +16,10 @@ export class GlChartScroller extends GlElement {
 			--track-left: 0;
 			--track-width: 100%;
 			--track-height: 1.2rem;
+
 			--thumb-height: 0.6rem;
+			--thumb-width: 2rem;
+			--thumb-left: 0;
 		}
 
 		.track {
@@ -30,11 +33,16 @@ export class GlChartScroller extends GlElement {
 			z-index: 1;
 		}
 
+		.track[scrollable] {
+			visibility: visible;
+		}
+
 		.thumb {
 			position: absolute;
 			top: 0;
-			left: 0;
+			left: var(--thumb-left);
 			height: var(--thumb-height);
+			width: var(--thumb-width);
 			min-width: 2rem;
 			background: transparent;
 			transition: background 1s linear;
@@ -100,19 +108,16 @@ export class GlChartScroller extends GlElement {
 
 	override willUpdate(_changedProperties: PropertyValues): void {
 		({ size: this.size, position: this.position } = this.calculateScrollState());
+
+		this.style.setProperty('--thumb-width', `${this.size}%`);
+		this.style.setProperty('--thumb-left', `${this.position}%`);
 	}
 
 	override render(): unknown {
 		return html`<slot></slot>
-			<div
-				class="track"
-				part="track"
-				style="visibility:${this.isScrollable() ? 'visible' : 'hidden'}"
-				@pointerdown="${this.onTrackClick}"
-			>
+			<div class="track" part="track" ?scrollable="${this.isScrollable()}" @pointerdown="${this.onTrackClick}">
 				<div
 					class="thumb"
-					style="width:${this.size}%;left:${this.position}%;"
 					@pointerdown="${this.onDragStart}"
 					@pointermove="${this.onDragMove}"
 					@pointerup="${this.onDragEnd}"
@@ -215,7 +220,6 @@ export class GlChartScroller extends GlElement {
 			return;
 		}
 
-		e.preventDefault();
 		e.stopPropagation();
 		e.stopImmediatePropagation();