Hide output execution counts for inactive cells (#214)

* Hide output execution counts for inactive cells

* Update Playwright Snapshots

* Fix test

* Lint

* Revert "Update Playwright Snapshots"

This reverts commit a91194b.

* Add a test

* Update Playwright Snapshots

* Fix conflicts

This partially reverts commit 9aa32d4.

* Update Playwright Snapshots

Author: agriyakhetarpal

style/base.css

@@ -167,7 +167,11 @@
   visibility: hidden;
 }
 
-.jp-Notebook .jp-Cell .jp-OutputPrompt {
+.jp-Notebook .jp-Cell:not(.jp-mod-active) .jp-OutputPrompt {
+  visibility: hidden;
+}
+
+.jp-Notebook .jp-Cell.jp-mod-active .jp-OutputPrompt {
   visibility: visible;
 }
 

ui-tests/tests/jupytereverywhere.spec.ts

@@ -738,7 +738,6 @@ test.describe('Per cell run buttons', () => {
     await expect(firstCell.locator('.jp-Cell-outputArea')).toBeVisible({ timeout: 10000 });
 
     const inputIndicator = firstCell.locator('.jp-InputArea-prompt-indicator');
-    const outputPrompt = firstCell.locator('.jp-OutputPrompt');
 
     // When the first cell is active, the input indicator should be hidden
     await firstCell.click();
@@ -749,13 +748,57 @@ test.describe('Per cell run buttons', () => {
     await expect(inputIndicator).toBeVisible();
 
     // Hover over the first cell; input indicator should get hidden again
-    // However, the output prompt should remain visible at all times
     await firstCell.hover();
     await expect(inputIndicator).toBeHidden();
-    await expect(outputPrompt).toBeVisible();
   });
 
-  test('Run button is hidden on Raw cells and reappears on Code cells', async ({ page }) => {
+  test('For non-active/non-focused cells with an input execution count, there should not be an output execution count', async ({
+    page
+  }) => {
+    await page.waitForSelector('.jp-NotebookPanel');
+
+    // Ensure three cells so we can toggle active state cleanly.
+    await runCommand(page, 'notebook:insert-cell-below');
+    await runCommand(page, 'notebook:insert-cell-below');
+    const firstCell = page.locator('.jp-CodeCell').first();
+    const secondCell = page.locator('.jp-CodeCell').nth(1);
+    const thirdCell = page.locator('.jp-CodeCell').nth(2);
+
+    // Put some code in the first two cells and run them to get input
+    // execution counts and an output prompt in the second cell.
+    await firstCell.getByRole('textbox').click();
+    await firstCell.getByRole('textbox').fill('x = 5');
+    await firstCell.locator('.je-cell-run-button').click();
+
+    await secondCell.getByRole('textbox').click();
+    await secondCell.getByRole('textbox').fill('x');
+    await secondCell.locator('.je-cell-run-button').click();
+
+    // Go to the third cell so the first two are not active/focused
+    await thirdCell.getByRole('textbox').click();
+
+    // Wait for the execution counts to appear. Now, the second cell (inactive)
+    // should have an input prompt, but no output prompt.
+    const output = secondCell.locator('.jp-Cell-outputArea');
+    await expect(output).toBeVisible({ timeout: 30000 });
+    await expect(output).toContainText('5', { timeout: 30000 });
+
+    const secondInputIndicator = secondCell.locator('.jp-InputPrompt');
+    const secondOutputIndicator = secondCell.locator('.jp-OutputPrompt');
+    await expect(secondInputIndicator).toBeVisible({ timeout: 10000 });
+    await expect(secondOutputIndicator).toBeHidden({ timeout: 10000 });
+
+    expect(
+      await page.locator('.jp-LabShell').screenshot({
+        mask: [page.locator('.jp-KernelStatus-widget')],
+        maskColor: '#fff'
+      })
+    ).toMatchSnapshot('multiple-cells-prompt-indicators.png');
+  });
+
+  test('Run button is hidden on Raw cells and reappears on Code/Markdown cells', async ({
+    page
+  }) => {
     await page.waitForSelector('.jp-NotebookPanel');
 
     const cell = page.locator('.jp-Cell').first();