Pluralize the name when used as the group title

E.g.
script -> scripts
fetch -> fetches

Author: sebmarkbage

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js

@@ -13,7 +13,7 @@ import {useState, useTransition} from 'react';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import KeyValue from './KeyValue';
-import {serializeDataForCopy} from '../utils';
+import {serializeDataForCopy, pluralize} from '../utils';
 import Store from '../../store';
 import styles from './InspectedElementSharedStyles.css';
 import {withPermissionsCheck} from 'react-devtools-shared/src/frontend/utils/withPermissionsCheck';
@@ -391,19 +391,20 @@ function SuspendedByGroup({
       left = 95;
     }
   }
+  const pluralizedName = pluralize(name);
   return (
     <div className={styles.CollapsableRow}>
       <Button
         className={styles.CollapsableHeader}
         onClick={() => {
           setIsOpen(prevIsOpen => !prevIsOpen);
         }}
-        title={name}>
+        title={pluralizedName}>
         <ButtonIcon
           className={styles.CollapsableHeaderIcon}
           type={isOpen ? 'expanded' : 'collapsed'}
         />
-        <span className={styles.CollapsableHeaderTitle}>{name}</span>
+        <span className={styles.CollapsableHeaderTitle}>{pluralizedName}</span>
         <div className={styles.CollapsableHeaderFiller} />
         {isOpen ? null : (
           <div className={styles.TimeBarContainer}>

packages/react-devtools-shared/src/devtools/views/utils.js

@@ -198,3 +198,39 @@ export function truncateText(text: string, maxLength: number): string {
     return text;
   }
 }
+
+export function pluralize(word: string): string {
+  if (!/^[a-z]+$/i.test(word)) {
+    // If it's not a single a-z word, give up.
+    return word;
+  }
+
+  switch (word) {
+    case 'man':
+      return 'men';
+    case 'woman':
+      return 'women';
+    case 'child':
+      return 'children';
+    case 'foot':
+      return 'feet';
+    case 'tooth':
+      return 'teeth';
+    case 'mouse':
+      return 'mice';
+    case 'person':
+      return 'people';
+  }
+
+  // Words ending in s, x, z, ch, sh → add "es"
+  if (/(s|x|z|ch|sh)$/i.test(word)) return word + 'es';
+
+  // Words ending in consonant + y → replace y with "ies"
+  if (/[bcdfghjklmnpqrstvwxz]y$/i.test(word)) return word.slice(0, -1) + 'ies';
+
+  // Words ending in f or fe → replace with "ves"
+  if (/(?:f|fe)$/i.test(word)) return word.replace(/(?:f|fe)$/i, 'ves');
+
+  // Default: just add "s"
+  return word + 's';
+}