feat: update devtools patches and show performance tab (#7137)

* chore: update patches

* chore: update makefile

* chore: update config files

* remove spurious files

* chore: update type error message

* chore: type update 2

* chore: update debugger patch

* chore: re-add removed string

* chore: remove obsolete experiments

* temp remove sourcemaps support to try to get working preview

* temporarily remove timeline tab

* revert inadvertent change to url

* chore: update file names

* Hopefully fix Network response

* fix network tab

* reverting last change

* chore: reinstate patch removed in error

* consolidate & simplify patches

* Create famous-birds-remain.md

* chore: update changeset to reflect performance tab display

---------

Co-authored-by: Samuel Macleod <smacleod@cloudflare.com>

.changeset/famous-birds-remain.md

@@ -0,0 +1,9 @@
+---
+"@cloudflare/wrangler-devtools": patch
+---
+
+feat: update devtools patches for release
+
+- rebases patches on top of latest devtools head
+- removes CPU profiling tab
+- adds performance tab

.gitignore

@@ -190,6 +190,10 @@ packages/quick-edit/web
 packages/wrangler/config-schema.json
 packages/wrangler-devtools/built-devtools
 packages/wrangler-devtools/.cipd
+packages/wrangler-devtools/.gclient
+packages/wrangler-devtools/.gclient_entries
+packages/wrangler-devtools/.gclient_previous_sync_commits
+packages/wrangler-devtools/.gcs_entries
 packages/wrangler-devtools/depot
 packages/wrangler-devtools/devtools-frontend
 packages/miniflare/dist-types/

.prettierignore

@@ -24,6 +24,7 @@ packages/create-cloudflare/templates*/**/*.*
 # but still exclude the worker-configuration.d.ts file, since it's generated
 !packages/create-cloudflare/templates*/hello-world/**/*.*
 packages/create-cloudflare/templates*/hello-world/**/worker-configuration.d.ts
+packages/wrangler-devtools/devtools-frontend
 
 # dist-functions are generated in the fixtures/vitest-pool-workers-examples/pages-functions-unit-integration-self folder
 dist-functions

packages/wrangler-devtools/Makefile

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

packages/wrangler-devtools/patches/0015-Basic-support-for-Safari.patch → packages/wrangler-devtools/patches/0001-Expand-Browser-support-make-it-work-in-Firefox-Safar.patch

@@ -1,15 +1,29 @@
-From 8b0cffa7ec0679ca5aff6eb86654b08956fa33f9 Mon Sep 17 00:00:00 2001
+From f33a1c016aca11dd75e912ba3373be01fc7480da Mon Sep 17 00:00:00 2001
 From: Workers DevProd <workers-devprod@cloudflare.com>
-Date: Thu, 5 Oct 2023 16:37:38 +0100
-Subject: [PATCH 15/15] Basic support for Safari
+Date: Fri, 25 Oct 2024 14:15:43 +0100
+Subject: [PATCH 1/8] Expand Browser support (make it work in Firefox & Safari)
 
+* Basic support for text colour in dark mode in browsers
+ that don't implement :host-context
+
+* A few firefox-specific patches (with detailed inline comments)
+
+* A (vendored) custom elements polyfill for Safari
+
+Acceptance criteria:
+If updating the commit of devtools upon which these patches are based, make sure this patch:
+* Displays console.log() output with sufficient contrast in dark mode
+* 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           | 8 +++++++-
- 2 files changed, 8 insertions(+), 2 deletions(-)
+ front_end/core/dom_extension/DOMExtension.ts  |  2 +-
+ front_end/entrypoint_template.html            | 38 ++++++++++++++++++-
+ front_end/entrypoints/js_app/js_app.ts        |  3 ++
+ .../legacy/components/data_grid/DataGrid.ts   |  5 +++
+ 4 files changed, 46 insertions(+), 2 deletions(-)
 
 diff --git a/front_end/core/dom_extension/DOMExtension.ts b/front_end/core/dom_extension/DOMExtension.ts
-index 6fb8d5237f..6b1e3d1342 100644
+index 940ce81924..e9542743ff 100644
 --- a/front_end/core/dom_extension/DOMExtension.ts
 +++ b/front_end/core/dom_extension/DOMExtension.ts
 @@ -132,7 +132,7 @@ Node.prototype.getComponentSelection = function(): Selection|null {
@@ -22,25 +36,92 @@ index 6fb8d5237f..6b1e3d1342 100644
 
  Node.prototype.hasSelection = function(): boolean {
 diff --git a/front_end/entrypoint_template.html b/front_end/entrypoint_template.html
-index 14d3e0071b..fa96b72fef 100644
+index 8e0e11ca35..0d422c3cda 100644
 --- a/front_end/entrypoint_template.html
 +++ b/front_end/entrypoint_template.html
-@@ -40,8 +40,14 @@
-     --override-text-color: rgb(189 198 207);
+@@ -13,8 +13,44 @@
+       background-color: rgb(41 42 45);
+     }
    }
++
++  .platform-mac {
++    --monospace-font-size: 11px;
++    --monospace-font-family: menlo, monospace;
++    --source-code-font-size: 11px;
++    --source-code-font-family: menlo, monospace;
++  }
++
++  .platform-windows {
++    --monospace-font-size: 12px;
++    --monospace-font-family: consolas, lucida console, courier new, monospace;
++    --source-code-font-size: 12px;
++    --source-code-font-family: consolas, lucida console, courier new, monospace;
++  }
++
++  .platform-linux {
++    --monospace-font-size: 11px;
++    --monospace-font-family: dejavu sans mono, monospace;
++    --source-code-font-size: 11px;
++    --source-code-font-family: dejavu sans mono, monospace;
++  }
++
++  .-theme-with-dark-background .platform-linux,
++  .-theme-with-dark-background .platform-mac {
++    --override-text-color: rgb(189 198 207);
++  }
++
++  .cm-editor + .cm-editor {
++    display: 'none',
++  }
  </style>
--<meta http-equiv="Content-Security-Policy" content="object-src 'none'; script-src 'sha256-nR3ouvAaRD5oAvx24d8aFSv1EH9XKi9uVvoOsvVuW8U=' 'self' 'unsafe-eval' https://chrome-devtools-frontend.appspot.com">
-+<meta http-equiv="Content-Security-Policy" content="object-src 'none'; script-src 'sha256-nR3ouvAaRD5oAvx24d8aFSv1EH9XKi9uVvoOsvVuW8U=' 'sha256-AIRkz8wOl/LgmUJduw9AsUnrb94PlBpePfk0Rowm+Vo=' 'self' 'unsafe-eval' https://chrome-devtools-frontend.appspot.com">
+-<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 name="referrer" content="no-referrer">
 +<script>
 +// Vendored from https://unpkg.com/@ungap/custom-elements@1.3.0/min.js
 +/*! (c) Andrea Giammarchi @webreflection ISC */
 +!function(){"use strict";var e=function(e,t){var n=function(e){for(var t=0,n=e.length;t<n;t++)r(e[t])},r=function(e){var t=e.target,n=e.attributeName,r=e.oldValue;t.attributeChangedCallback(n,r,t.getAttribute(n))};return function(o,a){var l=o.constructor.observedAttributes;return l&&e(a).then((function(){new t(n).observe(o,{attributes:!0,attributeOldValue:!0,attributeFilter:l});for(var e=0,a=l.length;e<a;e++)o.hasAttribute(l[e])&&r({target:o,attributeName:l[e],oldValue:null})})),o}};function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function n(e,n){var r="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!r){if(Array.isArray(e)||(r=function(e,n){if(e){if("string"==typeof e)return t(e,n);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?t(e,n):void 0}}(e))||n&&e&&"number"==typeof e.length){r&&(e=r);var o=0,a=function(){};return{s:a,n:function(){return o>=e.length?{done:!0}:{done:!1,value:e[o++]}},e:function(e){throw e},f:a}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var l,i=!0,c=!1;return{s:function(){r=r.call(e)},n:function(){var e=r.next();return i=e.done,e},e:function(e){c=!0,l=e},f:function(){try{i||null==r.return||r.return()}finally{if(c)throw l}}}}
 +/*! (c) Andrea Giammarchi - ISC */var r=!0,o=!1,a="querySelectorAll",l="querySelectorAll",i=self,c=i.document,u=i.Element,s=i.MutationObserver,f=i.Set,d=i.WeakMap,h=function(e){return l in e},v=[].filter,p=function(e){var t=new d,i=function(n,r){var o;if(r)for(var a,l=function(e){return e.matches||e.webkitMatchesSelector||e.msMatchesSelector}(n),i=0,c=y.length;i<c;i++)l.call(n,a=y[i])&&(t.has(n)||t.set(n,new f),(o=t.get(n)).has(a)||(o.add(a),e.handle(n,r,a)));else t.has(n)&&(o=t.get(n),t.delete(n),o.forEach((function(t){e.handle(n,r,t)})))},p=function(e){for(var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],n=0,r=e.length;n<r;n++)i(e[n],t)},y=e.query,g=e.root||c,m=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document,l=arguments.length>2&&void 0!==arguments[2]?arguments[2]:MutationObserver,i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:["*"],c=function t(o,l,i,c,u,s){var f,d=n(o);try{for(d.s();!(f=d.n()).done;){var h=f.value;(s||a in h)&&(u?i.has(h)||(i.add(h),c.delete(h),e(h,u)):c.has(h)||(c.add(h),i.delete(h),e(h,u)),s||t(h[a](l),l,i,c,u,r))}}catch(e){d.e(e)}finally{d.f()}},u=new l((function(e){if(i.length){var t,a=i.join(","),l=new Set,u=new Set,s=n(e);try{for(s.s();!(t=s.n()).done;){var f=t.value,d=f.addedNodes,h=f.removedNodes;c(h,a,l,u,o,o),c(d,a,l,u,r,o)}}catch(e){s.e(e)}finally{s.f()}}})),s=u.observe;return(u.observe=function(e){return s.call(u,e,{subtree:r,childList:r})})(t),u}(i,g,s,y),w=u.prototype.attachShadow;return w&&(u.prototype.attachShadow=function(e){var t=w.call(this,e);return m.observe(t),t}),y.length&&p(g[l](y)),{drop:function(e){for(var n=0,r=e.length;n<r;n++)t.delete(e[n])},flush:function(){for(var e=m.takeRecords(),t=0,n=e.length;t<n;t++)p(v.call(e[t].removedNodes,h),!1),p(v.call(e[t].addedNodes,h),!0)},observer:m,parse:p}},y=self,g=y.document,m=y.Map,w=y.MutationObserver,b=y.Object,E=y.Set,S=y.WeakMap,A=y.Element,M=y.HTMLElement,O=y.Node,N=y.Error,C=y.TypeError,T=y.Reflect,q=b.defineProperty,D=b.keys,I=b.getOwnPropertyNames,P=b.setPrototypeOf,k=!self.customElements,L=function(e){for(var t=D(e),n=[],r=new E,o=t.length,a=0;a<o;a++){n[a]=e[t[a]];try{delete e[t[a]]}catch(e){r.add(a)}}return function(){for(var a=0;a<o;a++)r.has(a)||(e[t[a]]=n[a])}};if(k){var x=function(){var e=this.constructor;if(!$.has(e))throw new C("Illegal constructor");var t=$.get(e);if(W)return F(W,t);var n=H.call(g,t);return F(P(n,e.prototype),t)},H=g.createElement,$=new m,_=new m,j=new m,R=new m,V=[],U=p({query:V,handle:function(e,t,n){var r=j.get(n);if(t&&!r.isPrototypeOf(e)){var o=L(e);W=P(e,r);try{new r.constructor}finally{W=null,o()}}var a="".concat(t?"":"dis","connectedCallback");a in r&&e[a]()}}).parse,W=null,B=function(e){if(!_.has(e)){var t,n=new Promise((function(e){t=e}));_.set(e,{$:n,_:t})}return _.get(e).$},F=e(B,w);self.customElements={define:function(e,t){if(R.has(e))throw new N('the name "'.concat(e,'" has already been used with this registry'));$.set(t,e),j.set(e,t.prototype),R.set(e,t),V.push(e),B(e).then((function(){U(g.querySelectorAll(e))})),_.get(e)._(t)},get:function(e){return R.get(e)},whenDefined:B},q(x.prototype=M.prototype,"constructor",{value:x}),self.HTMLElement=x,g.createElement=function(e,t){var n=t&&t.is,r=n?R.get(n):R.get(e);return r?new r:H.call(g,e)},"isConnected"in O.prototype||q(O.prototype,"isConnected",{configurable:!0,get:function(){return!(this.ownerDocument.compareDocumentPosition(this)&this.DOCUMENT_POSITION_DISCONNECTED)}})}else if(k=!self.customElements.get("extends-br"))try{var z=function e(){return self.Reflect.construct(HTMLBRElement,[],e)};z.prototype=HTMLLIElement.prototype;var G="extends-br";self.customElements.define("extends-br",z,{extends:"br"}),k=g.createElement("br",{is:G}).outerHTML.indexOf(G)<0;var J=self.customElements,K=J.get,Q=J.whenDefined;self.customElements.whenDefined=function(e){var t=this;return Q.call(this,e).then((function(n){return n||K.call(t,e)}))}}catch(e){}if(k){var X=function(e){var t=ae.get(e);ve(t.querySelectorAll(this),e.isConnected)},Y=self.customElements,Z=g.createElement,ee=Y.define,te=Y.get,ne=Y.upgrade,re=T||{construct:function(e){return e.call(this)}},oe=re.construct,ae=new S,le=new E,ie=new m,ce=new m,ue=new m,se=new m,fe=[],de=[],he=function(e){return se.get(e)||te.call(Y,e)},ve=p({query:de,handle:function(e,t,n){var r=ue.get(n);if(t&&!r.isPrototypeOf(e)){var o=L(e);we=P(e,r);try{new r.constructor}finally{we=null,o()}}var a="".concat(t?"":"dis","connectedCallback");a in r&&e[a]()}}).parse,pe=p({query:fe,handle:function(e,t){ae.has(e)&&(t?le.add(e):le.delete(e),de.length&&X.call(de,e))}}).parse,ye=A.prototype.attachShadow;ye&&(A.prototype.attachShadow=function(e){var t=ye.call(this,e);return ae.set(this,t),t});var ge=function(e){if(!ce.has(e)){var t,n=new Promise((function(e){t=e}));ce.set(e,{$:n,_:t})}return ce.get(e).$},me=e(ge,w),we=null;I(self).filter((function(e){return/^HTML.*Element$/.test(e)})).forEach((function(e){var t=self[e];function n(){var e=this.constructor;if(!ie.has(e))throw new C("Illegal constructor");var n=ie.get(e),r=n.is,o=n.tag;if(r){if(we)return me(we,r);var a=Z.call(g,o);return a.setAttribute("is",r),me(P(a,e.prototype),r)}return oe.call(this,t,[],e)}q(n.prototype=t.prototype,"constructor",{value:n}),q(self,e,{value:n})})),g.createElement=function(e,t){var n=t&&t.is;if(n){var r=se.get(n);if(r&&ie.get(r).tag===e)return new r}var o=Z.call(g,e);return n&&o.setAttribute("is",n),o},Y.get=he,Y.whenDefined=ge,Y.upgrade=function(e){var t=e.getAttribute("is");if(t){var n=se.get(t);if(n)return void me(P(e,n.prototype),t)}ne.call(Y,e)},Y.define=function(e,t,n){if(he(e))throw new N("'".concat(e,"' has already been defined as a custom element"));var r,o=n&&n.extends;ie.set(t,o?{is:e,tag:o}:{is:"",tag:e}),o?(r="".concat(o,'[is="').concat(e,'"]'),ue.set(r,t.prototype),se.set(e,t),de.push(r)):(ee.apply(Y,arguments),fe.push(r=e)),ge(e).then((function(){o?(ve(g.querySelectorAll(r)),le.forEach(X,[r])):pe(g.querySelectorAll(r))})),ce.get(e)._(t)}}}();
 +</script>
