Preview windows when alt-tabbing

After pressing `Alt+Tab` but before releasing `Alt`, a semi-transparent popup visualizes the window stack and previews the next windows that each additional `Tab` press would select. Meanwhile, each real window change is instantly performed behind the popup.

Idea & implementation credit: @danisla

html5/css/menu-skin.css

@@ -127,3 +127,53 @@ SOFTWARE.
     ;
 }
 
+#window_preview {
+    display: none;
+    width: 65%;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 80000;
+    background-color: rgba(0, 0, 0, 0.7);
+    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.5);
+    border-radius: 2px;
+    padding: 20px;
+}
+
+.slick-track {
+    display: flex !important;
+}
+
+.slick-slide {
+    margin: 7px;
+}
+
+.slick-current {
+    border-width: 3px;
+    box-shadow: 0px 0px 20px rgba(255, 255, 255, 65%);
+    border-radius: 2px;
+    border: rgba(255, 255, 255, 50%);
+    border-style: solid;
+
+}
+
+.window-preview-item-container {
+    display: inline-block;
+    height: 100%;
+}
+
+.window-preview-item-img {
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+}
+
+.window-preview-item-text {
+    color: #FFF;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-family: auto;
+    padding: 4px;
+}

html5/css/slick.css

@@ -0,0 +1,119 @@
+/* Slider */
+.slick-slider
+{
+    position: relative;
+
+    display: block;
+    box-sizing: border-box;
+
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+
+    -webkit-touch-callout: none;
+    -khtml-user-select: none;
+    -ms-touch-action: pan-y;
+        touch-action: pan-y;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.slick-list
+{
+    position: relative;
+
+    display: block;
+    overflow: hidden;
+
+    margin: 0;
+    padding: 0;
+}
+.slick-list:focus
+{
+    outline: none;
+}
+.slick-list.dragging
+{
+    cursor: pointer;
+    cursor: hand;
+}
+
+.slick-slider .slick-track,
+.slick-slider .slick-list
+{
+    -webkit-transform: translate3d(0, 0, 0);
+       -moz-transform: translate3d(0, 0, 0);
+        -ms-transform: translate3d(0, 0, 0);
+         -o-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+}
+
+.slick-track
+{
+    position: relative;
+    top: 0;
+    left: 0;
+
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+.slick-track:before,
+.slick-track:after
+{
+    display: table;
+
+    content: '';
+}
+.slick-track:after
+{
+    clear: both;
+}
+.slick-loading .slick-track
+{
+    visibility: hidden;
+}
+
+.slick-slide
+{
+    display: none;
+    float: left;
+
+    height: 100%;
+    min-height: 1px;
+}
+[dir='rtl'] .slick-slide
+{
+    float: right;
+}
+.slick-slide img
+{
+    display: block;
+}
+.slick-slide.slick-loading img
+{
+    display: none;
+}
+.slick-slide.dragging img
+{
+    pointer-events: none;
+}
+.slick-initialized .slick-slide
+{
+    display: block;
+}
+.slick-loading .slick-slide
+{
+    visibility: hidden;
+}
+.slick-vertical .slick-slide
+{
+    display: block;
+
+    height: auto;
+
+    border: 1px solid transparent;
+}
+.slick-arrow.slick-hidden {
+    display: none;
+}

html5/index.html

@@ -62,6 +62,10 @@
 		<link rel="stylesheet" type="text/css" href="css/menu-skin.css"/>
 		<link rel="stylesheet" type="text/css" href="css/icon.css"/>
 
+		<!-- slick carousel for window preview feature -->
+		<link rel="stylesheet" type="text/css" href="css/slick.css"/>
+		<script type="text/javascript" src="js/lib/slick.js"></script>
+
 		<!-- simple-keyboard -->
 		<script type="application/javascript" src="js/lib/simple-keyboard.js"></script>
 		<link rel="stylesheet" href="css/simple-keyboard.css">
@@ -152,6 +156,8 @@
 			<img id="shadow_pointer" alt="shadow pointer">
 		</div>
 
+		<div id="window_preview"></div>
+
 		<div class="notifications">
 		</div>
 
@@ -1376,6 +1382,13 @@ <h2>Xpra Bug Report</h2>
 					toggle_keyboard();
 				});
 
+				// Configure Xpra tray window list right click behavior.
+				$("#open_windows_list").siblings("a").on('mousedown', (e) => {
+					if (e.buttons === 2) {
+						client.toggle_window_preview();
+					}
+				});
+
 				const screen_change_events = "webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange";
 				$(document).on(screen_change_events, function () {
 					const f_el = document.fullscreenElement || document.mozFullScreen || document.webkitIsFullScreen || document.msFullscreenElement;
@@ -1415,43 +1428,6 @@ <h2>Xpra Bug Report</h2>
 				});
 			}
 
-			window.inAltTab = false;
-			window.altTabSelIndex = 0;
-
-			// Alt-Tab window switching support when in fullscreen mode.
-			window.addEventListener('keydown', (event) => {
-				if (event.type === 'keydown' && event.altKey && event.code === 'Tab') {
-					console.log("alt-tab pressed.");
-					window.inAltTab = true;
-
-					$('.Menu a[data-icon="filter"]').parent()[0].showMenu();
-
-					var window_ids = Object.keys(client.id_to_window);
-					window.altTabSelIndex = (window.altTabSelIndex + 1) % window_ids.length;
-					console.log(`alt-tab window ${window.altTabSelIndex + 1}/${window_ids.length}`);
-
-					var win = client.id_to_window[window_ids[window.altTabSelIndex]];
-
-					// Skip over the DESKTOP type windows.
-					if (client.is_window_desktop(win)) {
-						window.altTabSelIndex = (window.altTabSelIndex + 1) % window_ids.length;
-						win = client.id_to_window[window_ids[window.altTabSelIndex]];
-					}
-
-					client._window_set_focus(win);
-				}
-			});
-
-			window.addEventListener('keyup', (event) => {
-				if (event.type === 'keyup' && event.code === 'AltLeft' && window.inAltTab) {
-					console.log("alt-tab released.");
-
-					window.inAltTab = false;
-
-					$('.Menu a[data-icon="filter"]').parent()[0].hideMenu();
-				}
-			});
-
 			$(document).ready(function() {
 				clog("document is ready, browser is", navigator.platform, "64-bit:", Utilities.is_64bit());
 				const xhr = new XMLHttpRequest();