🔃 Daily sync: main -> l10n (September 5, 2025)

Author: Firefox Profiler [bot]

.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",

res/gz-worker.js

@@ -0,0 +1,62 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+async function readableStreamToBuffer(stream) {
+  const reader = stream.getReader();
+  const chunks = [];
+
+  try {
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      if (value) {
+        chunks.push(value);
+      }
+    }
+  } finally {
+    reader.releaseLock();
+  }
+
+  // Calculate total length and combine chunks
+  const totalLength = chunks.reduce((sum, chunk) => sum + chunk.length, 0);
+  const result = new Uint8Array(totalLength);
+  let offset = 0;
+  for (const chunk of chunks) {
+    result.set(chunk, offset);
+    offset += chunk.length;
+  }
+
+  return result;
+}
+
+onmessage = async (e) => {
+  let data = e.data;
+  if (data.kind === 'compress') {
+    // Create a gzip compression stream
+    const compressionStream = new CompressionStream('gzip');
+
+    // Write the data to the compression stream
+    const writer = compressionStream.writable.getWriter();
+    writer.write(data.arrayData);
+    writer.close();
+
+    // Read the compressed data back into a buffer
+    let result = await readableStreamToBuffer(compressionStream.readable);
+    postMessage(result, [result.buffer]);
+  } else if (data.kind === 'decompress') {
+    // Create a gzip compression stream
+    const decompressionStream = new DecompressionStream('gzip');
+
+    // Write the data to the compression stream
+    const writer = decompressionStream.writable.getWriter();
+    writer.write(data.arrayData);
+    writer.close();
+
+    // Read the compressed data back into a buffer
+    let result = await readableStreamToBuffer(decompressionStream.readable);
+    postMessage(result, [result.buffer]);
+  } else {
+    throw new Error('unknown message');
+  }
+};

res/zee-worker.js

@@ -1065,7 +1065,7 @@ async function _extractZipFromResponse(
 async function _extractJsonFromArrayBuffer(
   arrayBuffer: ArrayBuffer
 ): Promise<unknown> {
-  let profileBytes: Uint8Array<ArrayBufferLike> = new Uint8Array(arrayBuffer);
+  let profileBytes = new Uint8Array(arrayBuffer);
   // Check for the gzip magic number in the header.
   if (isGzip(profileBytes)) {
     profileBytes = await decompress(profileBytes);

src/actions/receive-profile.ts

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

@@ -46,7 +46,7 @@ const HUMAN_LABEL_FOR_PHASE: Record<NetworkPhaseName, string> = {
   connectEnd: 'Waiting for HTTP request',
   requestStart: 'HTTP request and waiting for response',
   responseStart: 'HTTP response',
-  responseEnd: 'Waiting to transmit the response',
+  responseEnd: 'Waiting for main thread',
   endTime: 'End',
 };
 

src/components/tooltip/NetworkMarker.tsx

@@ -1980,9 +1980,7 @@ export async function unserializeProfileOfArbitraryFormat(
     // object is constructed from an ArrayBuffer in a different context... which
     // happens in our tests.
     if (String(arbitraryFormat) === '[object ArrayBuffer]') {
-      // Obviously Flow doesn't understand that this is correct, so let's help
-      // Flow here.
-      let arrayBuffer: ArrayBufferLike = arbitraryFormat as any;
+      let arrayBuffer = arbitraryFormat as ArrayBuffer;
 
       // Check for the gzip magic number in the header. If we find it, decompress
       // the data first.

src/profile-logic/process-profile.ts

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