Migrate vscode-webview-ui-toolkit to primereact

- Use primereact theme aligned to VSCode
- Use formik for input handling
- Allow to submit on enter
- Show loading icon on fetch
- Use lazy loading and virtual scrolling
- Fix column alignment
- Fix resetting of memory address after webview focus change

.vscode/settings.json

@@ -0,0 +1,11 @@
+// If one would like to add/remove/modify user preferences without modifying the content of the
+// workspace settings file, then one would need to modify the `settings.json` under here:
+// - Windows: %APPDATA%\Code\User\settings.json
+// - Linux: $HOME/.config/Code/User/settings.json
+// - Mac: $HOME/Library/Application Support/Code/User/settings.json
+{
+    "editor.formatOnSave": true,
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": "explicit"
+    }
+}

media/index.css

@@ -0,0 +1,20 @@
+/********************************************************************************
+ * Copyright (C) 2024 EclipseSource.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+@import "./root.css";
+@import "./multi-select.css";
+@import "./options-widget.css";
+@import "./memory-table.css";

media/memory-inspector.css → media/memory-table.css

@@ -14,6 +14,11 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
+.memory-inspector-table .group-separator > td {
+  border-bottom: 2px solid var(--vscode-editor-lineHighlightBorder);
+}
+
+/* == MoreMemorySelect == */
 
 .bytes-select {
   color: var(--vscode-dropdown-forground);
@@ -42,7 +47,7 @@
   border-color: transparent;
 }
 
