Add color variation automatically based on mod of the name

Helps distinguish various helpers like fetch vs query.

I also switched dedupes to use primary/secondary color. It was standing out too much.

By using the tertiary color for I/O we can avoid confusing the color with
the color Server Components.

This lets us associate the I/O track with the await in the Server Components track
by using the same color scheme but make it different from Server Component rendering.

Author: sebmarkbage

packages/react-client/src/ReactFlightClient.js

@@ -2893,6 +2893,7 @@ function flushComponentPerformance(
         trackIdx,
         parentEndTime,
         previousEndTime,
+        response._rootEnvironmentName,
       );
     }
     // Since we didn't bump the track this time, we just return the same track.

packages/react-client/src/ReactFlightPerformanceTrack.js

@@ -175,9 +175,13 @@ export function logDedupedComponentRender(
   trackIdx: number,
   startTime: number,
   endTime: number,
+  rootEnv: string,
 ): void {
   if (supportsUserTiming && endTime >= 0 && trackIdx < 10) {
+    const env = componentInfo.env;
     const name = componentInfo.name;
+    const isPrimaryEnv = env === rootEnv;
+    const color = isPrimaryEnv ? 'primary-light' : 'secondary-light';
     const entryName = name + ' [deduped]';
     const debugTask = componentInfo.debugTask;
     if (__DEV__ && debugTask) {
@@ -190,7 +194,7 @@ export function logDedupedComponentRender(
           endTime,
           trackNames[trackIdx],
           COMPONENTS_TRACK,
-          'tertiary-light',
+          color,
         ),
       );
     } else {
@@ -200,20 +204,33 @@ export function logDedupedComponentRender(
         endTime,
         trackNames[trackIdx],
         COMPONENTS_TRACK,
-        'tertiary-light',
+        color,
       );
     }
   }
 }
 
+function getIOColor(
+  functionName: string,
+): 'tertiary-light' | 'tertiary' | 'tertiary-dark' {
+  // Add some color variation to be able to distinguish various sources.
+  switch (functionName.charCodeAt(0) % 3) {
+    case 0:
+      return 'tertiary-light';
+    case 1:
+      return 'tertiary';
+    default:
+      return 'tertiary-dark';
+  }
+}
+
 export function logIOInfo(ioInfo: ReactIOInfo): void {
   const startTime = ioInfo.start;
   const endTime = ioInfo.end;
   if (supportsUserTiming && endTime >= 0) {
     const name = ioInfo.name;
     const debugTask = ioInfo.debugTask;
-    // TODO: Add more built-in color assignment.
-    const color = name === 'fetch' ? 'primary-light' : 'secondary-light';
+    const color = getIOColor(name);
     if (__DEV__ && debugTask) {
       debugTask.run(
         // $FlowFixMe[method-unbinding]