chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

package/front_end/third_party/puppeteer/package/src/generated/injected.ts

@@ -5,4 +5,4 @@
  *
  * @internal
  */
-export const source = "\"use strict\";var g=Object.defineProperty;var X=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var Y=Object.prototype.hasOwnProperty;var l=(t,e)=>{for(var r in e)g(t,r,{get:e[r],enumerable:!0})},J=(t,e,r,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let n of B(e))!Y.call(t,n)&&n!==r&&g(t,n,{get:()=>e[n],enumerable:!(o=X(e,n))||o.enumerable});return t};var z=t=>J(g({},\"__esModule\",{value:!0}),t);var pe={};l(pe,{default:()=>he});module.exports=z(pe);var N=class extends Error{constructor(e,r){super(e,r),this.name=this.constructor.name}get[Symbol.toStringTag](){return this.constructor.name}},p=class extends N{};var c=class t{static create(e){return new t(e)}static async race(e){let r=new Set;try{let o=e.map(n=>n instanceof t?(n.#n&&r.add(n),n.valueOrThrow()):n);return await Promise.race(o)}finally{for(let o of r)o.reject(new Error(\"Timeout cleared\"))}}#e=!1;#r=!1;#o;#t;#a=new Promise(e=>{this.#t=e});#n;#i;constructor(e){e&&e.timeout>0&&(this.#i=new p(e.message),this.#n=setTimeout(()=>{this.reject(this.#i)},e.timeout))}#l(e){clearTimeout(this.#n),this.#o=e,this.#t()}resolve(e){this.#r||this.#e||(this.#e=!0,this.#l(e))}reject(e){this.#r||this.#e||(this.#r=!0,this.#l(e))}resolved(){return this.#e}finished(){return this.#e||this.#r}value(){return this.#o}#s;valueOrThrow(){return this.#s||(this.#s=(async()=>{if(await this.#a,this.#r)throw this.#o;return this.#o})()),this.#s}};var L=new Map,F=t=>{let e=L.get(t);return e||(e=new Function(`return ${t}`)(),L.set(t,e),e)};var x={};l(x,{ariaQuerySelector:()=>G,ariaQuerySelectorAll:()=>b});var G=(t,e)=>globalThis.__ariaQuerySelector(t,e),b=async function*(t,e){yield*await globalThis.__ariaQuerySelectorAll(t,e)};var E={};l(E,{cssQuerySelector:()=>K,cssQuerySelectorAll:()=>Z});var K=(t,e)=>t.querySelector(e),Z=function(t,e){return t.querySelectorAll(e)};var A={};l(A,{customQuerySelectors:()=>P});var v=class{#e=new Map;register(e,r){if(!r.queryOne&&r.queryAll){let o=r.queryAll;r.queryOne=(n,i)=>{for(let s of o(n,i))return s;return null}}else if(r.queryOne&&!r.queryAll){let o=r.queryOne;r.queryAll=(n,i)=>{let s=o(n,i);return s?[s]:[]}}else if(!r.queryOne||!r.queryAll)throw new Error(\"At least one query method must be defined.\");this.#e.set(e,{querySelector:r.queryOne,querySelectorAll:r.queryAll})}unregister(e){this.#e.delete(e)}get(e){return this.#e.get(e)}clear(){this.#e.clear()}},P=new v;var R={};l(R,{pierceQuerySelector:()=>ee,pierceQuerySelectorAll:()=>te});var ee=(t,e)=>{let r=null,o=n=>{let i=document.createTreeWalker(n,NodeFilter.SHOW_ELEMENT);do{let s=i.currentNode;s.shadowRoot&&o(s.shadowRoot),!(s instanceof ShadowRoot)&&s!==n&&!r&&s.matches(e)&&(r=s)}while(!r&&i.nextNode())};return t instanceof Document&&(t=t.documentElement),o(t),r},te=(t,e)=>{let r=[],o=n=>{let i=document.createTreeWalker(n,NodeFilter.SHOW_ELEMENT);do{let s=i.currentNode;s.shadowRoot&&o(s.shadowRoot),!(s instanceof ShadowRoot)&&s!==n&&s.matches(e)&&r.push(s)}while(i.nextNode())};return t instanceof Document&&(t=t.documentElement),o(t),r};var u=(t,e)=>{if(!t)throw new Error(e)};var y=class{#e;#r;#o;#t;constructor(e,r){this.#e=e,this.#r=r}async start(){let e=this.#t=c.create(),r=await this.#e();if(r){e.resolve(r);return}this.#o=new MutationObserver(async()=>{let o=await this.#e();o&&(e.resolve(o),await this.stop())}),this.#o.observe(this.#r,{childList:!0,subtree:!0,attributes:!0})}async stop(){u(this.#t,\"Polling never started.\"),this.#t.finished()||this.#t.reject(new Error(\"Polling stopped\")),this.#o&&(this.#o.disconnect(),this.#o=void 0)}result(){return u(this.#t,\"Polling never started.\"),this.#t.valueOrThrow()}},w=class{#e;#r;constructor(e){this.#e=e}async start(){let e=this.#r=c.create(),r=await this.#e();if(r){e.resolve(r);return}let o=async()=>{if(e.finished())return;let n=await this.#e();if(!n){window.requestAnimationFrame(o);return}e.resolve(n),await this.stop()};window.requestAnimationFrame(o)}async stop(){u(this.#r,\"Polling never started.\"),this.#r.finished()||this.#r.reject(new Error(\"Polling stopped\"))}result(){return u(this.#r,\"Polling never started.\"),this.#r.valueOrThrow()}},T=class{#e;#r;#o;#t;constructor(e,r){this.#e=e,this.#r=r}async start(){let e=this.#t=c.create(),r=await this.#e();if(r){e.resolve(r);return}this.#o=setInterval(async()=>{let o=await this.#e();o&&(e.resolve(o),await this.stop())},this.#r)}async stop(){u(this.#t,\"Polling never started.\"),this.#t.finished()||this.#t.reject(new Error(\"Polling stopped\")),this.#o&&(clearInterval(this.#o),this.#o=void 0)}result(){return u(this.#t,\"Polling never started.\"),this.#t.valueOrThrow()}};var _={};l(_,{PCombinator:()=>H,pQuerySelector:()=>fe,pQuerySelectorAll:()=>$});var a=class{static async*map(e,r){for await(let o of e)yield await r(o)}static async*flatMap(e,r){for await(let o of e)yield*r(o)}static async collect(e){let r=[];for await(let o of e)r.push(o);return r}static async first(e){for await(let r of e)return r}};var C={};l(C,{textQuerySelectorAll:()=>m});var re=new Set([\"checkbox\",\"image\",\"radio\"]),oe=t=>t instanceof HTMLSelectElement||t instanceof HTMLTextAreaElement||t instanceof HTMLInputElement&&!re.has(t.type),ne=new Set([\"SCRIPT\",\"STYLE\"]),f=t=>!ne.has(t.nodeName)&&!document.head?.contains(t),I=new WeakMap,j=t=>{for(;t;)I.delete(t),t instanceof ShadowRoot?t=t.host:t=t.parentNode},W=new WeakSet,se=new MutationObserver(t=>{for(let e of t)j(e.target)}),d=t=>{let e=I.get(t);if(e||(e={full:\"\",immediate:[]},!f(t)))return e;let r=\"\";if(oe(t))e.full=t.value,e.immediate.push(t.value),t.addEventListener(\"input\",o=>{j(o.target)},{once:!0,capture:!0});else{for(let o=t.firstChild;o;o=o.nextSibling){if(o.nodeType===Node.TEXT_NODE){e.full+=o.nodeValue??\"\",r+=o.nodeValue??\"\";continue}r&&e.immediate.push(r),r=\"\",o.nodeType===Node.ELEMENT_NODE&&(e.full+=d(o).full)}r&&e.immediate.push(r),t instanceof Element&&t.shadowRoot&&(e.full+=d(t.shadowRoot).full),W.has(t)||(se.observe(t,{childList:!0,characterData:!0,subtree:!0}),W.add(t))}return I.set(t,e),e};var m=function*(t,e){let r=!1;for(let o of t.childNodes)if(o instanceof Element&&f(o)){let n;o.shadowRoot?n=m(o.shadowRoot,e):n=m(o,e);for(let i of n)yield i,r=!0}r||t instanceof Element&&f(t)&&d(t).full.includes(e)&&(yield t)};var k={};l(k,{checkVisibility:()=>le,pierce:()=>S,pierceAll:()=>O});var ie=[\"hidden\",\"collapse\"],le=(t,e)=>{if(!t)return e===!1;if(e===void 0)return t;let r=t.nodeType===Node.TEXT_NODE?t.parentElement:t,o=window.getComputedStyle(r),n=o&&!ie.includes(o.visibility)&&!ae(r);return e===n?t:!1};function ae(t){let e=t.getBoundingClientRect();return e.width===0||e.height===0}var ce=t=>\"shadowRoot\"in t&&t.shadowRoot instanceof ShadowRoot;function*S(t){ce(t)?yield t.shadowRoot:yield t}function*O(t){t=S(t).next().value,yield t;let e=[document.createTreeWalker(t,NodeFilter.SHOW_ELEMENT)];for(let r of e){let o;for(;o=r.nextNode();)o.shadowRoot&&(yield o.shadowRoot,e.push(document.createTreeWalker(o.shadowRoot,NodeFilter.SHOW_ELEMENT)))}}var Q={};l(Q,{xpathQuerySelectorAll:()=>q});var q=function*(t,e,r=-1){let n=(t.ownerDocument||document).evaluate(e,t,null,XPathResult.ORDERED_NODE_ITERATOR_TYPE),i=[],s;for(;(s=n.iterateNext())&&(i.push(s),!(r&&i.length===r)););for(let h=0;h<i.length;h++)s=i[h],yield s,delete i[h]};var ue=/[-\\w\\P{ASCII}*]/,H=(r=>(r.Descendent=\">>>\",r.Child=\">>>>\",r))(H||{}),V=t=>\"querySelectorAll\"in t,M=class{#e;#r=[];#o=void 0;elements;constructor(e,r){this.elements=[e],this.#e=r,this.#t()}async run(){if(typeof this.#o==\"string\")switch(this.#o.trimStart()){case\":scope\":this.#t();break}for(;this.#o!==void 0;this.#t()){let e=this.#o;typeof e==\"string\"?e[0]&&ue.test(e[0])?this.elements=a.flatMap(this.elements,async function*(r){V(r)&&(yield*r.querySelectorAll(e))}):this.elements=a.flatMap(this.elements,async function*(r){if(!r.parentElement){if(!V(r))return;yield*r.querySelectorAll(e);return}let o=0;for(let n of r.parentElement.children)if(++o,n===r)break;yield*r.parentElement.querySelectorAll(`:scope>:nth-child(${o})${e}`)}):this.elements=a.flatMap(this.elements,async function*(r){switch(e.name){case\"text\":yield*m(r,e.value);break;case\"xpath\":yield*q(r,e.value);break;case\"aria\":yield*b(r,e.value);break;default:let o=P.get(e.name);if(!o)throw new Error(`Unknown selector type: ${e.name}`);yield*o.querySelectorAll(r,e.value)}})}}#t(){if(this.#r.length!==0){this.#o=this.#r.shift();return}if(this.#e.length===0){this.#o=void 0;return}let e=this.#e.shift();switch(e){case\">>>>\":{this.elements=a.flatMap(this.elements,S),this.#t();break}case\">>>\":{this.elements=a.flatMap(this.elements,O),this.#t();break}default:this.#r=e,this.#t();break}}},D=class{#e=new WeakMap;calculate(e,r=[]){if(e===null)return r;e instanceof ShadowRoot&&(e=e.host);let o=this.#e.get(e);if(o)return[...o,...r];let n=0;for(let s=e.previousSibling;s;s=s.previousSibling)++n;let i=this.calculate(e.parentNode,[n]);return this.#e.set(e,i),[...i,...r]}},U=(t,e)=>{if(t.length+e.length===0)return 0;let[r=-1,...o]=t,[n=-1,...i]=e;return r===n?U(o,i):r<n?-1:1},de=async function*(t){let e=new Set;for await(let o of t)e.add(o);let r=new D;yield*[...e.values()].map(o=>[o,r.calculate(o)]).sort(([,o],[,n])=>U(o,n)).map(([o])=>o)},$=function(t,e){let r=JSON.parse(e);if(r.some(o=>{let n=0;return o.some(i=>(typeof i==\"string\"?++n:n=0,n>1))}))throw new Error(\"Multiple deep combinators found in sequence.\");return de(a.flatMap(r,o=>{let n=new M(t,o);return n.run(),n.elements}))},fe=async function(t,e){for await(let r of $(t,e))return r;return null};var me=Object.freeze({...x,...A,...R,..._,...C,...k,...Q,...E,Deferred:c,createFunction:F,createTextContent:d,IntervalPoller:T,isSuitableNodeForTextMatching:f,MutationPoller:y,RAFPoller:w}),he=me;\n";
+export const source = "\"use strict\";var g=Object.defineProperty;var X=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var Y=Object.prototype.hasOwnProperty;var l=(t,e)=>{for(var r in e)g(t,r,{get:e[r],enumerable:!0})},J=(t,e,r,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let n of B(e))!Y.call(t,n)&&n!==r&&g(t,n,{get:()=>e[n],enumerable:!(o=X(e,n))||o.enumerable});return t};var z=t=>J(g({},\"__esModule\",{value:!0}),t);var pe={};l(pe,{default:()=>he});module.exports=z(pe);var N=class extends Error{constructor(e,r){super(e,r),this.name=this.constructor.name}get[Symbol.toStringTag](){return this.constructor.name}},p=class extends N{};var c=class t{static create(e){return new t(e)}static async race(e){let r=new Set;try{let o=e.map(n=>n instanceof t?(n.#n&&r.add(n),n.valueOrThrow()):n);return await Promise.race(o)}finally{for(let o of r)o.reject(new Error(\"Timeout cleared\"))}}#e=!1;#r=!1;#o;#t;#a=new Promise(e=>{this.#t=e});#n;#i;constructor(e){e&&e.timeout>0&&(this.#i=new p(e.message),this.#n=setTimeout(()=>{this.reject(this.#i)},e.timeout))}#l(e){clearTimeout(this.#n),this.#o=e,this.#t()}resolve(e){this.#r||this.#e||(this.#e=!0,this.#l(e))}reject(e){this.#r||this.#e||(this.#r=!0,this.#l(e))}resolved(){return this.#e}finished(){return this.#e||this.#r}value(){return this.#o}#s;valueOrThrow(){return this.#s||(this.#s=(async()=>{if(await this.#a,this.#r)throw this.#o;return this.#o})()),this.#s}};var L=new Map,F=t=>{let e=L.get(t);return e||(e=new Function(`return ${t}`)(),L.set(t,e),e)};var x={};l(x,{ariaQuerySelector:()=>G,ariaQuerySelectorAll:()=>b});var G=(t,e)=>globalThis.__ariaQuerySelector(t,e),b=async function*(t,e){yield*await globalThis.__ariaQuerySelectorAll(t,e)};var E={};l(E,{cssQuerySelector:()=>K,cssQuerySelectorAll:()=>Z});var K=(t,e)=>t.querySelector(e),Z=function(t,e){return t.querySelectorAll(e)};var A={};l(A,{customQuerySelectors:()=>P});var v=class{#e=new Map;register(e,r){if(!r.queryOne&&r.queryAll){let o=r.queryAll;r.queryOne=(n,i)=>{for(let s of o(n,i))return s;return null}}else if(r.queryOne&&!r.queryAll){let o=r.queryOne;r.queryAll=(n,i)=>{let s=o(n,i);return s?[s]:[]}}else if(!r.queryOne||!r.queryAll)throw new Error(\"At least one query method must be defined.\");this.#e.set(e,{querySelector:r.queryOne,querySelectorAll:r.queryAll})}unregister(e){this.#e.delete(e)}get(e){return this.#e.get(e)}clear(){this.#e.clear()}},P=new v;var R={};l(R,{pierceQuerySelector:()=>ee,pierceQuerySelectorAll:()=>te});var ee=(t,e)=>{let r=null,o=n=>{let i=document.createTreeWalker(n,NodeFilter.SHOW_ELEMENT);do{let s=i.currentNode;s.shadowRoot&&o(s.shadowRoot),!(s instanceof ShadowRoot)&&s!==n&&!r&&s.matches(e)&&(r=s)}while(!r&&i.nextNode())};return t instanceof Document&&(t=t.documentElement),o(t),r},te=(t,e)=>{let r=[],o=n=>{let i=document.createTreeWalker(n,NodeFilter.SHOW_ELEMENT);do{let s=i.currentNode;s.shadowRoot&&o(s.shadowRoot),!(s instanceof ShadowRoot)&&s!==n&&s.matches(e)&&r.push(s)}while(i.nextNode())};return t instanceof Document&&(t=t.documentElement),o(t),r};var u=(t,e)=>{if(!t)throw new Error(e)};var y=class{#e;#r;#o;#t;constructor(e,r){this.#e=e,this.#r=r}async start(){let e=this.#t=c.create(),r=await this.#e();if(r){e.resolve(r);return}this.#o=new MutationObserver(async()=>{let o=await this.#e();o&&(e.resolve(o),await this.stop())}),this.#o.observe(this.#r,{childList:!0,subtree:!0,attributes:!0})}async stop(){u(this.#t,\"Polling never started.\"),this.#t.finished()||this.#t.reject(new Error(\"Polling stopped\")),this.#o&&(this.#o.disconnect(),this.#o=void 0)}result(){return u(this.#t,\"Polling never started.\"),this.#t.valueOrThrow()}},w=class{#e;#r;constructor(e){this.#e=e}async start(){let e=this.#r=c.create(),r=await this.#e();if(r){e.resolve(r);return}let o=async()=>{if(e.finished())return;let n=await this.#e();if(!n){window.requestAnimationFrame(o);return}e.resolve(n),await this.stop()};window.requestAnimationFrame(o)}async stop(){u(this.#r,\"Polling never started.\"),this.#r.finished()||this.#r.reject(new Error(\"Polling stopped\"))}result(){return u(this.#r,\"Polling never started.\"),this.#r.valueOrThrow()}},T=class{#e;#r;#o;#t;constructor(e,r){this.#e=e,this.#r=r}async start(){let e=this.#t=c.create(),r=await this.#e();if(r){e.resolve(r);return}this.#o=setInterval(async()=>{let o=await this.#e();o&&(e.resolve(o),await this.stop())},this.#r)}async stop(){u(this.#t,\"Polling never started.\"),this.#t.finished()||this.#t.reject(new Error(\"Polling stopped\")),this.#o&&(clearInterval(this.#o),this.#o=void 0)}result(){return u(this.#t,\"Polling never started.\"),this.#t.valueOrThrow()}};var _={};l(_,{PCombinator:()=>H,pQuerySelector:()=>fe,pQuerySelectorAll:()=>$});var a=class{static async*map(e,r){for await(let o of e)yield await r(o)}static async*flatMap(e,r){for await(let o of e)yield*r(o)}static async collect(e){let r=[];for await(let o of e)r.push(o);return r}static async first(e){for await(let r of e)return r}};var C={};l(C,{textQuerySelectorAll:()=>m});var re=new Set([\"checkbox\",\"image\",\"radio\"]),oe=t=>t instanceof HTMLSelectElement||t instanceof HTMLTextAreaElement||t instanceof HTMLInputElement&&!re.has(t.type),ne=new Set([\"SCRIPT\",\"STYLE\"]),f=t=>!ne.has(t.nodeName)&&!document.head?.contains(t),I=new WeakMap,j=t=>{for(;t;)I.delete(t),t instanceof ShadowRoot?t=t.host:t=t.parentNode},W=new WeakSet,se=new MutationObserver(t=>{for(let e of t)j(e.target)}),d=t=>{let e=I.get(t);if(e||(e={full:\"\",immediate:[]},!f(t)))return e;let r=\"\";if(oe(t))e.full=t.value,e.immediate.push(t.value),t.addEventListener(\"input\",o=>{j(o.target)},{once:!0,capture:!0});else{for(let o=t.firstChild;o;o=o.nextSibling){if(o.nodeType===Node.TEXT_NODE){e.full+=o.nodeValue??\"\",r+=o.nodeValue??\"\";continue}r&&e.immediate.push(r),r=\"\",o.nodeType===Node.ELEMENT_NODE&&(e.full+=d(o).full)}r&&e.immediate.push(r),t instanceof Element&&t.shadowRoot&&(e.full+=d(t.shadowRoot).full),W.has(t)||(se.observe(t,{childList:!0,characterData:!0,subtree:!0}),W.add(t))}return I.set(t,e),e};var m=function*(t,e){let r=!1;for(let o of t.childNodes)if(o instanceof Element&&f(o)){let n;o.shadowRoot?n=m(o.shadowRoot,e):n=m(o,e);for(let i of n)yield i,r=!0}r||t instanceof Element&&f(t)&&d(t).full.includes(e)&&(yield t)};var k={};l(k,{checkVisibility:()=>le,pierce:()=>S,pierceAll:()=>O});var ie=[\"hidden\",\"collapse\"],le=(t,e)=>{if(!t)return e===!1;if(e===void 0)return t;let r=t.nodeType===Node.TEXT_NODE?t.parentElement:t,o=window.getComputedStyle(r),n=o&&!ie.includes(o.visibility)&&!ae(r);return e===n?t:!1};function ae(t){let e=t.getBoundingClientRect();return e.width===0||e.height===0}var ce=t=>\"shadowRoot\"in t&&t.shadowRoot instanceof ShadowRoot;function*S(t){ce(t)?yield t.shadowRoot:yield t}function*O(t){t=S(t).next().value,yield t;let e=[document.createTreeWalker(t,NodeFilter.SHOW_ELEMENT)];for(let r of e){let o;for(;o=r.nextNode();)o.shadowRoot&&(yield o.shadowRoot,e.push(document.createTreeWalker(o.shadowRoot,NodeFilter.SHOW_ELEMENT)))}}var Q={};l(Q,{xpathQuerySelectorAll:()=>q});var q=function*(t,e,r=-1){let n=(t.ownerDocument||document).evaluate(e,t,null,XPathResult.ORDERED_NODE_ITERATOR_TYPE),i=[],s;for(;(s=n.iterateNext())&&(i.push(s),!(r&&i.length===r)););for(let h=0;h<i.length;h++)s=i[h],yield s,delete i[h]};var ue=/[-\\w\\P{ASCII}*]/u,H=(r=>(r.Descendent=\">>>\",r.Child=\">>>>\",r))(H||{}),V=t=>\"querySelectorAll\"in t,M=class{#e;#r=[];#o=void 0;elements;constructor(e,r){this.elements=[e],this.#e=r,this.#t()}async run(){if(typeof this.#o==\"string\")switch(this.#o.trimStart()){case\":scope\":this.#t();break}for(;this.#o!==void 0;this.#t()){let e=this.#o;typeof e==\"string\"?e[0]&&ue.test(e[0])?this.elements=a.flatMap(this.elements,async function*(r){V(r)&&(yield*r.querySelectorAll(e))}):this.elements=a.flatMap(this.elements,async function*(r){if(!r.parentElement){if(!V(r))return;yield*r.querySelectorAll(e);return}let o=0;for(let n of r.parentElement.children)if(++o,n===r)break;yield*r.parentElement.querySelectorAll(`:scope>:nth-child(${o})${e}`)}):this.elements=a.flatMap(this.elements,async function*(r){switch(e.name){case\"text\":yield*m(r,e.value);break;case\"xpath\":yield*q(r,e.value);break;case\"aria\":yield*b(r,e.value);break;default:let o=P.get(e.name);if(!o)throw new Error(`Unknown selector type: ${e.name}`);yield*o.querySelectorAll(r,e.value)}})}}#t(){if(this.#r.length!==0){this.#o=this.#r.shift();return}if(this.#e.length===0){this.#o=void 0;return}let e=this.#e.shift();switch(e){case\">>>>\":{this.elements=a.flatMap(this.elements,S),this.#t();break}case\">>>\":{this.elements=a.flatMap(this.elements,O),this.#t();break}default:this.#r=e,this.#t();break}}},D=class{#e=new WeakMap;calculate(e,r=[]){if(e===null)return r;e instanceof ShadowRoot&&(e=e.host);let o=this.#e.get(e);if(o)return[...o,...r];let n=0;for(let s=e.previousSibling;s;s=s.previousSibling)++n;let i=this.calculate(e.parentNode,[n]);return this.#e.set(e,i),[...i,...r]}},U=(t,e)=>{if(t.length+e.length===0)return 0;let[r=-1,...o]=t,[n=-1,...i]=e;return r===n?U(o,i):r<n?-1:1},de=async function*(t){let e=new Set;for await(let o of t)e.add(o);let r=new D;yield*[...e.values()].map(o=>[o,r.calculate(o)]).sort(([,o],[,n])=>U(o,n)).map(([o])=>o)},$=function(t,e){let r=JSON.parse(e);if(r.some(o=>{let n=0;return o.some(i=>(typeof i==\"string\"?++n:n=0,n>1))}))throw new Error(\"Multiple deep combinators found in sequence.\");return de(a.flatMap(r,o=>{let n=new M(t,o);return n.run(),n.elements}))},fe=async function(t,e){for await(let r of $(t,e))return r;return null};var me=Object.freeze({...x,...A,...R,..._,...C,...k,...Q,...E,Deferred:c,createFunction:F,createTextContent:d,IntervalPoller:T,isSuitableNodeForTextMatching:f,MutationPoller:y,RAFPoller:w}),he=me;\n";