- <script>
-   var supportsCustomElements = false;
+ <script type="module" src="./entrypoints/%ENTRYPOINT_NAME%/%ENTRYPOINT_NAME%.js"></script>
+ <body class="undocked" id="-blink-dev-tools">
+diff --git a/front_end/entrypoints/js_app/js_app.ts b/front_end/entrypoints/js_app/js_app.ts
+index 45028f436a..6a154030b6 100644
+--- a/front_end/entrypoints/js_app/js_app.ts
++++ b/front_end/entrypoints/js_app/js_app.ts
+@@ -43,6 +43,9 @@ async function loadSourcesModule(): Promise<typeof Sources> {
+   }
+   return loadedSourcesModule;
+ }
++
++// This is not supported in Firefox: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
++Element.prototype.scrollIntoViewIfNeeded = Element.prototype.scrollIntoView;
+ 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/legacy/components/data_grid/DataGrid.ts b/front_end/ui/legacy/components/data_grid/DataGrid.ts
+index 93a117e746..d9e37e3d7a 100644
+--- a/front_end/ui/legacy/components/data_grid/DataGrid.ts
++++ b/front_end/ui/legacy/components/data_grid/DataGrid.ts
+@@ -217,6 +217,8 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
+     this.headerRow = this.dataTableHeadInternal.createChild('tr');
 
