Skip to content

Commit 6d7c012

Browse files
rchiodorchiodo
authored
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
1 parent 6aed5a1 commit 6d7c012

16 files changed

+104
-35
lines changed

‎CHANGELOG.md

+9-1
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ part of!
130130
([#3767](https://github.com/Microsoft/vscode-python/issues/3767))
131131
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.
132132
([#3775](https://github.com/Microsoft/vscode-python/issues/3775))
133-
1. Fix output so that it wraps '<' entries in <xmp> to allow html like tags to be output.
133+
1. Fix output so that it wraps '<' entries in &lt;xmp&gt; to allow html like tags to be output.
134134
([#3824](https://github.com/Microsoft/vscode-python/issues/3824))
135135
1. Keep the Jupyter remote server URI input box open so you can copy and paste into it easier
136136
([#3856](https://github.com/Microsoft/vscode-python/issues/3856))
@@ -154,6 +154,14 @@ part of!
154154
1. Fix a type in generated header comment when importing a notebook: `DataSciece` --> `DataScience`.
155155
(thanks [sunt05](https://github.com/sunt05))
156156
([#4048](https://github.com/Microsoft/vscode-python/issues/4048))
157+
1. Allow clicking anywhere in an input cell to give focus to the input box for the Python Interactive window
158+
([#4076](https://github.com/Microsoft/vscode-python/issues/4076))
159+
1. Fix problem with double scrollbars when typing in the input window. Make code wrap instead.
160+
([#4084](https://github.com/Microsoft/vscode-python/issues/4084))
161+
1. Remove execution count from the prompt cell.
162+
([#4086](https://github.com/Microsoft/vscode-python/issues/4086))
163+
1. Make sure showing a plain Python Interactive window lists out the sys info
164+
([#4088](https://github.com/Microsoft/vscode-python/issues/4088))
157165

158166
### Code Health
159167

‎news/2 Fixes/4076.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Allow clicking anywhere in an input cell to give focus to the input box for the Python Interactive window

‎news/2 Fixes/4084.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Fix problem with double scrollbars when typing in the input window. Make code wrap instead.

‎news/2 Fixes/4086.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Remove execution count from the prompt cell.

‎news/2 Fixes/4088.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Make sure showing a plain Python Interactive window lists out the sys info

‎src/client/datascience/history.ts

+3
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,9 @@ export class History implements IWebPanelMessageListener, IHistory {
101101
// Make sure we're loaded first
102102
await this.loadPromise;
103103

104+
// Make sure we have at least the initial sys info
105+
await this.addSysInfo(SysInfoReason.Start);
106+
104107
// Then show our web panel.
105108
if (this.webPanel && this.jupyterServer) {
106109
await this.webPanel.show();

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

+5-1
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,11 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
9595
</MenuBar>
9696
<div className='top-spacing'/>
9797
{progressBar}
98-
{this.renderCells()}
98+
<div className='cell-table'>
99+
<div className='cell-table-body'>
100+
{this.renderCells()}
101+
</div>
102+
</div>
99103
<div ref={this.updateBottom}/>
100104
</div>
101105
);

‎src/datascience-ui/history-react/cell.css

+15-11
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.cell-wrapper {
2-
margin: 10px;
2+
margin: 0px;
33
padding: 2px;
44
display: block;
55
border-bottom-color: var(--vscode-editorGroupHeader-tabsBackground);
@@ -14,19 +14,28 @@
1414
}
1515

1616
.cell-outer {
17-
display:flex;
18-
flex-direction: row;
19-
justify-content: left;
17+
display:grid;
18+
grid-template-columns: auto 1fr;
19+
grid-column-gap: 3px;
20+
width: 100%;
21+
}
22+
23+
.cell-outer-editable {
24+
display:grid;
25+
grid-template-columns: auto 1fr;
26+
grid-column-gap: 3px;
2027
width: 100%;
2128
}
2229

2330
.content-div {
24-
float: left;
31+
grid-column: 2;
2532
width: 100%;
2633
}
2734

2835
.controls-div {
29-
float: left;
36+
grid-column: 1;
37+
grid-template-columns: auto;
38+
display: grid;
3039
}
3140

3241
.hide {
@@ -98,11 +107,6 @@
98107
margin-top: 1em;
99108
}
100109

101-
.controls-flex {
102-
display:flex;
103-
min-width: 45px;
104-
}
105-
106110
.center-img {
107111
display: block;
108112
margin: 0 auto;

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

+38-16
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,11 @@ export interface ICellViewModel {
5151
}
5252

5353
export class Cell extends React.Component<ICellProps> {
54+
private code: Code | undefined;
55+
5456
constructor(prop: ICellProps) {
5557
super(prop);
58+
this.state = {focused: this.props.autoFocus};
5659
}
5760

5861
public render() {
@@ -106,11 +109,12 @@ export class Cell extends React.Component<ICellProps> {
106109
const results: JSX.Element[] = this.renderResults();
107110
const allowsPlainInput = getSettings().showCellInputCode || this.props.cellVM.directInput || this.props.cellVM.editable;
108111
const shouldRender = allowsPlainInput || (results && results.length > 0);
112+
const cellOuterClass = this.props.cellVM.editable ? 'cell-outer-editable' : 'cell-outer';
109113

110114
// Only render if we are allowed to.
111115
if (shouldRender) {
112116
return (
113-
<div className='cell-wrapper'>
117+
<div className='cell-wrapper' role='row' onClick={this.onMouseClick}>
114118
<MenuBar baseTheme={this.props.baseTheme}>
115119
<CellButton baseTheme={this.props.baseTheme} onClick={this.props.delete} tooltip={this.getDeleteString()} hidden={this.props.cellVM.editable}>
116120
<Image baseTheme={this.props.baseTheme} class='cell-button-image' image={ImageName.Cancel} />
@@ -119,10 +123,8 @@ export class Cell extends React.Component<ICellProps> {
119123
<Image baseTheme={this.props.baseTheme} class='cell-button-image' image={ImageName.GoToSourceCode} />
120124
</CellButton>
121125
</MenuBar>
122-
<div className='cell-outer'>
123-
<div className='controls-div'>
124-
{this.renderControls()}
125-
</div>
126+
<div className={cellOuterClass}>
127+
{this.renderControls()}
126128
<div className='content-div'>
127129
<div className='cell-result-container'>
128130
{this.renderInputs()}
@@ -138,6 +140,13 @@ export class Cell extends React.Component<ICellProps> {
138140
return null;
139141
}
140142

143+
private onMouseClick = (ev: React.MouseEvent<HTMLDivElement>) => {
144+
// When we receive a click, tell the code element.
145+
if (this.code) {
146+
this.code.onParentClick(ev);
147+
}
148+
}
149+
141150
private showInputs = () : boolean => {
142151
return (this.isCodeCell() && (this.props.cellVM.inputBlockShow || this.props.cellVM.editable));
143152
}
@@ -155,20 +164,32 @@ export class Cell extends React.Component<ICellProps> {
155164
const collapseVisible = (this.props.cellVM.inputBlockCollapseNeeded && this.props.cellVM.inputBlockShow && !this.props.cellVM.editable);
156165
const executionCount = this.props.cellVM && this.props.cellVM.cell && this.props.cellVM.cell.data && this.props.cellVM.cell.data.execution_count ?
157166
this.props.cellVM.cell.data.execution_count.toString() : '0';
158-
const afterExecution = this.props.cellVM.editable ?
159-
<CommandPrompt /> :
160-
<CollapseButton theme={this.props.baseTheme}
167+
168+
// Only code cells have controls. Markdown should be empty
169+
if (this.isCodeCell()) {
170+
171+
return this.props.cellVM.editable ?
172+
(
173+
<div className='controls-div'>
174+
<CommandPrompt />
175+
</div>
176+
) : (
177+
<div className='controls-div'>
178+
<ExecutionCount isBusy={busy} count={executionCount} visible={this.isCodeCell()} />
179+
<CollapseButton theme={this.props.baseTheme}
161180
visible={collapseVisible}
162181
open={this.props.cellVM.inputBlockOpen}
163182
onClick={this.toggleInputBlock}
164-
tooltip={getLocString('DataScience.collapseInputTooltip', 'Collapse input block')}/>;
165-
166-
return (
167-
<div className='controls-flex'>
168-
<ExecutionCount isBusy={busy} count={executionCount} visible={this.isCodeCell()}/>
169-
{afterExecution}
170-
</div>
171-
);
183+
tooltip={getLocString('DataScience.collapseInputTooltip', 'Collapse input block')} />
184+
</div>
185+
);
186+
} else {
187+
return null;
188+
}
189+
}
190+
191+
private updateCodeRef = (ref: Code) => {
192+
this.code = ref;
172193
}
173194

174195
private renderInputs = () => {
@@ -185,6 +206,7 @@ export class Cell extends React.Component<ICellProps> {
185206
readOnly={!this.props.cellVM.editable}
186207
onSubmit={this.props.submitNewCode}
187208
onChangeLineCount={this.onChangeLineCount}
209+
ref={this.updateCodeRef}
188210
/>
189211
</div>
190212
);

‎src/datascience-ui/history-react/code.tsx

+10-1
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,8 @@ export class Code extends React.Component<ICodeProps, ICodeState> {
8484
theme: `${this.props.codeTheme} default`,
8585
mode: 'python',
8686
cursorBlinkRate: -1,
87-
readOnly: readOnly ? 'nocursor' : false
87+
readOnly: readOnly ? 'nocursor' : false,
88+
lineWrapping: true
8889
}
8990
}
9091
ref={this.updateCodeMirror}
@@ -95,6 +96,14 @@ export class Code extends React.Component<ICodeProps, ICodeState> {
9596
);
9697
}
9798

99+
public onParentClick(ev: React.MouseEvent<HTMLDivElement>) {
100+
const readOnly = this.props.testMode || this.props.readOnly;
101+
if (this.codeMirror && !readOnly) {
102+
ev.stopPropagation();
103+
this.codeMirror.focus();
104+
}
105+
}
106+
98107
private onCursorActivity = (codeMirror: CodeMirror.Editor) => {
99108
// Update left/top/char for cursor
100109
if (codeMirror) {

‎src/datascience-ui/history-react/collapseButton.css

+4-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,10 @@
1212
}
1313

1414
.collapse-input {
15-
margin-left:50%;
15+
grid-column: 2;
16+
padding: 1px;
17+
margin-top: 2px;
18+
height: min-content;
1619
}
1720

1821
.remove-style {

‎src/datascience-ui/history-react/collapseButton.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,12 @@ export class CollapseButton extends React.Component<ICollapseButtonProps> {
2222
const collapseInputPolygonClassNames = `collapse-input-svg ${this.props.open ? ' collapse-input-svg-rotate' : ''} collapse-input-svg-${this.props.theme}`;
2323
const collapseInputClassNames = `collapse-input remove-style ${this.props.visible ? '' : ' hide'}`;
2424
return (
25-
<div >
2625
<button className={collapseInputClassNames} onClick={this.props.onClick}>
2726
<svg version='1.1' baseProfile='full' width='8px' height='11px'>
2827
<polygon points='0,0 0,10 5,5' className={collapseInputPolygonClassNames} fill='black' />
2928
</svg>
3029
</button>
31-
</div>);
30+
);
3231
}
3332

3433
}

‎src/datascience-ui/history-react/cursor.css

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@
22
position: absolute;
33
z-index:1005;
44
font-family: var(--code-font-family);
5+
pointer-events: none;
56
}
67

78
.cursor-block {
8-
border: 1px solid var(--vscode-editor-foreground);
9+
border: .05px solid var(--vscode-editor-foreground);
910
min-width: 5px;
1011
margin-left: -1px;
1112
margin-right: -1px;

‎src/datascience-ui/history-react/executionCount.css

+3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
.execution-count {
2+
grid-column: 1;
23
font-weight: bold;
4+
display:flex;
35
color: var(--code-comment-color);
46
}
57

68
.execution-count-busy-outer {
9+
grid-column: 1;
710
font-weight: bold;
811
color: var(--code-comment-color);
912
display:flex;

‎src/datascience-ui/history-react/mainPanel.css

+9
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
11
.top-spacing {
22
margin-top : 24px;
33
}
4+
5+
.cell-table {
6+
display: table;
7+
width: 100%;
8+
}
9+
10+
.cell-table-body {
11+
display: table-row-group;
12+
}

‎src/datascience-ui/history-react/mainPanelState.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ function generateCellData() : (nbformat.ICodeCell | nbformat.IMarkdownCell | nbf
121121
},
122122
{
123123
cell_type: 'code',
124-
execution_count: 4,
124+
execution_count: 467,
125125
metadata: {
126126
slideshow: {
127127
slide_type: '-'

0 commit comments

Comments
 (0)