Format event with "warning" yellow and prefix with "Event: " (#31536)

It's useful to quickly see where new events are kicking off new
rendering. This uses the new "warning" color (yellow) to do that. This
is to help distinguish it from the purple (secondary color) which is
used for the commit phase which is more of a follow up and it's often
that you have several rerenders within one event which makes it hard to
tell a part where it starts and event otherwise.

For the span marking between previous render within the same event and
the next setState, I use secondary-light (light purple) since it's kind
of still part of the same sequence at that point. It's usually a spawned
render (e.g. setState in useEffect or microtask) but it can also be
sequential flushSync.

I was bothered by that the event name is the only thing that's lower
case so I prefixed it with `Event: ` like the JS traces are.

<img width="1499" alt="Screenshot 2024-11-13 at 7 15 45 PM"
src="https://github.com/user-attachments/assets/0c81c810-6b5d-4fc7-9bc0-d15b53844ade">

It might be a little confusing why our track starts earlier than the JS
one below in the "Main Thread" flamegraph which looks the same. That's
because ours is the start of the event time which is when the click
happens where as the Main Thread one is when the JS event loop gets
around to processing the event.

Author: sebmarkbage

Diff for: packages/react-reconciler/src/ReactFiberPerformanceTrack.js

@@ -125,10 +125,15 @@ export function logBlockingStart(
     reusableLaneDevToolDetails.track = 'Blocking';
     if (eventTime > 0 && eventType !== null) {
       // Log the time from the event timeStamp until we called setState.
-      reusableLaneDevToolDetails.color = 'secondary-dark';
+      reusableLaneDevToolDetails.color = eventIsRepeat
+        ? 'secondary-light'
+        : 'warning';
       reusableLaneOptions.start = eventTime;
       reusableLaneOptions.end = updateTime > 0 ? updateTime : renderStartTime;
-      performance.measure(eventIsRepeat ? '' : eventType, reusableLaneOptions);
+      performance.measure(
+        eventIsRepeat ? '' : 'Event: ' + eventType,
+        reusableLaneOptions,
+      );
     }
     if (updateTime > 0) {
       // Log the time from when we called setState until we started rendering.
@@ -152,15 +157,20 @@ export function logTransitionStart(
     reusableLaneDevToolDetails.track = 'Transition';
     if (eventTime > 0 && eventType !== null) {
       // Log the time from the event timeStamp until we started a transition.
-      reusableLaneDevToolDetails.color = 'secondary-dark';
+      reusableLaneDevToolDetails.color = eventIsRepeat
+        ? 'secondary-light'
+        : 'warning';
       reusableLaneOptions.start = eventTime;
       reusableLaneOptions.end =
         startTime > 0
           ? startTime
           : updateTime > 0
             ? updateTime
             : renderStartTime;
-      performance.measure(eventIsRepeat ? '' : eventType, reusableLaneOptions);
+      performance.measure(
+        eventIsRepeat ? '' : 'Event: ' + eventType,
+        reusableLaneOptions,
+      );
     }
     if (startTime > 0) {
       // Log the time from when we started an async transition until we called setState or started rendering.