[chrome-devtools-patches] Update Chrome DevTools to M150 (Chrome 150)

.changeset/chrome-devtools-update-m150.md

@@ -0,0 +1,7 @@
+---
+"@cloudflare/chrome-devtools-patches": patch
+---
+
+Update Chrome DevTools to Chrome 150 (M150)
+
+Updates the Chrome DevTools frontend used by `wrangler dev` and the Workers Playground to the Chrome 150 (M150) release, bringing upstream fixes and improvements while preserving the existing Workers debugging experience.

packages/chrome-devtools-patches/Makefile

@@ -1,7 +1,7 @@
 ROOT = $(realpath .)
 PATH_WITH_DEPOT = $(PATH):$(ROOT)/depot/
 # The upstream devtools commit upon which our patches are based
-HEAD = b66ecf5bef3ae6c769dbc6d904ce1c54d3771227
+HEAD = 1d67dc0dafa344bbd6ca75c124e2d6d9d53074d8
 PATCHES = $(shell ls ${PWD}/patches/*.patch)
 depot:
 	git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git depot

packages/chrome-devtools-patches/patches/0001-Expand-Browser-support-make-it-work-in-Firefox-Safar.patch

@@ -1,4 +1,4 @@
-From 261ba678389218354cb8f9dce78483cf4f09716f Mon Sep 17 00:00:00 2001
+From 69fdc50c3b8828a0e7cd719e0216993dbd5f624c Mon Sep 17 00:00:00 2001
 From: Workers DevProd <workers-devprod@cloudflare.com>
 Date: Fri, 25 Oct 2024 14:15:43 +0100
 Subject: [PATCH 1/8] Expand Browser support (make it work in Firefox & Safari)
@@ -16,30 +16,17 @@ If updating the commit of devtools upon which these patches are based, make sure
 * Allows devtools to load in Safari (loading with _any_ UI is sufficent to check whether this has worked)
 * Supports viewing a list of requests in the network panel in Firefox (without the patches here this goes very obviously wrong)
 ---
- front_end/core/dom_extension/DOMExtension.ts  |  2 +-
- front_end/entrypoint_template.html            | 38 ++++++++++++++++++-
+ front_end/entrypoint_template.html            | 39 ++++++++++++++++++-
  front_end/entrypoints/js_app/js_app.ts        |  3 ++
+ front_end/ui/dom_extension/DOMExtension.ts    |  2 +-
  .../legacy/components/data_grid/DataGrid.ts   |  5 +++
- 4 files changed, 46 insertions(+), 2 deletions(-)
+ 4 files changed, 47 insertions(+), 2 deletions(-)
 
-diff --git a/front_end/core/dom_extension/DOMExtension.ts b/front_end/core/dom_extension/DOMExtension.ts
-index 202c680a30..a639437998 100644
---- a/front_end/core/dom_extension/DOMExtension.ts
-+++ b/front_end/core/dom_extension/DOMExtension.ts
-@@ -133,7 +133,7 @@ Node.prototype.getComponentSelection = function(): Selection|null {
-   while (parent && parent.nodeType !== Node.DOCUMENT_FRAGMENT_NODE) {
-     parent = parent.parentNode;
-   }
--  return parent instanceof ShadowRoot ? parent.getSelection() : this.window().getSelection();
-+  return parent instanceof ShadowRoot ? (parent?.getSelection?.() ?? this.window().getSelection()) : this.window().getSelection();
- };
-
- Node.prototype.hasSelection = function(): boolean {
 diff --git a/front_end/entrypoint_template.html b/front_end/entrypoint_template.html
-index 64d55d4c14..07972be81f 100644
+index e778aefef2..cdf7049337 100644
 --- a/front_end/entrypoint_template.html
 +++ b/front_end/entrypoint_template.html
-@@ -13,9 +13,45 @@
+@@ -13,12 +13,49 @@
        background-color: rgb(41 42 45);
      }
    }
@@ -71,11 +58,15 @@ index 64d55d4c14..07972be81f 100644
 +  }
 +
 +  .cm-editor + .cm-editor {
-+    display: 'none',
++    display: none;
 +  }
  </style>
--<meta http-equiv="Content-Security-Policy" content="object-src 'none'; script-src 'self' https://chrome-devtools-frontend.appspot.com">
-+<meta http-equiv="Content-Security-Policy" content="object-src 'none'; script-src 'sha256-AIRkz8wOl/LgmUJduw9AsUnrb94PlBpePfk0Rowm+Vo=' 'self' https://chrome-devtools-frontend.appspot.com">
+ <meta
+   http-equiv="Content-Security-Policy"
+   content="default-src 'self' devtools: data:; style-src 'self' 'unsafe-inline' devtools:; object-src 'none'; script-src
+-  'self' https://chrome-devtools-frontend.appspot.com; img-src 'self' data: blob:; frame-src * data:; connect-src data: https://chromeuxreport.googleapis.com 'self' devtools: ws://127.0.0.1:*;">
++  'sha256-AIRkz8wOl/LgmUJduw9AsUnrb94PlBpePfk0Rowm+Vo=' 'self' https://chrome-devtools-frontend.appspot.com; img-src 'self' data: blob:; frame-src * data:; connect-src data: https://chromeuxreport.googleapis.com 'self' devtools: ws://127.0.0.1:*;">
++
  <meta name="referrer" content="no-referrer">
 +<script>
 +// Vendored from https://unpkg.com/@ungap/custom-elements@1.3.0/min.js
@@ -87,7 +78,7 @@ index 64d55d4c14..07972be81f 100644
  <link href="./application_tokens.css" rel="stylesheet">
  <link href="./design_system_tokens.css" rel="stylesheet">
 diff --git a/front_end/entrypoints/js_app/js_app.ts b/front_end/entrypoints/js_app/js_app.ts
-index a7f4827d68..2dbb4eca42 100644
+index c4b4593b3d..d5021969c1 100644
 --- a/front_end/entrypoints/js_app/js_app.ts
 +++ b/front_end/entrypoints/js_app/js_app.ts
 @@ -44,6 +44,9 @@ async function loadSourcesModule(): Promise<typeof Sources> {
@@ -100,12 +91,25 @@ index a7f4827d68..2dbb4eca42 100644
  export class JsMainImpl implements Common.Runnable.Runnable {
    static instance(opts: {forceNew: boolean|null} = {forceNew: null}): JsMainImpl {
      const {forceNew} = opts;
+diff --git a/front_end/ui/dom_extension/DOMExtension.ts b/front_end/ui/dom_extension/DOMExtension.ts
+index e3aaae75eb..1bdd11511f 100644
+--- a/front_end/ui/dom_extension/DOMExtension.ts
++++ b/front_end/ui/dom_extension/DOMExtension.ts
+@@ -134,7 +134,7 @@ Node.prototype.getComponentSelection = function(): Selection|null {
+   while (parent && parent.nodeType !== Node.DOCUMENT_FRAGMENT_NODE) {
+     parent = parent.parentNode;
+   }
+-  return parent instanceof ShadowRoot ? parent.getSelection() : this.window().getSelection();
++  return parent instanceof ShadowRoot ? (parent?.getSelection?.() ?? this.window().getSelection()) : this.window().getSelection();
+ };
+
+ Node.prototype.hasSelection = function(): boolean {
 diff --git a/front_end/ui/legacy/components/data_grid/DataGrid.ts b/front_end/ui/legacy/components/data_grid/DataGrid.ts
-index 70820e38a1..5c9e25c522 100644
+index 2c6baeb448..d8e9e81763 100644
 --- a/front_end/ui/legacy/components/data_grid/DataGrid.ts
 +++ b/front_end/ui/legacy/components/data_grid/DataGrid.ts
-@@ -223,6 +223,8 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
-     this.headerRow = this.dataTableHeadInternal.createChild('tr');
+@@ -222,6 +222,8 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
+     this.headerRow = this.#dataTableHead.createChild('tr');
 
      this.dataTableBody = this.dataTable.createChild('tbody');
 +    // This is required for Firefox, else Firefox will position the <tbody/> *under* the <thead/>
@@ -124,5 +128,5 @@ index 70820e38a1..5c9e25c522 100644
        return;
      }
 -- 
-2.39.5 (Apple Git-154)
+2.50.1 (Apple Git-155)
 

packages/chrome-devtools-patches/patches/0002-Setup-Cloudflare-devtools-target-type.patch

@@ -1,4 +1,4 @@
-From 0b2f719ec57d77ac8837ffa62293b3c1cb97551f Mon Sep 17 00:00:00 2001
+From e203327d849387af1d35e4f239f34f9c86ba9116 Mon Sep 17 00:00:00 2001
 From: Workers DevProd <workers-devprod@cloudflare.com>
 Date: Fri, 25 Oct 2024 16:06:06 +0100
 Subject: [PATCH 2/8] Setup Cloudflare devtools target type
@@ -9,21 +9,21 @@ Subject: [PATCH 2/8] Setup Cloudflare devtools target type
  2 files changed, 6 insertions(+), 1 deletion(-)
 
 diff --git a/front_end/core/sdk/Target.ts b/front_end/core/sdk/Target.ts
-index 2437d6aac1..e9a3318268 100644
+index b36f74f402..0b0b6b51ce 100644
 --- a/front_end/core/sdk/Target.ts
 +++ b/front_end/core/sdk/Target.ts
-@@ -98,6 +98,10 @@ export class Target extends ProtocolClient.InspectorBackend.TargetBase {
+@@ -108,6 +108,10 @@ export class Target extends ProtocolClient.InspectorBackend.TargetBase {
          break;
        case Type.NODE_WORKER:
-         this.#capabilitiesMask = Capability.JS | Capability.NETWORK | Capability.TARGET;
+         this.#capabilitiesMask = Capability.JS | Capability.NETWORK | Capability.TARGET | Capability.IO;
 +        break;
 +      case Type.CLOUDFLARE:
 +        this.#capabilitiesMask = Capability.JS | Capability.NETWORK;
 +        break;
      }
-     this.#typeInternal = type;
-     this.#parentTargetInternal = parentTarget;
-@@ -298,6 +302,7 @@ export enum Type {
+     this.#type = type;
+     this.#parentTarget = parentTarget;
+@@ -297,6 +301,7 @@ export enum Type {
    AUCTION_WORKLET = 'auction-worklet',
    WORKLET = 'worklet',
    TAB = 'tab',
@@ -32,7 +32,7 @@ index 2437d6aac1..e9a3318268 100644
  }
 
 diff --git a/front_end/entrypoints/js_app/js_app.ts b/front_end/entrypoints/js_app/js_app.ts
-index 2dbb4eca42..814bc1fc70 100644
+index d5021969c1..3c0179b3ed 100644
 --- a/front_end/entrypoints/js_app/js_app.ts
 +++ b/front_end/entrypoints/js_app/js_app.ts
 @@ -61,7 +61,7 @@ export class JsMainImpl implements Common.Runnable.Runnable {
@@ -45,5 +45,5 @@ index 2dbb4eca42..814bc1fc70 100644
      }, Components.TargetDetachedDialog.TargetDetachedDialog.connectionLost);
    }
 -- 
-2.39.5 (Apple Git-154)
+2.50.1 (Apple Git-155)
 

packages/chrome-devtools-patches/patches/0003-Add-ping-to-improve-connection-stability.-Without-th.patch

@@ -1,45 +1,41 @@
-From bcba740e8dd373acf74a8d7f82d93107e2bf4a08 Mon Sep 17 00:00:00 2001
+From d6566fcd0e63e5ba297ccb286e35732dde6f11db Mon Sep 17 00:00:00 2001
 From: Workers DevProd <workers-devprod@cloudflare.com>
 Date: Fri, 25 Oct 2024 15:04:17 +0100
 Subject: [PATCH 3/8] Add ping to improve connection stability. Without this,
  we see frequent "Devtools disconnected" messages in the dash and Workers
  Playground
 
 ---
- front_end/core/protocol_client/InspectorBackend.ts | 8 ++++++++
- 1 file changed, 8 insertions(+)
+ front_end/core/protocol_client/InspectorBackend.ts | 5 +++++
+ 1 file changed, 5 insertions(+)
 
 diff --git a/front_end/core/protocol_client/InspectorBackend.ts b/front_end/core/protocol_client/InspectorBackend.ts
-index 32948c2dbd..27dfa1abe3 100644
+index 8c7691a6e4..081ae4ee77 100644
 --- a/front_end/core/protocol_client/InspectorBackend.ts
 +++ b/front_end/core/protocol_client/InspectorBackend.ts
-@@ -256,6 +256,7 @@ export class SessionRouter {
-     proxyConnection: ((Connection | undefined)|null),
+@@ -187,10 +187,14 @@ export class SessionRouter implements CDPConnectionObserver {
+   readonly #sessions = new Map<string, {
+     target: TargetBase,
    }>();
-   #pendingScripts: Array<() => void> = [];
 +  #pingInterval: ReturnType<typeof setInterval>;
 
-   constructor(connection: Connection) {
-     this.#connectionInternal = connection;
-@@ -266,11 +267,18 @@ export class SessionRouter {
-     this.#connectionInternal.setOnMessage(this.onMessage.bind(this));
-
-     this.#connectionInternal.setOnDisconnect(reason => {
-+      clearInterval(this.#pingInterval);
-       const session = this.#sessions.get('');
-       if (session) {
-         session.target.dispose(reason);
-       }
-     });
+   constructor(connection: CDPConnection) {
+     this.#connection = connection;
+     this.#connection.observe(this);
 +    this.#pingInterval = setInterval(() => {
-+      this.#connectionInternal.sendRawMessage(JSON.stringify({
-+        method: 'Runtime.getIsolateId',
-+        id: this.nextMessageId(),
-+      }));
++      void this.#connection.send('Runtime.getIsolateId', undefined, undefined);
 +    }, 10_000);
    }
 
-   registerSession(target: TargetBase, sessionId: string, proxyConnection?: Connection|null): void {
+   registerSession(target: TargetBase, sessionId: string): void {
+@@ -209,6 +213,7 @@ export class SessionRouter implements CDPConnectionObserver {
+   }
+
+   onDisconnect(reason: string): void {
++    clearInterval(this.#pingInterval);
+     const session = this.#sessions.get('');
+     if (session) {
+       session.target.dispose(reason);
 -- 
-2.39.5 (Apple Git-154)
+2.50.1 (Apple Git-155)