Allow to open editor in the same area to support small screens

src/dramaturg.ts

@@ -188,6 +188,11 @@ export class ElementHandle {
   type(text: string, options = { delay: 0 }): Promise<void> {
     return type(text, options, this.element);
   }
+  async isVisible(): Promise<boolean> {
+    const size = this.element.getBoundingClientRect();
+    const notVisible = size.width === 0 || size.height === 0;
+    return !notVisible;
+  }
   waitForSelector(
     selector: string,
     options: IWaitForSelectorOptions

src/scenarios.ts

@@ -189,7 +189,9 @@ class SingleEditorScenario<
       }
     );
     this.widget = widget;
-    this.jupyterApp.shell.add(this.widget, 'main', { mode: 'split-right' });
+    this.jupyterApp.shell.add(this.widget, 'main', {
+      mode: this.options?.widgetPosition || 'split-right'
+    });
     await activateTabWidget(this.jupyterApp, widget);
     await layoutReady();
     if (this.useNotebook) {
@@ -323,6 +325,25 @@ export class CompleterScenario
   }
 }
 
+async function ensureToolbarButtonsVisible() {
+  const secondToolbarSelector = '.jp-Toolbar-responsive-popup';
+  const moreCommandsButton = await page.$(
+    '.jp-Toolbar-responsive-opener > button[title="More commands"]'
+  );
+  if (moreCommandsButton && (await moreCommandsButton.isVisible())) {
+    const secondToolbar = await page.$(secondToolbarSelector);
+    if (secondToolbar && (await secondToolbar.isVisible())) {
+      // already visible
+      return;
+    }
+    // make sure second toolbar is visible
+    await moreCommandsButton.click();
+    await page.waitForSelector(secondToolbarSelector, {
+      state: 'visible'
+    });
+  }
+}
+
 export class DebuggerScenario
   extends SingleEditorScenario<IExtendedDebuggerScenarioOptions>
   implements IScenario
@@ -368,6 +389,7 @@ export class DebuggerScenario
 
     await waitForKernelStatus(this.widget.node, 'idle');
     const handle = new ElementHandle(this.widget.node);
+    await ensureToolbarButtonsVisible();
     const bugIcon = await handle.waitForSelector(
       'button[aria-disabled="false"][title="Enable Debugger"]',
       {
@@ -378,6 +400,7 @@ export class DebuggerScenario
     await page.waitForSelector(`#${CSS.escape('jp-debugger-sidebar')}`, {
       state: 'visible'
     });
+    await ensureToolbarButtonsVisible();
     await handle.waitForSelector(
       'button[aria-disabled="false"][title="Disable Debugger"]',
       {

src/schema/scenario-completer.json

@@ -64,6 +64,20 @@
           "required": ["setupText", "triggerCell"]
         }
       ]
+    },
+    "widgetPosition": {
+      "title": "Widget position in the layout",
+      "description": "Where to attach the editor widget in the layout",
+      "type": "string",
+      "enum": [
+        "split-top",
+        "split-left",
+        "split-right",
+        "split-bottom",
+        "tab-before",
+        "tab-after"
+      ],
+      "default": "split-right"
     }
   },
   "required": ["editor", "setup"],

src/schema/scenario-debugger.json

@@ -23,6 +23,20 @@
         "min": 0
       },
       "default": [1000, 1001]
+    },
+    "widgetPosition": {
+      "title": "Widget position in the layout",
+      "description": "Where to attach the editor widget in the layout",
+      "type": "string",
+      "enum": [
+        "split-top",
+        "split-left",
+        "split-right",
+        "split-bottom",
+        "tab-before",
+        "tab-after"
+      ],
+      "default": "split-right"
     }
   },
   "required": ["codeCells", "expectedNumberOfVariables"],

src/schema/scenario-scroll.json

@@ -47,6 +47,20 @@
       "description": "Text to populate editors/cells with.",
       "type": "string",
       "default": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+    },
+    "widgetPosition": {
+      "title": "Widget position in the layout",
+      "description": "Where to attach the editor widget in the layout",
+      "type": "string",
+      "enum": [
+        "split-top",
+        "split-left",
+        "split-right",
+        "split-bottom",
+        "tab-before",
+        "tab-after"
+      ],
+      "default": "split-right"
     }
   },
   "required": ["editor", "cells", "scrollTop", "scrollBehavior"],

src/types/_scenario-completer.ts

@@ -35,11 +35,22 @@ export type TriggerCode = string;
  * Code to run prior to invoking completer, e.g. `import numpy as np`. Only has an effect in notebook.
  */
 export type CodeToRunNotebookOnly = string;
+/**
+ * Where to attach the editor widget in the layout
+ */
+export type WidgetPositionInTheLayout =
+  | 'split-top'
+  | 'split-left'
+  | 'split-right'
+  | 'split-bottom'
+  | 'tab-before'
+  | 'tab-after';
 
 export interface CompleterScenarioOptions {
   editor: EditorType;
   path?: PathToDocument;
   setup: EditorSetupForCompletion;
+  widgetPosition?: WidgetPositionInTheLayout;
 }
 export interface AutoGenerateTokensToComplete {
   tokenCount: TokenCount;

src/types/_scenario-debugger.ts

@@ -13,8 +13,19 @@ export type CodeToExecute = string[];
  * The scenario waits until debugger panel is populated with at least as many variables as specified. For accurate timings should have as many members as there are code cells.
  */
 export type ExpectedNumberOfVariables = number[];
+/**
+ * Where to attach the editor widget in the layout
+ */
+export type WidgetPositionInTheLayout =
+  | 'split-top'
+  | 'split-left'
+  | 'split-right'
+  | 'split-bottom'
+  | 'tab-before'
+  | 'tab-after';
 
 export interface DebuggerScenarioOptions {
   codeCells: CodeToExecute;
   expectedNumberOfVariables: ExpectedNumberOfVariables;
+  widgetPosition?: WidgetPositionInTheLayout;
 }

src/types/_scenario-scroll.ts

@@ -33,6 +33,16 @@ export type NumberOfCellsBlocksToAppend = number;
  * Text to populate editors/cells with.
  */
 export type EditorCellContent = string;
+/**
+ * Where to attach the editor widget in the layout
+ */
+export type WidgetPositionInTheLayout =
+  | 'split-top'
+  | 'split-left'
+  | 'split-right'
+  | 'split-bottom'
+  | 'tab-before'
+  | 'tab-after';
 
 export interface ScrollScenarioOptions {
   scrollTop: ScrollFromTop;
@@ -42,4 +52,5 @@ export interface ScrollScenarioOptions {
   path?: PathToDocument;
   cells: NumberOfCellsBlocksToAppend;
   editorContent?: EditorCellContent;
+  widgetPosition?: WidgetPositionInTheLayout;
 }