Cherry pick fix input bugs into release (#4121)

* Fix a number of issues with the input prompt (#4108) * Fix focus problems * Switch to a grid layout to get more consistent results * Add news entries * Fix hygiene issues * Fix 4088 - sys info not showing up * Update changelog
microsoft · Jan 23, 2019 · 6d7c012 · 6d7c012
1 parent 6aed5a1
commit 6d7c012
Show file tree

Hide file tree

Showing 16 changed files with 104 additions and 35 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -130,7 +130,7 @@ part of!
    ([#3767](https://github.com/Microsoft/vscode-python/issues/3767))
 1. Address problem with Python Interactive icons not working in insider's build. VS Code is more restrictive on what files can load in a webview.
    ([#3775](https://github.com/Microsoft/vscode-python/issues/3775))
-1. Fix output so that it wraps '<' entries in <xmp> to allow html like tags to be output.
+1. Fix output so that it wraps '<' entries in &lt;xmp&gt; to allow html like tags to be output.
    ([#3824](https://github.com/Microsoft/vscode-python/issues/3824))
 1. Keep the Jupyter remote server URI input box open so you can copy and paste into it easier
    ([#3856](https://github.com/Microsoft/vscode-python/issues/3856))
@@ -154,6 +154,14 @@ part of!
 1. Fix a type in generated header comment when importing a notebook: `DataSciece` --> `DataScience`.
    (thanks [sunt05](https://github.com/sunt05))
    ([#4048](https://github.com/Microsoft/vscode-python/issues/4048))
+1. Allow clicking anywhere in an input cell to give focus to the input box for the Python Interactive window
+   ([#4076](https://github.com/Microsoft/vscode-python/issues/4076))
+1. Fix problem with double scrollbars when typing in the input window. Make code wrap instead.
+   ([#4084](https://github.com/Microsoft/vscode-python/issues/4084))
+1. Remove execution count from the prompt cell.
+   ([#4086](https://github.com/Microsoft/vscode-python/issues/4086))
+1. Make sure showing a plain Python Interactive window lists out the sys info
+   ([#4088](https://github.com/Microsoft/vscode-python/issues/4088))
 
 ### Code Health
 

diff --git a/news/2 Fixes/4076.md b/news/2 Fixes/4076.md
@@ -0,0 +1 @@
+Allow clicking anywhere in an input cell to give focus to the input box for the Python Interactive window
diff --git a/news/2 Fixes/4084.md b/news/2 Fixes/4084.md
@@ -0,0 +1 @@
+Fix problem with double scrollbars when typing in the input window. Make code wrap instead.
diff --git a/news/2 Fixes/4086.md b/news/2 Fixes/4086.md
@@ -0,0 +1 @@
+Remove execution count from the prompt cell.
diff --git a/news/2 Fixes/4088.md b/news/2 Fixes/4088.md
@@ -0,0 +1 @@
+Make sure showing a plain Python Interactive window lists out the sys info
diff --git a/src/client/datascience/history.ts b/src/client/datascience/history.ts
@@ -101,6 +101,9 @@ export class History implements IWebPanelMessageListener, IHistory {
             // Make sure we're loaded first
             await this.loadPromise;
 
+            // Make sure we have at least the initial sys info
+            await this.addSysInfo(SysInfoReason.Start);
+
             // Then show our web panel.
             if (this.webPanel && this.jupyterServer) {
                 await this.webPanel.show();

diff --git a/src/datascience-ui/history-react/MainPanel.tsx b/src/datascience-ui/history-react/MainPanel.tsx
@@ -95,7 +95,11 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
                 </MenuBar>
                 <div className='top-spacing'/>
                 {progressBar}
-                {this.renderCells()}
+                <div className='cell-table'>
+                    <div className='cell-table-body'>
+                        {this.renderCells()}
+                    </div>
+                </div>
                 <div ref={this.updateBottom}/>
             </div>
         );

diff --git a/src/datascience-ui/history-react/cell.css b/src/datascience-ui/history-react/cell.css
@@ -1,5 +1,5 @@
 .cell-wrapper {
-    margin: 10px;
+    margin: 0px;
     padding: 2px;
     display: block;
     border-bottom-color: var(--vscode-editorGroupHeader-tabsBackground);
@@ -14,19 +14,28 @@
 }
 
 .cell-outer {
-    display:flex;
-    flex-direction: row;
-    justify-content: left;
+    display:grid;
+    grid-template-columns: auto 1fr;
+    grid-column-gap: 3px;
+    width: 100%;
+}
+
+.cell-outer-editable {
+    display:grid;
+    grid-template-columns: auto 1fr;
+    grid-column-gap: 3px;
     width: 100%;
 }
 
 .content-div {
-    float: left;
+    grid-column: 2;
     width: 100%;
 }
 
 .controls-div {
-    float: left;
+    grid-column: 1;
+    grid-template-columns: auto;
+    display: grid;
 }
 
 .hide {
@@ -98,11 +107,6 @@
   margin-top: 1em;
 }
 
-.controls-flex {
-    display:flex;
-    min-width: 45px;
-}
-
 .center-img {
     display: block;
     margin: 0 auto;

diff --git a/src/datascience-ui/history-react/cell.tsx b/src/datascience-ui/history-react/cell.tsx
@@ -51,8 +51,11 @@ export interface ICellViewModel {
 }
 
 export class Cell extends React.Component<ICellProps> {
+    private code: Code | undefined;
+
     constructor(prop: ICellProps) {
         super(prop);
+        this.state = {focused: this.props.autoFocus};
     }
 
     public render() {
@@ -106,11 +109,12 @@ export class Cell extends React.Component<ICellProps> {
         const results: JSX.Element[] = this.renderResults();
         const allowsPlainInput = getSettings().showCellInputCode || this.props.cellVM.directInput || this.props.cellVM.editable;
         const shouldRender = allowsPlainInput || (results && results.length > 0);
+        const cellOuterClass = this.props.cellVM.editable ? 'cell-outer-editable' : 'cell-outer';
 
         // Only render if we are allowed to.
         if (shouldRender) {
             return (
-                <div className='cell-wrapper'>
+                <div className='cell-wrapper' role='row' onClick={this.onMouseClick}>
                     <MenuBar baseTheme={this.props.baseTheme}>
                         <CellButton baseTheme={this.props.baseTheme} onClick={this.props.delete} tooltip={this.getDeleteString()} hidden={this.props.cellVM.editable}>
                             <Image baseTheme={this.props.baseTheme} class='cell-button-image' image={ImageName.Cancel} />
@@ -119,10 +123,8 @@ export class Cell extends React.Component<ICellProps> {
                             <Image baseTheme={this.props.baseTheme} class='cell-button-image' image={ImageName.GoToSourceCode} />
                         </CellButton>
                     </MenuBar>
-                    <div className='cell-outer'>
-                        <div className='controls-div'>
-                            {this.renderControls()}
-                        </div>
+                    <div className={cellOuterClass}>
+                        {this.renderControls()}
                         <div className='content-div'>
                             <div className='cell-result-container'>
                                 {this.renderInputs()}
@@ -138,6 +140,13 @@ export class Cell extends React.Component<ICellProps> {
         return null;
     }
 
+    private onMouseClick = (ev: React.MouseEvent<HTMLDivElement>) => {
+        // When we receive a click, tell the code element.
+        if (this.code) {
+            this.code.onParentClick(ev);
+        }
+    }
+
     private showInputs = () : boolean => {
         return (this.isCodeCell() && (this.props.cellVM.inputBlockShow || this.props.cellVM.editable));
     }
@@ -155,20 +164,32 @@ export class Cell extends React.Component<ICellProps> {
         const collapseVisible = (this.props.cellVM.inputBlockCollapseNeeded && this.props.cellVM.inputBlockShow && !this.props.cellVM.editable);
         const executionCount = this.props.cellVM && this.props.cellVM.cell && this.props.cellVM.cell.data && this.props.cellVM.cell.data.execution_count ?
             this.props.cellVM.cell.data.execution_count.toString() : '0';
-        const afterExecution = this.props.cellVM.editable ?
-            <CommandPrompt /> :
-            <CollapseButton theme={this.props.baseTheme}
+
+        // Only code cells have controls. Markdown should be empty
+        if (this.isCodeCell()) {
+
+            return this.props.cellVM.editable ?
+                (
+                    <div className='controls-div'>
+                        <CommandPrompt />
+                    </div>
+                ) : (
+                    <div className='controls-div'>
+                        <ExecutionCount isBusy={busy} count={executionCount} visible={this.isCodeCell()} />
+                        <CollapseButton theme={this.props.baseTheme}
                             visible={collapseVisible}
                             open={this.props.cellVM.inputBlockOpen}
                             onClick={this.toggleInputBlock}
-                            tooltip={getLocString('DataScience.collapseInputTooltip', 'Collapse input block')}/>;
-
-        return (
-            <div className='controls-flex'>
-                <ExecutionCount isBusy={busy} count={executionCount} visible={this.isCodeCell()}/>
-                {afterExecution}
-            </div>
-        );
+                            tooltip={getLocString('DataScience.collapseInputTooltip', 'Collapse input block')} />
+                    </div>
+                );
+        } else {
+            return null;
+        }
+    }
+
+    private updateCodeRef = (ref: Code) => {
+        this.code = ref;
     }
 
     private renderInputs = () => {
@@ -185,6 +206,7 @@ export class Cell extends React.Component<ICellProps> {
                         readOnly={!this.props.cellVM.editable}
                         onSubmit={this.props.submitNewCode}
                         onChangeLineCount={this.onChangeLineCount}
+                        ref={this.updateCodeRef}
                         />
                 </div>
             );

diff --git a/src/datascience-ui/history-react/code.tsx b/src/datascience-ui/history-react/code.tsx
@@ -84,7 +84,8 @@ export class Code extends React.Component<ICodeProps, ICodeState> {
                             theme: `${this.props.codeTheme} default`,
                             mode: 'python',
                             cursorBlinkRate: -1,
-                            readOnly: readOnly ? 'nocursor' : false
+                            readOnly: readOnly ? 'nocursor' : false,
+                            lineWrapping: true
                         }
                     }
                     ref={this.updateCodeMirror}
@@ -95,6 +96,14 @@ export class Code extends React.Component<ICodeProps, ICodeState> {
         );
     }
 
+    public onParentClick(ev: React.MouseEvent<HTMLDivElement>) {
+        const readOnly = this.props.testMode || this.props.readOnly;
+        if (this.codeMirror && !readOnly) {
+            ev.stopPropagation();
+            this.codeMirror.focus();
+        }
+    }
+
     private onCursorActivity = (codeMirror: CodeMirror.Editor) => {
         // Update left/top/char for cursor
         if (codeMirror) {

diff --git a/src/datascience-ui/history-react/collapseButton.css b/src/datascience-ui/history-react/collapseButton.css
@@ -12,7 +12,10 @@
 }
 
 .collapse-input {
-    margin-left:50%;
+    grid-column: 2;
+    padding: 1px;
+    margin-top: 2px;
+    height: min-content;
 }
 
 .remove-style {

diff --git a/src/datascience-ui/history-react/collapseButton.tsx b/src/datascience-ui/history-react/collapseButton.tsx
@@ -22,13 +22,12 @@ export class CollapseButton extends React.Component<ICollapseButtonProps> {
         const collapseInputPolygonClassNames = `collapse-input-svg ${this.props.open ? ' collapse-input-svg-rotate' : ''} collapse-input-svg-${this.props.theme}`;
         const collapseInputClassNames = `collapse-input remove-style ${this.props.visible ? '' : ' hide'}`;
         return (
-            <div >
                 <button className={collapseInputClassNames} onClick={this.props.onClick}>
                     <svg version='1.1' baseProfile='full' width='8px' height='11px'>
                         <polygon points='0,0 0,10 5,5' className={collapseInputPolygonClassNames} fill='black' />
                     </svg>
                 </button>
-            </div>);
+            );
     }
 
 }
diff --git a/src/datascience-ui/history-react/cursor.css b/src/datascience-ui/history-react/cursor.css
@@ -2,10 +2,11 @@
     position: absolute;
     z-index:1005;
     font-family: var(--code-font-family);
+    pointer-events: none;
 }
 
 .cursor-block {
-    border: 1px solid var(--vscode-editor-foreground);
+    border: .05px solid var(--vscode-editor-foreground);
     min-width: 5px;
     margin-left: -1px;
     margin-right: -1px;

diff --git a/src/datascience-ui/history-react/executionCount.css b/src/datascience-ui/history-react/executionCount.css
@@ -1,9 +1,12 @@
 .execution-count {
+    grid-column: 1;
     font-weight: bold;
+    display:flex;
     color: var(--code-comment-color);
  }
 
  .execution-count-busy-outer {
+    grid-column: 1;
     font-weight: bold;
     color: var(--code-comment-color);
     display:flex;

diff --git a/src/datascience-ui/history-react/mainPanel.css b/src/datascience-ui/history-react/mainPanel.css
@@ -1,3 +1,12 @@
 .top-spacing {
     margin-top : 24px;
 }
+
+.cell-table {
+    display: table;
+    width: 100%;
+}
+
+.cell-table-body {
+    display: table-row-group;
+}
diff --git a/src/datascience-ui/history-react/mainPanelState.ts b/src/datascience-ui/history-react/mainPanelState.ts
@@ -121,7 +121,7 @@ function generateCellData() : (nbformat.ICodeCell | nbformat.IMarkdownCell | nbf
         },
         {
             cell_type: 'code',
-            execution_count: 4,
+            execution_count: 467,
             metadata: {
                 slideshow: {
                     slide_type: '-'