Make input box more visible. (microsoft#6605)

* Make input box more visible. * Update text for watermark * Fix color if input box color is turned off * Update background on changes

Author: rchiodo

news/1 Enhancements/6381.md

@@ -0,0 +1 @@
+Make the input box more visible to new users.

package-lock.json

@@ -1412,6 +1412,12 @@
  "description": "Limit the amount of text in Python Interactive cell text output to this value. 0 to allow any amount of characters.",
  "scope": "resource"
  },
+ "python.dataScience.colorizeInputBox": {
+ "type": "boolean",
+ "default": true,
+ "description": "Whether or not to use the theme's peek color as the background for the input box.",
+ "scope": "resource"
+ },
  "python.dataScience.stopOnError": {
  "type": "boolean",
  "default": true,

package.json

@@ -148,7 +148,7 @@
  "DataScience.pythonRestartHeader": "Restarted kernel:",
  "DataScience.pythonNewHeader": "Started new kernel:",
  "DataScience.executingCodeFailure": "Executing code failed : {0}",
- "DataScience.inputWatermark": "Shift-enter to run",
+ "DataScience.inputWatermark": "Type code here and press shift-enter to run",
  "DataScience.deleteButtonTooltip": "Remove cell",
  "DataScience.gotoCodeButtonTooltip": "Go to code",
  "DataScience.copyBackToSourceButtonTooltip": "Paste code into file",

package.nls.json

@@ -330,6 +330,7 @@ export interface IDataScienceSettings {
  magicCommandsAsComments?: boolean;
  stopOnError?: boolean;
  remoteDebuggerPort?: number;
+ colorizeInputBox?: boolean;
 }
 
 export const IConfigurationService = Symbol('IConfigurationService');

src/client/common/types.ts

@@ -181,7 +181,7 @@ export namespace DataScience {
  export const pythonInterruptFailedHeader = localize('DataScience.pythonInterruptFailedHeader', 'Keyboard interrupt crashed the kernel. Kernel restarted.');
  export const sysInfoURILabel = localize('DataScience.sysInfoURILabel', 'Jupyter Server URI: ');
  export const executingCodeFailure = localize('DataScience.executingCodeFailure', 'Executing code failed : {0}');
- export const inputWatermark = localize('DataScience.inputWatermark', 'Shift-enter to run');
+ export const inputWatermark = localize('DataScience.inputWatermark', 'Type code here and press shift-enter to run');
  export const liveShareConnectFailure = localize('DataScience.liveShareConnectFailure', 'Cannot connect to host jupyter session. URI not found.');
  export const liveShareCannotSpawnNotebooks = localize('DataScience.liveShareCannotSpawnNotebooks', 'Spawning jupyter notebooks is not supported over a live share connection');
  export const liveShareCannotImportNotebooks = localize('DataScience.liveShareCannotImportNotebooks', 'Importing notebooks is not currently supported over a live share connection');

src/client/common/utils/localize.ts

@@ -308,9 +308,10 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
  const maxOutputSize = getSettings().maxOutputSize;
  const maxTextSize = maxOutputSize && maxOutputSize < 10000 && maxOutputSize > 0 ? maxOutputSize : undefined;
  const executionCount = this.getInputExecutionCount();
+ const editPanelClass = getSettings().colorizeInputBox ? 'edit-panel-colorized' : 'edit-panel';
 
  return (
- <div className='edit-panel'>
+ <div className={editPanelClass}>
  <ErrorBoundary>
  <Cell
  editorOptions={this.state.editorOptions}
@@ -322,7 +323,7 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
  submitNewCode={this.submitInput}
  baseTheme={baseTheme}
  codeTheme={this.props.codeTheme}
- showWatermark={!this.state.submittedText}
+ showWatermark={true}
  ref={this.saveEditCellRef}
  gotoCode={noop}
  copyCode={noop}

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

@@ -269,7 +269,7 @@ export class Cell extends React.Component<ICellProps> {
 
  private renderInputs = () => {
  if (this.showInputs()) {
- const backgroundColor = this.props.cellVM.cell.type === 'preview' ?
+ const backgroundColor = this.props.cellVM.cell.type === 'preview' || (getSettings().colorizeInputBox && this.props.cellVM.editable) ?
  'var(--override-peek-background, var(--vscode-peekViewEditor-background))'
  : undefined;
 

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

@@ -122,7 +122,7 @@ export class Code extends React.Component<ICodeProps, ICodeState> {
  }
 
  private getWatermarkString = () : string => {
- return getLocString('DataScience.inputWatermark', 'Shift-enter to run');
+ return getLocString('DataScience.inputWatermark', 'Type code here and press shift-enter to run');
  }
 
  private editorDidMount = (editor: monacoEditor.editor.IStandaloneCodeEditor) => {
@@ -147,8 +147,8 @@ export class Code extends React.Component<ICodeProps, ICodeState> {
  if (this.state.model) {
  this.props.onChange(e.changes, this.state.model.id);
  }
- if (!this.props.readOnly) {
- this.setState({allowWatermark: false});
+ if (!this.props.readOnly && this.state.model) {
+ this.setState({allowWatermark:  this.state.model.getValueLength() === 0});
  }
  }
 

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

@@ -50,14 +50,24 @@ body, html {
 }
 
 .invisible {
- visibility: hidden; 
+ visibility: hidden;
 }
 
 .edit-panel {
  min-height:50px;
  padding: 10px 0px 10px 0px;
  width: 100%;
- border-top-color: var(--override-widget-background, var(--vscode-editorGroupHeader-tabsBackground));
+ border-top-color: var(--override-badge-background, var(--vscode-badge-background));
  border-top-style: solid;
- border-top-width: 1px;
-}
+ border-top-width: 2px;
+}
+
+.edit-panel-colorized {
+ min-height:50px;
+ padding: 10px 0px 10px 0px;
+ width: 100%;
+ border-top-color: var(--override-badge-background, var(--vscode-badge-background));
+ border-top-style: solid;
+ border-top-width: 2px;
+ background-color: var(--override-peek-background, var(--vscode-peekViewEditor-background));
+}