microsoft · rchiodo · Jul 16, 2019 · Jul 16, 2019 · Jul 16, 2019 · Jul 16, 2019
diff --git a/news/1 Enhancements/6381.md b/news/1 Enhancements/6381.md
@@ -0,0 +1 @@
+Make the input box more visible to new users.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.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,

diff --git a/package.nls.json b/package.nls.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",

diff --git a/src/client/common/types.ts b/src/client/common/types.ts
@@ -330,6 +330,7 @@ export interface IDataScienceSettings {
     magicCommandsAsComments?: boolean;
     stopOnError?: boolean;
     remoteDebuggerPort?: number;
+    colorizeInputBox?: boolean;
 }
 
 export const IConfigurationService = Symbol('IConfigurationService');

diff --git a/src/client/common/utils/localize.ts b/src/client/common/utils/localize.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');

diff --git a/src/datascience-ui/history-react/MainPanel.tsx b/src/datascience-ui/history-react/MainPanel.tsx
@@ -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}

diff --git a/src/datascience-ui/history-react/cell.tsx b/src/datascience-ui/history-react/cell.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;
 

diff --git a/src/datascience-ui/history-react/code.tsx b/src/datascience-ui/history-react/code.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});
         }
     }
 

diff --git a/src/datascience-ui/history-react/mainPanel.css b/src/datascience-ui/history-react/mainPanel.css
@@ -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));
+}
diff --git a/src/datascience-ui/react-common/monacoEditor.tsx b/src/datascience-ui/react-common/monacoEditor.tsx
@@ -197,7 +197,8 @@ export class MonacoEditor extends React.Component<IMonacoEditorProps, IMonacoEdi
 
         // If this is our first time setting the editor, we might need to dynanically modify the styles
         // that the editor generates for the background colors.
-        if (!prevState.editor && this.state.editor && this.containerRef.current && this.props.forceBackground) {
+        if ((!prevState.editor && this.state.editor && this.containerRef.current && this.props.forceBackground) ||
+            (prevProps.forceBackground !== this.props.forceBackground)) {
             this.updateBackgroundStyle();
         }
     }
@@ -274,12 +275,12 @@ export class MonacoEditor extends React.Component<IMonacoEditorProps, IMonacoEdi
     }
 
     private updateBackgroundStyle = () => {
-        if (this.state.editor && this.containerRef.current && this.props.forceBackground) {
+        if (this.state.editor && this.containerRef.current) {
             const nodes = this.containerRef.current.getElementsByClassName('monaco-editor-background');
             if (nodes && nodes.length > 0) {
                 const backgroundNode = nodes[0] as HTMLDivElement;
                 if (backgroundNode && backgroundNode.style) {
-                    backgroundNode.style.backgroundColor = this.props.forceBackground;
+                    backgroundNode.style.backgroundColor = this.props.forceBackground ? this.props.forceBackground : 'transparent';
                 }
             }
         }