+     this.dataTableBody = this.dataTable.createChild('tbody');
++    // This is required for Firefox, else Firefox will position the <tbody/> *under* the <thead/>
++    (this.dataTableBody as HTMLElement).style.height = 'calc(100% - 27px)';
+     this.topFillerRow = (this.dataTableBody.createChild('tr', 'data-grid-filler-row revealed') as HTMLElement);
+     UI.ARIAUtils.setHidden(this.topFillerRow, true);
+     this.bottomFillerRow = (this.dataTableBody.createChild('tr', 'data-grid-filler-row revealed') as HTMLElement);
+@@ -505,6 +507,9 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
+   protected setVerticalPadding(top: number, bottom: number, isConstructorTime: boolean = false): void {
+     const topPx = top + 'px';
+     const bottomPx = (top || bottom) ? bottom + 'px' : 'auto';
++    // Firefox isn't happy with 0 height table rows, so hide them instead
++    this.topFillerRow.classList.toggle('revealed', topPx !== '0px');
++    this.bottomFillerRow.classList.toggle('revealed', bottomPx !== '0px');
+     if (this.topFillerRow.style.height === topPx && this.bottomFillerRow.style.height === bottomPx) {
+       return;
+     }
 -- 
-2.39.3 (Apple Git-145)
+2.39.5 (Apple Git-154)