Playwright for firefox and webkit

playwright.config.ts

@@ -1,13 +1,29 @@
 import type { PlaywrightTestConfig } from "@playwright/test";
+import { devices } from "@playwright/test";
 
 const config: PlaywrightTestConfig = {
+	workers: 1,
 	webServer: {
 		command: "yarn build && yarn preview",
 		port: 4173,
 		timeout: 10 * 60 * 1000,
 	},
 	testDir: "tests",
 	testMatch: /(.+\.)?(test|spec)\.[jt]s/,
+	projects: [
+		{
+			name: "chromium",
+			use: { ...devices["Desktop Chrome"] },
+		},
+		{
+			name: "firefox",
+			use: { ...devices["Desktop Firefox"] },
+		},
+		{
+			name: "webkit",
+			use: { ...devices["Desktop Safari"] },
+		},
+	],
 };
 
 export default config;

src/lib/classes/automaton/IdMap.ts

@@ -171,7 +171,7 @@ export abstract class IdMap<
 			const storedMember = this.get(id);
 			if (storedMember && storedMember.id !== id) {
 				throw new TypeError(
-					`This map uses a different Id (${storedMember.id.rawId}) that is uniqely comparable to ${id.rawId}. You cannot use both in the same map.`,
+					`This map uses a different Id (${storedMember.id.rawId}) that is uniquely comparable to ${id.rawId}. You cannot use both in the same map.`,
 				);
 			}
 		}

src/lib/components/buttons/SvgButton.svelte

@@ -15,13 +15,13 @@
 <div>
 	<button
 		style="justify-content: {justifyContent}"
+		{id}
 		bind:this={button}
 		on:click={click}
 		{popovertarget}
 	>
 		<svelte:component
 			this={icon}
-			{id}
 			{size}
 			{color}
 			ariaLabel=""

src/lib/components/overlayMenu/OverlayMenu.svelte

@@ -64,14 +64,18 @@
 		open = Boolean(event.newState === "open");
 	}
 
