Port run by line stop becoming interrupt to the release branch (#12271)

* Run by line changes for release (#12256)

* Run by line changes for release

* Translate step tooltip and make sure F10 works outside of already debugging

* Update changelog

Author: rchiodo

CHANGELOG.md

@@ -94,6 +94,8 @@
    ([#12193](https://github.com/Microsoft/vscode-python/issues/12193))
 1. Fix debugger continue event to actually change a cell.
    ([#12155](https://github.com/Microsoft/vscode-python/issues/12155))
+1. Make stop during run by line interrupt the kernel.
+   ([#12249](https://github.com/Microsoft/vscode-python/issues/12249))
 
 ### Code Health
 

package.nls.json

@@ -506,10 +506,11 @@
     "StartPage.helloWorld": "Hello world",
     "StartPage.sampleNotebook": "Welcome_To_VSCode_Notebooks.ipynb",
     "DataScience.libraryRequiredToLaunchJupyterKernelNotInstalledInterpreter": "{0} requires {1} to be installed.",
-    "DataScience.runByLine": "Run by line",
-    "DataScience.continueRunByLine": "Stop",
+    "DataScience.runByLine": "Run by line (F10)",
+    "DataScience.stopRunByLine": "Stop",
     "DataScience.couldNotInstallLibrary": "Could not install {0}. If pip is not available, please use the package manager of your choice to manually install this library into your Python environment.",
     "DataScience.rawKernelSessionFailed": "Unable to start session for kernel {0}. Select another kernel to launch with.",
     "DataScience.rawKernelConnectingSession": "Connecting to kernel.",
-    "DataScience.reloadCustomEditor": "Please reload VS Code to use the custom editor API"
+    "DataScience.reloadCustomEditor": "Please reload VS Code to use the custom editor API",
+    "DataScience.step": "Run next line (F10)"
 }

src/client/common/utils/localize.ts

@@ -937,8 +937,9 @@ export namespace DataScience {
     );
 
     export const kernelStarted = localize('DataScience.kernelStarted', 'Started kernel {0}.');
-    export const runByLine = localize('DataScience.runByLine', 'Run by line');
-    export const continueRunByLine = localize('DataScience.continueRunByLine', 'Stop');
+    export const runByLine = localize('DataScience.runByLine', 'Run by line (F10)');
+    export const step = localize('DataScience.step', 'Run next line (F10)');
+    export const stopRunByLine = localize('DataScience.stopRunByLine', 'Stop');
     export const rawKernelSessionFailed = localize(
         'DataScience.rawKernelSessionFailed',
         'Unable to start session for kernel {0}. Select another kernel to launch with.'

src/datascience-ui/native-editor/nativeCell.tsx

@@ -31,9 +31,6 @@ import { IMonacoModelContentChangeEvent } from '../react-common/monacoHelpers';
 import { AddCellLine } from './addCellLine';
 import { actionCreators } from './redux/actions';
 
-import { CodIcon } from '../react-common/codicon/codicon';
-import '../react-common/codicon/codicon.css';
-
 namespace CssConstants {
     export const CellOutputWrapper = 'cell-output-wrapper';
     export const CellOutputWrapperClass = `.${CellOutputWrapper}`;
@@ -577,8 +574,8 @@ export class NativeCell extends React.Component<INativeCellProps> {
             this.props.focusCell(cellId);
             this.props.runByLine(cellId);
         };
-        const cont = () => {
-            this.props.continue(cellId);
+        const stop = () => {
+            this.props.interruptKernel();
         };
         const step = () => {
             this.props.focusCell(cellId);
@@ -616,18 +613,19 @@ export class NativeCell extends React.Component<INativeCellProps> {
                 <div className={toolbarClassName}>
                     <div className="native-editor-celltoolbar-middle">
                         <ImageButton
+                            className={'image-button-empty'} // Just takes up space for now
                             baseTheme={this.props.baseTheme}
-                            onClick={cont}
-                            tooltip={getLocString('DataScience.continueRunByLine', 'Stop')}
+                            onClick={runCell}
+                            tooltip={getLocString('DataScience.runCell', 'Run cell')}
                             hidden={this.isMarkdownCell()}
-                            disabled={this.props.busy || this.props.runningByLine === DebugState.Run}
+                            disabled={true}
                         >
-                            <div className="codicon codicon-button">{CodIcon.Stop}</div>
+                            <Image baseTheme={this.props.baseTheme} class="image-button-image" image={ImageName.Run} />
                         </ImageButton>
                         <ImageButton
                             baseTheme={this.props.baseTheme}
                             onClick={step}
-                            tooltip={getLocString('DataScience.step', 'Run next line')}
+                            tooltip={getLocString('DataScience.step', 'Run next line (F10)')}
                             hidden={this.isMarkdownCell()}
                             disabled={this.props.busy || this.props.runningByLine === DebugState.Run}
                         >
@@ -637,6 +635,19 @@ export class NativeCell extends React.Component<INativeCellProps> {
                                 image={ImageName.RunByLine}
                             />
                         </ImageButton>
+                        <ImageButton
+                            baseTheme={this.props.baseTheme}
+                            onClick={stop}
+                            tooltip={getLocString('DataScience.stopRunByLine', 'Stop')}
+                            hidden={this.isMarkdownCell()}
+                            disabled={false}
+                        >
+                            <Image
+                                baseTheme={this.props.baseTheme}
+                                class="image-button-image"
+                                image={ImageName.Interrupt}
+                            />
+                        </ImageButton>
                     </div>
                     <div className="native-editor-celltoolbar-divider" />
                 </div>

src/datascience-ui/native-editor/nativeEditor.tsx

@@ -237,6 +237,12 @@ ${buildSettingsCss(this.props.settings)}`}</style>
                         this.props.step(debuggingCell.cell.id);
                     }
                     event.stopPropagation();
+                } else {
+                    // Otherwise if not debugging, run by line the current focused cell
+                    const focusedCell = getSelectedAndFocusedInfo(this.props).focusedCellId;
+                    if (focusedCell) {
+                        this.props.runByLine(focusedCell);
+                    }
                 }
                 break;
             case 'F5':

src/datascience-ui/react-common/imageButton.css

@@ -16,6 +16,10 @@
     cursor: hand;
 }
 
+.image-button-empty {
+    visibility: hidden;
+}
+
 .image-button-inner-disabled-filter {
     opacity: 0.5;
 }