@jupyterlab/debugger 4.3.0-alpha.2 → 4.3.0-beta.1

package/lib/panels/variables/index.js

@@ -57,13 +57,13 @@ export class Variables extends PanelWithToolbar {
         };
         const treeViewButton = new ToolbarButton({
             icon: treeViewIcon,
-            className: 'jp-TreeView',
+            className: 'jp-TreeView-Button',
             onClick: onViewChange,
             tooltip: trans.__('Tree View')
         });
         const tableViewButton = new ToolbarButton({
             icon: tableRowsIcon,
-            className: 'jp-TableView',
+            className: 'jp-TableView-Button',
             onClick: onViewChange,
             tooltip: trans.__('Table View')
         });

package/lib/panels/variables/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/panels/variables/index.ts"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C,2DAA2D;AAG3D,OAAO,EAAe,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACtE,OAAO,EACL,gBAAgB,EAChB,aAAa,EACb,aAAa,EACb,YAAY,EACb,MAAM,2BAA2B,CAAC;AAInC,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAE3C;;GAEG;AACH,MAAM,OAAO,SAAU,SAAQ,gBAAgB;IAC7C;;;;OAIG;IACH,YAAY,OAA2B;QACrC,KAAK,CAAC,OAAO,CAAC,CAAC;QACf,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,OAAO,CAAC;QAC3D,MAAM,UAAU,GAAG,OAAO,CAAC,UAAU,IAAI,cAAc,CAAC;QACxD,MAAM,KAAK,GAAG,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC5C,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC;QACzC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,8BAA8B,CAAC,CAAC;QACtD,IAAI,CAAC,KAAK,GAAG,IAAI,iBAAiB,CAAC;YACjC,KAAK;YACL,OAAO;YACP,QAAQ;YACR,UAAU;SACX,CAAC,CAAC;QACH,IAAI,CAAC,MAAM,GAAG,IAAI,iBAAiB,CAAC;YAClC,KAAK;YACL,QAAQ;YACR,YAAY;YACZ,UAAU;SACX,CAAC,CAAC;QACH,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;QAEnB,IAAI,CAAC,OAAO,CAAC,OAAO,CAClB,gBAAgB,EAChB,IAAI,aAAa,CAAC;YAChB,UAAU;YACV,KAAK;YACL,IAAI,EAAE,IAAI,CAAC,KAAK;YAChB,IAAI,EAAE,IAAI,CAAC,MAAM;SAClB,CAAC,CACH,CAAC;QAEF,MAAM,YAAY,GAAG,GAAS,EAAE;YAC9B,IAAI,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE;gBACxB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;gBAClB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;gBACnB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;gBAChD,uBAAuB,CAAC,OAAO,CAAC,CAAC;aAClC;iBAAM;gBACL,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;gBAClB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;gBACnB,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;gBAC3C,uBAAuB,CAAC,MAAM,CAAC,CAAC;aACjC;YACD,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC,CAAC;QAEF,MAAM,cAAc,GAAG,IAAI,aAAa,CAAC;YACvC,IAAI,EAAE,YAAY;YAClB,SAAS,EAAE,aAAa;YACxB,OAAO,EAAE,YAAY;YACrB,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC;SAC/B,CAAC,CAAC;QAEH,MAAM,eAAe,GAAG,IAAI,aAAa,CAAC;YACxC,IAAI,EAAE,aAAa;YACnB,SAAS,EAAE,cAAc;YACzB,OAAO,EAAE,YAAY;YACrB,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC;SAChC,CAAC,CAAC;QAEH,MAAM,uBAAuB,GAAG,CAAC,YAAoB,EAAQ,EAAE;YAC7D,eAAe,CAAC,OAAO,GAAG,YAAY,KAAK,MAAM,CAAC;YAClD,cAAc,CAAC,OAAO,GAAG,CAAC,eAAe,CAAC,OAAO,CAAC;QACpD,CAAC,CAAC;QAEF,uBAAuB,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;QAEjE,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,uBAAuB,EAAE,cAAc,CAAC,CAAC;QAE9D,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,wBAAwB,EAAE,eAAe,CAAC,CAAC;QAEhE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC3B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC5B,IAAI,CAAC,QAAQ,CAAC,sBAAsB,CAAC,CAAC;IACxC,CAAC;IAED;;OAEG;IACH,IAAI,MAAM,CAAC,MAAmB;QAC5B,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;QAC3B,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC;IAC9B,CAAC;IAED;;;;OAIG;IACO,QAAQ,CAAC,GAAyB;QAC1C,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QACpB,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IACxB,CAAC;IAED;;;;OAIG;IACK,WAAW,CAAC,GAAyB;QAC3C,MAAM,MAAM,GAAG,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC;QAC3D,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC;IAC/C,CAAC;CAIF;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,QAA6B,EAAmB,EAAE;;IAC5E,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC;IACjC,QAAQ,IAAI,EAAE;QACZ,KAAK,KAAK;YACR,OAAO,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QAC7B,KAAK,OAAO;YACV,OAAO,UAAU,CAAC,KAAK,CAAC,CAAC;QAC3B,KAAK,MAAM;YACT,OAAO,KAAK,CAAC;QACf,KAAK,KAAK;YACR,IAAI,MAAA,MAAA,QAAQ,CAAC,gBAAgB,0CAAE,UAAU,0CAAE,QAAQ,CAAC,WAAW,CAAC,EAAE;gBAChE,OAAO,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;aACzC;iBAAM;gBACL,OAAO,KAAK,CAAC;aACd;QACH;YACE,OAAO,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,KAAK,CAAC;KACxB;AACH,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/panels/variables/index.ts"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C,2DAA2D;AAG3D,OAAO,EAAe,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACtE,OAAO,EACL,gBAAgB,EAChB,aAAa,EACb,aAAa,EACb,YAAY,EACb,MAAM,2BAA2B,CAAC;AAInC,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAE3C;;GAEG;AACH,MAAM,OAAO,SAAU,SAAQ,gBAAgB;IAC7C;;;;OAIG;IACH,YAAY,OAA2B;QACrC,KAAK,CAAC,OAAO,CAAC,CAAC;QACf,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,OAAO,CAAC;QAC3D,MAAM,UAAU,GAAG,OAAO,CAAC,UAAU,IAAI,cAAc,CAAC;QACxD,MAAM,KAAK,GAAG,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC5C,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC;QACzC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,8BAA8B,CAAC,CAAC;QACtD,IAAI,CAAC,KAAK,GAAG,IAAI,iBAAiB,CAAC;YACjC,KAAK;YACL,OAAO;YACP,QAAQ;YACR,UAAU;SACX,CAAC,CAAC;QACH,IAAI,CAAC,MAAM,GAAG,IAAI,iBAAiB,CAAC;YAClC,KAAK;YACL,QAAQ;YACR,YAAY;YACZ,UAAU;SACX,CAAC,CAAC;QACH,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;QAEnB,IAAI,CAAC,OAAO,CAAC,OAAO,CAClB,gBAAgB,EAChB,IAAI,aAAa,CAAC;YAChB,UAAU;YACV,KAAK;YACL,IAAI,EAAE,IAAI,CAAC,KAAK;YAChB,IAAI,EAAE,IAAI,CAAC,MAAM;SAClB,CAAC,CACH,CAAC;QAEF,MAAM,YAAY,GAAG,GAAS,EAAE;YAC9B,IAAI,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE;gBACxB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;gBAClB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;gBACnB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;gBAChD,uBAAuB,CAAC,OAAO,CAAC,CAAC;aAClC;iBAAM;gBACL,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;gBAClB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;gBACnB,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;gBAC3C,uBAAuB,CAAC,MAAM,CAAC,CAAC;aACjC;YACD,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC,CAAC;QAEF,MAAM,cAAc,GAAG,IAAI,aAAa,CAAC;YACvC,IAAI,EAAE,YAAY;YAClB,SAAS,EAAE,oBAAoB;YAC/B,OAAO,EAAE,YAAY;YACrB,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC;SAC/B,CAAC,CAAC;QAEH,MAAM,eAAe,GAAG,IAAI,aAAa,CAAC;YACxC,IAAI,EAAE,aAAa;YACnB,SAAS,EAAE,qBAAqB;YAChC,OAAO,EAAE,YAAY;YACrB,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC;SAChC,CAAC,CAAC;QAEH,MAAM,uBAAuB,GAAG,CAAC,YAAoB,EAAQ,EAAE;YAC7D,eAAe,CAAC,OAAO,GAAG,YAAY,KAAK,MAAM,CAAC;YAClD,cAAc,CAAC,OAAO,GAAG,CAAC,eAAe,CAAC,OAAO,CAAC;QACpD,CAAC,CAAC;QAEF,uBAAuB,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;QAEjE,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,uBAAuB,EAAE,cAAc,CAAC,CAAC;QAE9D,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,wBAAwB,EAAE,eAAe,CAAC,CAAC;QAEhE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC3B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC5B,IAAI,CAAC,QAAQ,CAAC,sBAAsB,CAAC,CAAC;IACxC,CAAC;IAED;;OAEG;IACH,IAAI,MAAM,CAAC,MAAmB;QAC5B,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;QAC3B,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC;IAC9B,CAAC;IAED;;;;OAIG;IACO,QAAQ,CAAC,GAAyB;QAC1C,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QACpB,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IACxB,CAAC;IAED;;;;OAIG;IACK,WAAW,CAAC,GAAyB;QAC3C,MAAM,MAAM,GAAG,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC;QAC3D,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC;IAC/C,CAAC;CAIF;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,QAA6B,EAAmB,EAAE;;IAC5E,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC;IACjC,QAAQ,IAAI,EAAE;QACZ,KAAK,KAAK;YACR,OAAO,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QAC7B,KAAK,OAAO;YACV,OAAO,UAAU,CAAC,KAAK,CAAC,CAAC;QAC3B,KAAK,MAAM;YACT,OAAO,KAAK,CAAC;QACf,KAAK,KAAK;YACR,IAAI,MAAA,MAAA,QAAQ,CAAC,gBAAgB,0CAAE,UAAU,0CAAE,QAAQ,CAAC,WAAW,CAAC,EAAE;gBAChE,OAAO,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;aACzC;iBAAM;gBACL,OAAO,KAAK,CAAC;aACd;QACH;YACE,OAAO,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,KAAK,CAAC;KACxB;AACH,CAAC,CAAC"}

