Update webviews to vscode style

.github/workflows/ui-test.yml

@@ -17,19 +17,36 @@ jobs:
         with:
           submodules: "recursive"
 
-      - name: Run ui test
-        uses: ./.github/actions/idf
-        id: idfuitest
+      - name: Install ESP-IDF
+        run: |
+          ESP_IDF_VERSION="v5.3.2"
+          sudo apt update
+          sudo apt install -y python3-pip git wget flex bison gperf python3-venv cmake ninja-build ccache libffi-dev libssl-dev dfu-util
+          wget https://dl.espressif.com/github_assets/espressif/esp-idf/releases/download/${ESP_IDF_VERSION}/esp-idf-${ESP_IDF_VERSION}.zip -O esp-idf.zip
+          unzip esp-idf.zip -d ~/
+          rm esp-idf.zip
+          mv ~/esp-idf-${ESP_IDF_VERSION} ~/esp-idf
+          ~/esp-idf/install.sh
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
         with:
-          run: /ui-entrypoint.sh
+          node-version: '20'
 
-      - name: See if screenshots are generated
-        if: failure()
-        run: ls /github/workspace/test-resources/screenshots
+      - name: Install Yarn dependencies
+        run: |
+          yarn
+          yarn install
+
+      - name: Run Yarn script with xvfb
+        run: |
+          export IDF_TOOLS_PATH=~/.espressif
+          export IDF_PATH=~/esp-idf
+          source ~/esp-idf/export.sh && xvfb-run --auto-servernum yarn ci-test
 
       - name: Upload screenshots
         uses: actions/upload-artifact@v4
         if: failure()
         with: 
           name: screenshots
-          path: /github/workspace/test-resources/screenshots
+          path: /home/runner/work/vscode-esp-idf-extension/vscode-esp-idf-extension/test-resources/screenshots

README.md

@@ -165,13 +165,7 @@ Press <kbd>F1</kbd> or click menu `View` -> `Command Palette...` to show Visual
             <td></td>
         </tr>
         <tr>
-            <td rowspan=11 align="center">Basic</td>
-            <td>Show Example Projects</td>
-            <td>Launch UI to show examples from selected framework and allow you to create a project from them. This command will show frameworks already configured in the extension, so to view ESP-Rainmaker examples, you need to run the <strong>Install ESP-Rainmaker</strong> first (or set the equivalent setting idf.espRainmakerPath), and then execute this command to see the examples.</td>
-            <td></td>
-            <td></td>
-        </tr>
-        <tr>
+            <td rowspan=10 align="center">Basic</td>
             <td>Set Espressif Device Target</td>
             <td>This will set the target for the current project (IDF_TARGET). Similar to <strong>idf.py set-target</strong>. For example, if you want to use ESP32 or ESP32-C3, you need to execute this command.</td>
             <td></td>
@@ -233,19 +227,7 @@ Press <kbd>F1</kbd> or click menu `View` -> `Command Palette...` to show Visual
             <td><kbd>Ctrl</kbd> <kbd>E</kbd> <kbd>D</kbd></td>
         </tr>
         <tr>
-            <td rowspan=5 align="center">Project creation</td>
-            <td>Show Example Projects</td>
-            <td>Launch UI to show examples from selected framework and allow you to create a project from them. This command will show frameworks already configured in the extension, so to view ESP-Rainmaker examples, you need to run the <strong>Install ESP-Rainmaker</strong> first (or set the equivalent setting idf.espRainmakerPath), and then execute this command to see the examples.</td>
-            <td></td>
-            <td></td>
-        </tr>
-        <tr>
-            <td>Create Project from Extension Template</td>
-            <td>Create an ESP-IDF project using one of the extension template projects.</td>
-            <td><kbd>⌘</kbd> <kbd>I</kbd> <kbd>C</kbd></td>
-            <td><kbd>Ctrl</kbd> <kbd>E</kbd> <kbd>C</kbd></td>
-        </tr>
-        <tr>
+            <td rowspan=4 align="center">Project creation</td>
             <td>Create New ESP-IDF Component</td>
             <td>Create a new component in the current directory based on ESP-IDF component template.</td>
             <td></td>
