chore: use codemirror for editor (#18482)

package.json

@@ -57,6 +57,7 @@
     "@babel/plugin-transform-modules-commonjs": "^7.17.9",
     "@babel/plugin-transform-typescript": "^7.16.8",
     "@babel/preset-react": "^7.16.7",
+    "@types/codemirror": "^5.60.5",
     "@types/formidable": "^2.0.4",
     "@types/node": "=14.18.24",
     "@types/react": "^18.0.12",
@@ -70,6 +71,7 @@
     "@zip.js/zip.js": "^2.4.2",
     "ansi-to-html": "^0.7.2",
     "chokidar": "^3.5.3",
+    "codemirror": "^5.65.9",
     "colors": "^1.4.0",
     "commonmark": "^0.30.0",
     "concurrently": "^6.2.1",

packages/playwright-core/ThirdPartyNotices.txt

@@ -10,6 +10,7 @@ This project incorporates components from the projects listed below. The origina
 -	balanced-match@1.0.2 (https://github.com/juliangruber/balanced-match)
 -	brace-expansion@1.1.11 (https://github.com/juliangruber/brace-expansion)
 -	buffer-crc32@0.2.13 (https://github.com/brianloveswords/buffer-crc32)
+-	codemirror@5.65.9 (https://github.com/codemirror/CodeMirror)
 -	colors@1.4.0 (https://github.com/Marak/colors.js)
 -	commander@8.3.0 (https://github.com/tj/commander.js)
 -	concat-map@0.0.1 (https://github.com/substack/node-concat-map)
@@ -328,6 +329,32 @@ ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEAL
 =========================================
 END OF buffer-crc32@0.2.13 AND INFORMATION
 
+%% codemirror@5.65.9 NOTICES AND INFORMATION BEGIN HERE
+=========================================
+MIT License
+
+Copyright (C) 2017 by Marijn Haverbeke <marijnh@gmail.com> and others
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+=========================================
+END OF codemirror@5.65.9 AND INFORMATION
+
 %% colors@1.4.0 NOTICES AND INFORMATION BEGIN HERE
 =========================================
 MIT License
@@ -1614,6 +1641,6 @@ END OF yazl@2.5.1 AND INFORMATION
 
 SUMMARY BEGIN HERE
 =========================================
-Total Packages: 45
+Total Packages: 46
 =========================================
 END OF SUMMARY

packages/playwright-test/ThirdPartyNotices.txt

@@ -84,6 +84,7 @@ This project incorporates components from the projects listed below. The origina
 -	caniuse-lite@1.0.30001346 (https://github.com/browserslist/caniuse-lite)
 -	chalk@2.4.2 (https://github.com/chalk/chalk)
 -	chalk@4.1.2 (https://github.com/chalk/chalk)
+-	codemirror@5.65.9 (https://github.com/codemirror/CodeMirror)
 -	color-convert@1.9.3 (https://github.com/Qix-/color-convert)
 -	color-convert@2.0.1 (https://github.com/Qix-/color-convert)
 -	color-name@1.1.3 (https://github.com/dfcreative/color-name)
@@ -2744,6 +2745,32 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 =========================================
 END OF chalk@4.1.2 AND INFORMATION
 
+%% codemirror@5.65.9 NOTICES AND INFORMATION BEGIN HERE
+=========================================
+MIT License
+
+Copyright (C) 2017 by Marijn Haverbeke <marijnh@gmail.com> and others
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+=========================================
+END OF codemirror@5.65.9 AND INFORMATION
+
 %% color-convert@1.9.3 NOTICES AND INFORMATION BEGIN HERE
 =========================================
 Copyright (c) 2011-2016 Heather Arthur <fayearthur@gmail.com>
@@ -4029,6 +4056,6 @@ END OF to-regex-range@5.0.1 AND INFORMATION
 
 SUMMARY BEGIN HERE
 =========================================
-Total Packages: 138
+Total Packages: 139
 =========================================
 END OF SUMMARY

packages/trace-viewer/package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build && tsc",
+    "build-sw": "vite --config vite.sw.config.ts build && tsc",
     "preview": "vite preview"
   }
 }

packages/trace-viewer/src/ui/actionList.css

@@ -54,6 +54,10 @@
   outline: 1px solid var(--vscode-focusBorder);
 }
 
+.action-list-content:focus .action-entry.selected * {
+  color: var(--vscode-list-activeSelectionForeground);
+}
+
 .action-title {
   flex: auto;
   display: block;

packages/trace-viewer/src/ui/sourceTab.tsx

@@ -18,7 +18,6 @@ import type { StackFrame } from '@protocol/channels';
 import type { ActionTraceEvent } from '@trace/trace';
 import { Source as SourceView } from '@web/components/source';
 import { SplitView } from '@web/components/splitView';
-import '@web/third_party/highlightjs/highlightjs/github.css';
 import * as React from 'react';
 import { useAsyncMemo } from './helpers';
 import './sourceTab.css';

packages/trace-viewer/vite.config.ts

@@ -37,12 +37,8 @@ export default defineConfig({
     outDir: path.resolve(__dirname, '../playwright-core/lib/webpack/traceViewer'),
     emptyOutDir: true,
     rollupOptions: {
-      input: {
-        main: path.resolve(__dirname, 'index.html'),
-        sw: path.resolve(__dirname, 'src/sw.ts'),
-      },
       output: {
-        entryFileNames: info => info.name === 'sw' ? '[name].bundle.js' : '[name].[hash].js',
+        entryFileNames: () => '[name].[hash].js',
         assetFileNames: () => '[name].[hash][extname]',
         manualChunks: undefined,
       },

packages/trace-viewer/vite.sw.config.ts

@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { bundle } from './bundle';
+import * as path from 'path';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: '',
+  plugins: [
+    react(),
+    bundle()
+  ],
+  resolve: {
+    alias: {
+      '@isomorphic': path.resolve(__dirname, '../playwright-core/src/server/isomorphic'),
+      '@protocol': path.resolve(__dirname, '../protocol/src'),
+      '@web': path.resolve(__dirname, '../web/src'),
+    },
+  },
+  build: {
+    outDir: path.resolve(__dirname, '../playwright-core/lib/webpack/traceViewer'),
+    rollupOptions: {
+      input: {
+        sw: path.resolve(__dirname, 'src/sw.ts'),
+      },
+      output: {
+        entryFileNames: info => '[name].bundle.js',
+        assetFileNames: () => '[name].[hash][extname]',
+        manualChunks: undefined,
+      },
+    },
+  }
+});