From e39481c684fee968c5636b38051a49b365325b73 Mon Sep 17 00:00:00 2001
From: arekzaluski <arkadiusz.zaluski@arm.com>
Date: Thu, 5 Oct 2023 17:52:18 +0200
Subject: [PATCH] Advanced Settings as popover

---
 media/memory-inspector.css                  | 102 ++++++++++----------
 src/webview/components/multi-select-bar.tsx |  85 ----------------
 src/webview/components/multi-select.tsx     |  61 ++++++++++++
 src/webview/components/options-widget.tsx   |  68 ++++++-------
 4 files changed, 139 insertions(+), 177 deletions(-)
 delete mode 100644 src/webview/components/multi-select-bar.tsx
 create mode 100644 src/webview/components/multi-select.tsx

diff --git a/media/memory-inspector.css b/media/memory-inspector.css
index d3cef67..fc9a4dc 100644
--- a/media/memory-inspector.css
+++ b/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;
-}
\ No newline at end of file
diff --git a/src/webview/components/multi-select-bar.tsx b/src/webview/components/multi-select-bar.tsx
deleted file mode 100644
index 8f70280..0000000
--- a/src/webview/components/multi-select-bar.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-/********************************************************************************
- * 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 * as React from 'react';
-
-export interface SingleSelectItemProps {
-    id: string;
-    label: string;
-    checked: boolean;
-}
-
-interface MultiSelectBarProps {
-    items: SingleSelectItemProps[];
-    id?: string;
-    onSelectionChanged: (labelSelected: string, newSelectionState: boolean) => unknown;
-}
-
-export const MultiSelectBar: React.FC<MultiSelectBarProps> = ({ items, onSelectionChanged, id }) => {
-    const changeHandler: React.ChangeEventHandler<HTMLInputElement> = React.useCallback(e => {
-        onSelectionChanged(e.target.id, e.target.checked);
-    }, [onSelectionChanged]);
-
-    return (
-        <div className='multi-select-bar' id={id}>
-            {items.map(({ label, id: itemId, checked }) => (<LabeledCheckbox
-                label={label}
-                onChange={changeHandler}
-                checked={!!checked}
-                id={itemId}
-                key={`${label}-${id}-checkbox`}
-            />))}
-        </div>
-    );
-};
-
-interface LabeledCheckboxProps {
-    label: string;
-    id: string;
-    onChange: React.ChangeEventHandler;
-    checked: boolean;
-}
-
-export interface LabelProps { id: string; label: string; disabled?: boolean; classNames?: string[], style?: React.CSSProperties }
-
-export const Label: React.FC<LabelProps> = ({ id, label, disabled, classNames, style }) => {
-    const additionalClassNames = classNames ? classNames.join(' ') : '';
-    return <label htmlFor={id} className={`${additionalClassNames}${disabled ? ' disabled' : ''}`} style={style}>{label}</label>;
-};
-
-const LabeledCheckbox: React.FC<LabeledCheckboxProps> = ({ checked, label, onChange, id }) => (
-    <div className='multi-select-checkbox-wrapper' >
-        <input
-            tabIndex={0}
-            type='checkbox'
-            id={id}
-            className='multi-select-checkbox'
-            checked={checked}
-            onChange={onChange}
-        />
-        <Label
-            id={id}
-            label={label}
-            classNames={['multi-select-label', checked ? 'active' : 'inactive']} />
-    </div>
-);
-
-export const MultiSelectWithLabel: React.FC<LabelProps & MultiSelectBarProps> = ({ id, label, items, onSelectionChanged }) => (
-    <>
-        <label >{label}</label>
-        <MultiSelectBar id={id} items={items} onSelectionChanged={onSelectionChanged} />
-    </>
-);
diff --git a/src/webview/components/multi-select.tsx b/src/webview/components/multi-select.tsx
new file mode 100644
index 0000000..8e583b6
--- /dev/null
+++ b/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>
+);
diff --git a/src/webview/components/options-widget.tsx b/src/webview/components/options-widget.tsx
index 5ff6497..650cce1 100644
--- a/src/webview/components/options-widget.tsx
+++ b/src/webview/components/options-widget.tsx
@@ -18,11 +18,11 @@ 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 { MultiSelectWithLabel } from './multi-select-bar';
 import { messenger } from '../view-messenger';
 import { setMemoryDisplayConfigurationType } from '../../common/messaging';
 import { HOST_EXTENSION } from 'vscode-messenger-common';
 import { TableRenderOptions } from '../columns/column-contribution-service';
+import { MultiSelectWithLabel } from './multi-select';
 
 export interface OptionsWidgetProps extends Omit<TableRenderOptions, 'scrollingBehavior'>, Required<DebugProtocol.ReadMemoryArguments> {
     updateRenderOptions: (options: Partial<SerializedTableRenderOptions>) => void;
@@ -31,10 +31,6 @@ export interface OptionsWidgetProps extends Omit<TableRenderOptions, 'scrollingB
     toggleColumn(id: string, active: boolean): void;
 }
 
-interface OptionsWidgetState {
-    showRenderOptions: boolean;
-}
-
 const enum InputId {
     Address = 'address',
     Offset = 'offset',
@@ -43,41 +39,49 @@ const enum InputId {
     GroupsPerRow = 'groups-per-row',
 }
 
-export class OptionsWidget extends React.Component<OptionsWidgetProps, OptionsWidgetState> {
+export class OptionsWidget extends React.Component<OptionsWidgetProps, {}> {
     constructor(props: OptionsWidgetProps) {
         super(props);
-        this.state = { showRenderOptions: false };
     }
 
     override render(): React.ReactNode {
+
         return <div className='memory-options-widget' >
             <div className="options-widget-title">
                 <div className="title"></div>
-                <div className="advanced-options-toggle" role='button' tabIndex={0} onClick={this.toggleRenderOptions} >
-                    <i className="codicon codicon-gear" />
-                    {this.state.showRenderOptions ? 'Hide Settings' : 'Show Settings'}
-                </div>
             </div>
             <div className="core-options" >
-                <VSCodeTextField id={InputId.Address} onChange={this.handleInputChange} value={this.props.memoryReference}>Address</VSCodeTextField>
-                <VSCodeTextField id={InputId.Offset} onChange={this.handleInputChange} value={this.props.offset.toString()}>Offset</VSCodeTextField>
-                <VSCodeTextField id={InputId.Length} onChange={this.handleInputChange} value={this.props.count.toString()}>Length</VSCodeTextField>
+                <VSCodeTextField
+                    id={InputId.Address}
+                    className='options-texfield-long'
+                    onChange={this.handleInputChange}
+                    value={this.props.memoryReference}>
+                    Address
+                </VSCodeTextField>
+                <VSCodeTextField id={InputId.Offset} className='options-textfield' onChange={this.handleInputChange} value={this.props.offset.toString()}>Offset</VSCodeTextField>
+                <VSCodeTextField id={InputId.Length} className='options-textfield' onChange={this.handleInputChange} value={this.props.count.toString()}>Length</VSCodeTextField>
                 <VSCodeButton className='go-button' onClick={this.props.refreshMemory} >Go</VSCodeButton>
-            </div>
-            {
-                this.state.showRenderOptions && <>
-                    <VSCodeDivider />
-                    <div className="advanced-options">
-                        <label htmlFor={InputId.WordsPerGroup}>Bytes per Group</label>
-                        <VSCodeDropdown id={InputId.WordsPerGroup} onChange={this.handleInputChange} value={this.props.wordsPerGroup.toString()}>
+                <VSCodeButton className='advanced-options-toggle' appearance='icon' title='Show all data' aria-label='Show all data'>
+                    <div className='codicon codicon-gear'></div>
+                    <div className="advanced-options-content">
+                        {!!this.props.columnOptions.length && <MultiSelectWithLabel
+                            id='column-select'
+                            label='Columns'
+                            items={this.props.columnOptions
+                                .filter(({ configurable }) => configurable)
+                                .map(column => ({ id: column.contribution.id, label: column.contribution.label, checked: column.active }))}
+                            onSelectionChanged={this.props.toggleColumn}
+                        />}
+                        <label htmlFor={InputId.WordsPerGroup} className='options-label'>Bytes per Group</label>
+                        <VSCodeDropdown id={InputId.WordsPerGroup} className='options-dropdown' onChange={this.handleInputChange} value={this.props.wordsPerGroup.toString()}>
                             <VSCodeOption>1</VSCodeOption>
                             <VSCodeOption>2</VSCodeOption>
                             <VSCodeOption>4</VSCodeOption>
                             <VSCodeOption>8</VSCodeOption>
                             <VSCodeOption>16</VSCodeOption>
                         </VSCodeDropdown>
-                        <label htmlFor={InputId.GroupsPerRow}>Groups per Row</label>
-                        <VSCodeDropdown id={InputId.GroupsPerRow} onChange={this.handleInputChange} value={this.props.groupsPerRow.toString()}>
+                        <label htmlFor={InputId.GroupsPerRow} className='options-label'>Groups per Row</label>
+                        <VSCodeDropdown id={InputId.GroupsPerRow} className='options-dropdown' onChange={this.handleInputChange} value={this.props.groupsPerRow.toString()}>
                             <VSCodeOption>1</VSCodeOption>
                             <VSCodeOption>2</VSCodeOption>
                             <VSCodeOption>4</VSCodeOption>
@@ -85,17 +89,9 @@ export class OptionsWidget extends React.Component<OptionsWidgetProps, OptionsWi
                             <VSCodeOption>16</VSCodeOption>
                             <VSCodeOption>32</VSCodeOption>
                         </VSCodeDropdown>
-                        {!!this.props.columnOptions.length && <MultiSelectWithLabel
-                            id='column-select'
-                            label='Columns'
-                            items={this.props.columnOptions
-                                .filter(({ configurable }) => configurable)
-                                .map(column => ({ id: column.contribution.id, label: column.contribution.label, checked: column.active }))}
-                            onSelectionChanged={this.props.toggleColumn}
-                        />}
                     </div>
-                </>
-            }
+                </VSCodeButton>
+            </div>
             <VSCodeDivider />
         </div>;
     }
@@ -117,10 +113,4 @@ export class OptionsWidget extends React.Component<OptionsWidgetProps, OptionsWi
     protected updateConfiguration(viewConfigurationChangeRequest: MemoryDisplayConfigurationChangeRequest): void {
         return messenger.sendNotification(setMemoryDisplayConfigurationType, HOST_EXTENSION, viewConfigurationChangeRequest);
     }
-
-    protected toggleRenderOptions = () => this.doToggleRenderOptions();
-
-    protected doToggleRenderOptions(): void {
-        this.setState(prevState => ({ ...prevState, showRenderOptions: !prevState.showRenderOptions }));
-    }
 }