Remove unused FilterNavigatorBar animations (#5591)

[Production](https://profiler.firefox.com/public/etegz8k5g139b8q7n74qfqv6z4ztb0nzvy051k0/calltree/?globalTrackOrder=0&thread=0&transforms=ff-8&v=11)
| [Deploy
preview](https://deploy-preview-5591--perf-html.netlify.app/public/etegz8k5g139b8q7n74qfqv6z4ztb0nzvy051k0/calltree/?globalTrackOrder=0&thread=0&transforms=ff-8&v=11)

On the production branch I don't see any animations in the breadcrumb
bar where the time range filters are displayed, when I make a selection,
commit a selection or "pop" selections. No animations in the call tree
transform list either.

Since nobody has noticed, let's just remove the code for them, because
this gets rid of some of the uses of react-transition-group, which is
one of our barriers to upgrading React (#5590).

Author: mstange

src/components/shared/FilterNavigatorBar.css

@@ -20,7 +20,9 @@
   cursor: default;
   user-select: none;
 
-  /* Note: no overflow: hidden so that we can see the exit animation for ranges */
+  /* Note: no overflow: hidden for historical reasons - we wanted to see
+     an animation for items at the end while they were fading out, but
+     we have removed this animation in the meantime */
 }
 
 .filterNavigatorBarItem {
@@ -40,9 +42,6 @@
      in the forced colors media query. */
   forced-color-adjust: none;
   line-height: 24px;
-  transition:
-    opacity 250ms var(--animation-curve),
-    transform 250ms var(--animation-curve);
 }
 
 .filterNavigatorBarRootItem {
@@ -98,23 +97,12 @@
 }
 
 .filterNavigatorBarItem:not(.filterNavigatorBarLeafItem)::after {
-  animation: fadeIn 250ms var(--animation-curve);
   background-image: var(--internal-separator-img);
   background-position: -18px -12px;
   background-repeat: no-repeat;
   background-size: 24px 24px;
 }
 
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
 .filterNavigatorBarItem:not(
     .filterNavigatorBarRootItem,
     .filterNavigatorBarLeafItem
@@ -163,46 +151,6 @@
   opacity: 0.65;
 }
 
-/* Animation */
-
-.filterNavigatorBarUncommittedTransition-exit {
-  /* Because of the underlying transition library, this element is still here
-   * while the new "committed" element is created, which pushes it further
-   * right. By using display: none here, we prevent this bad effect. */
-  display: none;
-}
-
-.filterNavigatorBarTransition-enter {
-  color: inherit;
-
-  /* We use the same value as the uncommitted item.
-   * Note that the "uncommitted item" won't have this "enter" class when
-   * committing, because of how we insert it (it's not part of the same loop). */
-  opacity: 0.65;
-}
-
-.filterNavigatorBarTransition-enter.filterNavigatorBarTransition-enter-active {
-  color: var(--internal-selected-color);
-  opacity: 1;
-}
-
-.filterNavigatorBarTransition-exit {
-  opacity: 1;
-}
-
-.filterNavigatorBarTransition-exit.filterNavigatorBarTransition-exit-active {
-  opacity: 0;
-  transform: translateX(50%);
-}
-
-/* Do not animate the filter navigator bar items when user prefers reduced motion */
-@media (prefers-reduced-motion) {
-  .filterNavigatorBarItem {
-    animation: none;
-    transition: none;
-  }
-}
-
 @media (forced-colors: active) {
   .filterNavigatorBar {
     --internal-background-color: ButtonFace;

src/components/shared/FilterNavigatorBar.tsx

@@ -4,7 +4,6 @@
 
 import * as React from 'react';
 import classNames from 'classnames';
-import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import './FilterNavigatorBar.css';
 
 type FilterNavigatorBarListItemProps = {
@@ -71,31 +70,21 @@ export class FilterNavigatorBar extends React.PureComponent<Props> {
     const { className, items, selectedItem, uncommittedItem, onPop } =
       this.props;
 
-    const transitions = items.map((item, i) => (
-      <CSSTransition
-        key={i}
-        classNames="filterNavigatorBarTransition"
-        timeout={250}
-      >
-        <FilterNavigatorBarListItem
-          index={i}
-          onClick={i === items.length - 1 && !uncommittedItem ? null : onPop}
-          isFirstItem={i === 0}
-          isLastItem={i === items.length - 1}
-          isSelectedItem={i === selectedItem}
-        >
-          {item}
-        </FilterNavigatorBarListItem>
-      </CSSTransition>
-    ));
-
-    if (uncommittedItem) {
-      transitions.push(
-        <CSSTransition
-          key={items.length}
-          classNames="filterNavigatorBarUncommittedTransition"
-          timeout={0}
-        >
+    return (
+      <ol className={classNames('filterNavigatorBar', className)}>
+        {items.map((item, i) => (
+          <FilterNavigatorBarListItem
+            key={i}
+            index={i}
+            onClick={i === items.length - 1 && !uncommittedItem ? null : onPop}
+            isFirstItem={i === 0}
+            isLastItem={i === items.length - 1}
+            isSelectedItem={i === selectedItem}
+          >
+            {item}
+          </FilterNavigatorBarListItem>
+        ))}
+        {uncommittedItem ? (
           <FilterNavigatorBarListItem
             index={items.length}
             isFirstItem={false}
@@ -106,17 +95,8 @@ export class FilterNavigatorBar extends React.PureComponent<Props> {
           >
             {uncommittedItem}
           </FilterNavigatorBarListItem>
-        </CSSTransition>
-      );
-    }
-
-    return (
-      <TransitionGroup
-        component="ol"
-        className={classNames('filterNavigatorBar', className)}
-      >
-        {transitions}
-      </TransitionGroup>
+        ) : null}
+      </ol>
     );
   }
 }

src/test/components/__snapshots__/FilterNavigatorBar.test.tsx.snap

@@ -40,7 +40,7 @@ exports[`app/ProfileFilterNavigator renders ProfileFilterNavigator properly 2`]
     </button>
   </li>
   <li
-    class="filterNavigatorBarItem filterNavigatorBarSelectedItem filterNavigatorBarLeafItem filterNavigatorBarTransition-enter filterNavigatorBarTransition-enter-active"
+    class="filterNavigatorBarItem filterNavigatorBarSelectedItem filterNavigatorBarLeafItem"
   >
     <span
       class="filterNavigatorBarItemContent"
@@ -70,7 +70,7 @@ exports[`app/ProfileFilterNavigator renders ProfileFilterNavigator properly 3`]
     </button>
   </li>
   <li
-    class="filterNavigatorBarItem filterNavigatorBarSelectedItem filterNavigatorBarLeafItem filterNavigatorBarTransition-enter filterNavigatorBarTransition-enter-active"
+    class="filterNavigatorBarItem filterNavigatorBarSelectedItem filterNavigatorBarLeafItem"
   >
     <button
       class="filterNavigatorBarItemContent"
@@ -80,7 +80,7 @@ exports[`app/ProfileFilterNavigator renders ProfileFilterNavigator properly 3`]
     </button>
   </li>
   <li
-    class="filterNavigatorBarItem filterNavigatorBarUncommittedItem filterNavigatorBarLeafItem filterNavigatorBarUncommittedTransition-enter filterNavigatorBarUncommittedTransition-enter-active"
+    class="filterNavigatorBarItem filterNavigatorBarUncommittedItem filterNavigatorBarLeafItem"
     title="100μs"
   >
     <span