+	// TODO: this check is unnecessary when support is universal: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/popover#browser_compatibility
+	const popoverIsSupported =
+		browser && Object.hasOwnProperty.call(HTMLElement.prototype, "popover");
+
 	/**
 	 * Opens the context menu (Right-click menu)
 	 */
 	function openContextMenu() {
 		if (!overlayMenuPopover) return;
 
 		// Show the menu
-		if (!overlayMenuPopover.matches(":popover-open"))
+		if (popoverIsSupported && !overlayMenuPopover.matches(":popover-open"))
 			overlayMenuPopover.showPopover();
 
 		// Set up event listeners for closing the menu
@@ -103,7 +107,10 @@
 	 * Closes the context menu (Right-click menu)
 	 */
 	function closeContextMenu() {
-		if (overlayMenuPopover?.matches(":popover-open")) {
+		if (
+			popoverIsSupported &&
+			overlayMenuPopover?.matches(":popover-open")
+		) {
 			overlayMenuPopover.hidePopover();
 		}
 		closeListenersController?.abort();

src/lib/components/project/ProjectItem.svelte

@@ -16,22 +16,23 @@
 	export let setAsActive: () => void;
 	export let rename: () => void;
 
-	const UniqeId = id.rawId.split(" ").join("-").toLowerCase();
+	const UniqueId = id.rawId.split(" ").join("-").toLowerCase();
 </script>
 
-<button on:click={setAsActive}>
-	<div class="project-item {itemType}" id={UniqeId}>
-		<div
-			class="left"
-			on:dblclick={rename}
-			on:keypress={(event) => {
-				if (event.key === "Enter") {
-					rename();
-				}
-			}}
-			role="button"
-			tabindex="0"
-		>
+<div class="project-item {itemType}" id={UniqueId}>
+	<div
+		class="left"
+		on:click={setAsActive}
+		on:dblclick={rename}
+		on:keypress={(event) => {
+			if (event.key === "Enter") {
+				rename();
+			}
+		}}
+		role="button"
+		tabindex="0"
+	>
+		<div style="display: flex;">
 			<div class="circle" style="background-color: {color}">
 				<div class="icon">
 					{#if itemType === "component"}
@@ -43,47 +44,49 @@
 			</div>
 			<p>{id.rawId}</p>
 		</div>
-		<div>
-			{#if itemType === "component"}
-				<ProjectItemDropDownMenu
-					bind:description
-					bind:color
-					bind:includeInPeriodicCheck
-					{id}
-					{itemType}
-				/>
-			{:else}
-				<ProjectItemDropDownMenu
-					bind:description
-					bind:color
-					{id}
-					{itemType}
-				/>
-			{/if}
-		</div>
 	</div>
-</button>
+	<div class="right">
+		{#if itemType === "component"}
+			<ProjectItemDropDownMenu
+				bind:description
+				bind:color
+				bind:includeInPeriodicCheck
+				{id}
+				{itemType}
+			/>
+		{:else}
+			<ProjectItemDropDownMenu
+				bind:description
+				bind:color
+				{id}
+				{itemType}
+			/>
+		{/if}
+	</div>
+</div>
 
 <style>
-	button {
-		display: block;
-		color: inherit;
-		font: inherit;
-		border: none;
-		border-bottom: 1px solid black;
-		padding: 0;
+	.left {
+		padding: 10px;
 		width: 100%;
+		overflow: hidden;
+		border-right: 1px solid rgba(28, 28, 28, 0.55);
+		border-image: linear-gradient(
+			rgba(0, 0, 0, 0) 20%,
+			rgba(0, 0, 0, 1) 20%,
+			rgba(0, 0, 0, 1) 80%,
+			rgba(0, 0, 0, 0) 80%
+		);
+		border-image-slice: 1;
 	}
 
-	button:focus-visible {
-		outline: 1px solid white;
-		outline-offset: -1px;
+	.right {
+		margin: 0 5px;
 	}
 
-	.left {
-		display: flex;
-		align-items: center;
-		width: 100%;
+	p {
+		overflow: hidden;
+		text-overflow: ellipsis;
 	}
 
 	.project-item {
@@ -95,7 +98,6 @@
 		display: flex;
 		justify-content: flex-start;
 		align-items: center;
-		padding: 10px;
 		border-bottom: 1px solid black;
 	}
 

src/lib/components/project/ProjectItemDropDownMenu.svelte

@@ -19,7 +19,7 @@
 	export let id: SystemId | ComponentId;
 	export let itemType: "system" | "component";
 
-	const UniqeId = id.rawId.split(" ").join("-").toLowerCase();
+	const UniqueId = id.rawId.split(" ").join("-").toLowerCase();
 
 	const colorOptions = [
 		"#8B0000", // Dark Red
@@ -40,7 +40,7 @@
 		"#900C3F", // Deep Red
 	];
 
-	const menuId = `${UniqeId}-menu`;
+	const menuId = `${UniqueId}-menu`;
 	let button: HTMLElement;
 
 	/**
@@ -57,7 +57,7 @@
 	bind:button
 	icon={More_vert}
 	popovertarget={menuId}
-	id={`${UniqeId}-button`}
+	id={`${UniqueId}-button`}
 	color="var(--sidebar-text-color)"
 />
 <OverlayMenu anchor={button} id={menuId}>

src/lib/components/project/globalDeclaration/GlobalDeclaration.svelte

@@ -2,7 +2,7 @@
 	import { Description } from "svelte-google-materialdesign-icons";
 
 	function handleGlobalDeclarationsClick() {
 		console.log("Global Declarations clicked");
 	}
 </script>
 
@@ -22,7 +22,6 @@
 		color: inherit;
 		font: inherit;
 		border: none;
-		border-bottom: 1px solid black;
 		padding: 0;
 		width: 100%;
 	}
@@ -32,6 +31,11 @@
 		outline-offset: -1px;
 	}
 
+	p {
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
 	#global-dec {
 		background-color: var(--sidebar-element-color);
 		transition: var(--sidebar-element-transition);

src/routes/+layout.svelte

@@ -1,5 +1,18 @@
 <script lang="ts">
+	import { browser } from "$app/environment";
 	import ContextMenu from "$lib/components/contextMenu/ContextMenu.svelte";
+
+	if (browser) {
+		/**
+		 * This is a temporary fix to not show the popover elements in Firefox, which has not enabled support for popover elements yet
+		 * TOOO: remove this when the popover element is enabled by default: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API#browser_compatibility
+		 */
+		if (!Object.hasOwnProperty.call(HTMLElement.prototype, "popover")) {
+			const style = document.createElement("style");
+			document.head.appendChild(style);
+			style.sheet?.insertRule("div[popover] { display: none; }");
+		}
+	}
 </script>
 
 <svelte:head>