Add a setting to more clearly enable scrolling on cell outputs

news/2 Fixes/9801.md

@@ -0,0 +1 @@
+Added 'Enable Scrolling For Cell Outputs' setting. Works together with the 'Max Output Size' setting.

package.json

@@ -1815,7 +1815,13 @@
                 "python.dataScience.maxOutputSize": {
                     "type": "number",
                     "default": 400,
-                    "description": "Maximum size (in pixels) of text output in the Python Interactive window before a scrollbar appears. Set to -1 for infinity.",
+                    "description": "Maximum size (in pixels) of text output in the Python Interactive window and Notebook Editor before a scrollbar appears. First enable scrolling for cell outputs in settings.",
+                    "scope": "resource"
+                },
+                "python.dataScience.enableScrollingForCellOutputs": {
+                    "type": "boolean",
+                    "default": true,
+                    "description": "Enables scrolling for large cell outputs.",
                     "scope": "resource"
                 },
                 "python.dataScience.errorBackgroundColor": {

src/client/common/types.ts

@@ -354,6 +354,7 @@ export interface IDataScienceSettings {
     showCellInputCode: boolean;
     collapseCellInputCodeByDefault: boolean;
     maxOutputSize: number;
+    enableScrollingForCellOutputs: boolean;
     enableGather?: boolean;
     gatherToScript?: boolean;
     gatherRules?: IGatherRule[];

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

@@ -33,6 +33,7 @@ interface IInteractiveCellBaseProps {
     testMode?: boolean;
     autoFocus: boolean;
     maxTextSize?: number;
+    enableScroll?: boolean;
     showWatermark: boolean;
     monacoTheme: string | undefined;
     editorOptions?: monacoEditor.editor.IEditorOptions;
@@ -154,6 +155,7 @@ export class InteractiveCell extends React.Component<IInteractiveCellProps> {
                                         baseTheme={this.props.baseTheme}
                                         expandImage={this.props.showPlot}
                                         maxTextSize={this.props.maxTextSize}
+                                        enableScroll={this.props.enableScroll}
                                         themeMatplotlibPlots={themeMatplotlibPlots}
                                         widgetFailed={this.props.widgetFailed}
                                     />

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

@@ -248,8 +248,6 @@ ${buildSettingsCss(this.props.settings)}`}</style>
             return null;
         }
 
-        const maxOutputSize = this.props.settings.maxOutputSize;
-        const maxTextSize = maxOutputSize && maxOutputSize < 10000 && maxOutputSize > 0 ? maxOutputSize : undefined;
         const executionCount = this.getInputExecutionCount();
         const editPanelClass = this.props.settings.colorizeInputBox ? 'edit-panel-colorized' : 'edit-panel';
 
@@ -259,7 +257,8 @@ ${buildSettingsCss(this.props.settings)}`}</style>
                     <InteractiveCellComponent
                         role="form"
                         editorOptions={this.props.editorOptions}
-                        maxTextSize={maxTextSize}
+                        maxTextSize={this.getMaxTextSize(this.props.settings.maxOutputSize)}
+                        enableScroll={this.props.settings.enableScrollingForCellOutputs}
                         autoFocus={document.hasFocus()}
                         testMode={this.props.testMode}
                         cellVM={this.props.editCellVM}
@@ -330,7 +329,8 @@ ${buildSettingsCss(this.props.settings)}`}</style>
                         <InteractiveCellComponent
                             role="listitem"
                             editorOptions={this.props.editorOptions}
-                            maxTextSize={this.props.settings.maxOutputSize}
+                            maxTextSize={this.getMaxTextSize(this.props.settings.maxOutputSize)}
+                            enableScroll={this.props.settings.enableScrollingForCellOutputs}
                             autoFocus={false}
                             testMode={this.props.testMode}
                             cellVM={cellVM}
@@ -377,6 +377,11 @@ ${buildSettingsCss(this.props.settings)}`}</style>
     private linkClick = (ev: MouseEvent) => {
         handleLinkClick(ev, this.props.linkClick);
     };
+
+    private getMaxTextSize(maxOutputSize: number): number | undefined {
+        const outputSizeLimit = 10000;
+        return maxOutputSize && maxOutputSize < outputSizeLimit && maxOutputSize > 0 ? maxOutputSize : undefined;
+    }
 }
 
 // Main export, return a redux connected editor

src/datascience-ui/interactive-common/cellOutput.tsx

@@ -32,6 +32,7 @@ interface ICellOutputProps {
     cellVM: ICellViewModel;
     baseTheme: string;
     maxTextSize?: number;
+    enableScroll?: boolean;
     hideOutput?: boolean;
     themeMatplotlibPlots?: boolean;
     expandImage(imageHtml: string): void;
@@ -536,7 +537,7 @@ export class CellOutput extends React.Component<ICellOutputProps> {
         const style: React.CSSProperties = {};
 
         // Create a scrollbar style if necessary
-        if (transformedList.some((transformed) => transformed.output.renderWithScrollbars) && this.props.maxTextSize) {
+        if (transformedList.some((transformed) => transformed.output.renderWithScrollbars) && this.props.enableScroll) {
             style.overflowY = 'auto';
             style.maxHeight = `${this.props.maxTextSize}px`;
         }

src/datascience-ui/native-editor/nativeCell.tsx

@@ -41,6 +41,7 @@ interface INativeCellBaseProps {
     codeTheme: string;
     testMode?: boolean;
     maxTextSize?: number;
+    enableScroll?: boolean;
     monacoTheme: string | undefined;
     lastCell: boolean;
     firstCell: boolean;
@@ -702,6 +703,7 @@ export class NativeCell extends React.Component<INativeCellProps> {
                         baseTheme={this.props.baseTheme}
                         expandImage={this.props.showPlot}
                         maxTextSize={this.props.maxTextSize}
+                        enableScroll={this.props.enableScroll}
                         themeMatplotlibPlots={themeMatplotlibPlots}
                         widgetFailed={this.props.widgetFailed}
                     />

src/datascience-ui/native-editor/nativeEditor.tsx

@@ -265,12 +265,18 @@ ${buildSettingsCss(this.props.settings)}`}</style>
                 />
             ) : null;
 
+        const maxOutputSize = this.props.settings.maxOutputSize;
+        const outputSizeLimit = 10000;
+        const maxTextSize =
+            maxOutputSize && maxOutputSize < outputSizeLimit && maxOutputSize > 0 ? maxOutputSize : undefined;
+
         return (
             <div key={cellVM.cell.id} id={cellVM.cell.id}>
                 <ErrorBoundary>
                     <ConnectedNativeCell
                         role="listitem"
-                        maxTextSize={this.props.settings.maxOutputSize}
+                        maxTextSize={maxTextSize}
+                        enableScroll={this.props.settings.enableScrollingForCellOutputs}
                         testMode={this.props.testMode}
                         cellVM={cellVM}
                         baseTheme={this.props.baseTheme}

src/datascience-ui/react-common/settingsReactSide.ts

@@ -24,6 +24,7 @@ export function getDefaultSettings() {
         showCellInputCode: true,
         collapseCellInputCodeByDefault: true,
         maxOutputSize: 400,
+        enableScrollingForCellOutputs: true,
         errorBackgroundColor: '#FFFFFF',
         sendSelectionToInteractiveWindow: false,
         markdownRegularExpression: '^(#\\s*%%\\s*\\[markdown\\]|#\\s*\\<markdowncell\\>)',

src/test/common/configSettings/configSettings.unit.test.ts

@@ -299,6 +299,7 @@ suite('Python Settings', async () => {
             collapseCellInputCodeByDefault: true,
             allowInput: true,
             maxOutputSize: 400,
+            enableScrollingForCellOutputs: true,
             errorBackgroundColor: '#FFFFFF',
             sendSelectionToInteractiveWindow: false,
             variableExplorerExclude: 'module;function;builtin_function_or_method',

src/test/datascience/color.test.ts

@@ -65,6 +65,7 @@ suite('Theme colors', () => {
             collapseCellInputCodeByDefault: true,
             allowInput: true,
             maxOutputSize: 400,
+            enableScrollingForCellOutputs: true,
             errorBackgroundColor: '#FFFFFF',
             sendSelectionToInteractiveWindow: false,
             variableExplorerExclude: 'module;function;builtin_function_or_method',

src/test/datascience/dataScienceIocContainer.ts

@@ -1408,6 +1408,7 @@ export class DataScienceIocContainer extends UnitTestIocContainer {
             collapseCellInputCodeByDefault: true,
             allowInput: true,
             maxOutputSize: 400,
+            enableScrollingForCellOutputs: true,
             errorBackgroundColor: '#FFFFFF',
             sendSelectionToInteractiveWindow: false,
             codeRegularExpression: '^(#\\s*%%|#\\s*\\<codecell\\>|#\\s*In\\[\\d*?\\]|#\\s*In\\[ \\])',

src/test/datascience/editor-integration/codewatcher.unit.test.ts

@@ -80,6 +80,7 @@ suite('DataScience Code Watcher Unit Tests', () => {
             collapseCellInputCodeByDefault: true,
             allowInput: true,
             maxOutputSize: 400,
+            enableScrollingForCellOutputs: true,
             errorBackgroundColor: '#FFFFFF',
             sendSelectionToInteractiveWindow: false,
             variableExplorerExclude: 'module;function;builtin_function_or_method',

src/test/datascience/execution.unit.test.ts

@@ -882,6 +882,7 @@ suite('Jupyter Execution', async () => {
             collapseCellInputCodeByDefault: true,
             allowInput: true,
             maxOutputSize: 400,
+            enableScrollingForCellOutputs: true,
             errorBackgroundColor: '#FFFFFF',
             sendSelectionToInteractiveWindow: false,
             variableExplorerExclude: 'module;function;builtin_function_or_method',

src/test/datascience/helpers.ts

@@ -23,6 +23,7 @@ export function defaultDataScienceSettings(): IDataScienceSettings {
         collapseCellInputCodeByDefault: true,
         allowInput: true,
         maxOutputSize: 400,
+        enableScrollingForCellOutputs: true,
         errorBackgroundColor: '#FFFFFF',
         sendSelectionToInteractiveWindow: false,
         variableExplorerExclude: 'module;function;builtin_function_or_method',

src/test/datascience/interactiveWindowCommandListener.unit.test.ts

@@ -132,6 +132,7 @@ suite('Interactive window command listener', async () => {
             collapseCellInputCodeByDefault: true,
             allowInput: true,
             maxOutputSize: 400,
+            enableScrollingForCellOutputs: true,
             errorBackgroundColor: '#FFFFFF',
             sendSelectionToInteractiveWindow: false,
             variableExplorerExclude: 'module;function;builtin_function_or_method',

src/test/datascience/jupyter/serverCache.unit.test.ts

@@ -40,6 +40,7 @@ suite('Data Science - ServerCache', () => {
             collapseCellInputCodeByDefault: true,
             allowInput: true,
             maxOutputSize: 400,
+            enableScrollingForCellOutputs: true,
             errorBackgroundColor: '#FFFFFF',
             sendSelectionToInteractiveWindow: false,
             variableExplorerExclude: 'module;function;builtin_function_or_method',

src/test/datascience/jupyterVariables.unit.test.ts

@@ -87,6 +87,7 @@ suite('JupyterVariables', () => {
             collapseCellInputCodeByDefault: true,
             allowInput: true,
             maxOutputSize: 400,
+            enableScrollingForCellOutputs: true,
             errorBackgroundColor: '#FFFFFF',
             sendSelectionToInteractiveWindow: false,
             variableExplorerExclude: 'module;function;builtin_function_or_method',