Remove DISPLAY env var from image (#625)

To avoid a strange chromium bug:
https://issues.chromium.org/issues/40209037 which causes WebGL to fail
in headless mode if DISPLAY if set. Instead, just set DISPLAY directly
for Xvfb, x11vnc and pass in `--display=` to browser if running in
headful mode.

Dockerfile

@@ -6,8 +6,7 @@ FROM ${BROWSER_IMAGE_BASE}
 # needed to add args to main build stage
 ARG BROWSER_VERSION
 
-ENV DISPLAY=:99 \
-    GEOMETRY=1360x1020x16 \
+ENV GEOMETRY=1360x1020x16 \
     BROWSER_VERSION=${BROWSER_VERSION} \
     BROWSER_BIN=google-chrome \
     OPENSSL_CONF=/app/openssl.conf \

src/crawler.ts

@@ -45,6 +45,7 @@ import {
   ADD_LINK_FUNC,
   BEHAVIOR_LOG_FUNC,
   DEFAULT_SELECTORS,
+  DISPLAY,
 } from "./util/constants.js";
 
 import { AdBlockRules, BlockRules } from "./util/blockrules.js";
@@ -508,7 +509,7 @@ export class Crawler {
       child_process.spawn(
         "Xvfb",
         [
-          process.env.DISPLAY || "",
+          DISPLAY,
           "-listen",
           "tcp",
           "-screen",

src/create-login-profile.ts

@@ -15,6 +15,7 @@ import { Browser } from "./util/browser.js";
 import { initStorage } from "./util/storage.js";
 import { CDPSession, Page, PuppeteerLifeCycleEvent } from "puppeteer-core";
 import { getInfoString } from "./util/file_reader.js";
+import { DISPLAY } from "./util/constants.js";
 
 const profileHTML = fs.readFileSync(
   new URL("../html/createProfile.html", import.meta.url),
@@ -143,7 +144,7 @@ async function main() {
   if (!params.headless) {
     logger.debug("Launching XVFB");
     child_process.spawn("Xvfb", [
-      process.env.DISPLAY || "",
+      DISPLAY,
       "-listen",
       "tcp",
       "-screen",
@@ -169,7 +170,7 @@ async function main() {
       "-passwd",
       process.env.VNC_PASS || "",
       "-display",
-      process.env.DISPLAY || "",
+      DISPLAY,
     ]);
   }
 

src/util/browser.ts

@@ -9,7 +9,7 @@ import path from "path";
 import { LogContext, logger } from "./logger.js";
 import { initStorage } from "./storage.js";
 
-import type { ServiceWorkerOpt } from "./constants.js";
+import { DISPLAY, type ServiceWorkerOpt } from "./constants.js";
 
 import puppeteer, {
   Frame,
@@ -93,6 +93,10 @@ export class Browser {
       args.push("--disable-site-isolation-trials");
     }
 
+    if (!headless) {
+      args.push(`--display=${DISPLAY}`);
+    }
+
     let defaultViewport = null;
 
     if (process.env.GEOMETRY) {

src/util/constants.ts

@@ -33,3 +33,5 @@ export const DEFAULT_SELECTORS = [
     isAttribute: false,
   },
 ];
+
+export const DISPLAY = ":99";