Scrollbars on wikitables and junk

It's called shitty js. Affordance to label overflow is slightly wrong
for current behaviour, as it basically presents as a toggle. Maybe it
should toggle something! Like popouts, that would be fun. I'unno.

Slightly more framing on wikitables etc, but apply to all tables,
because why not.

Rejig to come with actual popouts or stuff...

Bug: T179265
Bug: T265785
Change-Id: I607cb87687fcbcb481dc2fb7165c52b9e9c35873

resources/images/arrow-ltr.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="16" xmlns="http://www.w3.org/2000/svg">
+ <path d="m8 3.5 5 5-5 5z" opacity=".33"/>
+</svg>

resources/images/arrow-rtl.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="16" xmlns="http://www.w3.org/2000/svg">
+ <path d="m13 3.5-5 5 5 5z" opacity=".33"/>
+</svg>

resources/main.js

@@ -42,4 +42,33 @@ $( function () {
 			closeOpen();
 		}
 	} );
+
+	/**
+	 * Experimental overflowing table scrolling
+	 */
+
+	// Gotta wrap them for this to work; maybe later the parser etc will do this for us?!
+	$( 'div > table' ).wrap( '<div class="content-table-wrapper"><div class="content-table"></div></div>' );
+	$( '.content-table-wrapper' ).prepend( '<div class="content-table-toggle"></div>' );
+
+	function unOverflowTables() {
+		$( 'div > table' ).each( function () {
+			var $table = $( this ),
+				$wrapper = $table.parent().parent();
+			if ( $table.outerWidth() > $wrapper.outerWidth() ) {
+				$wrapper.addClass( 'overflowed' );
+
+				// Frame styled tables...
+				// eslint-disable-next-line no-jquery/no-class-state
+				if ( $table.hasClass( 'wikitable' ) || $table.hasClass( 'mw-datatable' ) ) {
+					$wrapper.addClass( 'framed' );
+				}
+			} else {
+				$wrapper.removeClass( [ 'overflowed', 'framed' ] );
+			}
+		} );
+	}
+
+	unOverflowTables();
+	$( window ).on( 'resize', unOverflowTables );
 } );

resources/main.js.less

@@ -0,0 +1,43 @@
+@import 'variables.less';
+
+// Experimental overflowing table scrolling
+.overflowed {
+	margin: 1em 0;
+	position: relative;
+	padding-right: 25px;
+
+	&.framed {
+		border: solid 1px @base70;
+
+		.content-table-toggle {
+			border-left: solid 1px @base70;
+		}
+
+		.content-table {
+			border-right: solid 1px @base70;
+			margin: -1px -2px 0 0;
+		}
+	}
+
+	.content-table-toggle {
+		width: 25px;
+		height: 100%;
+		background: @base80 url( images/arrow-ltr.svg ) no-repeat;
+		background-position: 100% 50%;
+		position: absolute;
+		top: 0;
+		right: 0;
+	}
+
+	.content-table {
+		overflow: hidden;
+		overflow-x: scroll;
+
+		.mw_metadata,
+		.mw-datatable,
+		.wikitable {
+			margin: 0 -1px;
+			border-bottom-width: 0;
+		}
+	}
+}

skin.json

@@ -1,6 +1,6 @@
 {
 	"name": "Timeless",
-	"version": "0.9.0",
+	"version": "0.9.1",
 	"author": "Isarra Yos",
 	"url": "https://www.mediawiki.org/wiki/Skin:Timeless",
 	"descriptionmsg": "timeless-desc",
@@ -99,7 +99,12 @@
 			"scripts": [
 				"resources/main.js",
 				"resources/mobile.js"
-			]
+			],
+			"styles": {
+				"resources/main.js.less": {
+					"media": "screen"
+				}
+			}
 		}
 	},
 	"ResourceFileModulePaths": {