feat: browser profiler use headless=new for linux with devtools

browser-profiler/main/chrome-docker/Dockerfile-linux

@@ -7,7 +7,7 @@ ENV CHROME_URL=$chrome_url
 ENV CHROME_FOLDER=$chrome_folder
 
 RUN apt-get update \
-    && apt-get install -qy ca-certificates wget unzip fonts-freefont-ttf libxss1 --no-install-recommends \
+    && apt-get install -qy ca-certificates wget unzip fonts-freefont-ttf libxss1 socat --no-install-recommends \
     && wget -O chrome.tar.gz "${CHROME_URL}" --progress=bar --no-check-certificate \
     && tar -xf chrome.tar.gz \
     && apt install -qqy "./${CHROME_FOLDER}/install-dependencies.deb" \

browser-profiler/main/chrome-docker/Dockerstart.sh

@@ -1,28 +1,46 @@
 #!/bin/bash
 
-chromeArgs=$1
+chrome_args=$1
 url=$2
 
-#_kill_procs() {
-#  kill -TERM $browserProcess
-#  wait $browserProcess
-#  kill -TERM $xvfb
-#}
-#
-## Setup a trap to catch SIGTERM and relay it to child processes
-#trap _kill_procs SIGTERM
-#
-#XVFB_WHD=${XVFB_WHD:-1280x720x16}
-#
-## Start Xvfb
-#Xvfb :99 -ac -screen 0 $XVFB_WHD -nolisten tcp &
-#xvfb=$!
-#
-#export DISPLAY=:99
+USE_XVFB=false
+XVFB_WHD=${XVFB_WHD:-1280x720x16}
+
+_kill_procs() {
+    kill -TERM $browser_proc
+    wait $browser_proc
+
+    kill -TERM $soc_proc
+    wait $soc_proc
+
+    if [[ -n "$xvfb" ]]; then
+        kill -TERM $xvfb_proc
+        wait $xvfb_proc
+    fi
+}
+
+# Setup a trap to catch SIGTERM and relay it to child processes
+trap _kill_procs SIGTERM
+
+xvfb_proc=""
+if $USE_XVFB; then
+    Xvfb :99 -ac -screen 0 $XVFB_WHD -nolisten tcp &
+    xvfb_proc=$!
+    export DISPLAY=:99
+fi
+
+# Chrome remote debugging port only binds to 127.0.0.1 when running in
+# headless=new or headfull mode, even when you try to configure it otherwise.
+# So this is our way of making sure this still works.
+
+socat TCP4-LISTEN:9222,fork TCP4:127.0.0.1:19222 &
+soc_proc=$!
+
+chrome_args="${chrome_args//9222/19222}"
+echo "Launching: chrome $chrome_args $url "
 
 chrome --version
-chrome $chromeArgs $url &
-browserProcess=$!
+chrome $chrome_args $url &
+browser_proc=$!
 
-wait $browserProcess
-#wait $xvfb
+wait $browser_proc

browser-profiler/main/lib/local-tooling/DockerUtils.ts

@@ -9,7 +9,7 @@ export function buildChromeDocker(version: string, chromeUrl: string): string {
   const dockerName = `chromes-${version}`;
   console.log(chromeUrl);
   const chromeFolder = chromeUrl.match(/chrome_(.+)_linux.tar.gz$/)[1];
-  const command = `docker build --build-arg chrome_url="${chromeUrl}" --build-arg chrome_folder="${chromeFolder}" -f "Dockerfile-linux" -t "${dockerName}" .`;
+  const command = `docker build --platform linux/amd64 --build-arg chrome_url="${chromeUrl}" --build-arg chrome_folder="${chromeFolder}" -f "Dockerfile-linux" -t "${dockerName}" .`;
   console.log(command);
   execSync(command, { stdio: 'inherit', cwd: dockerWorkingDirectory });
   return dockerName;
@@ -35,6 +35,8 @@ export async function startDockerAndLoadUrl(
   chromeVersion: number,
 ): Promise<ChildProcess> {
   const { hostname } = new URL(url);
+  // TODO should we also run this with remote-debugging-pipe, as there migth be differences
+  // between pipe and port debugging?
   const hasDevtools = automationType === 'devtools';
   const dockerArgs = hasDevtools ? `-p=9222:9222` : '';
   counter += 1;
@@ -45,16 +47,8 @@ export async function startDockerAndLoadUrl(
     '--incognito',
     `--user-data-dir=/tmp/${Date.now()}-${(counter += 1)}`,
   ];
-  if (chromeVersion >= 109) {
-    // NOTE: not working on docker.
-    //   chromeArgs.push('--headless=new');
-    // } else if (chromeVersion >= 96) {
-    //   chromeArgs.push('--headless=chrome');
-    // } else {
-    //   chromeArgs.push('--headless');
-  }
-  // regular headless isn't launching without new
-  if (chromeVersion >= 111 && !hasDevtools) {
+
+  if (chromeVersion >= 111) {
     chromeArgs[2] = '--headless=new';
   }
   if (hasDevtools) {
@@ -63,7 +57,7 @@ export async function startDockerAndLoadUrl(
 
   const hostArg = needsLocalHost ? `--add-host="${hostname}:${dockerHost}"` : '';
   const urlArg = hasDevtools ? 'about:blank' : url;
-  const command = `docker run --init --rm --name ${dockerName} --privileged --ipc=host --shm-size='3gb' --cap-add=SYS_ADMIN ${hostArg} ${dockerArgs} ${dockerName} "${chromeArgs.join(
+  const command = `docker run --init --platform linux/amd64 --rm --name ${dockerName} --privileged -ipc=host --shm-size='3gb' --cap-add=SYS_ADMIN ${hostArg} ${dockerArgs} ${dockerName} "${chromeArgs.join(
     ' ',
   )}" "${urlArg}"`;