Fix command prompt to look like Spyder (#5744)

* Fix command prompt to look like Spyder

* Add news entry

Author: rchiodo

news/2 Fixes/5729.md

@@ -0,0 +1 @@
+Adjust input box prompt to look more an IPython console prompt.

package-lock.json

@@ -290,6 +290,7 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
         const errorBackgroundColor = getSettings().errorBackgroundColor;
         const actualErrorBackgroundColor = errorBackgroundColor ? errorBackgroundColor : '#FFFFFF';
         const maxTextSize = maxOutputSize && maxOutputSize < 10000 && maxOutputSize > 0 ? maxOutputSize : undefined;
+        const executionCount = this.getInputExecutionCount(this.state.cellVMs);
 
         return (
             <div className='edit-panel'>
@@ -309,6 +310,7 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
                         ref={this.saveEditCellRef}
                         gotoCode={noop}
                         delete={noop}
+                        editExecutionCount={executionCount}
                         onCodeCreated={this.editableCodeCreated}
                         onCodeChange={this.codeChange}
                         monacoTheme={this.state.monacoTheme}

src/datascience-ui/history-react/MainPanel.tsx

@@ -21,7 +21,6 @@ import './cell.css';
 import { CellButton } from './cellButton';
 import { Code } from './code';
 import { CollapseButton } from './collapseButton';
-import { CommandPrompt } from './commandPrompt';
 import { ExecutionCount } from './executionCount';
 import { Image, ImageName } from './image';
 import { InputHistory } from './inputHistory';
@@ -41,6 +40,7 @@ interface ICellProps {
     errorBackgroundColor: string;
     monacoTheme: string | undefined;
     editorOptions: monacoEditor.editor.IEditorOptions;
+    editExecutionCount: number;
     gotoCode(): void;
     delete(): void;
     submitNewCode(code: string): void;
@@ -187,7 +187,7 @@ export class Cell extends React.Component<ICellProps> {
             return this.props.cellVM.editable ?
                 (
                     <div className='controls-div'>
-                        <CommandPrompt />
+                        <ExecutionCount isBusy={busy} count={this.props.editExecutionCount.toString()} visible={this.isCodeCell()} />
                     </div>
                 ) : (
                     <div className='controls-div'>

src/datascience-ui/history-react/cell.tsx

@@ -3,6 +3,7 @@
     position: relative;
     width:100%;
     margin-bottom:16px;
+    top: -2px; /* Account for spacing removed from the monaco editor */
 }
 
 .code-area-editable {

src/datascience-ui/history-react/code.css

@@ -75,6 +75,7 @@ export class ContentPanel extends React.Component<IContentPanelProps> {
                     baseTheme={baseTheme}
                     codeTheme={this.props.codeTheme}
                     showWatermark={false}
+                    editExecutionCount={0}
                     errorBackgroundColor={actualErrorBackgroundColor}
                     gotoCode={() => this.props.gotoCellCode(index)}
                     delete={() => this.props.deleteCell(index)}

src/datascience-ui/history-react/contentPanel.tsx

@@ -3,6 +3,7 @@
     font-weight: bold;
     display:flex;
     color: var(--code-comment-color);
+    font-family: var(--code-font-family);
  }
 
  .execution-count-busy-outer {