[Flight] Make it more obvious what the short name in the I/O description represents (facebook#33944)

Author: eps1lon

packages/react-client/src/ReactFlightPerformanceTrack.js

@@ -412,7 +412,13 @@ function getIOShortName(
       const slashIdx = description.lastIndexOf('/', queryIdx - 1);
       if (queryIdx - slashIdx < descMaxLength) {
         // This may now be either the file name or the host.
-        desc = ' (' + description.slice(slashIdx + 1, queryIdx) + ')';
+        // Include the slash to make it more obvious what we trimmed.
+        desc = ' (…' + description.slice(slashIdx, queryIdx) + ')';
+      } else {
+        // cut out the middle to not exceed the max length
+        const start = description.slice(slashIdx, slashIdx + descMaxLength / 2);
+        const end = description.slice(queryIdx - descMaxLength / 2, queryIdx);
+        desc = ' (' + (slashIdx > 0 ? '…' : '') + start + '…' + end + ')';
       }
     }
   }