-.more-memory-select-top:hover {
+.more-memory-select:hover .more-memory-select-top {
   border-bottom: 1px solid;
   padding-bottom: 0;
   border-color: var(--vscode-sideBar-foreground);
@@ -61,96 +66,3 @@
 .more-memory-select select:hover {
   background: var(--vscode-dropdown-background);
 }
-
-.memory-options-widget {
-  margin-bottom: 8px;
-}
-
-.multi-select {
-  width: 160px;
-  display: flex;
-  flex-direction: column;
-  text-align: left;
-}
-
-.multi-select-bar {
-  display: flex;
-  flex-direction: column;
-}
-
-.multi-select-checkbox {
-  appearance: none;
-  -moz-appearance: none;
-  position: absolute;
-  left: 0;
-  top: 0;
-  margin: 0;
-  height: 100%;
-  width: 100%;
-  cursor: pointer;
-}
-
-.options-widget-title {
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: space-between;
-}
-
-.advanced-options-toggle {
-  margin-left: auto;
-}
-
-.advanced-options-content {
-  position: absolute;
-  z-index: 1;
-  margin: 20px -165px;
-  width: 160px;
-  padding: 12px;
-  border-radius: 1px;
-  background-color: var(--vscode-dropdown-background);
-  box-shadow: var(--vscode-dropdown-border) 0 2px 4px;
-  text-align: left;
-  display: none;
-  flex-direction: column;
-}
-
-.advanced-options-toggle:focus .advanced-options-content, .advanced-options-content:active, .advanced-options-content:focus-within {
-  display: flex;
-}
-
-.options-dropdown {
-  width: 70px;
-  min-width: 70px;
-}
-
-.options-label {
-  margin: 10px 0px 2px 0px;
-  font-weight: bold;
-}
-
-.multi-select-label {
-  margin-bottom: 2px;
-  font-weight: bold;
-}
-
-.core-options {
-  display: flex;
-  flex-direction: row;
-  align-items: end;
-  column-gap: 12px;
-  margin: 6px 0;
-}
-
-.options-textfield {
-  width: 100px;
-}
-
-.options-texfield-long {
-  width: 200px;
-}
-
-.go-button {
-  /* Match height of inputs */
-  height: calc(var(--input-height) * 1px);
-  align-self: end;
-}

media/multi-select.css

@@ -0,0 +1,23 @@
+/********************************************************************************
+ * Copyright (C) 2023-2024 Ericsson, EclipseSource and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+.multi-select {
+  width: 160px;
+}
+
+.multi-select-label {
+  font-weight: bold;
+}

media/options-widget.css

@@ -0,0 +1,75 @@
+/********************************************************************************
+ * Copyright (C) 2023-2024 Ericsson, EclipseSource and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+.memory-options-widget {
+  margin-bottom: 8px;
+  padding-bottom: 4px;
+}
+
+.core-options {
+  display: flex;
+  flex-direction: row;
+  align-items: end;
+  margin: 6px 0;
+  flex-wrap: wrap;
+  border-bottom: 1px solid var(--vscode-widget-border);
+}
+
+.form-options {
+  display: flex;
+  flex-direction: row;
+  align-items: start;
+  flex-wrap: wrap;
+  column-gap: 12px;
+  row-gap: 12px;
+}
+
+.form-textfield {
+  width: 150px;
+}
+
+.form-texfield-long {
+  width: 200px;
+}
+
+.form-options button[type="submit"] {
+  /* Match height of inputs */
+  height: calc(var(--input-height) * 1px);
+  margin-top: 1rem;
+  align-self: start;
+}
+
+.advanced-options-toggle {
+  margin-left: auto;
+  align-self: start;
+  margin-top: 1rem;
+}
+
+.advanced-options-content {
+  width: 160px;
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.advanced-options-dropdown {
+  width: 100%;
+}
+
+.advanced-options-label {
+  width: 100%;
+}

media/primereact-theme/README.md

@@ -0,0 +1,5 @@
+# Theme
+
+Information regarding how theming works can be taken from: <https://primereact.org/theming/>.
+
+Mapping the VSCode theme to our purposes requires manual work. You can check the CSS by using the devtools in <https://microsoft.github.io/vscode-webview-ui-toolkit>.

media/primereact-theme/base/_base.scss

@@ -0,0 +1,121 @@
+/********************************************************************************
+ * Copyright (C) 2024 EclipseSource.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+@import "~primereact-sass-theme/theme-base/_mixins";
+@import "~primereact-sass-theme/theme-base/_colors";
+
+@import "~primereact-sass-theme/theme-base/components/input/_editor";
+
+@layer primereact {
+  @import "~primereact-sass-theme/theme-base/_common";
+
+  //Input
+  @import "~primereact-sass-theme/theme-base/components/input/_autocomplete";
+  @import "~primereact-sass-theme/theme-base/components/input/_calendar";
+  @import "~primereact-sass-theme/theme-base/components/input/_cascadeselect";
+  @import "~primereact-sass-theme/theme-base/components/input/_checkbox";
+  @import "~primereact-sass-theme/theme-base/components/input/_chips";
+  @import "~primereact-sass-theme/theme-base/components/input/_colorpicker";
+  @import "~primereact-sass-theme/theme-base/components/input/_dropdown";
+  @import "~primereact-sass-theme/theme-base/components/input/_inputgroup";
+  @import "~primereact-sass-theme/theme-base/components/input/_inputnumber";
+  @import "~primereact-sass-theme/theme-base/components/input/_inputswitch";
+  @import "~primereact-sass-theme/theme-base/components/input/_inputtext";
+  @import "~primereact-sass-theme/theme-base/components/input/_listbox";
+  @import "~primereact-sass-theme/theme-base/components/input/_mention";
+  @import "~primereact-sass-theme/theme-base/components/input/_multiselect";
+  @import "~primereact-sass-theme/theme-base/components/input/_password";
+  @import "~primereact-sass-theme/theme-base/components/input/_radiobutton";
+  @import "~primereact-sass-theme/theme-base/components/input/_rating";
+  @import "~primereact-sass-theme/theme-base/components/input/_selectbutton";
+  @import "~primereact-sass-theme/theme-base/components/input/_slider";
+  @import "~primereact-sass-theme/theme-base/components/input/_treeselect";
+  @import "~primereact-sass-theme/theme-base/components/input/_togglebutton";
+
+  //Button
+  @import "~primereact-sass-theme/theme-base/components/button/_button";
+  @import "~primereact-sass-theme/theme-base/components/button/_splitbutton";
+  @import "~primereact-sass-theme/theme-base/components/button/_speeddial";
+
+  //Data
+  @import "~primereact-sass-theme/theme-base/components/data/_carousel";
+  @import "~primereact-sass-theme/theme-base/components/data/_datatable";
+  @import "~primereact-sass-theme/theme-base/components/data/_dataview";
+  @import "~primereact-sass-theme/theme-base/components/data/_datascroller";
+  @import "~primereact-sass-theme/theme-base/components/data/_filter";
+  @import "~primereact-sass-theme/theme-base/components/data/_orderlist";
+  @import "~primereact-sass-theme/theme-base/components/data/_organizationchart";
+  @import "~primereact-sass-theme/theme-base/components/data/_paginator";
+  @import "~primereact-sass-theme/theme-base/components/data/_picklist";
+  @import "~primereact-sass-theme/theme-base/components/data/_tree";
+  @import "~primereact-sass-theme/theme-base/components/data/_treetable";
+  @import "~primereact-sass-theme/theme-base/components/data/_timeline";
+
+  //Panel
+  @import "~primereact-sass-theme/theme-base/components/panel/_accordion";
+  @import "~primereact-sass-theme/theme-base/components/panel/_card";
+  @import "~primereact-sass-theme/theme-base/components/panel/_fieldset";
+  @import "~primereact-sass-theme/theme-base/components/panel/_divider";
+  @import "~primereact-sass-theme/theme-base/components/panel/_panel";
+  @import "~primereact-sass-theme/theme-base/components/panel/_splitter";
+  @import "~primereact-sass-theme/theme-base/components/panel/_scrollpanel";
+  @import "~primereact-sass-theme/theme-base/components/panel/_tabview";
+  @import "~primereact-sass-theme/theme-base/components/panel/_toolbar";
+
+  //Overlay
+  @import "./components/overlay/_confirmpopup";
+  @import "~primereact-sass-theme/theme-base/components/overlay/_dialog";
+  @import "./components/overlay/_overlaypanel";
+  @import "~primereact-sass-theme/theme-base/components/overlay/_sidebar";
+  @import "~primereact-sass-theme/theme-base/components/overlay/_tooltip";
+
+  //File
+  @import "~primereact-sass-theme/theme-base/components/file/_fileupload";
+
+  //Menu
+  @import "~primereact-sass-theme/theme-base/components/menu/_breadcrumb";
+  @import "~primereact-sass-theme/theme-base/components/menu/_contextmenu";
+  @import "~primereact-sass-theme/theme-base/components/menu/_dock";
+  @import "~primereact-sass-theme/theme-base/components/menu/_megamenu";
+  @import "~primereact-sass-theme/theme-base/components/menu/_menu";
+  @import "~primereact-sass-theme/theme-base/components/menu/_menubar";
+  @import "~primereact-sass-theme/theme-base/components/menu/_panelmenu";
+  @import "~primereact-sass-theme/theme-base/components/menu/_slidemenu";
+  @import "~primereact-sass-theme/theme-base/components/menu/_steps";
+  @import "~primereact-sass-theme/theme-base/components/menu/_tabmenu";
+  @import "~primereact-sass-theme/theme-base/components/menu/_tieredmenu";
+
+  //Messages
+  @import "~primereact-sass-theme/theme-base/components/messages/_inlinemessage";
+  @import "~primereact-sass-theme/theme-base/components/messages/_message";
+  @import "~primereact-sass-theme/theme-base/components/messages/toast";
+
+  //MultiMedia
+  @import "~primereact-sass-theme/theme-base/components/multimedia/_galleria";
+  @import "~primereact-sass-theme/theme-base/components/multimedia/_image";
+
+  //Misc
+  @import "~primereact-sass-theme/theme-base/components/misc/_avatar";
+  @import "~primereact-sass-theme/theme-base/components/misc/_chip";
+  @import "~primereact-sass-theme/theme-base/components/misc/_scrolltop";
+  @import "~primereact-sass-theme/theme-base/components/misc/_skeleton";
+  @import "~primereact-sass-theme/theme-base/components/misc/_tag";
+  @import "~primereact-sass-theme/theme-base/components/misc/_inplace";
+  @import "~primereact-sass-theme/theme-base/components/misc/_progressbar";
+  @import "~primereact-sass-theme/theme-base/components/misc/_terminal";
+  @import "~primereact-sass-theme/theme-base/components/misc/_blockui";
+  @import "~primereact-sass-theme/theme-base/components/misc/_badge";
+}