Advanced Settings as popover

media/memory-inspector.css

@@ -68,46 +68,16 @@
   margin-bottom: 8px;
 }
 
-.multi-select-bar {
-  display: flex;
-  flex-flow: row nowrap;
-  box-sizing: border-box;
-  user-select: none;
-  -moz-user-select: none;
-  -webkit-user-select: none;
-}
-
-.multi-select-checkbox-wrapper {
+.multi-select {
+  width: 160px;
   display: flex;
-  position: relative;
-  flex: auto;
-  text-align: center;
+  flex-direction: column;
+  text-align: left;
 }
 
-.multi-select-label {
-  height: 100%;
-  flex: auto;
+.multi-select-bar {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid;
-  padding: 0 6;
-  background-color: var(--vscode-editor-background);
-  border-color: var(--vscode-dropdown-border);
-  box-sizing: border-box;
-  text-transform: uppercase;
-}
-
-.multi-select-label.active {
-  background-color: var(--vscode-input-background);
-  border-color: var(--vscode-sideBar-foreground);
-  text-decoration: underline;
-  font-weight: bold;
-}
-
-.multi-select-label.inactive {
-  font-style: italic;
-  opacity: 0.7;
+  flex-direction: column;
 }
 
 .multi-select-checkbox {
@@ -129,34 +99,60 @@
 }
 
 .advanced-options-toggle {
-  cursor: pointer;
+  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;
-  flex-flow: row nowrap;
-  align-items: center;
 }
 
-.advanced-options-toggle i.codicon {
-  padding-right: 3px;
+.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: grid;
-  column-gap: 6px;
-  grid-template-columns: 4fr 4fr 2fr 1fr;
+  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;
 }
-
-.advanced-options {
-  display: grid;
-  column-gap: 6px;
-  row-gap: 3px;
-  grid-template-columns: max-content 1fr;
-  align-items: center;
-  margin: 6px 0;
-}

src/webview/components/multi-select.tsx

@@ -0,0 +1,61 @@
+/********************************************************************************
+ * Copyright (C) 2023 Ericsson 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
+ ********************************************************************************/
+
+import { VSCodeCheckbox } from '@vscode/webview-ui-toolkit/react';
+import * as React from 'react';
+
+export interface SingleSelectItemProps {
+    id: string;
+    label: string;
+    checked: boolean;
+}
+
+interface MultiSelectProps {
+    items: SingleSelectItemProps[];
+    label: string;
+    id?: string;
+    onSelectionChanged: (labelSelected: string, newSelectionState: boolean) => unknown;
+}
+
+const MultiSelectBar: React.FC<MultiSelectProps> = ({ items, onSelectionChanged, id }) => {
+    const changeHandler: ((e: Event) => unknown) & React.FormEventHandler<HTMLInputElement> = React.useCallback(e => {
+        const target = e.target as HTMLInputElement;
+        if (target) {
+            onSelectionChanged(target.id, target.checked);
+        }
+    }, [onSelectionChanged]);
+    return (
+        <div className='multi-select-bar' id={id}>
+            {items.map(({ label, id: itemId, checked }) => (
+                <VSCodeCheckbox
+                    tabIndex={0}
+                    onChange={changeHandler}
+                    defaultChecked={!!checked}
+                    id={itemId}
+                    key={`${label}-${id}-checkbox`}
+                >{label}
+                </VSCodeCheckbox>
+            ))}
+        </div>
+    );
+};
+
+export const MultiSelectWithLabel: React.FC<MultiSelectProps> = ({ id, label, items, onSelectionChanged }) => (
+    <div className='multi-select'>
+        <label className='multi-select-label'>{label}</label>
+        <MultiSelectBar id={id} items={items} onSelectionChanged={onSelectionChanged} label={label} />
+    </div>
+);