Enable add a cell button (#6872)

* Enable add a cell button

* workaround for Firefox

* Lint

---------

Co-authored-by: Jeremy Tuloup <[email protected]>

Author: tuncbkose

packages/notebook-extension/style/base.css

@@ -124,8 +124,6 @@ body[data-notebook='notebooks']
 
 /* Tweak the notebook footer (to add a new cell) */
 body[data-notebook='notebooks'] .jp-Notebook-footer {
-  /* TODO: re-enable */
-  display: none;
   width: 100%;
   margin-left: unset;
   background: unset;

ui-tests/test/general.spec.ts

@@ -7,10 +7,10 @@ import { expect } from '@playwright/test';
 
 import { test } from './fixtures';
 
-import { waitForKernelReady } from './utils';
+import { hideAddCellButton, waitForKernelReady } from './utils';
 
 test.describe('General', () => {
-  test('The notebook should render', async ({ page, tmpPath }) => {
+  test('The notebook should render', async ({ page, tmpPath, browserName }) => {
     const notebook = 'simple.ipynb';
     await page.contents.uploadFile(
       path.resolve(__dirname, `./notebooks/${notebook}`),
@@ -35,13 +35,19 @@ test.describe('General', () => {
         (element) => (element.innerHTML = 'Last Checkpoint: 3 seconds ago')
       );
 
-    // force switching back to command mode to avoid capturing the cursor in the screenshot
-    await page.evaluate(async () => {
-      await window.jupyterapp.commands.execute('notebook:enter-command-mode');
-    });
+    // check the notebook footer shows up on hover
+    const notebookFooter = '.jp-Notebook-footer';
+    await page.hover(notebookFooter);
+    await page.waitForSelector(notebookFooter);
 
-    // make sure the mouse does not hover on the footer
-    await page.mouse.move(0, 0);
+    // hover somewhere else to make the add cell disappear
+    await page.hover('#jp-top-bar');
+
+    // special case for firefox headless issue
+    // see https://github.com/jupyter/notebook/pull/6872#issuecomment-1549594166 for more details
+    if (browserName === 'firefox') {
+      await hideAddCellButton(page);
+    }
 
     expect(await page.screenshot()).toMatchSnapshot('notebook.png');
   });

ui-tests/test/mobile.spec.ts

@@ -7,7 +7,7 @@ import { expect } from '@playwright/test';
 
 import { test } from './fixtures';
 
-import { waitForKernelReady } from './utils';
+import { hideAddCellButton, waitForKernelReady } from './utils';
 
 test.use({ autoGoto: false });
 
@@ -30,6 +30,7 @@ test.describe('Mobile', () => {
   test('The layout should be more compact on the notebook page', async ({
     page,
     tmpPath,
+    browserName,
   }) => {
     const notebook = 'empty.ipynb';
     await page.contents.uploadFile(
@@ -50,6 +51,11 @@ test.describe('Mobile', () => {
       await window.jupyterapp.commands.execute('notebook:enter-command-mode');
     });
 
+    // TODO: remove
+    if (browserName === 'firefox') {
+      await hideAddCellButton(page);
+    }
+
     expect(await page.screenshot()).toMatchSnapshot('notebook.png');
   });
 });

ui-tests/test/utils.ts

@@ -34,3 +34,15 @@ export async function waitForKernelReady(
   });
   await page.waitForSelector('.jp-DebuggerBugButton[aria-disabled="false"]');
 }
+
+/**
+ * Special case for firefox headless issue
+ * See https://github.com/jupyter/notebook/pull/6872#issuecomment-1549594166 for more details
+ */
+export async function hideAddCellButton(
+  page: IJupyterLabPageFixture
+): Promise<void> {
+  await page
+    .locator('.jp-Notebook-footer')
+    .evaluate((element) => (element.style.display = 'none'));
+}