Merge pull request #57 from eclipsesource/issues/54_prime_react

Migrate vscode-webview-ui-toolkit to primereact

.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,22 @@
+/********************************************************************************
+ * 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 "./theme/theme.css";
+
+@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,20 @@
  * 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);
+}
+
+.memory-inspector-table tr > th:not(.fit),
+.memory-inspector-table tr > td:not(.fit) {
+  min-width: 120px;
+}
+
+.memory-inspector-table tr > td {
+  font-family: var(--vscode-editor-font-family);
+}
+
+/* == MoreMemorySelect == */
 
 .bytes-select {
   color: var(--vscode-dropdown-forground);
@@ -42,7 +56,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 +75,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,71 @@
+/********************************************************************************
+ * 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
+ ********************************************************************************/
+
+.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 > input {
+  width: 150px;
+}
+
+.form-texfield-long > input {
+  width: 200px;
+}
+
+.form-options button[type="submit"] {
+  /* Match height of inputs */
+  height: calc(var(--input-minHeight) * 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%;
+  font-weight: bold;
+}

media/root.css

@@ -0,0 +1,28 @@
+/********************************************************************************
+ * 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
+ ********************************************************************************/
+
+#root {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+body {
+  padding: 0;
+  font-family: var(--font-family);
+  font-size: var(--type-ramp-base-font-size);
+  line-height: var(--type-ramp-base-line-height);
+}

media/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>. The VSCode theme colors can be found in <https://code.visualstudio.com/api/references/theme-color>

media/theme/components/button.css

@@ -0,0 +1,61 @@
+/********************************************************************************
+ * 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
+ ********************************************************************************/
+
+:root {
+  --button-icon-background: transparent;
+  --button-icon-corner-radius: 5px;
+  --button-icon-hover-background: rgba(90, 93, 94, 0.31);
+  --button-icon-padding: 3px;
+  --button-padding-horizontal: 11px;
+  --button-padding-vertical: 4px;
+}
+
+.p-button {
+  font-family: inherit;
+  color: var(--vscode-button-foreground);
+  background: var(--vscode-button-background);
+  border: 1px solid transparent;
+  border-radius: 2px;
+  padding: var(--button-padding-vertical) var(--button-padding-horizontal);
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s,
+    box-shadow 0.2s;
+}
+.p-button:disabled {
+  opacity: var(--disabled-opacity);
+}
+.p-button:not(:disabled):hover {
+  background: var(--vscode-button-hoverBackground);
+}
+.p-button:not(:disabled):active {
+  background: var(--vscode-button-background);
+}
+
+.p-button.p-button-rounded {
+  border-radius: 2rem;
+}
+.p-button.p-button-icon-only {
+  color: var(--vscode-icon-foreground);
+  background: var(--button-icon-background);
+  padding: var(--button-icon-padding);
+  outline: none;
+  border: none;
+}
+.p-button.p-button.p-button-icon-only:hover {
+  background: var(--button-icon-hover-background);
+}
+.p-button.p-button-icon-only.p-button-rounded {
+  border-radius: var(--button-icon-corner-radius);
+}