chrome-devtools-frontend 1.0.1367881 → 1.0.1376716

package/front_end/third_party/web-vitals/package/dist/web-vitals.umd.cjs

@@ -1 +1 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).webVitals={})}(this,(function(e){"use strict";var n,t,i,r,o,a=-1,c=function(e){addEventListener("pageshow",(function(n){n.persisted&&(a=n.timeStamp,e(n))}),!0)},u=function(){var e=self.performance&&performance.getEntriesByType&&performance.getEntriesByType("navigation")[0];if(e&&e.responseStart>0&&e.responseStart<performance.now())return e},s=function(){var e=u();return e&&e.activationStart||0},f=function(e,n){var t=u(),i="navigate";a>=0?i="back-forward-cache":t&&(document.prerendering||s()>0?i="prerender":document.wasDiscarded?i="restore":t.type&&(i=t.type.replace(/_/g,"-")));return{name:e,value:void 0===n?-1:n,rating:"good",delta:0,entries:[],id:"v4-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12),navigationType:i}},d=function(e,n,t){try{if(PerformanceObserver.supportedEntryTypes.includes(e)){var i=new PerformanceObserver((function(e){Promise.resolve().then((function(){n(e.getEntries())}))}));return i.observe(Object.assign({type:e,buffered:!0},t||{})),i}}catch(e){}},l=function(e,n,t,i){var r,o;return function(a){n.value>=0&&(a||i)&&((o=n.value-(r||0))||void 0===r)&&(r=n.value,n.delta=o,n.rating=function(e,n){return e>n[1]?"poor":e>n[0]?"needs-improvement":"good"}(n.value,t),e(n))}},p=function(e){requestAnimationFrame((function(){return requestAnimationFrame((function(){return e()}))}))},v=function(e){document.addEventListener("visibilitychange",(function(){"hidden"===document.visibilityState&&e()}))},m=function(e){var n=!1;return function(){n||(e(),n=!0)}},h=-1,g=function(){return"hidden"!==document.visibilityState||document.prerendering?1/0:0},T=function(e){"hidden"===document.visibilityState&&h>-1&&(h="visibilitychange"===e.type?e.timeStamp:0,E())},y=function(){addEventListener("visibilitychange",T,!0),addEventListener("prerenderingchange",T,!0)},E=function(){removeEventListener("visibilitychange",T,!0),removeEventListener("prerenderingchange",T,!0)},C=function(){return h<0&&(h=g(),y(),c((function(){setTimeout((function(){h=g(),y()}),0)}))),{get firstHiddenTime(){return h}}},b=function(e){document.prerendering?addEventListener("prerenderingchange",(function(){return e()}),!0):e()},L=[1800,3e3],S=function(e,n){n=n||{},b((function(){var t,i=C(),r=f("FCP"),o=d("paint",(function(e){e.forEach((function(e){"first-contentful-paint"===e.name&&(o.disconnect(),e.startTime<i.firstHiddenTime&&(r.value=Math.max(e.startTime-s(),0),r.entries.push(e),t(!0)))}))}));o&&(t=l(e,r,L,n.reportAllChanges),c((function(i){r=f("FCP"),t=l(e,r,L,n.reportAllChanges),p((function(){r.value=performance.now()-i.timeStamp,t(!0)}))})))}))},w=[.1,.25],I=0,P=1/0,A=0,F=function(e){e.forEach((function(e){e.interactionId&&(P=Math.min(P,e.interactionId),A=Math.max(A,e.interactionId),I=A?(A-P)/7+1:0)}))},M=function(){"interactionCount"in performance||n||(n=d("event",F,{type:"event",buffered:!0,durationThreshold:0}))},k=[],D=new Map,x=0,B=function(){return(n?I:performance.interactionCount||0)-x},R=[],H=function(e){if(R.forEach((function(n){return n(e)})),e.interactionId||"first-input"===e.entryType){var n=k[k.length-1],t=D.get(e.interactionId);if(t||k.length<10||e.duration>n.latency){if(t)e.duration>t.latency?(t.entries=[e],t.latency=e.duration):e.duration===t.latency&&e.startTime===t.entries[0].startTime&&t.entries.push(e);else{var i={id:e.interactionId,latency:e.duration,entries:[e]};D.set(i.id,i),k.push(i)}k.sort((function(e,n){return n.latency-e.latency})),k.length>10&&k.splice(10).forEach((function(e){return D.delete(e.id)}))}}},N=function(e){var n=self.requestIdleCallback||self.setTimeout,t=-1;return e=m(e),"hidden"===document.visibilityState?e():(t=n(e),v(e)),t},q=[200,500],O=[2500,4e3],j={},V=[800,1800],_=function e(n){document.prerendering?b((function(){return e(n)})):"complete"!==document.readyState?addEventListener("load",(function(){return e(n)}),!0):setTimeout(n,0)},z={passive:!0,capture:!0},G=new Date,J=function(e,n){t||(t=n,i=e,r=new Date,U(removeEventListener),K())},K=function(){if(i>=0&&i<r-G){var e={entryType:"first-input",name:t.type,target:t.target,cancelable:t.cancelable,startTime:t.timeStamp,processingStart:t.timeStamp+i};o.forEach((function(n){n(e)})),o=[]}},Q=function(e){if(e.cancelable){var n=(e.timeStamp>1e12?new Date:performance.now())-e.timeStamp;"pointerdown"==e.type?function(e,n){var t=function(){J(e,n),r()},i=function(){r()},r=function(){removeEventListener("pointerup",t,z),removeEventListener("pointercancel",i,z)};addEventListener("pointerup",t,z),addEventListener("pointercancel",i,z)}(n,e):J(n,e)}},U=function(e){["mousedown","keydown","touchstart","pointerdown"].forEach((function(n){return e(n,Q,z)}))},W=[100,300];e.CLSThresholds=w,e.FCPThresholds=L,e.FIDThresholds=W,e.INPThresholds=q,e.LCPThresholds=O,e.TTFBThresholds=V,e.onCLS=function(e,n){n=n||{},S(m((function(){var t,i=f("CLS",0),r=0,o=[],a=function(e){e.forEach((function(e){if(!e.hadRecentInput){var n=o[0],t=o[o.length-1];r&&e.startTime-t.startTime<1e3&&e.startTime-n.startTime<5e3?(r+=e.value,o.push(e)):(r=e.value,o=[e])}})),r>i.value&&(i.value=r,i.entries=o,t())},u=d("layout-shift",a);u&&(t=l(e,i,w,n.reportAllChanges),v((function(){a(u.takeRecords()),t(!0)})),c((function(){r=0,i=f("CLS",0),t=l(e,i,w,n.reportAllChanges),p((function(){return t()}))})),setTimeout(t,0))})))},e.onFCP=S,e.onFID=function(e,n){n=n||{},b((function(){var r,a=C(),u=f("FID"),s=function(e){e.startTime<a.firstHiddenTime&&(u.value=e.processingStart-e.startTime,u.entries.push(e),r(!0))},p=function(e){e.forEach(s)},h=d("first-input",p);r=l(e,u,W,n.reportAllChanges),h&&(v(m((function(){p(h.takeRecords()),h.disconnect()}))),c((function(){var a;u=f("FID"),r=l(e,u,W,n.reportAllChanges),o=[],i=-1,t=null,U(addEventListener),a=s,o.push(a),K()})))}))},e.onINP=function(e,n){"PerformanceEventTiming"in self&&"interactionId"in PerformanceEventTiming.prototype&&(n=n||{},b((function(){var t;M();var i,r=f("INP"),o=function(e){N((function(){e.forEach(H);var n,t=(n=Math.min(k.length-1,Math.floor(B()/50)),k[n]);t&&t.latency!==r.value&&(r.value=t.latency,r.entries=t.entries,i())}))},a=d("event",o,{durationThreshold:null!==(t=n.durationThreshold)&&void 0!==t?t:40});i=l(e,r,q,n.reportAllChanges),a&&(a.observe({type:"first-input",buffered:!0}),v((function(){o(a.takeRecords()),i(!0)})),c((function(){x=0,k.length=0,D.clear(),r=f("INP"),i=l(e,r,q,n.reportAllChanges)})))})))},e.onLCP=function(e,n){n=n||{},b((function(){var t,i=C(),r=f("LCP"),o=function(e){n.reportAllChanges||(e=e.slice(-1)),e.forEach((function(e){e.startTime<i.firstHiddenTime&&(r.value=Math.max(e.startTime-s(),0),r.entries=[e],t())}))},a=d("largest-contentful-paint",o);if(a){t=l(e,r,O,n.reportAllChanges);var u=m((function(){j[r.id]||(o(a.takeRecords()),a.disconnect(),j[r.id]=!0,t(!0))}));["keydown","click"].forEach((function(e){addEventListener(e,(function(){return N(u)}),!0)})),v(u),c((function(i){r=f("LCP"),t=l(e,r,O,n.reportAllChanges),p((function(){r.value=performance.now()-i.timeStamp,j[r.id]=!0,t(!0)}))}))}}))},e.onTTFB=function(e,n){n=n||{};var t=f("TTFB"),i=l(e,t,V,n.reportAllChanges);_((function(){var r=u();r&&(t.value=Math.max(r.responseStart-s(),0),t.entries=[r],i(!0),c((function(){t=f("TTFB",0),(i=l(e,t,V,n.reportAllChanges))(!0)})))}))}}));
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).webVitals={})}(this,(function(e){"use strict";var n,t,r,i,o,a=-1,c=function(e){addEventListener("pageshow",(function(n){n.persisted&&(a=n.timeStamp,e(n))}),!0)},u=function(){var e=self.performance&&performance.getEntriesByType&&performance.getEntriesByType("navigation")[0];if(e&&e.responseStart>0&&e.responseStart<performance.now())return e},s=function(){var e=u();return e&&e.activationStart||0},f=function(e,n){var t=u(),r="navigate";a>=0?r="back-forward-cache":t&&(document.prerendering||s()>0?r="prerender":document.wasDiscarded?r="restore":t.type&&(r=t.type.replace(/_/g,"-")));return{name:e,value:void 0===n?-1:n,rating:"good",delta:0,entries:[],id:"v4-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12),navigationType:r}},d=function(e,n,t){try{if(PerformanceObserver.supportedEntryTypes.includes(e)){var r=new PerformanceObserver((function(e){Promise.resolve().then((function(){n(e.getEntries())}))}));return r.observe(Object.assign({type:e,buffered:!0},t||{})),r}}catch(e){}},l=function(e,n,t,r){var i,o;return function(a){n.value>=0&&(a||r)&&((o=n.value-(i||0))||void 0===i)&&(i=n.value,n.delta=o,n.rating=function(e,n){return e>n[1]?"poor":e>n[0]?"needs-improvement":"good"}(n.value,t),e(n))}},p=function(e){requestAnimationFrame((function(){return requestAnimationFrame((function(){return e()}))}))},v=function(e){document.addEventListener("visibilitychange",(function(){"hidden"===document.visibilityState&&e()}))},m=function(e){var n=!1;return function(){n||(e(),n=!0)}},h=-1,g=function(){return"hidden"!==document.visibilityState||document.prerendering?1/0:0},T=function(e){"hidden"===document.visibilityState&&h>-1&&(h="visibilitychange"===e.type?e.timeStamp:0,E())},y=function(){addEventListener("visibilitychange",T,!0),addEventListener("prerenderingchange",T,!0)},E=function(){removeEventListener("visibilitychange",T,!0),removeEventListener("prerenderingchange",T,!0)},C=function(){return h<0&&(h=g(),y(),c((function(){setTimeout((function(){h=g(),y()}),0)}))),{get firstHiddenTime(){return h}}},b=function(e){document.prerendering?addEventListener("prerenderingchange",(function(){return e()}),!0):e()},L=[1800,3e3],S=function(e,n){n=n||{},b((function(){var t,r=C(),i=f("FCP"),o=d("paint",(function(e){e.forEach((function(e){"first-contentful-paint"===e.name&&(o.disconnect(),e.startTime<r.firstHiddenTime&&(i.value=Math.max(e.startTime-s(),0),i.entries.push(e),t(!0)))}))}));o&&(t=l(e,i,L,n.reportAllChanges),c((function(r){i=f("FCP"),t=l(e,i,L,n.reportAllChanges),p((function(){i.value=performance.now()-r.timeStamp,t(!0)}))})))}))},w=[.1,.25],I=0,P=1/0,A=0,F=function(e){e.forEach((function(e){e.interactionId&&(P=Math.min(P,e.interactionId),A=Math.max(A,e.interactionId),I=A?(A-P)/7+1:0)}))},M=function(){return n?I:performance.interactionCount||0},k=function(){"interactionCount"in performance||n||(n=d("event",F,{type:"event",buffered:!0,durationThreshold:0}))},D=[],x=new Map,B=0,R=function(){var e=Math.min(D.length-1,Math.floor((M()-B)/50));return D[e]},H=[],N=function(e){if(H.forEach((function(n){return n(e)})),e.interactionId||"first-input"===e.entryType){var n=D[D.length-1],t=x.get(e.interactionId);if(t||D.length<10||e.duration>n.latency){if(t)e.duration>t.latency?(t.entries=[e],t.latency=e.duration):e.duration===t.latency&&e.startTime===t.entries[0].startTime&&t.entries.push(e);else{var r={id:e.interactionId,latency:e.duration,entries:[e]};x.set(r.id,r),D.push(r)}D.sort((function(e,n){return n.latency-e.latency})),D.length>10&&D.splice(10).forEach((function(e){return x.delete(e.id)}))}}},q=function(e){var n=self.requestIdleCallback||self.setTimeout,t=-1;return e=m(e),"hidden"===document.visibilityState?e():(t=n(e),v(e)),t},O=[200,500],j=[2500,4e3],V={},_=[800,1800],z=function e(n){document.prerendering?b((function(){return e(n)})):"complete"!==document.readyState?addEventListener("load",(function(){return e(n)}),!0):setTimeout(n,0)},G={passive:!0,capture:!0},J=new Date,K=function(e,n){t||(t=n,r=e,i=new Date,W(removeEventListener),Q())},Q=function(){if(r>=0&&r<i-J){var e={entryType:"first-input",name:t.type,target:t.target,cancelable:t.cancelable,startTime:t.timeStamp,processingStart:t.timeStamp+r};o.forEach((function(n){n(e)})),o=[]}},U=function(e){if(e.cancelable){var n=(e.timeStamp>1e12?new Date:performance.now())-e.timeStamp;"pointerdown"==e.type?function(e,n){var t=function(){K(e,n),i()},r=function(){i()},i=function(){removeEventListener("pointerup",t,G),removeEventListener("pointercancel",r,G)};addEventListener("pointerup",t,G),addEventListener("pointercancel",r,G)}(n,e):K(n,e)}},W=function(e){["mousedown","keydown","touchstart","pointerdown"].forEach((function(n){return e(n,U,G)}))},X=[100,300];e.CLSThresholds=w,e.FCPThresholds=L,e.FIDThresholds=X,e.INPThresholds=O,e.LCPThresholds=j,e.TTFBThresholds=_,e.onCLS=function(e,n){n=n||{},S(m((function(){var t,r=f("CLS",0),i=0,o=[],a=function(e){e.forEach((function(e){if(!e.hadRecentInput){var n=o[0],t=o[o.length-1];i&&e.startTime-t.startTime<1e3&&e.startTime-n.startTime<5e3?(i+=e.value,o.push(e)):(i=e.value,o=[e])}})),i>r.value&&(r.value=i,r.entries=o,t())},u=d("layout-shift",a);u&&(t=l(e,r,w,n.reportAllChanges),v((function(){a(u.takeRecords()),t(!0)})),c((function(){i=0,r=f("CLS",0),t=l(e,r,w,n.reportAllChanges),p((function(){return t()}))})),setTimeout(t,0))})))},e.onFCP=S,e.onFID=function(e,n){n=n||{},b((function(){var i,a=C(),u=f("FID"),s=function(e){e.startTime<a.firstHiddenTime&&(u.value=e.processingStart-e.startTime,u.entries.push(e),i(!0))},p=function(e){e.forEach(s)},h=d("first-input",p);i=l(e,u,X,n.reportAllChanges),h&&(v(m((function(){p(h.takeRecords()),h.disconnect()}))),c((function(){var a;u=f("FID"),i=l(e,u,X,n.reportAllChanges),o=[],r=-1,t=null,W(addEventListener),a=s,o.push(a),Q()})))}))},e.onINP=function(e,n){"PerformanceEventTiming"in self&&"interactionId"in PerformanceEventTiming.prototype&&(n=n||{},b((function(){var t;k();var r,i=f("INP"),o=function(e){q((function(){e.forEach(N);var n=R();n&&n.latency!==i.value&&(i.value=n.latency,i.entries=n.entries,r())}))},a=d("event",o,{durationThreshold:null!==(t=n.durationThreshold)&&void 0!==t?t:40});r=l(e,i,O,n.reportAllChanges),a&&(a.observe({type:"first-input",buffered:!0}),v((function(){o(a.takeRecords()),r(!0)})),c((function(){B=M(),D.length=0,x.clear(),i=f("INP"),r=l(e,i,O,n.reportAllChanges)})))})))},e.onLCP=function(e,n){n=n||{},b((function(){var t,r=C(),i=f("LCP"),o=function(e){n.reportAllChanges||(e=e.slice(-1)),e.forEach((function(e){e.startTime<r.firstHiddenTime&&(i.value=Math.max(e.startTime-s(),0),i.entries=[e],t())}))},a=d("largest-contentful-paint",o);if(a){t=l(e,i,j,n.reportAllChanges);var u=m((function(){V[i.id]||(o(a.takeRecords()),a.disconnect(),V[i.id]=!0,t(!0))}));["keydown","click"].forEach((function(e){addEventListener(e,(function(){return q(u)}),{once:!0,capture:!0})})),v(u),c((function(r){i=f("LCP"),t=l(e,i,j,n.reportAllChanges),p((function(){i.value=performance.now()-r.timeStamp,V[i.id]=!0,t(!0)}))}))}}))},e.onTTFB=function(e,n){n=n||{};var t=f("TTFB"),r=l(e,t,_,n.reportAllChanges);z((function(){var i=u();i&&(t.value=Math.max(i.responseStart-s(),0),t.entries=[i],r(!0),c((function(){t=f("TTFB",0),(r=l(e,t,_,n.reportAllChanges))(!0)})))}))}}));

package/front_end/third_party/web-vitals/package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-vitals",
-  "version": "4.2.1",
+  "version": "4.2.4",
   "description": "Easily measure performance metrics in JavaScript",
   "type": "module",
   "typings": "dist/modules/index.d.ts",

package/front_end/third_party/web-vitals/package/src/attribution/onINP.ts

@@ -63,7 +63,7 @@ let pendingLoAFs: PerformanceLongAnimationFrameTiming[] = [];
 let pendingEntriesGroups: pendingEntriesGroup[] = [];
 
 // The `processingEnd` time of most recently-processed event, chronologically.
-let latestProcessingEnd: number;
+let latestProcessingEnd: number = 0;
 
 // A WeakMap to look up the event-timing-entries group of a given entry.
 // Note that this only maps from "important" entries: either the first input or
@@ -188,7 +188,7 @@ const cleanupEntries = () => {
 
   // Keep all pending LoAF entries that either:
   // 1) intersect with entries in the newly cleaned up `pendingEntriesGroups`
-  // 2) occur after the most recently-processed event entry.
+  // 2) occur after the most recently-processed event entry (for up to MAX_PREVIOUS_FRAMES)
   const loafsToKeep: Set<PerformanceLongAnimationFrameTiming> = new Set();
   for (let i = 0; i < pendingEntriesGroups.length; i++) {
     const group = pendingEntriesGroups[i];
@@ -198,18 +198,15 @@ const cleanupEntries = () => {
       },
     );
   }
-  for (let i = 0; i < MAX_PREVIOUS_FRAMES; i++) {
-    // Look at pending LoAF in reverse order so the most recent are first.
-    const loaf = pendingLoAFs[pendingLoAFs.length - 1 - i];
-
-    // If we reach LoAFs that overlap with event processing,
-    // we can assume all previous ones have already been handled.
-    if (!loaf || loaf.startTime < latestProcessingEnd) break;
-
-    loafsToKeep.add(loaf);
-  }
+  const prevFrameIndexCutoff = pendingLoAFs.length - 1 - MAX_PREVIOUS_FRAMES;
+  // Filter `pendingLoAFs` to preserve LoAF order.
+  pendingLoAFs = pendingLoAFs.filter((loaf, index) => {
+    if (loaf.startTime > latestProcessingEnd && index > prevFrameIndexCutoff) {
+      return true;
+    }
 
-  pendingLoAFs = Array.from(loafsToKeep);
+    return loafsToKeep.has(loaf);
+  });
 
   // Reset the idle callback handle so it can be queued again.
   idleHandle = -1;
@@ -240,7 +237,7 @@ const getIntersectingLoAFs = (
   return intersectingLoAFs;
 };
 
-const attributeINP = (metric: INPMetric): INPMetricWithAttribution => {
+export const attributeINP = (metric: INPMetric): INPMetricWithAttribution => {
   const firstEntry = metric.entries[0];
   const group = entryToEntriesGroupMap.get(firstEntry)!;
 

package/front_end/third_party/web-vitals/package/src/lib/interactions.ts

@@ -51,7 +51,7 @@ const getInteractionCountForNavigation = () => {
 };
 
 export const resetInteractions = () => {
-  prevInteractionCount = 0;
+  prevInteractionCount = getInteractionCount();
   longestInteractionList.length = 0;
   longestInteractionMap.clear();
 };

package/front_end/third_party/web-vitals/package/src/onLCP.ts

@@ -104,7 +104,10 @@ export const onLCP = (
         // Wrap in a setTimeout so the callback is run in a separate task
         // to avoid extending the keyboard/click handler to reduce INP impact
         // https://github.com/GoogleChrome/web-vitals/issues/383
-        addEventListener(type, () => whenIdle(stopListening), true);
+        addEventListener(type, () => whenIdle(stopListening), {
+          once: true,
+          capture: true,
+        });
       });
 
       onHidden(stopListening);

package/front_end/third_party/web-vitals/rebuild.sh

@@ -0,0 +1,14 @@
+#!/bin/bash
+
+SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )"
+
+# Roll the latest version of the package from NPM
+python3 scripts/deps/roll_front_end_third_party.py web-vitals web-vitals dist
+
+# We need this one helper function to be exported, so modify the source .ts and then rebuild
+sed -i '' -e 's/^const attributeINP/export const attributeINP/g' $SCRIPT_DIR/package/src/attribution/onINP.ts
+
+# rough tsc version of https://github.com/GoogleChrome/web-vitals/blob/main/tsconfig.json
+# Minor variations in the *.d.ts files are fine, but make sure the only change to onINP.js is the
+# `export` added above.
+node_modules/.bin/tsc -d -t esnext -m nodenext --moduleResolution nodenext --lib es2017,DOM --outDir $SCRIPT_DIR/package/dist/modules/ $SCRIPT_DIR/package/src/**/*.ts

package/front_end/third_party/web-vitals/web-vitals.ts

@@ -1,3 +1,5 @@
 export * from './package/dist/modules/index.js';
 export * as Attribution from './package/dist/modules/attribution/index.js';
 export {onBFCacheRestore} from './package/dist/modules/lib/bfcache.js';
+export {attributeINP} from './package/dist/modules/attribution/onINP.js';
+export {entryPreProcessingCallbacks} from './package/dist/modules/lib/interactions.js';

package/front_end/ui/components/adorners/Adorner.ts

@@ -17,7 +17,6 @@ export interface AdornerData {
 }
 
 export class Adorner extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-adorner`;
   name = '';
 
   readonly #shadow = this.attachShadow({mode: 'open'});

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

@@ -103,7 +103,6 @@ export type ButtonData = CommonButtonData&(|{
 
 export class Button extends HTMLElement {
   static formAssociated = true;
-  static readonly litTagName = LitHtml.literal`devtools-button`;
   readonly #shadow = this.attachShadow({mode: 'open', delegatesFocus: true});
   readonly #boundOnClick = this.#onClick.bind(this);
   readonly #props: ButtonState = {

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

@@ -40,6 +40,7 @@ button {
   align-items: center;
   background: transparent;
   border-radius: var(--sys-shape-corner-full);
+  cursor: inherit;
   display: inline-flex;
   position: relative;
   font-size: var(--sys-typescale-body4-size);

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

@@ -8,10 +8,13 @@ import {
   renderElementIntoDOM,
 } from '../../../testing/DOMHelpers.js';
 
+const CONTENT_SLOT = 'content';
+const HEADING_SUFFIX_SLOT = 'heading-suffix';
+
 import * as Cards from './cards.js';
 
-function assertCardContent(card: Cards.Card.Card, expectedContent: string[]) {
-  const slot = getElementWithinComponent(card, 'slot', HTMLSlotElement);
+function assertCardContent(card: Cards.Card.Card, slotName: string, expectedContent: string[]) {
+  const slot = getElementWithinComponent(card, `slot[name="${slotName}"]`, HTMLSlotElement);
   const textContents = Array.from(slot.assignedElements()).map(child => child.textContent);
   assert.deepStrictEqual(textContents, expectedContent);
 }
@@ -29,7 +32,7 @@ describe('Card', () => {
       content: [content1, content2],
     };
 
-    assertCardContent(card, ['content 1', 'content 2']);
+    assertCardContent(card, CONTENT_SLOT, ['content 1', 'content 2']);
   });
 
   it('order of slotted elements matter', () => {
@@ -43,12 +46,12 @@ describe('Card', () => {
     card.data = {
       content: [content1, content2],
     };
-    assertCardContent(card, ['content 1', 'content 2']);
+    assertCardContent(card, CONTENT_SLOT, ['content 1', 'content 2']);
 
     card.data = {
       content: [content2, content1],
     };
-    assertCardContent(card, ['content 2', 'content 1']);
+    assertCardContent(card, CONTENT_SLOT, ['content 2', 'content 1']);
   });
 
   it('shows heading', () => {
@@ -63,4 +66,27 @@ describe('Card', () => {
     assert.instanceOf(heading, HTMLElement);
     assert.strictEqual(heading.textContent, 'This is my heading');
   });
+
+  it('shows heading icon', async () => {
+    const card = new Cards.Card.Card();
+    card.data = {
+      headingIconName: 'folder',
+      content: [],
+    };
+    renderElementIntoDOM(card);
+    const icon = card.shadowRoot?.querySelector('devtools-icon');
+    assert.isNotNull(icon);
+  });
+
+  it('shows heading-suffix', () => {
+    const suffix = document.createElement('span');
+    suffix.textContent = 'hello';
+    const card = new Cards.Card.Card();
+    card.data = {
+      headingSuffix: suffix,
+      content: [],
+    };
+    renderElementIntoDOM(card);
+    assertCardContent(card, HEADING_SUFFIX_SLOT, ['hello']);
+  });
 });

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

@@ -2,7 +2,8 @@
 // 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 '../../../ui/components/icon_button/icon_button.js';
+
 import * as LitHtml from '../../lit-html/lit-html.js';
 
 import cardStyles from './card.css.js';
@@ -16,22 +17,36 @@ declare global {
 }
 
 export interface CardData {
-  heading?: Common.UIString.LocalizedString;
+  heading?: string;
+  headingIconName?: string;
+  headingSuffix?: HTMLElement;
   content: HTMLElement[];
 }
 export class Card extends HTMLElement {
   #heading?: string;
+  #headingIconName?: string;
+  #headingSuffix?: HTMLElement;
   #content: HTMLElement[] = [];
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   set data(data: CardData) {
     this.#heading = data.heading;
+    this.#headingIconName = data.headingIconName;
+
     this.#content.forEach(content => content.remove());
     data.content.forEach(content => {
       content.slot = 'content';
       this.append(content);
     });
     this.#content = data.content;
+
+    this.#headingSuffix?.remove();
+    if (data.headingSuffix) {
+      this.#headingSuffix = data.headingSuffix;
+      data.headingSuffix.slot = 'heading-suffix';
+      this.append(data.headingSuffix);
+    }
+
     this.#render();
   }
 
@@ -44,7 +59,11 @@ export class Card extends HTMLElement {
     // clang-format off
     LitHtml.render(html`
     <div class="card">
-      <div role="heading" class="heading">${this.#heading}</div>
+      <div class="heading-wrapper">
+        ${this.#headingIconName ? html`<devtools-icon class="heading-icon" name=${this.#headingIconName}></devtools-icon>` : LitHtml.nothing}
+        <div role="heading" aria-level="2" class="heading">${this.#heading}</div>
+        <slot name="heading-suffix"></slot>
+      </div>
       <slot name="content" class='content-container'></slot>
     </div>
     `, this.#shadow, {

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

@@ -3,16 +3,34 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
+:host {
+  max-width: var(--sys-size-37);
+  width: 100%;
+}
 
 .card {
-  margin: var(--sys-size-9);
-  width: auto;
+  min-width: var(--sys-size-31);
+  max-width: var(--sys-size-37);
+  margin: var(--sys-size-3) var(--sys-size-5) var(--sys-size-5) var(--sys-size-5);
+}
+
+.heading-wrapper {
+  display: flex;
+  white-space: nowrap;
+  margin-bottom: var(--sys-size-5);
 }
 
 .heading {
   color: var(--sys-color-on-surface);
   font: var(--sys-typescale-body2-medium);
-  margin-bottom: var(--sys-size-5);
+}
+
+.heading-icon {
+  margin-right: var(--sys-size-3);
+}
+
+slot[name="heading-suffix"]::slotted(*) {
+  margin-left: auto;
 }
 
 .content-container {
@@ -23,10 +41,10 @@
   background: var(--app-color-card-background);
 }
 
-::slotted(*) {
-  padding: var(--sys-size-5);
+slot[name="content"]::slotted(*) {
+  padding: var(--sys-size-5) var(--sys-size-6);
 }
 
-::slotted(*:not(:first-child)) {
-  border-top: 1px solid var(--sys-color-divider);
+slot[name="content"]::slotted(*:not(:first-child)) {
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
 }

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

@@ -23,7 +23,6 @@ declare global {
 // Use this component to render links to 'chrome://...'-URLs
 // (for which regular <x-link>s do not work).
 export class ChromeLink extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-chrome-link`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #boundRender = this.#render.bind(this);
   #href: string = '';

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

@@ -104,7 +104,6 @@ const KEYS_TREATED_AS_CLICKS = new Set([' ', 'Enter']);
 const ROW_HEIGHT_PIXELS = 20;
 
 export class DataGrid extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-data-grid`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   #columns: readonly Column[] = [];

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

@@ -9,7 +9,7 @@ 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 type {DataGridContextMenusConfiguration, DataGridData} from './DataGrid.js';
+import type {DataGridContextMenusConfiguration} from './DataGrid.js';
 import dataGridControllerStyles from './dataGridController.css.js';
 import type {ColumnHeaderClickEvent, ContextMenuColumnSortClickEvent} from './DataGridEvents.js';
 import {
@@ -65,7 +65,6 @@ export interface DataGridControllerData {
 }
 
 export class DataGridController extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-data-grid-controller`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   #hasRenderedAtLeastOnce = false;
@@ -281,7 +280,7 @@ export class DataGridController extends HTMLElement {
           showScrollbar: this.#showScrollbar,
           striped: this.#striped,
           autoScrollToBottom: this.#autoScrollToBottom,
-        } as DataGridData}
+        }}
         @columnheaderclick=${this.#onColumnHeaderClick}
         @contextmenucolumnsortclick=${this.#onContextMenuColumnSortClick}
         @contextmenuheaderresetclick=${this.#onContextMenuHeaderResetClick}

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

@@ -18,8 +18,7 @@ export class DataGridControllerIntegrator extends UI.Widget.VBox {
 
   constructor(data: DataGridControllerData) {
     /**
-     * first true = isWebComponent and tells the widget system it's rendering a
-     * component
+     * first true = useShadowDom and tells the widget system it's using a shadow dom
      * second true = delegatesFocus, which tells the widget system to
      * let the component deal with its own focusing.
      */

package/front_end/ui/components/dialogs/Dialog.ts

@@ -92,7 +92,6 @@ export const MODAL = 'MODAL';
 
 export type DialogOrigin = DialogAnchor|null|(() => DialogAnchor)|typeof MODAL;
 export class Dialog extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-dialog`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #renderBound = this.#render.bind(this);
   readonly #forceDialogCloseInDevToolsBound = this.#forceDialogCloseInDevToolsMutation.bind(this);

package/front_end/ui/components/dialogs/IconDialog.ts

@@ -2,17 +2,16 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/components/icon_button/icon_button.js';
+import './Dialog.js';
+
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
-import {
-  Dialog as DialogElement,
-  type DialogHorizontalAlignment,
-  type DialogVerticalPosition,
-} from './Dialog.js';
+import type {Dialog as DialogElement, DialogHorizontalAlignment, DialogVerticalPosition} from './Dialog.js';
 import iconDialogStyles from './iconDialog.css.js';
 
 const {html} = LitHtml;
@@ -54,7 +53,6 @@ export interface IconDialogData {
 // This class provides a shorthand for a typical use case of Dialog,
 // i.e. Dialog on an icon.
 export class IconDialog extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-icon-dialog`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #renderBound = this.#render.bind(this);
 
@@ -113,14 +111,14 @@ export class IconDialog extends HTMLElement {
                 color: 'var(--icon-default-hover)',
                 width: '16px',
                 height: '16px',
-              } as IconButton.Icon.IconWithName}
+              }}
               jslog=${VisualLogging.close().track({click: true})}
               title=${i18nString(UIStrings.close)}
             ></devtools-icon>
           </div>
         </div>
       `;
-      // clang-format on
+                // clang-format on
     }
 
     // clang-format off
@@ -130,9 +128,9 @@ export class IconDialog extends HTMLElement {
         on-render=${ComponentHelpers.Directives.nodeRenderedCallback(node => {
           this.#icon = node as IconButton.Icon.Icon;
         })}
-        .data=${this.#data.iconData as IconButton.Icon.IconWithName}
+        .data=${this.#data.iconData}
       ></devtools-icon>
-      <${DialogElement.litTagName}
+      <devtools-dialog
         @clickoutsidedialog=${this.#closeDialog}
         .showConnector=${true}
         .origin=${() => {
@@ -153,7 +151,7 @@ export class IconDialog extends HTMLElement {
         <div id='slot-container'>
           <slot></slot>
         </div>
-      </${DialogElement.litTagName}>
+      </devtools-dialog>
     `, this.#shadow, {host: this});
     // clang-format on
   }

package/front_end/ui/components/dialogs/ShortcutDialog.ts

@@ -11,7 +11,7 @@ import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import {
   type ClickOutsideDialogEvent,
-  Dialog as DialogElement,
+  type Dialog as DialogElement,
   DialogHorizontalAlignment,
   DialogVerticalPosition,
 } from './Dialog.js';
@@ -62,7 +62,6 @@ export interface ShortcutDialogData {
 }
 
 export class ShortcutDialog extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-shortcut-dialog`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #renderBound = this.#render.bind(this);
 
@@ -123,7 +122,7 @@ export class ShortcutDialog extends HTMLElement {
           title: i18nString(UIStrings.showShortcutTitle),
         } as Buttons.Button.ButtonData}
       ></devtools-button>
-      <${DialogElement.litTagName}
+      <devtools-dialog
         @clickoutsidedialog=${this.#closeDialog}
         .showConnector=${true}
         .origin=${() => {
@@ -170,7 +169,7 @@ export class ShortcutDialog extends HTMLElement {
               </li>`,
           )}
         </ul>
-      </${DialogElement.litTagName}>
+      </devtools-dialog>
       `,
       this.#shadow, {host: this});
     // clang-format on

package/front_end/ui/components/diff_view/DiffView.ts

@@ -267,7 +267,6 @@ export type DiffViewData = {
 };
 
 export class DiffView extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-diff-view`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   loaded: Promise<void>;

package/front_end/ui/components/docs/building-ui-documentation/ComponentPerformance.md

@@ -80,10 +80,7 @@ set y(y: number) {
 }
 ```
 
-We did this for two reasons:
-
-1. We can provide _some_ type-safety via `.data=${{x: 1, y: 2} as FooData}`.
-2. We avoided having to immediately implement batched rendering.
+We did this to avoid having to immediately implement batched rendering.
 
 However, this decision came with a performance penalty. Lit will only trigger a re-render of a component if one of its properties changes. But when we pass in a new object on each render, we are effectively triggering a re-render every time. Normally this impact isn't noticable, and most components don't re-render with the frequency required to cause performance issues. When a component that takes an object via `set data()` is frequently re-rendered, that causes a non-negligible amount of garbage collection to tidy up the one-use objects we create.