Allow to select the path in debugger source component (#16246)

Co-authored-by: Jeremy Tuloup <jeremy.tuloup@gmail.com>

packages/debugger/src/panels/sources/index.tsx

@@ -43,7 +43,7 @@ export class Sources extends PanelWithToolbar {
       })
     );
     const sourcePath = ReactWidget.create(
-      <SourcePathComponent model={model} />
+      <SourcePathComponent model={model} trans={trans} />
     );
 
     this.toolbar.addItem('sourcePath', sourcePath);

packages/debugger/src/panels/sources/sourcepath.tsx

@@ -2,6 +2,7 @@
 // Distributed under the terms of the Modified BSD License.
 
 import { UseSignal } from '@jupyterlab/ui-components';
+import { TranslationBundle } from '@jupyterlab/translation';
 import React from 'react';
 import { IDebugger } from '../../tokens';
 
@@ -12,15 +13,22 @@ import { IDebugger } from '../../tokens';
  * @param props.model The model for the sources.
  */
 export const SourcePathComponent = ({
-  model
+  model,
+  trans
 }: {
   model: IDebugger.Model.ISources;
+  trans: TranslationBundle;
 }): JSX.Element => {
   return (
     <UseSignal signal={model.currentSourceChanged} initialSender={model}>
       {(model): JSX.Element => (
         <span
-          onClick={(): void => model?.open()}
+          onClick={(event): void => {
+            if (event.ctrlKey) {
+              model?.open();
+            }
+          }}
+          title={trans.__('Ctrl + click to open in the Main Area')}
           className="jp-DebuggerSources-header-path"
         >
           {model?.currentSource?.path ?? ''}

packages/debugger/style/sources.css

@@ -28,4 +28,5 @@
   white-space: nowrap;
   font-size: var(--jp-ui-font-size0);
   color: var(--jp-ui-font-color1);
+  user-select: text;
 }