@@ -563,7 +545,7 @@ See an example in the [debugging](https://docs.espressif.com/projects/vscode-esp
 
 ## Available Tasks in `tasks.json`
 
-A template `tasks.json` is included when creating a project using **ESP-IDF: Create Project from Extension Template**. These tasks can be executed by pressing <kbd>F1</kbd>, writing `Tasks: Run task` and selecting one of the following:
+A template `tasks.json` is included when creating a project using **ESP-IDF: New Project**. These tasks can be executed by pressing <kbd>F1</kbd>, writing `Tasks: Run task` and selecting one of the following:
 
 1. `Build` - Build Project
 2. `Set Target to esp32`

README_CN.md

@@ -165,13 +165,7 @@ ESP-IDF 扩展在 VS Code 底部蓝色窗口的状态栏中提供了一系列命
             <td></td>
         </tr>
         <tr>
-            <td rowspan=11 align="center">基础命令</td>
-            <td>展示示例项目</td>
-            <td>启动 UI 以显示所选框架的示例，可从中创建新项目。此命令将显示扩展中已配置的框架，如果想查看 ESP-Rainmaker 示例，需要先运行 <strong>安装 ESP-Rainmaker</strong> 命令（或设置相应的 idf.espRainmakerPath），然后执行此命令以查看示例。</td>
-            <td></td>
-            <td></td>
-        </tr>
-        <tr>
+            <td rowspan=10 align="center">基础命令</td>
             <td>设置乐鑫设备目标</td>
             <td>该命令为当前项目设置目标 (IDF_TARGET)，效果等同于 <strong>idf.py set-target</strong>。例如，若想使用 ESP32 或 ESP32-C3，则需执行此命令。</td>
             <td></td>
@@ -233,13 +227,7 @@ ESP-IDF 扩展在 VS Code 底部蓝色窗口的状态栏中提供了一系列命
             <td><kbd>Ctrl</kbd> <kbd>E</kbd> <kbd>D</kbd></td>
         </tr>
         <tr>
-            <td rowspan=5 align="center">创建项目</td>
-            <td>展示示例项目</td>
-            <td>启动 UI 以显示所选框架的示例，可从中创建新项目。此命令将显示扩展中已配置的框架，如果想查看 ESP-Rainmaker 示例，需要先运行 <strong>安装 ESP-Rainmaker</strong> 命令（或设置相应的 idf.espRainmakerPath），然后执行此命令以查看示例。</td>
-            <td></td>
-            <td></td>
-        </tr>
-        <tr>
+            <td rowspan=4 align="center">创建项目</td>
             <td>基于模板创建新项目</td>
             <td>使用扩展中的项目模板来创建一个新的 ESP-IDF 项目。</td>
             <td><kbd>⌘</kbd> <kbd>I</kbd> <kbd>C</kbd></td>

docs/LANG_CONTRIBUTE.md

@@ -12,7 +12,6 @@ Each file has a key value structure such as:
 
 ```json
 {
-  "espIdf.createFiles.title": "ESP-IDF: Create ESP-IDF Project from Extension Template",
   "englishTextOrTextId": "translationInNewLanguage"
 }
 ```

docs_espressif/en/additionalfeatures/app-tracing.rst

@@ -9,11 +9,11 @@ Let's open a ESP-IDF project. For this tutorial we will use the `system/app_trac
 
 - Navigate to **View** > **Command Palette**.
 
-- Type **ESP-IDF: Show Examples Projects**, select the command and choose ``Use Current ESP-IDF (/path/to/esp-idf)``.
+- Type **ESP-IDF: New Project**, select the command and choose ESP-IDF version to use.
 
 If you don't see the option, please review the setup in :ref:`Install ESP-IDF and Tools <installation>`.
 
-- A window will be open with a list a projects, go the **system** section and choose the ``app_trace_to_host``. You will see a **Create Project Using Example app_trace_to_host** button in the top and a description of the project below. Click the button and the project will be opened in a new window.
+- A window will be open with settings to configure the project. Later you can choose from a list a ESP-IDF examples, go the **system** section and choose the ``app_trace_to_host``. You will see a **Create Project Using Example app_trace_to_host** button in the top and a description of the project below. Click the button and the project will be opened in a new window.
 
 .. image:: ../../../media/tutorials/app_trace/app_tracing.png
 

docs_espressif/en/additionalfeatures/coverage.rst

@@ -14,11 +14,11 @@ Let's use the ESP-IDF `GCOV Example <https://github.com/espressif/esp-idf/tree/m
 
 - Navigate to **View** > **Command Palette**.
 
-- Type **ESP-IDF: Show Examples Projects** and choose ``Use Current ESP-IDF (/path/to/esp-idf)``.
+- Type **ESP-IDF: New Project** and choose ESP-IDF version to use.
 
 If you don't see the option, please review the current ESP-IDF setup in :ref:`Installation <installation>`.
 
-- A window will be open with a list a projects, go the **system** section and choose the ``gcov``. You will see a **Create Project Using Example gcov** button in the top and a description of the project below. Click **Create Project Using Example GCOV** button.
+- A window will be open with settings to configure the project. Later you can choose from a list a ESP-IDF examples, go the **system** section and choose the ``gcov``. You will see a **Create Project Using Example gcov** button in the top and a description of the project below. Click **Create Project Using Example GCOV** button.
 
 .. image:: ../../../media/tutorials/coverage/gcov_example.png
 

docs_espressif/en/additionalfeatures/heap-tracing.rst

@@ -7,11 +7,11 @@ Let's open a ESP-IDF project. For this tutorial we will use the ``system/sysview
 
 - Navigate to **View** > **Command Palette**.
 
-- Type **ESP-IDF: Show Examples Projects**, select the command and choose ``Use Current ESP-IDF (/path/to/esp-idf)``.
+- Type **ESP-IDF: New Project**, select the command and choose ESP-IDF version to use.
 
 If you don't see the option, please review the setup in :ref:`Install ESP-IDF and Tools <installation>`.
 
-- A window will be open with a list a projects, go the **system** section and choose the ``sysview_tracing_heap_log``. You will see a **Create Project Using Example sysview_tracing_heap_log** button in the top and a description of the project below. Click the button and the project will be opened in a new window.
+- A window will be open with settings to configure the project. Later you can choose from a list a ESP-IDF examples, go the **system** section and choose the ``sysview_tracing_heap_log``. You will see a **Create Project Using Example sysview_tracing_heap_log** button in the top and a description of the project below. Click the button and the project will be opened in a new window.
 
 .. image:: ../../../media/tutorials/heap_trace/sysview_tracing_heap_log.png
 

docs_espressif/en/additionalfeatures/install-esp-components.rst

@@ -20,7 +20,7 @@ For more information, refer to `ESP Component Registry Documentation <https://do
 Install Arduino-ESP32 as Component
 ----------------------------------
 
-The ``ESP-IDF: Add Arduino-ESP32 as ESP-IDF Component`` command adds `Arduino-ESP32 <https://github.com/espressif/arduino-esp32>`_ as an ESP-IDF component in your current directory (``${CURRENT_DIRECTORY}/components/arduino``). You can also use the ``ESP-IDF: Create Project from Extension Template`` command with the ``arduino-as-component`` template to create a new project directory that includes Arduino-ESP32 as an ESP-IDF component.
+The ``ESP-IDF: Add Arduino-ESP32 as ESP-IDF Component`` command adds `Arduino-ESP32 <https://github.com/espressif/arduino-esp32>`_ as an ESP-IDF component in your current directory (``${CURRENT_DIRECTORY}/components/arduino``).
 
 .. note::
 

docs_espressif/en/additionalfeatures/qemu.rst

@@ -13,7 +13,7 @@ ESP-IDF setup can include a fork of `Espressif QEMU fork <https://github.com/esp
 Development steps:
 
 1. Prepare a project folder in a container based on the dockerfile in the templates ``.devcontainer`` directory in this repository. For this you can:
-   - Create a project using **ESP-IDF: New Project**, **ESP-IDF: Show Examples Projects** or **ESP-IDF: Create Project from Extension Template** command which will include the ``.devcontainer`` directory.
+   - Create a project using **ESP-IDF: New Project** command which will include the ``.devcontainer`` directory.
    - Use the **ESP-IDF: Add Docker Container Configuration** command to add the ``.devcontainer`` files to the currently opened project directory.
 2. Use the **Remote Containers: Open Folder in Container..** command to open the folder within the container.
 3. The **Remote Containers** will build the container from the Dockerfile (if it has not been created before) and install this extension on the container.

docs_espressif/en/commands.rst

@@ -34,8 +34,6 @@ All commands start with ``ESP-IDF:``.
      - Set required values in your project SDKConfig to enable code coverage analysis.
    * - Configure project for ESP-Clang
      - Configure the current ESP-IDF project to use esp-clang as toolchain to use and configure LLVM Clang extension in settings.json.
-   * - Create Project from Extension Template
-     - Create an ESP-IDF project using one of the extension template projects.
    * - Create New ESP-IDF Component
      - Create a new component in the current directory based on ESP-IDF component template.
    * - Dispose of Current SDK Configuration Editor Server Process
@@ -126,8 +124,6 @@ All commands start with ``ESP-IDF:``.
      - This will set the target for the current project (IDF_TARGET). Similar to **idf.py set-target**. For example, if you want to use ESP32 or ESP32-C3, you need to execute this command.
    * - Set ESP-MATTER Device Path (ESP_MATTER_DEVICE_PATH)
      - The **ESP-IDF: Set ESP-MATTER Device Path (ESP_MATTER_DEVICE_PATH)** is used to define the device path for ESP-Matter. ESP-Matter is not supported in Windows.
-   * - Show Example Projects
-     - Launch UI to show examples from selected framework and allow you to create a project from them. This command will show frameworks already configured in the extension. To view ESP-Rainmaker examples, you need to run the **Install ESP-Rainmaker** first (or set the equivalent setting idf.espRainmakerPath), and then execute this command to see the examples.
    * - Show Ninja Build Summary
      - Execute the Chromium ninja-build-summary.py.
    * - Size Analysis of the Binaries

docs_espressif/en/startproject.rst

@@ -8,8 +8,7 @@ Create an ESP-IDF Project
 You can start a project in three ways:
 
 1. :ref:`ESP-IDF New Project`
-2. :ref:`ESP-IDF Show Examples Projects`
-3. :ref:`ESP-IDF Existing ESP-IDF Project`
+2. :ref:`ESP-IDF Existing ESP-IDF Project`
 
 The first option is recommended because it allows to configure the project. The second and third options create the project with the current workspace folder configuration.
 
@@ -55,27 +54,6 @@ In Visual Studio Code:
 
 - After the project is created, a notification window will appear, asking whether to open the newly created project.
 
-.. image:: ../../media/tutorials/new_project/new_project_confirm.png
-  :width: 400px
-  :align: center
-
-.. _ESP-IDF Show Examples Projects:
-
-Using ``ESP-IDF: Show Examples Projects``
---------------------------------------------
-
-In Visual Studio Code:
-
-- Navigate to ``View`` > ``Command Palette``.
-
-- Type ``ESP-IDF: Show Examples Projects`` and select the command to create a new project from ESP-IDF examples.
-
-- Select ``ESP-IDF`` from the dropdown. A window will appear, showing a list of ESP-IDF examples.
-
-- When you select an example, the README file will appear along with a ``Create project using example example_name`` button.
-
-- Choose a destination for the new project. A notification will prompt you to open the folder in a new window.
-
 .. image:: ../../media/tutorials/new_project/new_project_confirm.png
   :width: 400px
   :align: center

docs_espressif/zh_CN/commands.rst

@@ -32,8 +32,6 @@
      - 打开一个带有安装向导的窗口，可以安装 ESP-IDF、IDF 工具和 Python 虚拟环境。
    * - 配置 SDKConfig 文件以启用代码覆盖率
      - 在项目的 SDKConfig 文件中设置必要的值，启用代码覆盖率分析。
-   * - 基于模板创建新项目
-     - 使用扩展中的项目模板来创建一个新的 ESP-IDF 项目。
    * - 创建新 ESP-IDF 组件
      - 在当前目录下，基于 ESP-IDF 组件模板创建新组件。
    * - 清理当前 SDK 配置编辑器服务器进程

docs_espressif/zh_CN/startproject.rst

@@ -8,7 +8,6 @@
 可以通过三种方式启动 ESP-IDF 项目：
 
 1. :ref:`ESP-IDF New Project`
-2. :ref:`ESP-IDF Show Examples Projects`
 3. :ref:`ESP-IDF Existing ESP-IDF Project`
 
 推荐使用第一种方式来自行配置项目，而第二和第三种方式则使用当前工作区文件夹配置来创建项目。
@@ -55,27 +54,6 @@
 
 - 成功创建项目后，将弹出一个通知窗口，询问是否打开新创建的项目。
 
-.. image:: ../../media/tutorials/new_project/new_project_confirm.png
-  :width: 400px
-  :align: center
-
-.. _ESP-IDF Show Examples Projects:
-
-使用 ``ESP-IDF：展示示例项目``
--------------------------------------
-
-在 Visual Studio Code 中：
-
-- 前往菜单栏 ``查看`` > ``命令面板``。
-
-- 输入 ``ESP-IDF：展示示例项目``，选择该命令并从 ESP-IDF 例程中创建新项目。
-
-- 在下拉菜单中选择 ``ESP-IDF``，弹出的窗口中会显示 ESP-IDF 例程列表。
-
-- 选好例程后，界面中会出现 README 文件和 ``Create project using example example_name`` 按钮。
-
-- 为新项目选择存储位置，通知会提示你在新窗口中打开文件夹。
-
 .. image:: ../../media/tutorials/new_project/new_project_confirm.png
   :width: 400px
   :align: center

l10n/bundle.l10n.es.json

@@ -147,7 +147,6 @@
   "Discarded changes in SDK Configuration editor": "Cambios descartados en el editor de configuración del SDK",
   "Error encountered while adding dependency {dependency} to the component \"{component}\"": "Se encontró un error al agregar la dependencia {dependency} al componente \"{component}\"",
   "Error encountered while creating project from example \"{example}\"": "Se encontró un error al crear un proyecto a partir del ejemplo \"{example}\"",
-  "Create ESP-IDF From Extension Templates": "Cree ESP-IDF a partir de plantillas de extensión",
   "Install ESP-ADF": "Instalar ESP-ADF",
   "Install ESP-MDF": "Instalar ESP-MDF",
   "Install ESP-Matter": "Instalar ESP-Materia",
@@ -158,7 +157,6 @@
   "Install ESP-Matter Python Requirements": "Instalar los requisitos de ESP-Matter Python",
   "Add .vscode subdirectory files": "Agregar archivos de subdirectorio .vscode",
   "Add .devcontainer subdirectory files": "Agregar archivos de subdirectorio .devcontainer",
-  "Create ESP-IDF Component": "Crear componente ESP-IDF",
   "Flash with JTAG": "Flashear con JTAG",
   "Flash with UART": "Flashear con UART",
   "Flash with DFU": "Flashear con DFU",
@@ -167,7 +165,6 @@
   "Configure ESP-IDF Extension": "Configurar la extensión ESP-IDF",
   "esp-clang not found in PATH. Make sure esp-clang is installed.": "No se ha encontrado a esp-clang en PATH. Verifique la instalación de esp-clang.",
   "Select current ESP-IDF version": "Seleccione la versión actual de ESP-IDF",
-  "Show Examples": "Mostrar ejemplos",
   "New Project Wizard": "Asistente para nuevos proyectos",
   "Select Current Project workspace folder": "Seleccione la carpeta del espacio de trabajo del proyecto actual",
   "Select Monitor Port to Use (COM, tty, usbserial)": "Seleccione el puerto de monitor para usar (com, tty, usbserial)",

l10n/bundle.l10n.pt.json

@@ -147,7 +147,6 @@
   "Discarded changes in SDK Configuration editor": "Alterações descartadas no editor de configuração do SDK",
   "Error encountered while adding dependency {dependency} to the component \"{component}\"": "Erro encontrado ao adicionar a dependência {dependency} ao componente \"{component}\"",
   "Error encountered while creating project from example \"{example}\"": "Erro encontrado ao criar o projeto do exemplo \"{example}\"",
-  "Create ESP-IDF From Extension Templates": "Crie ESP-IDF a partir de modelos de extensão",
   "Install ESP-ADF": "Instale ESP-ADF",
   "Install ESP-MDF": "Instale ESP-MDF",
   "Install ESP-Matter": "Instale ESP-Matter",
@@ -167,7 +166,6 @@
   "esp-clang not found in PATH. Make sure esp-clang is installed.": "esp-clang não encontrado em PATH. Certifique-se de que o esp-clang está instalado.",
   "Configure ESP-IDF Extension": "Configurar extensão ESP-IDF",
   "Select current ESP-IDF version": "Selecione a versão atual do ESP-IDF",
-  "Show Examples": "Mostrar exemplos",
   "New Project Wizard": "Assistente de Novo Projeto",
   "Select Current Project workspace folder": "Selecione a pasta do espaço de trabalho do Projeto Atual",
   "Select Monitor Port to Use (COM, tty, usbserial)": "Selecione a porta do monitor para usar (com, tty, USBserial)",