Add color variation automatically based on mod of the name

Helps distinguish various helpers like fetch vs query.

I also switched to using only the primary color.
This avoids confusing the secondary color with the color Server Components.
This lets us associate the I/O 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/ReactFlightPerformanceTrack.js

@@ -206,14 +206,27 @@ export function logDedupedComponentRender(
   }
 }
 
+function getIOColor(
+  functionName: string,
+): 'primary-light' | 'primary' | 'primary-dark' {
+  // Add some color variation to be able to distinguish various sources.
+  switch (functionName.charCodeAt(0) % 3) {
+    case 0:
+      return 'primary-light';
+    case 1:
+      return 'primary';
+    default:
+      return 'primary-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]