diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..37dde12 --- /dev/null +++ b/.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" + } +} \ No newline at end of file diff --git a/media/index.css b/media/index.css new file mode 100644 index 0000000..fd38565 --- /dev/null +++ b/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"; diff --git a/media/memory-inspector.css b/media/memory-table.css similarity index 53% rename from media/memory-inspector.css rename to media/memory-table.css index 877abc8..8634ff2 100644 --- a/media/memory-inspector.css +++ b/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; -} diff --git a/media/multi-select.css b/media/multi-select.css new file mode 100644 index 0000000..2f31bc3 --- /dev/null +++ b/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; +} diff --git a/media/options-widget.css b/media/options-widget.css new file mode 100644 index 0000000..c219524 --- /dev/null +++ b/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; +} diff --git a/media/root.css b/media/root.css new file mode 100644 index 0000000..b099ad8 --- /dev/null +++ b/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); +} diff --git a/media/theme/README.md b/media/theme/README.md new file mode 100644 index 0000000..8bc923d --- /dev/null +++ b/media/theme/README.md @@ -0,0 +1,5 @@ +# Theme + +Information regarding how theming works can be taken from: . + +Mapping the VSCode theme to our purposes requires manual work. You can check the CSS by using the devtools in . The VSCode theme colors can be found in diff --git a/media/theme/components/button.css b/media/theme/components/button.css new file mode 100644 index 0000000..4eb1e33 --- /dev/null +++ b/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); +} diff --git a/media/theme/components/checkbox.css b/media/theme/components/checkbox.css new file mode 100644 index 0000000..747c457 --- /dev/null +++ b/media/theme/components/checkbox.css @@ -0,0 +1,44 @@ +/******************************************************************************** + * 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 + ********************************************************************************/ + +.p-checkbox { + width: 18px; + height: 18px; +} +.p-checkbox .p-checkbox-box { + border: 1px solid var(--vscode-checkbox-border); + background: var(--vscode-checkbox-background); + width: 18px; + height: 18px; + color: var(--vscode-checkbox-foreground); + transition: background-color 0.2s, color 0.2s, border-color 0.2s, + box-shadow 0.2s; +} +.p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + font-size: 12px; +} +.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 12px; + height: 12px; +} +.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + outline: 0 none; + outline-offset: 0; +} +.p-checkbox.p-invalid > .p-checkbox-box { + border-color: var(--vscode-errorForeground); +} diff --git a/media/theme/components/dropdown.css b/media/theme/components/dropdown.css new file mode 100644 index 0000000..8014399 --- /dev/null +++ b/media/theme/components/dropdown.css @@ -0,0 +1,72 @@ +/******************************************************************************** + * 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 + ********************************************************************************/ + +.p-dropdown { + color: var(--vscode-dropdown-foreground); + background: var(--vscode-dropdown-background); + border: 1px solid var(--vscode-dropdown-border); + transition: background-color 0.2s, color 0.2s, border-color 0.2s, + box-shadow 0.2s; +} +.p-dropdown:not(.p-disabled).p-focus { + outline: 0 none; + outline-offset: 0; + border-color: var(--vscode-focusBorder); +} +.p-dropdown .p-dropdown-label { + background: transparent; + border: 0 none; + line-height: var(--input-minHeight); +} +.p-dropdown .p-dropdown-label.p-placeholder { + color: var(--vscode-input-placeholderForeground); +} +.p-dropdown .p-dropdown-trigger { + background: transparent; + width: 2.357rem; +} +.p-dropdown.p-invalid.p-component { + border-color: var(--vscode-errorForeground); +} +.p-dropdown-panel { + background: var(--vscode-dropdown-background); + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), + 0 1px 10px 0 rgba(0, 0, 0, 0.12); +} +.p-dropdown-panel .p-dropdown-items-wrapper { + border: 1px solid var(--vscode-focusBorder); +} +.p-dropdown-panel .p-dropdown-items { + padding: 0.25rem 0; +} +.p-dropdown-panel .p-dropdown-items .p-dropdown-item { + margin: 0; + padding: 0.25rem 0.5rem; + border: 0 none; + background: transparent; + transition: box-shadow 0.2s; + border-radius: 0; +} +.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { + background: var(--vscode-list-activeSelectionBackground); + color: var(--vscode-list-activeSelectionForeground); +} +.p-dropdown-panel + .p-dropdown-items + .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + background: var(--vscode-list-activeSelectionBackground); + color: var(--vscode-list-activeSelectionForeground); +} diff --git a/media/theme/components/input.css b/media/theme/components/input.css new file mode 100644 index 0000000..907451b --- /dev/null +++ b/media/theme/components/input.css @@ -0,0 +1,43 @@ +/******************************************************************************** + * 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 { + --input-minHeight: 26px; + --input-width: 100px; +} + +.p-inputtext { + font-family: inherit; + line-height: var(--type-ramp-base-line-height); + font-size: var(--type-ramp-base-font-size); + color: var(--vscode-input-foreground); + background: var(--vscode-input-background); + padding: 0 11px; + border: 1px solid var(--vscode-input-border, var(--vscode-dropdown-border)); + transition: background-color 0.2s, color 0.2s, border-color 0.2s, + box-shadow 0.2s; + appearance: none; + min-height: var(--input-minHeight); + width: var(--input-width); +} +.p-inputtext:enabled:focus { + outline: none; + border-color: var(--vscode-focusBorder); +} + +.p-inputtext.p-invalid.p-component { + border-color: var(--vscode-errorForeground); +} diff --git a/media/theme/components/overlay.css b/media/theme/components/overlay.css new file mode 100644 index 0000000..02b76a0 --- /dev/null +++ b/media/theme/components/overlay.css @@ -0,0 +1,27 @@ +/******************************************************************************** + * 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 + ********************************************************************************/ + +.p-overlaypanel { + background: var(--vscode-dropdown-background); + color: var(--vscode-foreground); + border: 0 none; + box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), + 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); + z-index: 99; +} +.p-overlaypanel .p-overlaypanel-content { + padding: 1rem; +} diff --git a/media/theme/components/progress-spinner.css b/media/theme/components/progress-spinner.css new file mode 100644 index 0000000..1893b6e --- /dev/null +++ b/media/theme/components/progress-spinner.css @@ -0,0 +1,21 @@ +/******************************************************************************** + * 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 + ********************************************************************************/ + +.p-progress-spinner-circle { + stroke: var(--vscode-notificationsInfoIcon-foreground); + stroke-width: 3; + animation: none; +} diff --git a/media/theme/components/table.css b/media/theme/components/table.css new file mode 100644 index 0000000..45ea793 --- /dev/null +++ b/media/theme/components/table.css @@ -0,0 +1,84 @@ +/******************************************************************************** + * 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 + ********************************************************************************/ + +.p-datatable .p-datatable-header { + padding: 0.5rem 12px; +} +.p-datatable .p-datatable-footer { + padding: 0.5rem 12px; +} +.p-datatable .p-datatable-thead > tr > th { + text-align: left; + padding: 4px 12px; + font-weight: 600; + background: var(--vscode-editor-background); + transition: box-shadow 0.2s; +} +.p-datatable .p-datatable-tfoot > tr > td { + text-align: left; + padding: 4px 12px; + font-weight: 600; + background: var(--vscode-editor-background); +} +.p-datatable .p-datatable-tbody > tr { + background: var(--vscode-editor-background); + transition: box-shadow 0.2s; +} +.p-datatable .p-datatable-tbody > tr:hover { + background: var(--vscode-settings-rowHoverBackground); +} +.p-datatable .p-datatable-tbody > tr > td { + vertical-align: top; + text-align: left; + padding: 4px 12px; + word-break: break-all; + overflow-wrap: anywhere; + white-space: unset; +} +.p-datatable .p-datatable-tbody > tr > td.fit { + width: 1%; + word-wrap: break-word; + word-break: unset; +} +.p-datatable .p-datatable-thead > tr > th.fit { + min-width: 80px; +} + +.p-datatable .p-datatable-tbody > tr > td.p-highlight { + background: var(--vscode-list-activeSelectionBackground); + color: var(--vscode-list-activeSelectionForeground); + outline: 1px solid var(--vscode-list-focusOutline); + outline-offset: -1px; +} +.p-datatable.p-datatable-selectable + .p-datatable-tbody + > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover { + background: var(--vscode-settings-rowHoverBackground); +} +.p-datatable.p-datatable-selectable-cell + .p-datatable-tbody + > tr.p-selectable-row + > td.p-selectable-cell:not(.p-highlight):hover { + background: var(--vscode-settings-rowHoverBackground); +} +.p-datatable.p-datatable-hoverable-rows + .p-datatable-tbody + > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover { + background: var(--vscode-settings-rowHoverBackground); +} +.p-datatable .p-column-resizer-helper { + background: var(--vscode-focusBorder); +} diff --git a/media/theme/extensions.css b/media/theme/extensions.css new file mode 100644 index 0000000..e2db523 --- /dev/null +++ b/media/theme/extensions.css @@ -0,0 +1,31 @@ +/******************************************************************************** + * 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 + ********************************************************************************/ + +.pm-top-label { + display: flex; + flex-direction: column; + font-size: var(--type-ramp-base-font-size); +} + +.pm-top-label .p-inputtext-label { + margin-bottom: 2px; + cursor: pointer; +} + +small.p-invalid { + margin-top: 4px; + color: var(--vscode-errorForeground); +} diff --git a/media/theme/theme.css b/media/theme/theme.css new file mode 100644 index 0000000..c9dd50a --- /dev/null +++ b/media/theme/theme.css @@ -0,0 +1,34 @@ +/******************************************************************************** + * 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 "./components/button.css"; +@import "./components/checkbox.css"; +@import "./components/dropdown.css"; +@import "./components/input.css"; +@import "./components/overlay.css"; +@import "./components/progress-spinner.css"; +@import "./components/table.css"; + +@import "./extensions.css"; + +:root { + --border-width: 1; + --disabled-opacity: 0.4; + --font-family: system-ui, Ubuntu, "Droid Sans", sans-serif; + + --type-ramp-base-font-size: 13px; + --type-ramp-base-line-height: normal; +} diff --git a/package.json b/package.json index 4319833..709f992 100644 --- a/package.json +++ b/package.json @@ -33,8 +33,11 @@ }, "dependencies": { "@vscode/codicons": "^0.0.32", - "@vscode/webview-ui-toolkit": "^1.2.0", "fast-deep-equal": "^3.1.3", + "formik": "^2.4.5", + "memoize-one": "^6.0.0", + "primeflex": "^3.3.1", + "primereact": "^10.3.1", "react": "^18.2.0", "react-dom": "^18.2.0", "vscode-messenger": "^0.4.3", @@ -50,7 +53,9 @@ "@typescript-eslint/eslint-plugin": "^5.45.0", "@typescript-eslint/eslint-plugin-tslint": "^5.45.0", "@typescript-eslint/parser": "^5.45.0", + "@vscode/debugprotocol": "^1.55.0", "@vscode/vsce": "^2.15.0", + "css-loader": "^6.9.0", "eslint": "^8.29.0", "eslint-plugin-deprecation": "^1.3.3", "eslint-plugin-import": "^2.26.0", @@ -58,10 +63,10 @@ "eslint-plugin-no-unsanitized": "^4.0.2", "eslint-plugin-react": "^7.31.11", "serve": "^14.1.2", + "style-loader": "^3.3.4", "ts-loader": "^9.4.2", "tslint": "^6.1.3", "typescript": "^4.9.3", - "@vscode/debugprotocol": "^1.55.0", "webpack": "^5.75.0", "webpack-cli": "^5.0.0" }, diff --git a/src/plugin/memory-webview-main.ts b/src/plugin/memory-webview-main.ts index c8c6420..bde999e 100644 --- a/src/plugin/memory-webview-main.ts +++ b/src/plugin/memory-webview-main.ts @@ -90,7 +90,7 @@ export class MemoryWebview implements vscode.CustomReadonlyEditorProvider { public openCustomDocument(uri: vscode.Uri): vscode.CustomDocument { return { uri, - dispose: () => {} + dispose: () => { } }; } @@ -154,7 +154,7 @@ export class MemoryWebview implements vscode.CustomReadonlyEditorProvider { const cspSrc = panel.webview.cspSource; const codiconsUri = panel.webview.asWebviewUri(vscode.Uri.joinPath(this.extensionUri, 'node_modules', '@vscode/codicons', 'dist', 'codicon.css')); - const memoryInspectorCSS = panel.webview.asWebviewUri(vscode.Uri.joinPath(this.extensionUri, 'media', 'memory-inspector.css')); + const memoryInspectorCSS = panel.webview.asWebviewUri(vscode.Uri.joinPath(this.extensionUri, 'media', 'index.css')); panel.webview.html = ` @@ -181,6 +181,9 @@ export class MemoryWebview implements vscode.CustomReadonlyEditorProvider { this.messenger.onNotification(readyType, () => { this.refresh(participant, options); }, { sender: participant }), + this.messenger.onRequest(setOptionsType, o => { + options = { ...options, ...o }; + }, { sender: participant }), this.messenger.onRequest(logMessageType, message => outputChannelLogger.info('[webview]:', message), { sender: participant }), this.messenger.onRequest(readMemoryType, request => this.readMemory(request), { sender: participant }), this.messenger.onRequest(writeMemoryType, request => this.writeMemory(request), { sender: participant }), diff --git a/src/webview/columns/address-column.ts b/src/webview/columns/address-column.ts index 6a2402d..2324216 100644 --- a/src/webview/columns/address-column.ts +++ b/src/webview/columns/address-column.ts @@ -19,8 +19,10 @@ import { BigIntMemoryRange, toHexStringWithRadixMarker } from '../../common/memo import { ColumnContribution } from './column-contribution-service'; export class AddressColumn implements ColumnContribution { + static ID = 'address'; + + readonly id = AddressColumn.ID; readonly label = 'Address'; - readonly id = 'address'; readonly priority = 0; render(range: BigIntMemoryRange): ReactNode { diff --git a/src/webview/components/memory-table.tsx b/src/webview/components/memory-table.tsx index 1bb587a..167d89f 100644 --- a/src/webview/components/memory-table.tsx +++ b/src/webview/components/memory-table.tsx @@ -14,16 +14,17 @@ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 ********************************************************************************/ +import { DebugProtocol } from '@vscode/debugprotocol'; +import memoize from 'memoize-one'; +import { Column } from 'primereact/column'; +import { DataTable, DataTableCellSelection, DataTableProps, DataTableRowData, DataTableSelectionCellChangeEvent } from 'primereact/datatable'; +import { ProgressSpinner } from 'primereact/progressspinner'; import React from 'react'; -import { - VSCodeDataGrid, - VSCodeDataGridRow, - VSCodeDataGridCell -} from '@vscode/webview-ui-toolkit/react'; -import { Decoration, Memory, MemoryDisplayConfiguration, ScrollingBehavior, StylableNodeAttributes, isTrigger } from '../utils/view-types'; -import { toHexStringWithRadixMarker } from '../../common/memory-range'; import { TableRenderOptions } from '../columns/column-contribution-service'; -import { DebugProtocol } from '@vscode/debugprotocol'; +import { Decoration, Memory, MemoryDisplayConfiguration, ScrollingBehavior, isTrigger } from '../utils/view-types'; +import isDeepEqual from 'fast-deep-equal'; +import { AddressColumn } from '../columns/address-column'; +import { classNames } from 'primereact/utils'; export interface MoreMemorySelectProps { count: number; @@ -98,103 +99,239 @@ interface MemoryTableProps extends TableRenderOptions, MemoryDisplayConfiguratio offset: number; count: number; fetchMemory(partialOptions?: Partial): Promise; + isMemoryFetching: boolean; } -export class MemoryTable extends React.Component { +interface MemoryRowListOptions { + numRows: number; + wordsPerRow: number; + bigWordsPerRow: bigint; +} + +interface MemoryRowData { + rowIndex: number; + startAddress: bigint; + endAddress: bigint; +} + +interface MemoryTableState { + selection: DataTableCellSelection | null; +} + +type MemorySizeOptions = Pick; +namespace MemorySizeOptions { + export function create(props: MemoryTableProps): MemorySizeOptions { + const { groupsPerRow, wordSize, wordsPerGroup }: MemorySizeOptions = props; + return { + wordSize, + groupsPerRow, + wordsPerGroup + }; + } +} + +export class MemoryTable extends React.PureComponent { + + protected datatableRef = React.createRef>(); + + protected get isShowMoreEnabled(): boolean { + return !!this.props.memory?.bytes.length; + } + + constructor(props: MemoryTableProps) { + super(props); + + this.initState(); + } + + protected initState(): void { + this.state = { + // eslint-disable-next-line no-null/no-null + selection: null, + }; + } + + componentDidUpdate(prevProps: Readonly): void { + const hasMemoryChanged = prevProps.memory?.address !== this.props.memory?.address || prevProps.offset !== this.props.offset || prevProps.count !== this.props.count; + const hasOptionsChanged = prevProps.wordsPerGroup !== this.props.wordsPerGroup || prevProps.groupsPerRow !== this.props.groupsPerRow; + + // Reset selection + const selection = this.state.selection; + if (selection && (hasMemoryChanged || hasOptionsChanged)) { + // eslint-disable-next-line no-null/no-null + this.setState(prev => ({ ...prev, selection: null })); + } + } + public render(): React.ReactNode { - const rows = this.getTableRows(); - const { offset, count, memory, fetchMemory, scrollingBehavior } = this.props; - const showMoreMemoryButton = !!memory?.bytes.length; + const memory = this.props.memory; + let rows: MemoryRowData[] = []; + + if (memory) { + const memorySizeOptions = MemorySizeOptions.create(this.props); + const options = this.createMemoryRowListOptions(memory, memorySizeOptions); + rows = this.createTableRows(memory, options); + } + + const props = this.createDataTableProperties(rows); + const remainingWidth = 99; // Available width in percent without the fit columns + const columnWidth = remainingWidth / (this.props.columnOptions.length); + return ( -
- - - {this.props.columnOptions.map(({ contribution }, index) => + + ref={this.datatableRef} + {...props} + > + {this.props.columnOptions.map(({ contribution }) => { + const fit = contribution.id === AddressColumn.ID; + + return + field={contribution.id} + header={contribution.label} + className={classNames({ fit })} + headerClassName={classNames({ fit })} + style={{ width: fit ? undefined : `${columnWidth}%` }} + body={(row?: MemoryRowData) => row && contribution.render(row, this.props.memory!, this.props)}> {contribution.label} - )} - - {showMoreMemoryButton && ()} - {rows} - {showMoreMemoryButton && ()} - -
+ ; + })} + + ); } - protected getTableRows(): React.ReactNode { - if (!this.props.memory) { - return ( - - {this.props.columnOptions.map((column, index) => - column.active - && No Data - )} - - ); - } + protected createDataTableProperties(rows: MemoryRowData[]): DataTableProps { + return { + cellSelection: true, + className: MemoryTable.TABLE_CLASS, + footer: this.renderFooter(), + header: this.renderHeader(), + lazy: true, + metaKeySelection: false, + onSelectionChange: this.onSelectionChanged, + rowClassName: this.rowClass, + resizableColumns: true, + scrollable: true, + scrollHeight: 'flex', + selectionMode: 'single', + selection: this.state.selection, + tableStyle: { minWidth: '30rem' }, + value: rows + }; - return this.renderRows(this.props.memory); } - protected renderRows(memory: Memory): React.ReactNode { - const wordsPerRow = this.props.wordsPerGroup * this.props.groupsPerRow; - const numRows = Math.ceil((memory.bytes.length * 8) / (wordsPerRow * this.props.wordSize)); - const bigWordsPerRow = BigInt(wordsPerRow); - const gridTemplateColumns = new Array(this.props.columnOptions.length).fill('1fr').join(' '); - const rows = []; - let startAddress = memory.address; - for (let i = 0; i < numRows; i++) { - rows.push(this.renderRow(startAddress, startAddress + bigWordsPerRow, gridTemplateColumns, i % 4 === 3)); - startAddress += bigWordsPerRow; + protected onSelectionChanged = (event: DataTableSelectionCellChangeEvent) => { + this.setState(prev => ({ ...prev, selection: event.value })); + }; + + protected renderHeader(): React.ReactNode | undefined { + const { offset, count, fetchMemory, scrollingBehavior } = this.props; + + let memorySelect: React.ReactNode | undefined; + let loading: React.ReactNode | undefined; + + if (this.isShowMoreEnabled) { + memorySelect =
+ +
; } - return rows; + + if (this.props.isMemoryFetching) { + loading =
+ + Loading +
; + } + + return ( +
+ {memorySelect} + {loading} +
+ ); } - protected renderRow(startAddress: bigint, endAddress: bigint, columnStyle: string, divider?: boolean): React.ReactNode { - const addressString = toHexStringWithRadixMarker(startAddress); - const range = { startAddress, endAddress }; - const { title, style, className } = this.getRowAttributes(divider); + protected renderFooter(): React.ReactNode | undefined { + const { offset, count, fetchMemory, scrollingBehavior } = this.props; + + let memorySelect: React.ReactNode | undefined; + + if (this.isShowMoreEnabled) { + memorySelect =
+ +
; + } + return ( - - {this.props.columnOptions.map((column, index) => ( - - {column.contribution.render(range, this.props.memory!, this.props)} - - ))} - +
+ {memorySelect} +
); } - protected getRowAttributes(divider?: boolean): Partial { - const className = 'row'; - if (divider) { - return { style: { borderBottom: '2px solid var(--vscode-editor-lineHighlightBorder)' }, className }; + protected rowClass = (data?: DataTableRowData) => { + const css: string[] = []; + + if (data !== undefined && this.isGroupSeparatorRow(data)) { + css.push(MemoryTable.GROUP_SEPARATOR); + } + + return css; + }; + + protected isGroupSeparatorRow(row: MemoryRowData): boolean { + return row.rowIndex % 4 === 3; + } + + protected createTableRows = memoize((memory: Memory, options: MemoryRowListOptions): MemoryRowData[] => { + const rows: MemoryRowData[] = []; + for (let i = 0; i < options.numRows; i++) { + const startAddress = memory.address + options.bigWordsPerRow * BigInt(i); + rows.push(this.createMemoryRow(i, startAddress, options)); } - return { className }; + + return rows; + }, isDeepEqual); + + protected createMemoryRowListOptions(memory: Memory, options: MemorySizeOptions): MemoryRowListOptions { + const wordsPerRow = options.wordsPerGroup * options.groupsPerRow; + const numRows = Math.ceil((memory.bytes.length * 8) / (wordsPerRow * options.wordSize)); + const bigWordsPerRow = BigInt(wordsPerRow); + + return { + numRows, + wordsPerRow, + bigWordsPerRow + }; + }; + + protected createMemoryRow(rowIndex: number, startAddress: bigint, memoryTableOptions: MemoryRowListOptions): MemoryRowData { + return { + rowIndex, + startAddress, + endAddress: startAddress + memoryTableOptions.bigWordsPerRow + }; } } + +export namespace MemoryTable { + export const TABLE_CLASS = 'memory-inspector-table'; + export const GROUP_SEPARATOR = 'group-separator'; +} diff --git a/src/webview/components/memory-widget.tsx b/src/webview/components/memory-widget.tsx index 2e68a16..afe19e3 100644 --- a/src/webview/components/memory-widget.tsx +++ b/src/webview/components/memory-widget.tsx @@ -30,6 +30,7 @@ interface MemoryWidgetProps { memoryReference: string; offset: number; count: number; + isMemoryFetching: boolean; refreshMemory: () => void; updateMemoryArguments: (memoryArguments: Partial) => void; toggleColumn(id: string, active: boolean): void; @@ -60,7 +61,7 @@ export class MemoryWidget extends React.Component + return (
- ; +
); } protected updateRenderOptions = (newState: Partial) => this.setState(prevState => ({ ...prevState, ...newState })); diff --git a/src/webview/components/multi-select.tsx b/src/webview/components/multi-select.tsx index 8e583b6..579d7b9 100644 --- a/src/webview/components/multi-select.tsx +++ b/src/webview/components/multi-select.tsx @@ -14,7 +14,7 @@ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 ********************************************************************************/ -import { VSCodeCheckbox } from '@vscode/webview-ui-toolkit/react'; +import { Checkbox, CheckboxChangeEvent } from 'primereact/checkbox'; import * as React from 'react'; export interface SingleSelectItemProps { @@ -31,31 +31,33 @@ interface MultiSelectProps { } const MultiSelectBar: React.FC = ({ items, onSelectionChanged, id }) => { - const changeHandler: ((e: Event) => unknown) & React.FormEventHandler = React.useCallback(e => { + const changeHandler: ((e: CheckboxChangeEvent) => unknown) = React.useCallback(e => { const target = e.target as HTMLInputElement; if (target) { onSelectionChanged(target.id, target.checked); } }, [onSelectionChanged]); + return ( -
+
{items.map(({ label, id: itemId, checked }) => ( - {label} - +
+ + +
))}
); }; export const MultiSelectWithLabel: React.FC = ({ id, label, items, onSelectionChanged }) => ( -
- +
+
); diff --git a/src/webview/components/options-widget.tsx b/src/webview/components/options-widget.tsx index 650cce1..9783b13 100644 --- a/src/webview/components/options-widget.tsx +++ b/src/webview/components/options-widget.tsx @@ -14,19 +14,31 @@ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0 ********************************************************************************/ -import React from 'react'; import type { DebugProtocol } from '@vscode/debugprotocol'; -import { MemoryDisplayConfigurationChangeRequest, SerializedTableRenderOptions } from '../utils/view-types'; -import { VSCodeButton, VSCodeDivider, VSCodeDropdown, VSCodeOption, VSCodeTextField } from '@vscode/webview-ui-toolkit/react'; -import { messenger } from '../view-messenger'; -import { setMemoryDisplayConfigurationType } from '../../common/messaging'; +import { Formik, FormikConfig, FormikErrors, FormikProps } from 'formik'; +import { Button } from 'primereact/button'; +import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown'; +import { InputText } from 'primereact/inputtext'; +import { OverlayPanel } from 'primereact/overlaypanel'; +import React, { KeyboardEvent } from 'react'; import { HOST_EXTENSION } from 'vscode-messenger-common'; +import { setMemoryDisplayConfigurationType } from '../../common/messaging'; import { TableRenderOptions } from '../columns/column-contribution-service'; +import { + MemoryDisplayConfigurationChangeRequest, + SerializedTableRenderOptions, +} from '../utils/view-types'; +import { messenger } from '../view-messenger'; import { MultiSelectWithLabel } from './multi-select'; +import { classNames } from 'primereact/utils'; -export interface OptionsWidgetProps extends Omit, Required { +export interface OptionsWidgetProps + extends Omit, + Required { updateRenderOptions: (options: Partial) => void; - updateMemoryArguments: (memoryArguments: Partial) => void; + updateMemoryArguments: ( + memoryArguments: Partial + ) => void; refreshMemory: () => void; toggleColumn(id: string, active: boolean): void; } @@ -39,78 +51,279 @@ const enum InputId { GroupsPerRow = 'groups-per-row', } +interface OptionsForm { + address: string; + offset: string; + count: string; +} + +const allowedBytesPerGroup = [1, 2, 4, 8, 16]; +const allowedGroupsPerRow = [1, 2, 4, 8, 16, 32]; + export class OptionsWidget extends React.Component { + protected formConfig: FormikConfig; + protected extendedOptions = React.createRef(); + + protected get optionsFormValues(): OptionsForm { + return { + address: this.props.memoryReference, + offset: this.props.offset.toString(), + count: this.props.count.toString(), + }; + } + constructor(props: OptionsWidgetProps) { super(props); + + this.formConfig = { + initialValues: this.optionsFormValues, + enableReinitialize: true, + validate: this.validate, + onSubmit: () => { + this.props.refreshMemory(); + }, + }; } + protected validate = (values: OptionsForm) => { + const errors: FormikErrors = {}; + + if (values.address.trim().length === 0) { + errors.address = 'Required'; + } else { + const address = +values.address; + if (!isNaN(address) && address < 0) { + errors.address = 'Value needs to be >= 0'; + } + } + + if (values.offset.trim().length === 0) { + errors.offset = 'Required'; + } else { + const offset = +values.offset; + if (isNaN(offset)) { + errors.offset = 'No number provided'; + } + } + + if (values.count.trim().length === 0) { + errors.count = 'Required'; + } else { + const count = +values.count; + if (isNaN(count)) { + errors.count = 'No number provided'; + } else if (count <= 0) { + errors.count = 'Value needs to be > 0'; + } + } + + return errors; + }; + override render(): React.ReactNode { + this.formConfig.initialValues = this.optionsFormValues; - return
-
-
-
-
- - Address - - Offset - Length - Go - -
-
- {!!this.props.columnOptions.length && configurable) - .map(column => ({ id: column.contribution.id, label: column.contribution.label, checked: column.active }))} - onSelectionChanged={this.props.toggleColumn} - />} - - - 1 - 2 - 4 - 8 - 16 - - - - 1 - 2 - 4 - 8 - 16 - 32 - -
-
+ return ( +
+
+ + {formik => ( +
+ + + this.doHandleBlur(ev, formik)} + /> + {formik.errors.address ? + ( + {formik.errors.address} + ) + : undefined} + + + + this.doHandleBlur(ev, formik)} + /> + {formik.errors.offset ? + ( + {formik.errors.offset} + ) + : undefined} + + + + this.doHandleBlur(ev, formik)} + /> + {formik.errors.count ? + ( + {formik.errors.count} + ) + : undefined} + + +
+ )} +
+ + +
+ {!!this.props.columnOptions.length && ( + configurable) + .map(column => ({ + id: column.contribution.id, + label: column.contribution.label, + checked: column.active, + }))} + onSelectionChanged={this.props.toggleColumn} + /> + )} + + + + +
+
+
- -
; + ); + } + + protected doHandleBlur( + ev: React.FocusEvent, + formik: FormikProps + ): void { + formik.handleBlur(ev); + const id = ev.currentTarget.id as InputId; + const value = ev.currentTarget.value; + + this.updateOptions(id, value); + } + + protected handleKeyDown: (event: KeyboardEvent) => void = e => this.doHandleKeyDown(e); + protected doHandleKeyDown(event: KeyboardEvent): void { + if (event.code === 'Enter') { + const id = event.currentTarget.id as InputId; + const value = event.currentTarget.value; + + this.updateOptions(id, value); + } + } + + protected updateOptions(id: InputId, value: string): void { + switch (id) { + case InputId.Address: + this.props.updateMemoryArguments({ + memoryReference: value, + }); + break; + case InputId.Offset: + if (!Number.isNaN(value)) { + this.props.updateMemoryArguments({ + offset: Number(value), + }); + } + break; + case InputId.Length: + if (!Number.isNaN(value)) { + this.props.updateMemoryArguments({ + count: Number(value), + }); + } + break; + default: { + throw new Error(`${id} can not be handled. Did you call the correct method?`); + } + } } - /* eslint-disable @typescript-eslint/no-explicit-any */ // The types from the VSCode components are hard to reconcile with plain React types. - protected handleInputChange: React.FormEventHandler & ((event: Event) => unknown) = e => this.doHandleChangeEvent(e as any); + protected handleAdvancedOptionsDropdownChange: (event: DropdownChangeEvent) => void = e => this.doHandleAdvancedOptionsDropdownChange(e); + protected doHandleAdvancedOptionsDropdownChange(event: DropdownChangeEvent): void { + const id = event.target.id as InputId; + const value = event.target.value; - protected doHandleChangeEvent(event: React.FormEvent): unknown { - const id = event.currentTarget.id as InputId; switch (id) { - case InputId.Address: return this.props.updateMemoryArguments({ memoryReference: event.currentTarget.value }); - case InputId.Offset: return !Number.isNaN(event.currentTarget.value) && this.props.updateMemoryArguments({ offset: Number(event.currentTarget.value) }); - case InputId.Length: return !Number.isNaN(event.currentTarget.value) && this.props.updateMemoryArguments({ count: Number(event.currentTarget.value) }); - case InputId.WordsPerGroup: return this.updateConfiguration({ id: 'groupings.wordsPerGroup', value: Number(event.currentTarget.value) }); - case InputId.GroupsPerRow: return this.updateConfiguration({ id: 'groupings.groupsPerRow', value: Number(event.currentTarget.value) }); + case InputId.WordsPerGroup: + this.updateConfiguration({ + id: 'groupings.wordsPerGroup', + value: Number(value), + }); + break; + case InputId.GroupsPerRow: + this.updateConfiguration({ + id: 'groupings.groupsPerRow', + value: Number(value), + }); + break; + default: { + throw new Error(`${id} can not be handled. Did you call the correct method?`); + } } } - protected updateConfiguration(viewConfigurationChangeRequest: MemoryDisplayConfigurationChangeRequest): void { - return messenger.sendNotification(setMemoryDisplayConfigurationType, HOST_EXTENSION, viewConfigurationChangeRequest); + protected updateConfiguration( + viewConfigurationChangeRequest: MemoryDisplayConfigurationChangeRequest + ): void { + return messenger.sendNotification( + setMemoryDisplayConfigurationType, + HOST_EXTENSION, + viewConfigurationChangeRequest + ); } } diff --git a/src/webview/memory-webview-view.tsx b/src/webview/memory-webview-view.tsx index 4485407..005f487 100644 --- a/src/webview/memory-webview-view.tsx +++ b/src/webview/memory-webview-view.tsx @@ -34,6 +34,8 @@ import { variableDecorator } from './variables/variable-decorations'; import { AsciiColumn } from './columns/ascii-column'; import { AddressColumn } from './columns/address-column'; import { DataColumn } from './columns/data-column'; +import { PrimeReactProvider } from 'primereact/api'; +import 'primeflex/primeflex.css'; export interface MemoryAppState extends MemoryState { decorations: Decoration[]; @@ -59,6 +61,7 @@ class App extends React.Component<{}, MemoryAppState> { count: 256, decorations: [], columns: columnContributionService.getColumns(), + isMemoryFetching: false }; } @@ -69,18 +72,21 @@ class App extends React.Component<{}, MemoryAppState> { } public render(): React.ReactNode { - return ; + return + + ; } protected async handleColumnVisibilityChanged(request: ColumnVisibilityStatus): Promise { @@ -101,23 +107,34 @@ class App extends React.Component<{}, MemoryAppState> { protected fetchMemory = async (partialOptions?: Partial): Promise => this.doFetchMemory(partialOptions); protected async doFetchMemory(partialOptions?: Partial): Promise { + this.setState(prev => ({ ...prev, isMemoryFetching: true })); const completeOptions = { memoryReference: partialOptions?.memoryReference || this.state.memoryReference, offset: partialOptions?.offset ?? this.state.offset, count: partialOptions?.count ?? this.state.count }; - const response = await messenger.sendRequest(readMemoryType, HOST_EXTENSION, completeOptions); - await Promise.all(Array.from( - new Set(columnContributionService.getUpdateExecutors().concat(decorationService.getUpdateExecutors())), - executor => executor.fetchData(completeOptions) - )); - this.setState({ - decorations: decorationService.decorations, - memory: this.convertMemory(response), - offset: completeOptions.offset, - count: completeOptions.count, - }); + try { + const response = await messenger.sendRequest(readMemoryType, HOST_EXTENSION, completeOptions); + await Promise.all(Array.from( + new Set(columnContributionService.getUpdateExecutors().concat(decorationService.getUpdateExecutors())), + executor => executor.fetchData(completeOptions) + )); + + this.setState({ + decorations: decorationService.decorations, + memory: this.convertMemory(response), + memoryReference: completeOptions.memoryReference, + offset: completeOptions.offset, + count: completeOptions.count, + isMemoryFetching: false + }); + + messenger.sendRequest(setOptionsType, HOST_EXTENSION, completeOptions); + } finally { + this.setState(prev => ({ ...prev, isMemoryFetching: false })); + } + } protected convertMemory(result: DebugProtocol.ReadMemoryResponse['body']): Memory { diff --git a/src/webview/utils/view-types.ts b/src/webview/utils/view-types.ts index 6e9075e..b9d445c 100644 --- a/src/webview/utils/view-types.ts +++ b/src/webview/utils/view-types.ts @@ -55,6 +55,7 @@ export function areDecorationsEqual(one: Decoration, other: Decoration): boolean export interface MemoryState extends DebugProtocol.ReadMemoryArguments { memory?: Memory; + isMemoryFetching: boolean; } export interface UpdateExecutor { diff --git a/webpack.config.js b/webpack.config.js index 41d3666..f9dd75f 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -21,7 +21,14 @@ const common = { resolve: { fullySpecified: false } - } + }, + { + test: /\.css$/i, + use: [ + "style-loader", + "css-loader", + ], + }, ] }, externals: { diff --git a/yarn.lock b/yarn.lock index 095cfb0..5bcc82b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -23,6 +23,13 @@ chalk "^2.0.0" js-tokens "^4.0.0" +"@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7": + version "7.23.8" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.8.tgz#8ee6fe1ac47add7122902f257b8ddf55c898f650" + integrity sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw== + dependencies: + regenerator-runtime "^0.14.0" + "@discoveryjs/json-ext@^0.5.0": version "0.5.7" resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70" @@ -102,36 +109,6 @@ "@jridgewell/resolve-uri" "3.1.0" "@jridgewell/sourcemap-codec" "1.4.14" -"@microsoft/fast-element@^1.11.0", "@microsoft/fast-element@^1.6.2", "@microsoft/fast-element@^1.9.0": - version "1.11.0" - resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-1.11.0.tgz#494f6c87057bcbb42406982d68a92887d6b5acb1" - integrity sha512-VKJYMkS5zgzHHb66sY7AFpYv6IfFhXrjQcAyNgi2ivD65My1XOhtjfKez5ELcLFRJfgZNAxvI8kE69apXERTkw== - -"@microsoft/fast-foundation@^2.38.0", "@microsoft/fast-foundation@^2.41.1": - version "2.47.0" - resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-2.47.0.tgz#a4cc8c5277e21d080215f5adcaed4266a8dd8a8e" - integrity sha512-EyFuioaZQ9ngjUNRQi8R3dIPPsaNQdUOS+tP0G7b1MJRhXmQWIitBM6IeveQA6ZvXG6H21dqgrfEWlsYrUZ2sw== - dependencies: - "@microsoft/fast-element" "^1.11.0" - "@microsoft/fast-web-utilities" "^5.4.1" - tabbable "^5.2.0" - tslib "^1.13.0" - -"@microsoft/fast-react-wrapper@^0.1.18": - version "0.1.48" - resolved "https://registry.yarnpkg.com/@microsoft/fast-react-wrapper/-/fast-react-wrapper-0.1.48.tgz#aa89c0dfb703c2f71619c536de2342e28b40b8c9" - integrity sha512-9NvEjru9Kn5ZKjomAMX6v+eF0DR+eDkxKDwDfi+Wb73kTbrNzcnmlwd4diN15ygH97kldgj2+lpvI4CKLQQWLg== - dependencies: - "@microsoft/fast-element" "^1.9.0" - "@microsoft/fast-foundation" "^2.41.1" - -"@microsoft/fast-web-utilities@^5.4.1": - version "5.4.1" - resolved "https://registry.yarnpkg.com/@microsoft/fast-web-utilities/-/fast-web-utilities-5.4.1.tgz#8e3082ee2ff2b5467f17e7cb1fb01b0e4906b71f" - integrity sha512-ReWYncndjV3c8D8iq9tp7NcFNc1vbVHvcBFPME2nNFKNbS1XCesYZGlIlf3ot5EmuOXPlrzUHOWzQ2vFpIkqDg== - dependencies: - exenv-es6 "^1.1.1" - "@nodelib/fs.scandir@2.1.5": version "2.1.5" resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5" @@ -179,6 +156,14 @@ resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.51.tgz#cfd70924a25a3fd32b218e5e420e6897e1ac4f40" integrity sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ== +"@types/hoist-non-react-statics@^3.3.1": + version "3.3.5" + resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz#dab7867ef789d87e2b4b0003c9d65c49cc44a494" + integrity sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg== + dependencies: + "@types/react" "*" + hoist-non-react-statics "^3.3.0" + "@types/json-schema@*", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9": version "7.0.11" resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3" @@ -211,6 +196,13 @@ dependencies: "@types/react" "*" +"@types/react-transition-group@^4.4.1": + version "4.4.10" + resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.10.tgz#6ee71127bdab1f18f11ad8fb3322c6da27c327ac" + integrity sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q== + dependencies: + "@types/react" "*" + "@types/react@*", "@types/react@^18.0.26": version "18.0.26" resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.26.tgz#8ad59fc01fef8eaf5c74f4ea392621749f0b7917" @@ -374,15 +366,6 @@ yauzl "^2.3.1" yazl "^2.2.2" -"@vscode/webview-ui-toolkit@^1.2.0": - version "1.2.0" - resolved "https://registry.yarnpkg.com/@vscode/webview-ui-toolkit/-/webview-ui-toolkit-1.2.0.tgz#1da6f7842afe619932b210032a1cb244cceb1740" - integrity sha512-3ai3B2iFK0myqSnEgK9JZd1nKJIR1zgOlQbwSqHS9Y15cyO0diyjsKzcDFCnuBI1UG4vmekWp+xWSTbrh36kLw== - dependencies: - "@microsoft/fast-element" "^1.6.2" - "@microsoft/fast-foundation" "^2.38.0" - "@microsoft/fast-react-wrapper" "^0.1.18" - "@webassemblyjs/ast@1.11.1": version "1.11.1" resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.1.tgz#2bfd767eae1a6996f432ff7e8d7fc75679c0b6a7" @@ -984,6 +967,20 @@ cross-spawn@^7.0.2, cross-spawn@^7.0.3: shebang-command "^2.0.0" which "^2.0.1" +css-loader@^6.9.0: + version "6.9.0" + resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.9.0.tgz#0cc2f14df94ed97c526c5ae42b6b13916d1d8d0e" + integrity sha512-3I5Nu4ytWlHvOP6zItjiHlefBNtrH+oehq8tnQa2kO305qpVyx9XNIT1CXIj5bgCJs7qICBCkgCYxQLKPANoLA== + dependencies: + icss-utils "^5.1.0" + postcss "^8.4.31" + postcss-modules-extract-imports "^3.0.0" + postcss-modules-local-by-default "^4.0.3" + postcss-modules-scope "^3.1.0" + postcss-modules-values "^4.0.0" + postcss-value-parser "^4.2.0" + semver "^7.5.4" + css-select@^5.1.0: version "5.1.0" resolved "https://registry.yarnpkg.com/css-select/-/css-select-5.1.0.tgz#b8ebd6554c3637ccc76688804ad3f6a6fdaea8a6" @@ -1000,6 +997,11 @@ css-what@^6.1.0: resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4" integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw== +cssesc@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee" + integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg== + csstype@^3.0.2: version "3.1.1" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9" @@ -1043,6 +1045,11 @@ deep-is@^0.1.3: resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831" integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ== +deepmerge@^2.1.1: + version "2.2.1" + resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170" + integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA== + define-properties@^1.1.3, define-properties@^1.1.4: version "1.1.4" resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.4.tgz#0b14d7bd7fbeb2f3572c3a7eda80ea5d57fb05b1" @@ -1082,6 +1089,14 @@ doctrine@^3.0.0: dependencies: esutils "^2.0.2" +dom-helpers@^5.0.1: + version "5.2.1" + resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902" + integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA== + dependencies: + "@babel/runtime" "^7.8.7" + csstype "^3.0.2" + dom-serializer@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53" @@ -1443,11 +1458,6 @@ execa@^5.1.1: signal-exit "^3.0.3" strip-final-newline "^2.0.0" -exenv-es6@^1.1.1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/exenv-es6/-/exenv-es6-1.1.1.tgz#80b7a8c5af24d53331f755bac07e84abb1f6de67" - integrity sha512-vlVu3N8d6yEMpMsEm+7sUBAI81aqYYuEvfK0jNqmdb/OPXzzH7QWDDnVjMvDSY47JdHEqx/dfC/q8WkfoTmpGQ== - expand-template@^2.0.3: version "2.0.3" resolved "https://registry.yarnpkg.com/expand-template/-/expand-template-2.0.3.tgz#6e14b3fcee0f3a6340ecb57d2e8918692052a47c" @@ -1548,6 +1558,20 @@ flatted@^3.1.0: resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787" integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ== +formik@^2.4.5: + version "2.4.5" + resolved "https://registry.yarnpkg.com/formik/-/formik-2.4.5.tgz#f899b5b7a6f103a8fabb679823e8fafc7e0ee1b4" + integrity sha512-Gxlht0TD3vVdzMDHwkiNZqJ7Mvg77xQNfmBRrNtvzcHZs72TJppSTDKHpImCMJZwcWPBJ8jSQQ95GJzXFf1nAQ== + dependencies: + "@types/hoist-non-react-statics" "^3.3.1" + deepmerge "^2.1.1" + hoist-non-react-statics "^3.3.0" + lodash "^4.17.21" + lodash-es "^4.17.21" + react-fast-compare "^2.0.1" + tiny-warning "^1.0.2" + tslib "^2.0.0" + fs-constants@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad" @@ -1706,6 +1730,13 @@ has@^1.0.3: dependencies: function-bind "^1.1.1" +hoist-non-react-statics@^3.3.0: + version "3.3.2" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" + integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== + dependencies: + react-is "^16.7.0" + hosted-git-info@^4.0.2: version "4.1.0" resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-4.1.0.tgz#827b82867e9ff1c8d0c4d9d53880397d2c86d224" @@ -1728,6 +1759,11 @@ human-signals@^2.1.0: resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0" integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw== +icss-utils@^5.0.0, icss-utils@^5.1.0: + version "5.1.0" + resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae" + integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA== + ieee754@^1.1.13: version "1.2.1" resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352" @@ -2060,6 +2096,11 @@ locate-path@^6.0.0: dependencies: p-locate "^5.0.0" +lodash-es@^4.17.21: + version "4.17.21" + resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee" + integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw== + lodash.merge@^4.6.2: version "4.6.2" resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a" @@ -2100,6 +2141,11 @@ mdurl@^1.0.1: resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e" integrity sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g== +memoize-one@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045" + integrity sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw== + merge-stream@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60" @@ -2201,6 +2247,11 @@ mute-stream@~0.0.4: resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d" integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA== +nanoid@^3.3.7: + version "3.3.7" + resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8" + integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g== + napi-build-utils@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/napi-build-utils/-/napi-build-utils-1.0.2.tgz#b1fddc0b2c46e380a0b7a76f984dd47c41a13806" @@ -2467,6 +2518,56 @@ pkg-dir@^4.2.0: dependencies: find-up "^4.0.0" +postcss-modules-extract-imports@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz#cda1f047c0ae80c97dbe28c3e76a43b88025741d" + integrity sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw== + +postcss-modules-local-by-default@^4.0.3: + version "4.0.4" + resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.4.tgz#7cbed92abd312b94aaea85b68226d3dec39a14e6" + integrity sha512-L4QzMnOdVwRm1Qb8m4x8jsZzKAaPAgrUF1r/hjDR2Xj7R+8Zsf97jAlSQzWtKx5YNiNGN8QxmPFIc/sh+RQl+Q== + dependencies: + icss-utils "^5.0.0" + postcss-selector-parser "^6.0.2" + postcss-value-parser "^4.1.0" + +postcss-modules-scope@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-3.1.0.tgz#fbfddfda93a31f310f1d152c2bb4d3f3c5592ee0" + integrity sha512-SaIbK8XW+MZbd0xHPf7kdfA/3eOt7vxJ72IRecn3EzuZVLr1r0orzf0MX/pN8m+NMDoo6X/SQd8oeKqGZd8PXg== + dependencies: + postcss-selector-parser "^6.0.4" + +postcss-modules-values@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz#d7c5e7e68c3bb3c9b27cbf48ca0bb3ffb4602c9c" + integrity sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ== + dependencies: + icss-utils "^5.0.0" + +postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4: + version "6.0.15" + resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.15.tgz#11cc2b21eebc0b99ea374ffb9887174855a01535" + integrity sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw== + dependencies: + cssesc "^3.0.0" + util-deprecate "^1.0.2" + +postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" + integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== + +postcss@^8.4.31: + version "8.4.33" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.33.tgz#1378e859c9f69bf6f638b990a0212f43e2aaa742" + integrity sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg== + dependencies: + nanoid "^3.3.7" + picocolors "^1.0.0" + source-map-js "^1.0.2" + prebuild-install@^7.0.1: version "7.1.1" resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-7.1.1.tgz#de97d5b34a70a0c81334fd24641f2a1702352e45" @@ -2490,7 +2591,20 @@ prelude-ls@^1.2.1: resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g== -prop-types@^15.8.1: +primeflex@^3.3.1: + version "3.3.1" + resolved "https://registry.yarnpkg.com/primeflex/-/primeflex-3.3.1.tgz#361dddf6eb5db50d733e4cddd4b6e376a3d7bd68" + integrity sha512-zaOq3YvcOYytbAmKv3zYc+0VNS9Wg5d37dfxZnveKBFPr7vEIwfV5ydrpiouTft8MVW6qNjfkaQphHSnvgQbpQ== + +primereact@^10.3.1: + version "10.3.1" + resolved "https://registry.yarnpkg.com/primereact/-/primereact-10.3.1.tgz#e8910c37b24f2bca386a70d9c741f0542bb9760d" + integrity sha512-poBFT6MKMpcOjYzw+q/RIH8fpQdavEw8VqFcU2V/ZtxjuCiPD+IZvgLQgvdCnPtZGNWA56C+CmkV7bqJnglOug== + dependencies: + "@types/react-transition-group" "^4.4.1" + react-transition-group "^4.4.1" + +prop-types@^15.6.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -2559,11 +2673,26 @@ react-dom@^18.2.0: loose-envify "^1.1.0" scheduler "^0.23.0" -react-is@^16.13.1: +react-fast-compare@^2.0.1: + version "2.0.4" + resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9" + integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw== + +react-is@^16.13.1, react-is@^16.7.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== +react-transition-group@^4.4.1: + version "4.4.5" + resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1" + integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g== + dependencies: + "@babel/runtime" "^7.5.5" + dom-helpers "^5.0.1" + loose-envify "^1.4.0" + prop-types "^15.6.2" + react@^18.2.0: version "18.2.0" resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" @@ -2594,6 +2723,11 @@ rechoir@^0.8.0: dependencies: resolve "^1.20.0" +regenerator-runtime@^0.14.0: + version "0.14.1" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f" + integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw== + regexp.prototype.flags@^1.4.3: version "1.4.3" resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz#87cab30f80f66660181a3bb7bf5981a872b367ac" @@ -2739,6 +2873,13 @@ semver@^7.3.4, semver@^7.3.5, semver@^7.3.7: dependencies: lru-cache "^6.0.0" +semver@^7.5.4: + version "7.5.4" + resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e" + integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA== + dependencies: + lru-cache "^6.0.0" + serialize-javascript@^6.0.0: version "6.0.0" resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-6.0.0.tgz#efae5d88f45d7924141da8b5c3a7a7e663fefeb8" @@ -2829,6 +2970,11 @@ slash@^3.0.0: resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634" integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q== +source-map-js@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c" + integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw== + source-map-support@~0.5.20: version "0.5.21" resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f" @@ -2938,6 +3084,11 @@ strip-json-comments@~2.0.1: resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a" integrity sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ== +style-loader@^3.3.4: + version "3.3.4" + resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.3.4.tgz#f30f786c36db03a45cbd55b6a70d930c479090e7" + integrity sha512-0WqXzrsMTyb8yjZJHDqwmnwRJvhALK9LfRtRc6B4UTWe8AijYLZYZ9thuJTZc2VfQWINADW/j+LiJnfy2RoC1w== + supports-color@^5.3.0: version "5.5.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" @@ -2964,11 +3115,6 @@ supports-preserve-symlinks-flag@^1.0.0: resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09" integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w== -tabbable@^5.2.0: - version "5.3.3" - resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-5.3.3.tgz#aac0ff88c73b22d6c3c5a50b1586310006b47fbf" - integrity sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA== - tapable@^2.1.1, tapable@^2.2.0: version "2.2.1" resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0" @@ -3021,6 +3167,11 @@ text-table@^0.2.0: resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4" integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw== +tiny-warning@^1.0.2: + version "1.0.3" + resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754" + integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA== + tmp@^0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14" @@ -3060,6 +3211,11 @@ tslib@^1.13.0, tslib@^1.8.1: resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== +tslib@^2.0.0: + version "2.6.2" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae" + integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q== + tslib@^2.3.1: version "2.4.1" resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.1.tgz#0d0bfbaac2880b91e22df0768e55be9753a5b17e" @@ -3189,7 +3345,7 @@ url-join@^4.0.1: resolved "https://registry.yarnpkg.com/url-join/-/url-join-4.0.1.tgz#b642e21a2646808ffa178c4c5fda39844e12cde7" integrity sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA== -util-deprecate@^1.0.1: +util-deprecate@^1.0.1, util-deprecate@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==