Merge branch 'main' into patch-1

Author: mstange

.prettierignore

@@ -3,7 +3,6 @@ src/types/libdef/npm
 docs-user/js
 docs-user/css
 src/test/fixtures/upgrades
-res/zee-worker.js
 dist
 coverage
 taskcluster/

package.json

@@ -34,12 +34,12 @@
     "license-check": "devtools-license-check",
     "preinstall": "node bin/pre-install.js",
     "publish": "rimraf public_html && cp -r dist public_html",
-    "serve-static": "ws -d dist/ -s index.html -p 4242",
+    "serve-static": "ws -d dist/ -s index.html -p 4243",
     "start": "yarn build:clean && cross-env NODE_ENV=development node server.js",
     "start-prod": "yarn build-prod && yarn serve-static",
     "start-l10n": "yarn build:clean && cross-env NODE_ENV=development L10N=1 node server.js",
     "start-l10n-prod": "yarn build-l10n-prod && yarn serve-static",
-    "start-examples": "ws -d examples/ -s index.html -p 4242",
+    "start-examples": "ws -d examples/ -s index.html -p 4244",
     "start-docs": "ws -d docs-user/ -p 3000",
     "start-photon": "node res/photon/server",
     "test": "node bin/output-fixing-commands.js cross-env LC_ALL=C TZ=UTC NODE_ENV=test jest",
@@ -76,7 +76,7 @@
     "classnames": "^2.5.1",
     "common-tags": "^1.8.2",
     "copy-to-clipboard": "^3.3.3",
-    "core-js": "^3.45.0",
+    "core-js": "^3.45.1",
     "escape-string-regexp": "^4.0.0",
     "gecko-profiler-demangle": "^0.3.3",
     "idb": "^8.0.3",
@@ -115,15 +115,14 @@
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@eslint/js": "^9.34.0",
-    "@fetch-mock/jest": "^0.2.16",
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.6.4",
+    "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.3.0",
     "@types/clamp": "^1.0.3",
     "@types/common-tags": "^1.8.4",
     "@types/jest": "^30.0.0",
     "@types/minimist": "^1.2.5",
-    "@types/node": "^22.17.2",
+    "@types/node": "^22.18.0",
     "@types/query-string": "^6.3.0",
     "@types/react": "^18.3.24",
     "@types/react-dom": "^18.3.1",
@@ -145,7 +144,7 @@
     "copy-webpack-plugin": "^13.0.1",
     "cross-env": "^10.0.0",
     "css-loader": "^7.1.2",
-    "cssnano": "^7.1.0",
+    "cssnano": "^7.1.1",
     "devtools-license-check": "^0.9.0",
     "eslint": "^9.34.0",
     "eslint-config-prettier": "^10.1.8",
@@ -158,6 +157,7 @@
     "eslint-plugin-testing-library": "^7.6.6",
     "espree": "^10.4.0",
     "fake-indexeddb": "^6.1.0",
+    "fetch-mock": "^12.5.3",
     "file-loader": "^6.2.0",
     "glob": "^11.0.3",
     "globals": "^16.3.0",
@@ -207,7 +207,7 @@
       "tsx"
     ],
     "transformIgnorePatterns": [
-      "/node_modules/(?!(query-string|decode-uri-component|iongraph-web|split-on-first|filter-obj|@fetch-mock/jest|fetch-mock)/)"
+      "/node_modules/(?!(query-string|decode-uri-component|iongraph-web|split-on-first|filter-obj|fetch-mock)/)"
     ],
     "moduleNameMapper": {
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|ftl)$": "<rootDir>/src/test/fixtures/mocks/file-mock.ts",

res/zee-worker.js

@@ -4,52 +4,25 @@
 
 import { PureComponent } from 'react';
 import type { ComponentProps } from 'react';
