Responsive PortsView

Author: mustard-mh

Diff for: extensions/gitpod-shared/portsview/src/App.svelte

@@ -4,6 +4,7 @@
 <script lang="ts">
 	import { vscode } from "./utils/vscodeApi";
 	import PortTable from "./porttable/PortTable.svelte";
+	import PortList from "./porttable/PortList.svelte";
 	import type { GitpodPortObject } from "./protocol/gitpod";
 
 	let ports: GitpodPortObject[] = [];
@@ -14,8 +15,22 @@
 		}
 	});
 	vscode.postMessage({ command: "queryPortData" });
+
+	let innerWidth = 0;
 </script>
 
+<svelte:window bind:innerWidth />
+
 <main>
-	<PortTable {ports} />
+	{#if innerWidth > 500}
+		<PortTable {ports} />
+	{:else}
+		<PortList {ports} />
+	{/if}
 </main>
+
+<style>
+	:global(body) {
+		padding: 10px;
+	}
+</style>

Diff for: extensions/gitpod-shared/portsview/src/components/HoverOptions.svelte

@@ -49,9 +49,9 @@
 	.opts {
 		display: inline-flex;
 		flex: none;
-		padding-left: 4px;
 		box-sizing: border-box;
 		align-content: center;
+		align-items: center;
 	}
 	.hide {
 		display: none;

Diff for: extensions/gitpod-shared/portsview/src/porttable/PortHoverActions.svelte

@@ -0,0 +1,50 @@
+<!-----------------------------------------------------------------------------------------------
+	Copyright (c) Gitpod. All rights reserved.
+------------------------------------------------------------------------------------------------>
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import HoverOptions from "../components/HoverOptions.svelte";
+	import type { HoverOption } from "../protocol/components";
+	import type { GitpodPortObject, PortCommand } from "../protocol/gitpod";
+	import { commandIconMap, getCommands, getNLSTitle } from "../utils/commands";
+
+	export let port: GitpodPortObject;
+	export let alwaysShow: boolean = false;
+
+	const copyOpt: HoverOption = {
+		icon: "copy",
+		title: "Copy URL",
+		command: "urlCopy",
+	};
+
+	function getHoverOption(port?: GitpodPortObject) {
+		if (port == null) {
+			return [];
+		}
+		const opts: HoverOption[] = getCommands(port).map((e) => ({
+			icon: commandIconMap[e],
+			title: getNLSTitle(e),
+			command: e,
+		}));
+		opts.unshift(copyOpt);
+		return opts;
+	}
+
+	$: hoverOpts = getHoverOption(port);
+	const dispatch = createEventDispatcher<{
+		command: PortCommand;
+	}>();
+	function onHoverCommand(command: string) {
+		dispatch("command", command as PortCommand);
+	}
+</script>
+
+<HoverOptions
+	alwaysShow={alwaysShow}
+	options={hoverOpts}
+	on:command={(e) => {
+		onHoverCommand(e.detail);
+	}}
+>
+	<slot />
+</HoverOptions>

Diff for: extensions/gitpod-shared/portsview/src/porttable/PortInfo.svelte

@@ -34,13 +34,11 @@
 <style>
 	.container {
 		display: flex;
-		width: 100%;
 	}
 	span {
 		display: inline-block;
 	}
 	.title {
-		flex: none;
 		min-width: 0;
 		overflow: hidden;
 		text-overflow: ellipsis;

Diff for: extensions/gitpod-shared/portsview/src/porttable/PortList.svelte

@@ -0,0 +1,65 @@
+<!-----------------------------------------------------------------------------------------------
+	Copyright (c) Gitpod. All rights reserved.
+------------------------------------------------------------------------------------------------>
+<script lang="ts">
+	import PortInfo from "./PortInfo.svelte";
+	import PortStatus from "./PortStatus.svelte";
+	import { vscode } from "../utils/vscodeApi";
+	import type { GitpodPortObject, PortCommand } from "../protocol/gitpod";
+	import PortHoverActions from "./PortHoverActions.svelte";
+
+	function postData(command: string, port: GitpodPortObject) {
+		vscode.postMessage({
+			port,
+			command: command as PortCommand,
+		});
+	}
+
+	export let ports: GitpodPortObject[] = [];
+</script>
+
+<main>
+	<div class="container">
+		{#each ports as port, i (port.status.localPort)}
+			<PortHoverActions
+				{port}
+				on:command={(e) => {
+					postData(e.detail, port);
+				}}
+			>
+				<div class="line" title={port.info.tooltip}>
+					<div class="status">
+						<PortStatus port={port} />
+					</div>
+					<div class="info">
+						<PortInfo {port} />
+					</div>
+					<div class="desc">
+						<span title={port.info.description}>{port.info.description}</span>
+					</div>
+				</div>
+			</PortHoverActions>
+		{/each}
+	</div>
+</main>
+
+<style>
+	.container {
+		padding: 0 5px;
+		font-size: 13px;
+	}
+	.line {
+		display: flex;
+		width: 100%;
+		padding: 4px 0;
+		gap: 0.5rem;
+	}
+	.desc, .line {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.desc {
+		color: var(--vscode-disabledForeground)
+	}
+</style>

Diff for: extensions/gitpod-shared/portsview/src/porttable/PortLocalAddress.svelte

@@ -3,39 +3,14 @@
 ------------------------------------------------------------------------------------------------>
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
-	import HoverOptions from "../components/HoverOptions.svelte";
-	import type { HoverOption } from "../protocol/components";
 	import type { GitpodPortObject, PortCommand } from "../protocol/gitpod";
-	import { commandIconMap, getCommands, getNLSTitle } from "../utils/commands";
+	import PortHoverActions from "./PortHoverActions.svelte";
 
 	export let port: GitpodPortObject;
 
-	const copyOpt: HoverOption = {
-		icon: "copy",
-		title: "Copy URL",
-		command: "urlCopy",
-	};
-
-	function getHoverOption(port?: GitpodPortObject) {
-		if (port == null) {
-			return [];
-		}
-		const opts: HoverOption[] = getCommands(port).map((e) => ({
-			icon: commandIconMap[e],
-			title: getNLSTitle(e),
-			command: e,
-		}));
-		opts.unshift(copyOpt);
-		return opts;
-	}
-
-	$: hoverOpts = getHoverOption(port);
 	const dispatch = createEventDispatcher<{
 		command: { command: PortCommand; port: GitpodPortObject };
 	}>();
-	function onHoverCommand(command: string) {
-		dispatch("command", { command: command as PortCommand, port });
-	}
 	function openAddr(e: Event) {
 		e.preventDefault();
 		if (port.status.exposed.url) {
@@ -44,23 +19,20 @@
 	}
 </script>
 
-<HoverOptions
+<PortHoverActions
+	{port}
 	alwaysShow
-	options={hoverOpts}
-	on:command={(e) => {
-		onHoverCommand(e.detail);
-	}}
+	on:command={(e) => { console.log(e); dispatch("command", { command: e.detail, port}) }}
 >
 	<a on:click={(e) => { openAddr(e) }} href={port.status.exposed.url}>{port.status.exposed.url}</a>
-</HoverOptions>
+</PortHoverActions>
 
 <style>
 	a {
 		color: var(--vscode-foreground);
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
-		display: inline-block;
 	}
 	a:focus {
 		outline: none;

Diff for: extensions/gitpod-shared/portsview/src/porttable/PortStatus.svelte

@@ -4,15 +4,19 @@
 <script lang="ts">
 	import type { IconStatus } from "../protocol/gitpod";
 
-	export let status: IconStatus = "NotServed";
+	import type { GitpodPortObject } from "../protocol/gitpod";
+
+	export let port: GitpodPortObject;
 
 	const fillArr: IconStatus[] = ["Detecting", "Served"];
 
+	$: status = port?.info.iconStatus ?? "NotServed";
+
 	$: circleFill = fillArr.includes(status);
 </script>
 
 <main>
-	<div class="container">
+	<div class="container" title={port.info.description}>
 		{#if status === "ExposureFailed"}
 			<i class="codicon codicon-warning ExposureFailed" />
 		{:else if circleFill}