pagination working

eclipse-cdt-cloud · Aug 30, 2023 · 40ff6dd · 40ff6dd
1 parent 055e2ec
commit 40ff6dd
Show file tree

Hide file tree

Showing 7 changed files with 169 additions and 4 deletions.
diff --git a/media/memory-inspector.css b/media/memory-inspector.css
@@ -0,0 +1,65 @@
+/********************************************************************************
+ * 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
+ ********************************************************************************/
+
+
+ .bytes-select {
+    color: var(--vscode-dropdown-forground);
+    border-radius: 2px;
+    font-size: var(--vscode-font-size);
+    border: 1px solid var(--vscode-dropdown-border);
+    background: var(--vscode-dropdown-background);
+    outline: none;
+    cursor: pointer;
+    padding-top: 3px;
+  }
+
+ .more-memory-select {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-style: italic;
+    cursor: pointer;
+  }
+
+  .more-memory-select-top {
+    display: flex;
+    justify-content: center;
+    height: 16px;
+    padding-bottom: 1px;
+    transition: border-color 0.1s;
+    border-color: transparent;
+  }
+
+  .more-memory-select-top:hover {
+    border-bottom: 1px solid;
+    padding-bottom: 0;
+    border-color: var(--vscode-sideBar-foreground);
+  }
+
+  .more-memory-select select {
+    border: none;
+    background: none;
+    border-radius: 3px;
+    margin: 0 2px;
+    position: relative;
+    bottom: 1px;
+    transition: background 0.1s;
+    font-style: italic;
+  }
+
+  .more-memory-select select:hover {
+    background: var(--vscode-dropdown-background);
+  }
diff --git a/src/plugin/memory-webview-main.ts b/src/plugin/memory-webview-main.ts
@@ -114,6 +114,7 @@ export class MemoryWebview {
 
         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'));
 
         panel.webview.html = `
             <!DOCTYPE html>
@@ -124,6 +125,7 @@ export class MemoryWebview {
                     <meta http-equiv='Content-Security-Policy' content="default-src 'none'; font-src ${cspSrc}; style-src ${cspSrc} 'unsafe-inline'; script-src ${cspSrc};">
                     <script type='module' src='${mainUri}'></script>
                     <link href="${codiconsUri}" rel="stylesheet" />
+                    <link href="${memoryInspectorCSS}" rel="stylesheet" />
                 </head>
                 <body>
                     <div id='root'></div>

diff --git a/src/webview/components/memory-table.tsx b/src/webview/components/memory-table.tsx
@@ -20,18 +20,88 @@ import {
     VSCodeDataGridRow,
     VSCodeDataGridCell
 } from '@vscode/webview-ui-toolkit/react';
-import { Decoration, Memory, StylableNodeAttributes } from '../utils/view-types';
+import { Decoration, Memory, SerializedTableRenderOptions, StylableNodeAttributes, isTrigger } from '../utils/view-types';
 import { toHexStringWithRadixMarker } from '../../common/memory-range';
 import { TableRenderOptions } from '../columns/column-contribution-service';
+import { DebugProtocol } from '@vscode/debugprotocol';
 
+export interface MoreMemorySelectProps {
+    count: number;
+    offset: number;
+    options: number[];
+    direction: 'above' | 'below';
+    updateMemoryArguments: (memoryArguments: Partial<DebugProtocol.ReadMemoryArguments>) => Promise<void>;
+    refreshMemory: () => void;
+}
+
+export const MoreMemorySelect: React.FC<MoreMemorySelectProps> = ({ count, offset, options, updateMemoryArguments, refreshMemory, direction }) => {
+    const [numBytes, setNumBytes] = React.useState<number>(options[0]);
+    const containerRef = React.createRef<HTMLDivElement>();
+    const onSelectChange = (e: React.ChangeEvent<HTMLSelectElement>): void => {
+        e.stopPropagation();
+        const { value } = e.currentTarget;
+        setNumBytes(parseInt(value));
+    };
+
+    const loadMoreMemory = (e: React.MouseEvent | React.KeyboardEvent): void => {
+        containerRef.current?.blur();
+        if (isTrigger(e)) {
+            let newOffset = offset;
+            let newCount = count;
+            if (direction === 'above') {
+                newOffset = offset - numBytes;
+                newCount = count + numBytes;
+            } else {
+                newCount = count + numBytes;
+            }
+            updateMemoryArguments({ offset: newOffset, count: newCount })
+                .then(refreshMemory);
+        }
+    };
+
+    return (
+        <div
+            className='more-memory-select'
+            tabIndex={0}
+            role='button'
+            onClick={loadMoreMemory}
+            onKeyDown={loadMoreMemory}
+            ref={containerRef}
+        >
+            <div className='more-memory-select-top no-select'>
+                Load
+                <select
+                    className='bytes-select'
+                    onChange={onSelectChange}
+                    tabIndex={0}
+                >
+                    {options.map(option => (
+                        <option
+                            key={`more-memory-select-${option}`}
+                            value={option}
+                        >
+                            {option}
+                        </option>))}
+                </select>
+                {`more bytes ${direction}`}
+            </div>
+        </div>
+    );
+};
 interface MemoryTableProps extends TableRenderOptions {
     memory?: Memory;
     decorations: Decoration[];
+    offset: number;
+    count: number;
+    updateMemoryArguments: (memoryArguments: Partial<DebugProtocol.ReadMemoryArguments>) => Promise<void>;
+    refreshMemory: () => void;
 }
 
 export class MemoryTable extends React.Component<MemoryTableProps> {
     public render(): React.ReactNode {
         const rows = this.getTableRows();
+        const { offset, count, updateMemoryArguments, memory, refreshMemory } = this.props;
+        const showMoreMemoryButton = !!memory?.bytes.length;
         return (
             <div>
                 <VSCodeDataGrid>
@@ -44,7 +114,23 @@ export class MemoryTable extends React.Component<MemoryTableProps> {
                             {contribution.label}
                         </VSCodeDataGridCell>)}
                     </VSCodeDataGridRow>
+                    {showMoreMemoryButton && (<MoreMemorySelect
+                        offset={offset}
+                        count={count}
+                        options={[128, 256, 512]}
+                        direction='above'
+                        updateMemoryArguments={updateMemoryArguments}
+                        refreshMemory={refreshMemory}
+                    />)}
                     {rows}
+                    {showMoreMemoryButton && (<MoreMemorySelect
+                        offset={offset}
+                        count={count}
+                        options={[128, 256, 512]}
+                        direction='below'
+                        updateMemoryArguments={updateMemoryArguments}
+                        refreshMemory={refreshMemory}
+                    />)}
                 </VSCodeDataGrid>
             </div>
         );

diff --git a/src/webview/components/memory-widget.tsx b/src/webview/components/memory-widget.tsx
@@ -29,7 +29,7 @@ interface MemoryWidgetProps {
     offset: number;
     count: number;
     refreshMemory: () => void;
-    updateMemoryArguments: (memoryArguments: Partial<DebugProtocol.ReadMemoryArguments>) => void;
+    updateMemoryArguments: (memoryArguments: Partial<DebugProtocol.ReadMemoryArguments>) => Promise<void>;
     toggleColumn(id: string, active: boolean): void;
 }
 
@@ -77,6 +77,10 @@ export class MemoryWidget extends React.Component<MemoryWidgetProps, MemoryWidge
                 wordSize={this.state.wordSize}
                 wordsPerGroup={this.state.bytesPerGroup}
                 groupsPerRow={this.state.groupsPerRow}
+                offset={this.props.offset}
+                count={this.props.count}
+                updateMemoryArguments={this.props.updateMemoryArguments}
+                refreshMemory={this.props.refreshMemory}
             />
         </>;
     }

diff --git a/src/webview/components/options-widget.tsx b/src/webview/components/options-widget.tsx
@@ -23,7 +23,7 @@ import { MultiSelectWithLabel } from './multi-select-bar';
 
 export interface OptionsWidgetProps extends TableRenderOptions, Required<DebugProtocol.ReadMemoryArguments> {
     updateRenderOptions: (options: Partial<SerializedTableRenderOptions>) => void;
-    updateMemoryArguments: (memoryArguments: Partial<DebugProtocol.ReadMemoryArguments>) => void;
+    updateMemoryArguments: (memoryArguments: Partial<DebugProtocol.ReadMemoryArguments>) => Promise<void>;
     refreshMemory: () => void;
     toggleColumn(id: string, active: boolean): void;
 }

diff --git a/src/webview/memory-webview-view.tsx b/src/webview/memory-webview-view.tsx
@@ -77,7 +77,9 @@ class App extends React.Component<{}, MemoryAppState> {
         />;
     }
 
-    protected updateMemoryState = (newState: Partial<MemoryState>) => this.setState(prevState => ({ ...prevState, ...newState }));
+    protected updateMemoryState = (newState: Partial<MemoryState>): Promise<void> => new Promise(resolve => {
+        this.setState(prevState => ({ ...prevState, ...newState }), resolve);
+    });
 
     protected async setOptions(options?: Partial<DebugProtocol.ReadMemoryArguments>): Promise<void> {
         messenger.sendRequest(logMessageType, HOST_EXTENSION, `Setting options: ${JSON.stringify(options)}`);

diff --git a/src/webview/utils/view-types.ts b/src/webview/utils/view-types.ts
@@ -72,3 +72,9 @@ export interface StylableNodeAttributes {
 export interface FullNodeAttributes extends StylableNodeAttributes {
     content: string;
 }
+
+export type ReactInteraction<E extends Element = Element> = React.MouseEvent<E> | React.KeyboardEvent<E>;
+
+export function isTrigger(event: ReactInteraction): boolean {
+    return !('code' in event) || event.code === 'Enter' || event.code === 'Space';
+}