-import ReactDOM from 'react-dom';
 import { ContextMenu as ReactContextMenu } from '@firefox-devtools/react-contextmenu';
 
 import './ContextMenu.css';
 
 type Props = ComponentProps<typeof ReactContextMenu>;
 
 export class ContextMenu extends PureComponent<Props> {
-  _contextMenu: any = null;
-  _takeContextMenuRef = (contextMenu: any) => {
-    this._contextMenu = contextMenu;
-  };
-
-  _mouseDownHandler(event: Event): void {
+  _mouseDownHandler = (event: React.MouseEvent<HTMLDivElement>): void => {
     // This prevents from stealing the focus from where it was.
     event.preventDefault();
-  }
-
-  override componentDidMount() {
-    if (this._contextMenu) {
-      // The context menu component does not expose a reference to its internal
-      // DOM node so using findDOMNode is currently unavoidable.
-      // eslint-disable-next-line react/no-find-dom-node
-      const contextMenuNode = ReactDOM.findDOMNode(this._contextMenu);
-      if (contextMenuNode) {
-        // There's no need to remove this event listener since the component is
-        // never unmounted. Duplicate event listeners will also be discarded
-        // automatically so we don't need to handle that.
-        contextMenuNode.addEventListener('mousedown', this._mouseDownHandler);
-      }
-    }
-  }
-
-  override componentWillUnmount() {
-    // eslint-disable-next-line react/no-find-dom-node
-    const contextMenuNode = ReactDOM.findDOMNode(this._contextMenu);
-    if (contextMenuNode) {
-      contextMenuNode.removeEventListener('mousedown', this._mouseDownHandler);
-    }
-  }
+  };
 
   override render() {
     return (
-      <ReactContextMenu ref={this._takeContextMenuRef} {...this.props}>
-        {this.props.children ? this.props.children : <div />}
-      </ReactContextMenu>
+      <div onMouseDown={this._mouseDownHandler}>
+        <ReactContextMenu {...this.props}>
+          {this.props.children ? this.props.children : <div />}
+        </ReactContextMenu>
+      </div>
     );
   }
 }

src/components/shared/ContextMenu.tsx

@@ -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.css

@@ -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/components/shared/FilterNavigatorBar.tsx

@@ -161,17 +161,23 @@ describe('AppLocalizationProvider', () => {
 
     expect(await screen.findByText(translatedText('de'))).toBeInTheDocument();
     expect(document.documentElement).toHaveAttribute('lang', 'de');
-    expect(window.fetch).toHaveFetched('/locales/de/app.ftl', {
-      // @ts-expect-error fetch-mock's TypeScript types for toHaveFetched don't know about `credentials`, not sure why
-      credentials: 'include',
-      mode: 'no-cors',
-    });
-    expect(window.fetch).toHaveFetched('/locales/en-US/app.ftl', {
-      // @ts-expect-error fetch-mock's TypeScript types for toHaveFetched don't know about `credentials`, not sure why
-      credentials: 'include',
-      mode: 'no-cors',
-    });
-    expect(window.fetch).toHaveFetchedTimes(2);
+    expect(
+      window.fetchMock.callHistory.lastCall('/locales/de/app.ftl')?.options
+    ).toEqual(
+      expect.objectContaining({
+        credentials: 'include',
+        mode: 'no-cors',
+      })
+    );
+    expect(
+      window.fetchMock.callHistory.lastCall('/locales/en-US/app.ftl')?.options
+    ).toEqual(
+      expect.objectContaining({
+        credentials: 'include',
+        mode: 'no-cors',
+      })
+    );
+    expect(window.fetchMock.callHistory.callLogs.length).toBe(2);
   });
 
   it('falls back properly on en-US if the primary locale lacks a string', async () => {
@@ -193,16 +199,22 @@ describe('AppLocalizationProvider', () => {
       await screen.findByText(translatedText('en-US'))
     ).toBeInTheDocument();
     expect(document.documentElement).toHaveAttribute('lang', 'de');
-    expect(window.fetch).toHaveFetched('/locales/de/app.ftl', {
-      // @ts-expect-error fetch-mock's TypeScript types for toHaveFetched don't know about `credentials`, not sure why
-      credentials: 'include',
-      mode: 'no-cors',
-    });
-    expect(window.fetch).toHaveFetched('/locales/en-US/app.ftl', {
-      // @ts-expect-error fetch-mock's TypeScript types for toHaveFetched don't know about `credentials`, not sure why
-      credentials: 'include',
-      mode: 'no-cors',
-    });
-    expect(window.fetch).toHaveFetchedTimes(2);
+    expect(
+      window.fetchMock.callHistory.lastCall('/locales/de/app.ftl')?.options
+    ).toEqual(
+      expect.objectContaining({
+        credentials: 'include',
+        mode: 'no-cors',
+      })
+    );
+    expect(
+      window.fetchMock.callHistory.lastCall('/locales/en-US/app.ftl')?.options
+    ).toEqual(
+      expect.objectContaining({
+        credentials: 'include',
+        mode: 'no-cors',
+      })
+    );
+    expect(window.fetchMock.callHistory.callLogs.length).toBe(2);
   });
 });