[BUG] inspector should display .mjs files like .js files, currently it runs but does not display them.

[eoinomeara11]

Context:

• Playwright Version: 1.16.3
• Operating System: Windows
• Node.js version: 16.13.0
• Browser: Chromium
• Extra:

Code Snippet

Displays (.js):

const { test, expect } = require('@playwright/test');

test('github test', async ({page}) => {
    await page.goto('https://www.github.com');

    await page.pause();
});

Does not display (.mjs):

import { test, expect } from '@playwright/test';

test('github test', async ({page}) => {
    await page.goto('https://www.github.com');

    await page.pause();
});

Describe the bug

I prefer to use import instead of require, hence tried to write my playwright tests as .mjs files.
All was ok until I tried the inspector. The top pane only contained the text // No source available but the play/step over buttons and the bottom pane worked correctly so the file seems to be debugged correctly. Fix is to display the .mjs file in the top pane.