package/front_end/third_party/puppeteer/package/src/generated/version.ts

@@ -1,4 +1,4 @@
 /**
  * @internal
  */
-export const packageVersion = '23.5.0';
+export const packageVersion = '23.5.2';

package/front_end/third_party/puppeteer/package/src/injected/PQuerySelector.ts

@@ -13,7 +13,7 @@ import {textQuerySelectorAll} from './TextQuerySelector.js';
 import {pierce, pierceAll} from './util.js';
 import {xpathQuerySelectorAll} from './XPathQuerySelector.js';
 
-const IDENT_TOKEN_START = /[-\w\P{ASCII}*]/;
+const IDENT_TOKEN_START = /[-\w\P{ASCII}*]/u;
 
 /**
  * @internal

package/front_end/third_party/puppeteer/package/src/node/ScreenRecorder.ts

@@ -249,7 +249,7 @@ export class ScreenRecorder extends PassThrough {
   /**
    * @internal
    */
-  async [asyncDisposeSymbol](): Promise<void> {
+  override async [asyncDisposeSymbol](): Promise<void> {
     await this.stop();
   }
 }

package/front_end/third_party/puppeteer/package/src/revisions.ts

@@ -8,7 +8,7 @@
  * @internal
  */
 export const PUPPETEER_REVISIONS = Object.freeze({
-  chrome: '129.0.6668.89',
-  'chrome-headless-shell': '129.0.6668.89',
+  chrome: '129.0.6668.91',
+  'chrome-headless-shell': '129.0.6668.91',
   firefox: 'stable_131.0',
 });

