Update and improve dev container: (#3977)

- Replace deprecated `crates` extension with `dependi`
- Add Playwright extension
- Simplify Dockerfile
- Add dependencies as specified in the Dioxus documentation
- Pre-install Playwright dependencies
- Adjust README.md

.devcontainer/Dockerfile

@@ -1,8 +1,27 @@
 ARG VARIANT="nightly-bookworm-slim"
 FROM rustlang/rust:${VARIANT}
-ENV DEBIAN_FRONTEND noninteractive
-RUN echo 'debconf debconf/frontend select Noninteractive' | debconf-set-selections
 
-RUN apt-get update && export DEBIAN_FRONTEND=noninteractive
+ENV DEBIAN_FRONTEND=noninteractive
 
-RUN apt-get -qq install build-essential libwebkit2gtk-4.1-dev libgtk-3-dev libayatana-appindicator3-dev
+# Install required system libraries and NPM
+# Reference: https://dioxuslabs.com/learn/0.6/contributing/#before-you-contribute
+RUN apt-get update -qq \
+    && apt-get install -y -qq \
+    libgdk3.0-cil \
+    libatk1.0-dev \
+    libcairo2-dev \
+    libpango1.0-dev \
+    libgdk-pixbuf2.0-dev \
+    libsoup-3.0-dev \
+    libjavascriptcoregtk-4.1-dev \
+    libwebkit2gtk-4.1-dev \
+    npm \
+    && rm -rf /var/lib/apt/lists/*
+
+# Set a shared folder for pre-installed browsers
+ENV PLAYWRIGHT_BROWSERS_PATH=/ms-playwright
+
+# Temporarily install Playwright globally to install the browsers and their dependencies
+RUN npm install -g @playwright/test && \
+    npx playwright install --with-deps && \
+    npm uninstall -g @playwright/test

.devcontainer/README.md

@@ -19,6 +19,18 @@ To use this dev container locally, make sure Docker is installed and in VSCode i
 
 [Codespaces Setup](https://docs.github.com/en/codespaces/developing-in-codespaces/creating-a-codespace-for-a-repository#creating-a-codespace-for-a-repository)
 
+### Playwright Tests
+The dev container comes with Playwright dependencies pre-installed.
+You can run the tests located in `packages/playwright-tests` by using the VSCode extension or by executing commands such as:
+
+```bash
+# Run all tests
+npx playwright test
+
+# Run tests using the UI mode
+npx playwright test --ui-host=0.0.0.0
+```
+
 ## Troubleshooting
 
 If having difficulty commiting with github, and you use ssh or gpg keys, you may need to ensure that the keys are being shared properly between your host and VSCode.

.devcontainer/devcontainer.json

@@ -30,7 +30,8 @@
             "extensions": [
                 "rust-lang.rust-analyzer",
                 "tamasfe.even-better-toml",
-                "serayuzgur.crates"
+                "fill-labs.dependi",
+                "ms-playwright.playwright"
             ]
         }
     }