package/lib/panels/variables/tree.d.ts

@@ -37,7 +37,6 @@ export declare class VariablesBodyTree extends ReactWidget {
     private _filter;
     private _service;
     private _translator;
-    private _hoverChanged;
 }
 /**
  * A namespace for VariablesBodyTree `statics`.

package/lib/panels/variables/tree.js

@@ -1,13 +1,12 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 import { nullTranslator } from '@jupyterlab/translation';
-import { Signal } from '@lumino/signaling';
-import { caretDownEmptyIcon, ReactWidget, searchIcon } from '@jupyterlab/ui-components';
+import { getTreeItemElement, ReactWidget, searchIcon } from '@jupyterlab/ui-components';
+import { Button, TreeItem, TreeView } from '@jupyter/react-components';
 import { ArrayExt } from '@lumino/algorithm';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { convertType } from '.';
 import { Debugger } from '../../debugger';
-const BUTTONS_CLASS = 'jp-DebuggerVariables-buttons';
 /**
  * The body for tree of variables.
  */
@@ -25,7 +24,6 @@ export class VariablesBodyTree extends ReactWidget {
         this._commands = options.commands;
         this._service = options.service;
         this._translator = options.translator;
-        this._hoverChanged = new Signal(this);
         const model = (this.model = options.model);
         model.changed.connect(this._updateScopes, this);
         this.addClass('jp-DebuggerVariables-body');
@@ -39,7 +37,6 @@ export class VariablesBodyTree extends ReactWidget {
         const handleSelectVariable = (variable) => {
             this.model.selectedVariable = variable;
         };
-        const collapserIcon = (React.createElement(caretDownEmptyIcon.react, { stylesheet: "menuItem", tag: "span" }));
         if ((scope === null || scope === void 0 ? void 0 : scope.name) !== 'Globals') {
             this.addClass('jp-debuggerVariables-local');
         }
@@ -47,10 +44,8 @@ export class VariablesBodyTree extends ReactWidget {
             this.removeClass('jp-debuggerVariables-local');
         }
         return scope ? (React.createElement(React.Fragment, null,
-            React.createElement(VariablesBranch, { key: scope.name, commands: this._commands, service: this._service, data: scope.variables, filter: this._filter, translator: this._translator, handleSelectVariable: handleSelectVariable, onHoverChanged: (data) => {
-                    this._hoverChanged.emit(data);
-                }, collapserIcon: collapserIcon }),
-            React.createElement(TreeButtons, { commands: this._commands, service: this._service, hoverChanged: this._hoverChanged, handleSelectVariable: handleSelectVariable }))) : (React.createElement("div", null));
+            React.createElement(TreeView, { className: "jp-TreeView" },
+                React.createElement(VariablesBranch, { key: scope.name, commands: this._commands, service: this._service, data: scope.variables, filter: this._filter, translator: this._translator, handleSelectVariable: handleSelectVariable })))) : (React.createElement("div", null));
     }
     /**
      * Set the variable filter list.
@@ -79,91 +74,6 @@ export class VariablesBodyTree extends ReactWidget {
         this.update();
     }
 }
-/**
- * The singleton buttons bar shown by the variables.
- */
-const TreeButtons = (props) => {
-    var _a;
-    const { commands, service, translator, handleSelectVariable } = props;
-    const trans = (translator !== null && translator !== void 0 ? translator : nullTranslator).load('jupyterlab');
-    const [buttonsTop, setButtonsTop] = useState(0);
-    const [variable, setVariable] = useState(null);
-    let stateRefreshLock = 0;
-    // Empty dependency array is to only register once per lifetime.
-    const handleHover = useCallback((_, data) => {
-        const current = ++stateRefreshLock;
-        if (!data.variable) {
-            // Handle mouse leave.
-            if (current !== stateRefreshLock) {
-                return;
-            }
-            const target = data.target;
-            if (target &&
-                // Note: Element, not HTMLElement to permit entering <svg> icon.
-                target instanceof Element &&
-                target.closest(`.${BUTTONS_CLASS}`)) {
-                // Allow to enter the buttons.
-                return;
-            }
-            setVariable(null);
-        }
-        else {
-            // Handle mouse over.
-            setVariable(data.variable);
-            requestAnimationFrame(() => {
-                if (current !== stateRefreshLock || !data.target) {
-                    return;
-                }
-                setButtonsTop(data.target.offsetTop);
-            });
-        }
-    }, []);
-    useEffect(() => {
-        props.hoverChanged.connect(handleHover);
-        return () => {
-            props.hoverChanged.disconnect(handleHover);
-        };
-    }, [handleHover]);
-    return (React.createElement("div", { className: BUTTONS_CLASS, style: 
-        // Positioning and hiding is implemented using compositor-only
-        // properties (transform and opacity) for performance.
-        {
-            transform: `translateY(${buttonsTop}px)`,
-            opacity: !variable ||
-                // Do not show buttons display for special entries, defined in debugpy:
-                // https://github.com/microsoft/debugpy/blob/cf0d684566edc339545b161da7c3dfc48af7c7d5/src/debugpy/_vendored/pydevd/_pydevd_bundle/pydevd_utils.py#L359
-                [
-                    'special variables',
-                    'protected variables',
-                    'function variables',
-                    'class variables'
-                ].includes(variable.name)
-                ? 0
-                : 1
-        } },
-        React.createElement("button", { className: "jp-DebuggerVariables-renderVariable", disabled: !variable ||
-                !service.model.hasRichVariableRendering ||
-                !commands.isEnabled(Debugger.CommandIDs.renderMimeVariable, {
-                    name: variable.name,
-                    frameID: (_a = service.model.callstack.frame) === null || _a === void 0 ? void 0 : _a.id
-                }), onClick: e => {
-                var _a;
-                if (!variable || !handleSelectVariable) {
-                    return;
-                }
-                e.stopPropagation();
-                handleSelectVariable(variable);
-                commands
-                    .execute(Debugger.CommandIDs.renderMimeVariable, {
-                    name: variable.name,
-                    frameID: (_a = service.model.callstack.frame) === null || _a === void 0 ? void 0 : _a.id
-                })
-                    .catch(reason => {
-                    console.error(`Failed to render variable ${variable === null || variable === void 0 ? void 0 : variable.name}`, reason);
-                });
-            }, title: trans.__('Render variable: %1', variable === null || variable === void 0 ? void 0 : variable.name) },
-            React.createElement(searchIcon.react, { stylesheet: "menuItem", tag: "span" }))));
-};
 /**
  * A React component to display a list of variables.
  *
@@ -173,16 +83,16 @@ const TreeButtons = (props) => {
  * @param props.filter Optional variable filter list.
  */
 const VariablesBranch = (props) => {
-    const { commands, data, service, filter, translator, handleSelectVariable, onHoverChanged, collapserIcon } = props;
+    const { commands, data, service, filter, translator, handleSelectVariable } = props;
     const [variables, setVariables] = useState(data);
     useEffect(() => {
         setVariables(data);
     }, [data]);
-    return (React.createElement("ul", { className: "jp-DebuggerVariables-branch" }, variables
+    return (React.createElement(React.Fragment, null, variables
         .filter(variable => !(filter || new Set()).has(variable.evaluateName || ''))
         .map(variable => {
         const key = `${variable.name}-${variable.evaluateName}-${variable.type}-${variable.value}-${variable.variablesReference}`;
-        return (React.createElement(VariableComponent, { key: key, commands: commands, data: variable, service: service, filter: filter, translator: translator, onSelect: handleSelectVariable, onHoverChanged: onHoverChanged, collapserIcon: collapserIcon }));
+        return (React.createElement(VariableComponent, { key: key, commands: commands, data: variable, service: service, filter: filter, translator: translator, onSelect: handleSelectVariable }));
     })));
 };
 function _prepareDetail(variable) {
@@ -207,44 +117,100 @@ function _prepareDetail(variable) {
  * @param props.filter Optional variable filter list.
  */
 const VariableComponent = (props) => {
-    const { commands, data, service, filter, translator, onSelect, onHoverChanged, collapserIcon } = props;
+    var _a, _b;
+    const { commands, data, service, filter, translator, onSelect } = props;
     const [variable] = useState(data);
-    const [expanded, setExpanded] = useState();
-    const [variables, setVariables] = useState();
+    const [showDetailsButton, setShowDetailsButton] = useState(false);
+    const [expanded, setExpanded] = useState(false);
+    const [variables, setVariables] = useState(null);
+    const trans = useMemo(() => (translator !== null && translator !== void 0 ? translator : nullTranslator).load('jupyterlab'), [translator]);
     const onSelection = onSelect !== null && onSelect !== void 0 ? onSelect : (() => void 0);
-    const expandable = variable.variablesReference !== 0 || variable.type === 'function';
-    const onVariableClicked = async (e) => {
+    const expandable = useMemo(() => variable.variablesReference !== 0 || variable.type === 'function', [variable.variablesReference, variable.type]);
+    const details = useMemo(() => _prepareDetail(variable), [variable]);
+    const hasMimeRenderer = useMemo(() => ![
+        'special variables',
+        'protected variables',
+        'function variables',
+        'class variables'
+    ].includes(variable.name), [variable.name]);
+    const disableMimeRenderer = useMemo(() => {
+        var _a;
+        return !service.model.hasRichVariableRendering ||
+            !commands.isEnabled(Debugger.CommandIDs.renderMimeVariable, {
+                name: variable.name,
+                frameID: (_a = service.model.callstack.frame) === null || _a === void 0 ? void 0 : _a.id
+            });
+    }, [
+        service.model.hasRichVariableRendering,
+        variable.name,
+        (_a = service.model.callstack.frame) === null || _a === void 0 ? void 0 : _a.id
+    ]);
+    const fetchChildren = useCallback(async () => {
+        if (expandable && !variables) {
+            setVariables(await service.inspectVariable(variable.variablesReference));
+        }
+    }, [expandable, service, variable.variablesReference, variables]);
+    const onVariableClicked = useCallback(async (event) => {
+        const item = getTreeItemElement(event.target);
+        if (event.currentTarget !== item) {
+            return;
+        }
         if (!expandable) {
             return;
         }
-        e.stopPropagation();
-        const variables = await service.inspectVariable(variable.variablesReference);
         setExpanded(!expanded);
-        setVariables(variables);
-    };
-    return (React.createElement("li", { onClick: (e) => onVariableClicked(e), onMouseDown: e => {
-            e.stopPropagation();
+    }, [expandable, expanded]);
+    const onSelectChange = useCallback((event) => {
+        if (event.currentTarget === event.detail && event.detail.selected) {
             onSelection(variable);
-        }, onMouseOver: (event) => {
-            if (onHoverChanged) {
-                onHoverChanged({ target: event.currentTarget, variable });
-                event.stopPropagation();
+        }
+    }, [variable]);
+    const renderVariable = useCallback(() => {
+        var _a;
+        commands
+            .execute(Debugger.CommandIDs.renderMimeVariable, {
+            name: variable.name,
+            frameID: (_a = service.model.callstack.frame) === null || _a === void 0 ? void 0 : _a.id
+        })
+            .catch(reason => {
+            console.error(`Failed to render variable ${variable === null || variable === void 0 ? void 0 : variable.name}`, reason);
+        });
+    }, [commands, variable.name, (_b = service.model.callstack.frame) === null || _b === void 0 ? void 0 : _b.id]);
+    const onContextMenu = useCallback((event) => {
+        const item = getTreeItemElement(event.target);
+        if (event.currentTarget !== item) {
+            return;
+        }
+        onSelection(variable);
+    }, [variable]);
+    return (React.createElement(TreeItem, { className: "jp-TreeItem nested", expanded: expanded, onSelect: onSelectChange, onExpand: fetchChildren, onClick: (e) => onVariableClicked(e), onContextMenu: onContextMenu, onKeyDown: event => {
+            if (event.key == 'Enter') {
+                if (hasMimeRenderer && showDetailsButton) {
+                    onSelection(variable);
+                    renderVariable();
+                }
             }
+        }, onFocus: event => {
+            setShowDetailsButton(!event.defaultPrevented);
+            event.preventDefault();
+        }, onBlur: event => {
+            setShowDetailsButton(false);
+        }, onMouseOver: (event) => {
+            setShowDetailsButton(!event.defaultPrevented);
+            event.preventDefault();
         }, onMouseLeave: (event) => {
-            if (onHoverChanged) {
-                onHoverChanged({
-                    target: event.relatedTarget,
-                    variable: null
-                });
-                event.stopPropagation();
-            }
+            setShowDetailsButton(false);
         } },
-        React.createElement("span", { className: 'jp-DebuggerVariables-collapser' +
-                (expanded ? ' jp-mod-expanded' : '') }, 
-        // note: using React.cloneElement due to high typestyle cost
-        expandable ? React.cloneElement(collapserIcon) : null),
         React.createElement("span", { className: "jp-DebuggerVariables-name" }, variable.name),
-        React.createElement("span", { className: "jp-DebuggerVariables-detail" }, _prepareDetail(variable)),
-        expanded && variables && (React.createElement(VariablesBranch, { key: variable.name, commands: commands, data: variables, service: service, filter: filter, translator: translator, handleSelectVariable: onSelect, onHoverChanged: onHoverChanged, collapserIcon: collapserIcon }))));
+        details && (React.createElement("span", { className: "jp-DebuggerVariables-detail" }, details)),
+        hasMimeRenderer && showDetailsButton && (React.createElement(Button, { className: "jp-DebuggerVariables-renderVariable", appearance: "stealth", slot: "end", disabled: disableMimeRenderer, onClick: e => {
+                e.stopPropagation();
+                renderVariable();
+            }, title: trans.__('Render variable: %1', variable === null || variable === void 0 ? void 0 : variable.name) },
+            React.createElement(searchIcon.react, { tag: null }))),
+        variables ? (React.createElement(VariablesBranch, { key: variable.name, commands: commands, data: variables, service: service, filter: filter, translator: translator, handleSelectVariable: onSelect })) : (
+        /* Trick to ensure collapse button is displayed
+           when variables are not loaded yet */
+        expandable && React.createElement(TreeItem, null))));
 };
 //# sourceMappingURL=tree.js.map

package/lib/panels/variables/tree.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree.js","sourceRoot":"","sources":["../../../src/panels/variables/tree.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"tree.js","sourceRoot":"","sources":["../../../src/panels/variables/tree.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyterlab/debugger",
-  "version": "4.3.0-alpha.2",
+  "version": "4.3.0-beta.1",
   "description": "JupyterLab - Debugger Extension",
   "keywords": [
     "jupyter",
@@ -50,23 +50,23 @@
   "dependencies": {
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.26.3",
-    "@jupyter/react-components": "^0.16.3",
-    "@jupyter/ydoc": "^2.0.1",
-    "@jupyterlab/application": "^4.3.0-alpha.2",
-    "@jupyterlab/apputils": "^4.4.0-alpha.2",
-    "@jupyterlab/cells": "^4.3.0-alpha.2",
-    "@jupyterlab/codeeditor": "^4.3.0-alpha.2",
-    "@jupyterlab/codemirror": "^4.3.0-alpha.2",
-    "@jupyterlab/console": "^4.3.0-alpha.2",
-    "@jupyterlab/coreutils": "^6.3.0-alpha.2",
-    "@jupyterlab/docregistry": "^4.3.0-alpha.2",
-    "@jupyterlab/fileeditor": "^4.3.0-alpha.2",
-    "@jupyterlab/notebook": "^4.3.0-alpha.2",
-    "@jupyterlab/observables": "^5.3.0-alpha.2",
-    "@jupyterlab/rendermime": "^4.3.0-alpha.2",
-    "@jupyterlab/services": "^7.3.0-alpha.2",
-    "@jupyterlab/translation": "^4.3.0-alpha.2",
-    "@jupyterlab/ui-components": "^4.3.0-alpha.2",
+    "@jupyter/react-components": "^0.16.6",
+    "@jupyter/ydoc": "^3.0.0-a5",
+    "@jupyterlab/application": "^4.3.0-beta.1",
+    "@jupyterlab/apputils": "^4.4.0-beta.1",
+    "@jupyterlab/cells": "^4.3.0-beta.1",
+    "@jupyterlab/codeeditor": "^4.3.0-beta.1",
+    "@jupyterlab/codemirror": "^4.3.0-beta.1",
+    "@jupyterlab/console": "^4.3.0-beta.1",
+    "@jupyterlab/coreutils": "^6.3.0-beta.1",
+    "@jupyterlab/docregistry": "^4.3.0-beta.1",
+    "@jupyterlab/fileeditor": "^4.3.0-beta.1",
+    "@jupyterlab/notebook": "^4.3.0-beta.1",
+    "@jupyterlab/observables": "^5.3.0-beta.1",
+    "@jupyterlab/rendermime": "^4.3.0-beta.1",
+    "@jupyterlab/services": "^7.3.0-beta.1",
+    "@jupyterlab/translation": "^4.3.0-beta.1",
+    "@jupyterlab/ui-components": "^4.3.0-beta.1",
     "@lumino/algorithm": "^2.0.1",
     "@lumino/commands": "^2.3.0",
     "@lumino/coreutils": "^2.1.2",
@@ -80,7 +80,7 @@
     "react": "^18.2.0"
   },
   "devDependencies": {
-    "@jupyterlab/testing": "^4.3.0-alpha.2",
+    "@jupyterlab/testing": "^4.3.0-beta.1",
     "@types/jest": "^29.2.0",
     "jest": "^29.2.0",
     "jest-canvas-mock": "^2.5.2",

package/src/panels/variables/index.ts

@@ -73,14 +73,14 @@ export class Variables extends PanelWithToolbar {
 
     const treeViewButton = new ToolbarButton({
       icon: treeViewIcon,
-      className: 'jp-TreeView',
+      className: 'jp-TreeView-Button',
       onClick: onViewChange,
       tooltip: trans.__('Tree View')
     });
 
     const tableViewButton = new ToolbarButton({
       icon: tableRowsIcon,
-      className: 'jp-TableView',
+      className: 'jp-TableView-Button',
       onClick: onViewChange,
       tooltip: trans.__('Table View')
     });

package/src/panels/variables/tree.tsx

@@ -3,21 +3,21 @@
 
 import { ITranslator, nullTranslator } from '@jupyterlab/translation';
 
-import { ISignal, Signal } from '@lumino/signaling';
-
 import {
-  caretDownEmptyIcon,
+  getTreeItemElement,
   ReactWidget,
   searchIcon
 } from '@jupyterlab/ui-components';
 
+import { Button, TreeItem, TreeView } from '@jupyter/react-components';
+
 import { ArrayExt } from '@lumino/algorithm';
 
 import { CommandRegistry } from '@lumino/commands';
 
 import { DebugProtocol } from '@vscode/debugprotocol';
 
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { convertType } from '.';
 
@@ -27,8 +27,6 @@ import { IDebugger } from '../../tokens';
 
 import { VariablesModel } from './model';
 
-const BUTTONS_CLASS = 'jp-DebuggerVariables-buttons';
-
 /**
  * The body for tree of variables.
  */
@@ -43,7 +41,6 @@ export class VariablesBodyTree extends ReactWidget {
     this._commands = options.commands;
     this._service = options.service;
     this._translator = options.translator;
-    this._hoverChanged = new Signal(this);
 
     const model = (this.model = options.model);
     model.changed.connect(this._updateScopes, this);
@@ -61,9 +58,6 @@ export class VariablesBodyTree extends ReactWidget {
     const handleSelectVariable = (variable: IDebugger.IVariable) => {
       this.model.selectedVariable = variable;
     };
-    const collapserIcon = (
-      <caretDownEmptyIcon.react stylesheet="menuItem" tag="span" />
-    );
 
     if (scope?.name !== 'Globals') {
       this.addClass('jp-debuggerVariables-local');
@@ -73,25 +67,17 @@ export class VariablesBodyTree extends ReactWidget {
 
     return scope ? (
       <>
-        <VariablesBranch
-          key={scope.name}
-          commands={this._commands}
-          service={this._service}
-          data={scope.variables}
-          filter={this._filter}
-          translator={this._translator}
-          handleSelectVariable={handleSelectVariable}
-          onHoverChanged={(data: IHoverData) => {
-            this._hoverChanged.emit(data);
-          }}
-          collapserIcon={collapserIcon}
-        />
-        <TreeButtons
-          commands={this._commands}
-          service={this._service}
-          hoverChanged={this._hoverChanged}
-          handleSelectVariable={handleSelectVariable}
-        />
+        <TreeView className="jp-TreeView">
+          <VariablesBranch
+            key={scope.name}
+            commands={this._commands}
+            service={this._service}
+            data={scope.variables}
+            filter={this._filter}
+            translator={this._translator}
+            handleSelectVariable={handleSelectVariable}
+          />
+        </TreeView>
       </>
     ) : (
       <div></div>
@@ -134,152 +120,8 @@ export class VariablesBodyTree extends ReactWidget {
   private _filter = new Set<string>();
   private _service: IDebugger;
   private _translator: ITranslator | undefined;
-  private _hoverChanged: Signal<VariablesBodyTree, IHoverData>;
-}
-
-interface IHoverData {
-  /**
-   * The mouse target.
-   */
-  target: (EventTarget & HTMLElement) | null;
-  /**
-   * The variable corresponding to node under cursor.
-   */
-  variable: IDebugger.IVariable | null;
 }
 
-interface ITreeButtonsProps {
-  /**
-   * The commands registry.
-   */
-  commands: CommandRegistry;
-  /**
-   * The debugger service.
-   */
-  service: IDebugger;
-  /**
-   * The application language translator
-   */
-  translator?: ITranslator;
-  /**
-   * Callback on variable selection
-   */
-  handleSelectVariable: (variable: IDebugger.IVariable) => void;
-  /**
-   * Signal to be emitted on mouse over event.
-   */
-  hoverChanged: ISignal<VariablesBodyTree, IHoverData>;
-}
-
-/**
- * The singleton buttons bar shown by the variables.
- */
-const TreeButtons = (props: ITreeButtonsProps): JSX.Element => {
-  const { commands, service, translator, handleSelectVariable } = props;
-  const trans = (translator ?? nullTranslator).load('jupyterlab');
-
-  const [buttonsTop, setButtonsTop] = useState<number>(0);
-  const [variable, setVariable] = useState<IDebugger.IVariable | null>(null);
-
-  let stateRefreshLock = 0;
-
-  // Empty dependency array is to only register once per lifetime.
-  const handleHover = useCallback((_: VariablesBodyTree, data: IHoverData) => {
-    const current = ++stateRefreshLock;
-    if (!data.variable) {
-      // Handle mouse leave.
-      if (current !== stateRefreshLock) {
-        return;
-      }
-      const target = data.target;
-      if (
-        target &&
-        // Note: Element, not HTMLElement to permit entering <svg> icon.
-        target instanceof Element &&
-        target.closest(`.${BUTTONS_CLASS}`)
-      ) {
-        // Allow to enter the buttons.
-        return;
-      }
-      setVariable(null);
-    } else {
-      // Handle mouse over.
-      setVariable(data.variable);
-      requestAnimationFrame(() => {
-        if (current !== stateRefreshLock || !data.target) {
-          return;
-        }
-        setButtonsTop(data.target.offsetTop);
-      });
-    }
-  }, []);
-
-  useEffect(() => {
-    props.hoverChanged.connect(handleHover);
-    return () => {
-      props.hoverChanged.disconnect(handleHover);
-    };
-  }, [handleHover]);
-
-  return (
-    <div
-      className={BUTTONS_CLASS}
-      style={
-        // Positioning and hiding is implemented using compositor-only
-        // properties (transform and opacity) for performance.
-        {
-          transform: `translateY(${buttonsTop}px)`,
-          opacity:
-            !variable ||
-            // Do not show buttons display for special entries, defined in debugpy:
-            // https://github.com/microsoft/debugpy/blob/cf0d684566edc339545b161da7c3dfc48af7c7d5/src/debugpy/_vendored/pydevd/_pydevd_bundle/pydevd_utils.py#L359
-            [
-              'special variables',
-              'protected variables',
-              'function variables',
-              'class variables'
-            ].includes(variable.name)
-              ? 0
-              : 1
-        }
-      }
-    >
-      <button
-        className="jp-DebuggerVariables-renderVariable"
-        disabled={
-          !variable ||
-          !service.model.hasRichVariableRendering ||
-          !commands.isEnabled(Debugger.CommandIDs.renderMimeVariable, {
-            name: variable.name,
-            frameID: service.model.callstack.frame?.id
-          } as any)
-        }
-        onClick={e => {
-          if (!variable || !handleSelectVariable) {
-            return;
-          }
-          e.stopPropagation();
-          handleSelectVariable(variable);
-          commands
-            .execute(Debugger.CommandIDs.renderMimeVariable, {
-              name: variable.name,
-              frameID: service.model.callstack.frame?.id
-            } as any)
-            .catch(reason => {
-              console.error(
-                `Failed to render variable ${variable?.name}`,
-                reason
-              );
-            });
-        }}
-        title={trans.__('Render variable: %1', variable?.name)}
-      >
-        <searchIcon.react stylesheet="menuItem" tag="span" />
-      </button>
-    </div>
-  );
-};
-
 interface IVariablesBranchProps {
   /**
    * The commands registry.
@@ -296,14 +138,6 @@ interface IVariablesBranchProps {
    * Callback on variable selection
    */
   handleSelectVariable?: (variable: IDebugger.IVariable) => void;
-  /**
-   * Callback on mouseOver/mouseLeave event.
-   */
-  onHoverChanged?: (data: IHoverData) => void;
-  /**
-   * Collapser icon component
-   */
-  collapserIcon: JSX.Element;
 }
 
 /**
@@ -315,16 +149,8 @@ interface IVariablesBranchProps {
  * @param props.filter Optional variable filter list.
  */
 const VariablesBranch = (props: IVariablesBranchProps): JSX.Element => {
-  const {
-    commands,
-    data,
-    service,
-    filter,
-    translator,
-    handleSelectVariable,
-    onHoverChanged,
-    collapserIcon
-  } = props;
+  const { commands, data, service, filter, translator, handleSelectVariable } =
+    props;
   const [variables, setVariables] = useState(data);
 
   useEffect(() => {
@@ -332,7 +158,7 @@ const VariablesBranch = (props: IVariablesBranchProps): JSX.Element => {
   }, [data]);
 
   return (
-    <ul className="jp-DebuggerVariables-branch">
+    <>
       {variables
         .filter(
           variable => !(filter || new Set()).has(variable.evaluateName || '')
@@ -348,12 +174,10 @@ const VariablesBranch = (props: IVariablesBranchProps): JSX.Element => {
               filter={filter}
               translator={translator}
               onSelect={handleSelectVariable}
-              onHoverChanged={onHoverChanged}
-              collapserIcon={collapserIcon}
             />
           );
         })}
-    </ul>
+    </>
   );
 };
 
@@ -385,14 +209,6 @@ interface IVariableComponentProps {
    * Callback on selection
    */
   onSelect?: (variable: IDebugger.IVariable) => void;
-  /**
-   * Callback on mouseOver/mouseLeave event.
-   */
-  onHoverChanged?: (data: IHoverData) => void;
-  /**
-   * Collapser icon component
-   */
-  collapserIcon: JSX.Element;
 }
 
 function _prepareDetail(variable: IDebugger.IVariable) {
@@ -420,76 +236,156 @@ function _prepareDetail(variable: IDebugger.IVariable) {
  * @param props.filter Optional variable filter list.
  */
 const VariableComponent = (props: IVariableComponentProps): JSX.Element => {
-  const {
-    commands,
-    data,
-    service,
-    filter,
-    translator,
-    onSelect,
-    onHoverChanged,
-    collapserIcon
-  } = props;
+  const { commands, data, service, filter, translator, onSelect } = props;
   const [variable] = useState(data);
-  const [expanded, setExpanded] = useState<boolean>();
-  const [variables, setVariables] = useState<DebugProtocol.Variable[]>();
+  const [showDetailsButton, setShowDetailsButton] = useState<boolean>(false);
+  const [expanded, setExpanded] = useState<boolean>(false);
+  const [variables, setVariables] = useState<DebugProtocol.Variable[] | null>(
+    null
+  );
 
+  const trans = useMemo(
+    () => (translator ?? nullTranslator).load('jupyterlab'),
+    [translator]
+  );
   const onSelection = onSelect ?? (() => void 0);
 
-  const expandable =
-    variable.variablesReference !== 0 || variable.type === 'function';
+  const expandable = useMemo(
+    () => variable.variablesReference !== 0 || variable.type === 'function',
+    [variable.variablesReference, variable.type]
+  );
 
-  const onVariableClicked = async (e: React.MouseEvent): Promise<void> => {
-    if (!expandable) {
-      return;
+  const details = useMemo(() => _prepareDetail(variable), [variable]);
+
+  const hasMimeRenderer = useMemo(
+    () =>
+      ![
+        'special variables',
+        'protected variables',
+        'function variables',
+        'class variables'
+      ].includes(variable.name),
+    [variable.name]
+  );
+
+  const disableMimeRenderer = useMemo(
+    () =>
+      !service.model.hasRichVariableRendering ||
+      !commands.isEnabled(Debugger.CommandIDs.renderMimeVariable, {
+        name: variable.name,
+        frameID: service.model.callstack.frame?.id
+      } as any),
+    [
+      service.model.hasRichVariableRendering,
+      variable.name,
+      service.model.callstack.frame?.id
+    ]
+  );
+
+  const fetchChildren = useCallback(async () => {
+    if (expandable && !variables) {
+      setVariables(await service.inspectVariable(variable.variablesReference));
     }
-    e.stopPropagation();
-    const variables = await service.inspectVariable(
-      variable.variablesReference
-    );
-    setExpanded(!expanded);
-    setVariables(variables);
-  };
+  }, [expandable, service, variable.variablesReference, variables]);
+
+  const onVariableClicked = useCallback(
+    async (event: React.MouseEvent): Promise<void> => {
+      const item = getTreeItemElement(event.target as HTMLElement);
+      if (event.currentTarget !== item) {
+        return;
+      }
+
+      if (!expandable) {
+        return;
+      }
+      setExpanded(!expanded);
+    },
+    [expandable, expanded]
+  );
+
+  const onSelectChange = useCallback(
+    (event: CustomEvent) => {
+      if (event.currentTarget === event.detail && event.detail.selected) {
+        onSelection(variable);
+      }
+    },
+    [variable]
+  );
+
+  const renderVariable = useCallback(() => {
+    commands
+      .execute(Debugger.CommandIDs.renderMimeVariable, {
+        name: variable.name,
+        frameID: service.model.callstack.frame?.id
+      } as any)
+      .catch(reason => {
+        console.error(`Failed to render variable ${variable?.name}`, reason);
+      });
+  }, [commands, variable.name, service.model.callstack.frame?.id]);
+
+  const onContextMenu = useCallback(
+    (event: React.MouseEvent<HTMLElement, MouseEvent>): void => {
+      const item = getTreeItemElement(event.target as HTMLElement);
+      if (event.currentTarget !== item) {
+        return;
+      }
+
+      onSelection(variable);
+    },
+    [variable]
+  );
 
   return (
-    <li
+    <TreeItem
+      className="jp-TreeItem nested"
+      expanded={expanded}
+      onSelect={onSelectChange}
+      onExpand={fetchChildren}
       onClick={(e): Promise<void> => onVariableClicked(e)}
-      onMouseDown={e => {
-        e.stopPropagation();
-        onSelection(variable);
-      }}
-      onMouseOver={(event: React.MouseEvent<HTMLLIElement, MouseEvent>) => {
-        if (onHoverChanged) {
-          onHoverChanged({ target: event.currentTarget, variable });
-          event.stopPropagation();
+      onContextMenu={onContextMenu}
+      onKeyDown={event => {
+        if (event.key == 'Enter') {
+          if (hasMimeRenderer && showDetailsButton) {
+            onSelection(variable);
+            renderVariable();
+          }
         }
       }}
-      onMouseLeave={(event: React.MouseEvent<HTMLLIElement, MouseEvent>) => {
-        if (onHoverChanged) {
-          onHoverChanged({
-            target: event.relatedTarget as EventTarget & HTMLElement,
-            variable: null
-          });
-          event.stopPropagation();
-        }
+      onFocus={event => {
+        setShowDetailsButton(!event.defaultPrevented);
+        event.preventDefault();
+      }}
+      onBlur={event => {
+        setShowDetailsButton(false);
+      }}
+      onMouseOver={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+        setShowDetailsButton(!event.defaultPrevented);
+        event.preventDefault();
+      }}
+      onMouseLeave={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+        setShowDetailsButton(false);
       }}
     >
-      <span
-        className={
-          'jp-DebuggerVariables-collapser' +
-          (expanded ? ' jp-mod-expanded' : '')
-        }
-      >
-        {
-          // note: using React.cloneElement due to high typestyle cost
-          expandable ? React.cloneElement(collapserIcon) : null
-        }
-      </span>
       <span className="jp-DebuggerVariables-name">{variable.name}</span>
-      <span className="jp-DebuggerVariables-detail">
-        {_prepareDetail(variable)}
-      </span>
-      {expanded && variables && (
+      {details && (
+        <span className="jp-DebuggerVariables-detail">{details}</span>
+      )}
+      {hasMimeRenderer && showDetailsButton && (
+        <Button
+          className="jp-DebuggerVariables-renderVariable"
+          appearance="stealth"
+          slot="end"
+          disabled={disableMimeRenderer}
+          onClick={e => {
+            e.stopPropagation();
+            renderVariable();
+          }}
+          title={trans.__('Render variable: %1', variable?.name)}
+        >
+          <searchIcon.react tag={null} />
+        </Button>
+      )}
+      {variables ? (
         <VariablesBranch
           key={variable.name}
           commands={commands}
@@ -498,11 +394,13 @@ const VariableComponent = (props: IVariableComponentProps): JSX.Element => {
           filter={filter}
           translator={translator}
           handleSelectVariable={onSelect}
-          onHoverChanged={onHoverChanged}
-          collapserIcon={collapserIcon}
         />
+      ) : (
+        /* Trick to ensure collapse button is displayed
+           when variables are not loaded yet */
+        expandable && <TreeItem />
       )}
-    </li>
+    </TreeItem>
   );
 };
 

package/style/variables.css

@@ -20,60 +20,15 @@
   position: relative;
 }
 
-.jp-DebuggerVariables-branch {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.jp-DebuggerVariables-body
-  .jp-DebuggerVariables-branch
-  .jp-DebuggerVariables-branch {
-  grid-area: nested;
-}
-
-.jp-DebuggerVariables-body > .jp-DebuggerVariables-branch {
-  padding-top: 0.1em;
-}
-
-.jp-DebuggerVariables-branch li {
-  padding: 3px 0;
-  cursor: pointer;
-  color: var(--jp-content-font-color1);
-  display: grid;
-  grid-template:
-    'collapser name detail'
-    'nested nested nested';
-  grid-template-columns: max-content max-content 1fr;
-}
-
-.jp-DebuggerVariables-branch li:not(:has(li:hover)):hover {
-  background: var(--jp-layout-color2);
-}
-
-.jp-DebuggerVariables-collapser {
-  width: 16px;
-  grid-area: collapser;
-  transform: rotate(-90deg);
-  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-}
-
-.jp-DebuggerVariables-collapser.jp-mod-expanded {
-  transform: rotate(0);
-}
-
-.jp-DebuggerVariables-buttons {
-  position: absolute;
-  top: 0;
-  right: 8px;
-  margin-top: 1px;
-}
-
 .jp-DebuggerVariables-name {
   color: var(--jp-mirror-editor-attribute-color);
   grid-area: name;
 }
 
+.jp-DebuggerVariables-name:last-of-type {
+  flex: 1 1 auto;
+}
+
 .jp-DebuggerVariables-name::after {
   content: ':';
   margin-right: 5px;
@@ -82,30 +37,10 @@
 .jp-DebuggerVariables-detail {
   /* detail contains value for primitive types or name of the type otherwise */
   color: var(--jp-mirror-editor-string-color);
-}
-
-.jp-DebuggerVariables-renderVariable {
-  border: none;
-  background: none;
-  cursor: pointer;
-  transform-origin: center center;
-  transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1);
-}
-
-.jp-DebuggerVariables-renderVariable:active {
-  transform: scale(1.35);
-}
-
-.jp-DebuggerVariables-renderVariable:hover {
-  background-color: var(--jp-layout-color2);
-}
-
-.jp-DebuggerVariables-renderVariable:disabled {
-  cursor: default;
-}
-
-.jp-DebuggerVariables-branch li > .jp-DebuggerVariables-branch {
-  margin-left: 12px;
+  flex: 1 1 auto;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .jp-DebuggerVariables-grid {