package/front_end/third_party/puppeteer/puppeteer.ts

@@ -4,7 +4,7 @@
 
 import { CdpBrowser } from './package/lib/esm/puppeteer/cdp/Browser.js';
 import { Connection } from './package/lib/esm/puppeteer/cdp/Connection.js';
-import { type ConnectionTransport } from './package/lib/esm/puppeteer/common/ConnectionTransport.js';
+import type { ConnectionTransport } from './package/lib/esm/puppeteer/common/ConnectionTransport.js';
 import { CdpFrame } from './package/lib/esm/puppeteer/cdp/Frame.js';
 import { CdpElementHandle } from './package/lib/esm/puppeteer/cdp/ElementHandle.js';
 import { CdpPage } from './package/lib/esm/puppeteer/cdp/Page.js';

package/front_end/ui/components/buttons/Button.ts

@@ -2,12 +2,15 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../icon_button/icon_button.js';
+
 import * as LitHtml from '../../lit-html/lit-html.js';
 import * as VisualLogging from '../../visual_logging/visual_logging.js';
-import * as IconButton from '../icon_button/icon_button.js';
 
 import buttonStyles from './button.css.legacy.js';
 
+const {html, Directives: {ifDefined, ref, classMap}} = LitHtml;
+
 declare global {
   interface HTMLElementTagNameMap {
     'devtools-button': Button;
@@ -49,7 +52,6 @@ interface ButtonState {
   toggled?: boolean;
   toggleOnClick?: boolean;
   checked?: boolean;
-  pressed?: boolean;
   active: boolean;
   spinner?: boolean;
   type: ButtonType;
@@ -237,11 +239,6 @@ export class Button extends HTMLElement {
     this.#render();
   }
 
-  set pressed(pressed: boolean) {
-    this.#props.pressed = pressed;
-    this.#render();
-  }
-
   set active(active: boolean) {
     this.#props.active = active;
     this.#render();
@@ -364,18 +361,22 @@ export class Button extends HTMLElement {
         this.#props.jslogContext && VisualLogging.action().track({click: true}).context(this.#props.jslogContext);
     // clang-format off
     LitHtml.render(
-      LitHtml.html`
-        <button title=${LitHtml.Directives.ifDefined(this.#props.title)} .disabled=${this.#props.disabled} class=${LitHtml.Directives.classMap(classes)} aria-pressed=${LitHtml.Directives.ifDefined(this.#props.pressed)} jslog=${LitHtml.Directives.ifDefined(jslog)}>
-          ${hasIcon
-            ? LitHtml.html`
-                <${IconButton.Icon.Icon.litTagName} name=${this.#props.toggled ? this.#props.toggledIconName : this.#props.iconName || this.#props.iconUrl}>
-                </${IconButton.Icon.Icon.litTagName}>`
+      html`
+        <button title=${ifDefined(this.#props.title)}
+          .disabled=${this.#props.disabled}
+          class=${classMap(classes)}
+          aria-pressed=${ifDefined(this.#props.toggled)}
+          jslog=${ifDefined(jslog)}
+        >${hasIcon
+            ? html`
+                <devtools-icon name=${ifDefined(this.#props.toggled ? this.#props.toggledIconName : this.#props.iconName || this.#props.iconUrl)}>
+                </devtools-icon>`
             : ''}
-          ${this.#props.longClickable ? LitHtml.html`<${IconButton.Icon.Icon.litTagName} name=${'triangle-bottom-right'} class="long-click">
-          </${IconButton.Icon.Icon.litTagName}>`
+          ${this.#props.longClickable ? html`<devtools-icon name=${'triangle-bottom-right'} class="long-click"
+            ></devtools-icon>`
       : ''}
-          ${this.#props.spinner ? LitHtml.html`<span class=${LitHtml.Directives.classMap(spinnerClasses)}></span>` : ''}
-          <slot @slotchange=${this.#render} ${LitHtml.Directives.ref(this.#slotRef)}></slot>
+          ${this.#props.spinner ? html`<span class=${classMap(spinnerClasses)}></span>` : ''}
+          <slot @slotchange=${this.#render} ${ref(this.#slotRef)}></slot>
         </button>
       `, this.#shadow, {host: this});
     // clang-format on

package/front_end/ui/components/buttons/button.css

@@ -30,9 +30,6 @@
   align-items: center;
 }
 
-/* This specific nesting is incompatible with what stylelint requires as ordering of the rules. */
-/* stylelint-disable no-descending-specificity */
-
 button {
   --hover-layer-color: var(--sys-color-state-hover-on-subtle);
   --active-layer-color: var(--sys-color-state-ripple-neutral-on-subtle);
@@ -294,7 +291,6 @@ button {
     }
   }
 }
-/* stylelint-enable no-descending-specificity */
 
 .spinner {
   display: block;

package/front_end/ui/components/cards/Card.test.ts

@@ -0,0 +1,66 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import type * as Common from '../../../core/common/common.js';
+import {
+  getElementWithinComponent,
+  renderElementIntoDOM,
+} from '../../../testing/DOMHelpers.js';
+
+import * as Cards from './cards.js';
+
+function assertCardContent(card: Cards.Card.Card, expectedContent: string[]) {
+  const slot = getElementWithinComponent(card, 'slot', HTMLSlotElement);
+  const textContents = Array.from(slot.assignedElements()).map(child => child.textContent);
+  assert.deepStrictEqual(textContents, expectedContent);
+}
+
+describe('Card', () => {
+  it('contains slotted elements', async () => {
+    const content1 = document.createElement('span');
+    content1.textContent = 'content 1';
+
+    const content2 = document.createElement('div');
+    content2.textContent = 'content 2';
+
+    const card = new Cards.Card.Card();
+    card.data = {
+      content: [content1, content2],
+    };
+
+    assertCardContent(card, ['content 1', 'content 2']);
+  });
+
+  it('order of slotted elements matter', () => {
+    const content1 = document.createElement('span');
+    content1.textContent = 'content 1';
+
+    const content2 = document.createElement('div');
+    content2.textContent = 'content 2';
+
+    const card = new Cards.Card.Card();
+    card.data = {
+      content: [content1, content2],
+    };
+    assertCardContent(card, ['content 1', 'content 2']);
+
+    card.data = {
+      content: [content2, content1],
+    };
+    assertCardContent(card, ['content 2', 'content 1']);
+  });
+
+  it('shows heading', () => {
+    const content1 = document.createElement('span');
+    const card = new Cards.Card.Card();
+    card.data = {
+      heading: 'This is my heading' as Common.UIString.LocalizedString,
+      content: [content1],
+    };
+    renderElementIntoDOM(card);
+    const heading = card.shadowRoot?.querySelector('[role="heading"]');
+    assert.instanceOf(heading, HTMLElement);
+    assert.strictEqual(heading.textContent, 'This is my heading');
+  });
+});

package/front_end/ui/components/cards/Card.ts

@@ -0,0 +1,57 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import type * as Common from '../../../core/common/common.js';
+import * as LitHtml from '../../lit-html/lit-html.js';
+
+import cardStyles from './card.css.js';
+
+const {html} = LitHtml;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'devtools-card': Card;
+  }
+}
+
+export interface CardData {
+  heading?: Common.UIString.LocalizedString;
+  content: HTMLElement[];
+}
+export class Card extends HTMLElement {
+  #heading?: string;
+  #content: HTMLElement[] = [];
+  readonly #shadow = this.attachShadow({mode: 'open'});
+
+  set data(data: CardData) {
+    this.#heading = data.heading;
+    this.#content.forEach(content => content.remove());
+    data.content.forEach(content => {
+      content.slot = 'content';
+      this.append(content);
+    });
+    this.#content = data.content;
+    this.#render();
+  }
+
+  connectedCallback(): void {
+    this.#shadow.adoptedStyleSheets = [cardStyles];
+    this.#render();
+  }
+
+  #render(): void {
+    // clang-format off
+    LitHtml.render(html`
+    <div class="card">
+      <div role="heading" class="heading">${this.#heading}</div>
+      <slot name="content" class='content-container'></slot>
+    </div>
+    `, this.#shadow, {
+    host: this,
+  });
+    // clang-format on
+  }
+}
+
+customElements.define('devtools-card', Card);

package/front_end/ui/components/cards/card.css

@@ -0,0 +1,32 @@
+/*
+ * Copyright 2024 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+.card {
+  margin: var(--sys-size-9);
+  width: auto;
+}
+
+.heading {
+  color: var(--sys-color-on-surface);
+  font: var(--sys-typescale-body2-medium);
+  margin-bottom: var(--sys-size-5);
+}
+
+.content-container {
+  border-radius: var(--sys-shape-corner-small);
+  box-shadow: var(--sys-elevation-level3);
+  display: flex;
+  flex-direction: column;
+  background: var(--app-color-card-background);
+}
+
+::slotted(*) {
+  padding: var(--sys-size-5);
+}
+
+::slotted(*:not(:first-child)) {
+  border-top: 1px solid var(--sys-color-divider);
+}

package/front_end/ui/components/cards/cards.ts

@@ -0,0 +1,9 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Card from './Card.js';
+
+export {
+  Card,
+};

package/front_end/ui/components/chrome_link/ChromeLink.test.ts

@@ -11,6 +11,8 @@ import * as Coordinator from '../render_coordinator/render_coordinator.js';
 
 import * as ChromeLink from './chrome_link.js';
 
+const {html} = LitHtml;
+
 const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 
 describeWithMockConnection('ChromeLink', () => {
@@ -21,10 +23,10 @@ describeWithMockConnection('ChromeLink', () => {
     const container = document.createElement('div');
     // clang-format off
     LitHtml.render(
-      LitHtml.html`
-        <${ChromeLink.ChromeLink.ChromeLink.litTagName} .href=${'chrome://settings'}>
+      html`
+        <devtools-chrome-link .href=${'chrome://settings' as Platform.DevToolsPath.UrlString}>
           link text
-        </${ChromeLink.ChromeLink.ChromeLink.litTagName}>
+        </devtools-chrome-link>
       `,
       container, {host: this},
     );

package/front_end/ui/components/chrome_link/ChromeLink.ts

@@ -12,6 +12,8 @@ import * as ComponentHelpers from '../helpers/helpers.js';
 
 import chromeLinkStyles from './chromeLink.css.js';
 
+const {html} = LitHtml;
+
 declare global {
   interface HTMLElementTagNameMap {
     'devtools-chrome-link': ChromeLink;
@@ -63,7 +65,7 @@ export class ChromeLink extends HTMLElement {
     LitHtml.render(
       /* x-link doesn't work with custom click/keydown handlers */
       /* eslint-disable rulesdir/ban_a_tags_in_lit_html */
-      LitHtml.html`
+      html`
         <a href=${this.#href} class="link" target="_blank"
           jslog=${VisualLogging.link().track({click: true}).context(jslogContext)}
           @click=${this.#handleClick}><slot></slot></a>

package/front_end/ui/components/data_grid/DataGrid.test.ts

@@ -34,6 +34,8 @@ import * as Coordinator from '../render_coordinator/render_coordinator.js';
 
 import * as DataGrid from './data_grid.js';
 
+const {html} = LitHtml;
+
 const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 
 const createColumns = (): DataGrid.DataGridUtils.Column[] => {
@@ -271,7 +273,7 @@ describe('DataGrid', () => {
           columnId: 'key',
           value: 'Hello World',
           title: 'Hello World',
-          renderer: value => LitHtml.html`<p>foo: ${value}</p>`,
+          renderer: value => html`<p>foo: ${value}</p>`,
         }],
       }];
       const component = renderDataGrid({columns, rows});

package/front_end/ui/components/data_grid/DataGrid.ts

@@ -37,6 +37,8 @@ import {
 } from './DataGridUtils.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
+
+const {html, Directives: {ifDefined, classMap, styleMap, repeat}} = LitHtml;
 const UIStrings = {
   /**
    *@description A context menu item in the Data Grid of a data grid
@@ -387,7 +389,7 @@ export class DataGrid extends HTMLElement {
    * Guidance on values of attribute taken from
    * https://www.w3.org/TR/wai-aria-practices/examples/grid/dataGrids.html.
    */
-  #ariaSortForHeader(col: Column): string|undefined {
+  #ariaSortForHeader(col: Column): 'none'|'ascending'|'descending'|undefined {
     if (col.sortable && (!this.#sortState || this.#sortState.columnId !== col.id)) {
       // Column is sortable but is not currently sorted
       return 'none';
@@ -409,15 +411,14 @@ export class DataGrid extends HTMLElement {
       const emptyCellClasses = LitHtml.Directives.classMap({
         firstVisibleColumn: colIndex === 0,
       });
-      return LitHtml.html`<td aria-hidden="true" class=${emptyCellClasses} data-filler-row-column-index=${
-          colIndex}></td>`;
+      return html`<td aria-hidden="true" class=${emptyCellClasses} data-filler-row-column-index=${colIndex}></td>`;
     });
     const emptyRowClasses = LitHtml.Directives.classMap({
       'filler-row': true,
       'padding-row': true,
       'empty-table': numberOfVisibleRows === 0,
     });
-    return LitHtml.html`<tr aria-hidden="true" class=${emptyRowClasses}>${emptyCells}</tr>`;
+    return html`<tr aria-hidden="true" class=${emptyRowClasses}>${emptyCells}</tr>`;
   }
 
   #cleanUpAfterResizeColumnComplete(): void {
@@ -569,7 +570,7 @@ export class DataGrid extends HTMLElement {
       return LitHtml.nothing;
     }
 
-    return LitHtml.html`<span class="cell-resize-handle"
+    return html`<span class="cell-resize-handle"
      @pointerdown=${this.#onResizePointerDown}
      @pointerup=${this.#onResizePointerUp}
      data-column-index=${columnIndex}
@@ -786,7 +787,7 @@ export class DataGrid extends HTMLElement {
     await coordinator.write(() => {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
-      LitHtml.render(LitHtml.html`
+      LitHtml.render(html`
       ${this.#columns.map((col, columnIndex) => {
         /**
          * We render the resizers outside of the table. One is rendered for each
@@ -796,13 +797,14 @@ export class DataGrid extends HTMLElement {
          */
         return this.#renderResizeForCell(col, [columnIndex, 0]);
       })}
-      <div class=${LitHtml.Directives.classMap(containerClassMap)} @scroll=${this.#onScroll} @focusout=${this.#onFocusOut}>
+      <div class=${classMap(containerClassMap)} @scroll=${this.#onScroll} @focusout=${this.#onFocusOut}>
         <table
-          aria-label=${LitHtml.Directives.ifDefined(this.#label)}
+          aria-label=${ifDefined(this.#label)}
           aria-rowcount=${this.#rows.length}
           aria-colcount=${this.#columns.length}
           @keydown=${this.#onTableKeyDown}
         >
+          <!-- @ts-ignore -->
           <colgroup>
             ${this.#columns.map((col, colIndex) => {
               const width = calculateColumnWidthPercentageFromWeighting(this.#columns, col.id);
@@ -810,13 +812,13 @@ export class DataGrid extends HTMLElement {
               if (!col.visible) {
                 return LitHtml.nothing;
               }
-              return LitHtml.html`<col style=${style} data-col-column-index=${colIndex}>`;
+              return html`<col style=${style} data-col-column-index=${colIndex}>`;
             })}
           </colgroup>
           <thead>
             <tr @contextmenu=${this.#onHeaderContextMenu}>
               ${this.#columns.map((col, columnIndex) => {
-                const thClasses = LitHtml.Directives.classMap({
+                const thClasses = classMap({
                   hidden: !col.visible,
                   firstVisibleColumn: columnIndex === indexOfFirstVisibleColumn,
                   sortable: anyColumnsSortable,
@@ -824,9 +826,9 @@ export class DataGrid extends HTMLElement {
                 const tabbableCell = this.#tabbableCell();
                 const cellIsFocusableCell = anyColumnsSortable && columnIndex === tabbableCell[0] && tabbableCell[1] === 0;
 
-                return LitHtml.html`<th class=${thClasses}
+                return html`<th class=${thClasses}
                   jslog=${VisualLogging.tableHeader().track({click: anyColumnsSortable, resize: true}).context(col.id)}
-                  style=${LitHtml.Directives.ifDefined(col.styles ? LitHtml.Directives.styleMap(col.styles) : undefined)}
+                  style=${ifDefined(col.styles ? styleMap(col.styles) : undefined)}
                   data-grid-header-cell=${col.id}
                   @focus=${() => {
                     this.#focusCellIfRequired([columnIndex, 0]);
@@ -842,20 +844,20 @@ export class DataGrid extends HTMLElement {
                     this.#onColumnHeaderClick(col, columnIndex);
                   }}
                   title=${col.title}
-                  aria-sort=${LitHtml.Directives.ifDefined(this.#ariaSortForHeader(col))}
+                  aria-sort=${ifDefined(this.#ariaSortForHeader(col))}
                   aria-colindex=${columnIndex + 1}
                   data-row-index='0'
                   data-col-index=${columnIndex}
-                  tabindex=${LitHtml.Directives.ifDefined(anyColumnsSortable ? (cellIsFocusableCell ? '0' : '-1') : undefined)}
+                  tabindex=${ifDefined(anyColumnsSortable ? (cellIsFocusableCell ? '0' : '-1') : undefined)}
                 >${col.titleElement || col.title}</th>`;
               })}
             </tr>
           </thead>
           <tbody>
-            <tr class="filler-row-top padding-row" style=${LitHtml.Directives.styleMap({
+            <tr class="filler-row-top padding-row" style=${styleMap({
               height: `${topVisibleRow * ROW_HEIGHT_PIXELS}px`,
             })} aria-hidden="true"></tr>
-            ${LitHtml.Directives.repeat(renderableRows, row => this.#rowIndexMap.get(row), row => {
+            ${repeat(renderableRows, row => this.#rowIndexMap.get(row), row => {
               const rowIndex = this.#rowIndexMap.get(row);
               if (rowIndex === undefined) {
                 throw new Error('Trying to render a row that has no index in the rowIndexMap');
@@ -872,11 +874,11 @@ export class DataGrid extends HTMLElement {
                 selected: rowIsSelected,
                 hidden: row.hidden === true,
               });
-              return LitHtml.html`
+              return html`
                 <tr
                   aria-rowindex=${rowIndex + 1}
                   class=${rowClasses}
-                  style=${LitHtml.Directives.ifDefined(row.styles ? LitHtml.Directives.styleMap(row.styles) : undefined)}
+                  style=${ifDefined(row.styles ? styleMap(row.styles) : undefined)}
                   jslog=${VisualLogging.tableRow().track({keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Enter|Space'})}
                   @contextmenu=${this.#onBodyRowContextMenu}
                   @mouseenter=${() => {
@@ -887,16 +889,16 @@ export class DataGrid extends HTMLElement {
                   }}
                 >${this.#columns.map((col, columnIndex) => {
                   const cell = getRowEntryForColumnId(row, col.id);
-                  const cellClasses = LitHtml.Directives.classMap({
+                  const cellClasses = classMap({
                     hidden: !col.visible,
                     firstVisibleColumn: columnIndex === indexOfFirstVisibleColumn,
                   });
                   const cellIsFocusableCell = columnIndex === tabbableCell[0] && tableRowIndex === tabbableCell[1];
                   const cellOutput = col.visible ? renderCellValue(cell) : null;
-                  return LitHtml.html`<td
+                  return html`<td
                     class=${cellClasses}
                     jslog=${VisualLogging.tableCell().track({click: true})}).context(col.id)}
-                    style=${LitHtml.Directives.ifDefined(col.styles ? LitHtml.Directives.styleMap(col.styles) : undefined)}
+                    style=${ifDefined(col.styles ? styleMap(col.styles) : undefined)}
                     tabindex=${cellIsFocusableCell ? '0' : '-1'}
                     aria-colindex=${columnIndex + 1}
                     title=${cell.title || getCellTitleFromCellContent(String(cell.value))}
@@ -909,10 +911,10 @@ export class DataGrid extends HTMLElement {
                     }}
                   >${cellOutput}</td>`;
                 })}
-              `;
+              </tr>`;
             })}
             ${this.#renderEmptyFillerRow(renderableRows.length)}
-            <tr class="filler-row-bottom padding-row" style=${LitHtml.Directives.styleMap({
+            <tr class="filler-row-bottom padding-row" style=${styleMap({
               height: `${Math.max(0, nonHiddenRows.length - bottomVisibleRow) * ROW_HEIGHT_PIXELS}px`,
             })} aria-hidden="true"></tr>
           </tbody>

package/front_end/ui/components/data_grid/DataGridContextMenuUtils.ts

@@ -3,9 +3,9 @@
 // found in the LICENSE file.
 import type * as UI from '../../legacy/legacy.js';
 
-import {type DataGrid} from './DataGrid.js';
+import type {DataGrid} from './DataGrid.js';
 import {ContextMenuColumnSortClickEvent} from './DataGridEvents.js';
-import {type Column} from './DataGridUtils.js';
+import type {Column} from './DataGridUtils.js';
 
 function toggleColumnVisibility(dataGrid: DataGrid, column: Column): void {
   const newVisibility = !column.visible;

package/front_end/ui/components/data_grid/DataGridController.ts

@@ -2,14 +2,16 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import './DataGrid.js';
+
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as TextUtils from '../../../models/text_utils/text_utils.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as UI from '../../legacy/legacy.js';
 
-import {DataGrid, type DataGridContextMenusConfiguration, type DataGridData} from './DataGrid.js';
+import type {DataGridContextMenusConfiguration, DataGridData} from './DataGrid.js';
 import dataGridControllerStyles from './dataGridController.css.js';
-import {type ColumnHeaderClickEvent, type ContextMenuColumnSortClickEvent} from './DataGridEvents.js';
+import type {ColumnHeaderClickEvent, ContextMenuColumnSortClickEvent} from './DataGridEvents.js';
 import {
   type Column,
   getRowEntryForColumnId,
@@ -19,6 +21,8 @@ import {
   type SortState,
 } from './DataGridUtils.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    *@description Text announced when the column is sorted in ascending order
@@ -266,8 +270,8 @@ export class DataGridController extends HTMLElement {
   #render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    LitHtml.render(LitHtml.html`
-      <${DataGrid.litTagName} .data=${{
+    LitHtml.render(html`
+      <devtools-data-grid .data=${{
           columns: this.#columns,
           rows: this.#rows,
           activeSort: this.#sortState,
@@ -281,7 +285,7 @@ export class DataGridController extends HTMLElement {
         @columnheaderclick=${this.#onColumnHeaderClick}
         @contextmenucolumnsortclick=${this.#onContextMenuColumnSortClick}
         @contextmenuheaderresetclick=${this.#onContextMenuHeaderResetClick}
-     ></${DataGrid.litTagName}>
+     ></devtools-data-grid>
     `, this.#shadow, {
       host: this,
     });