Merge branch 'main' into test-all-ci

mstange · web-flow · commit dea21469836f · 2025-08-25T12:26:11.000-04:00
diff --git a/package.json b/package.json
@@ -178,7 +178,7 @@
     "style-loader": "^4.0.0",
     "stylelint": "^16.23.0",
     "stylelint-config-idiomatic-order": "^10.0.0",
-    "stylelint-config-standard": "^38.0.0",
+    "stylelint-config-standard": "^39.0.0",
     "typescript": "^5.8.3",
     "webpack": "^5.101.3",
     "webpack-cli": "^6.0.1",
diff --git a/src/components/app/AppHeader.tsx b/src/components/app/AppHeader.tsx
@@ -22,7 +22,6 @@ export class AppHeader extends React.PureComponent<{}> {
             id="AppHeader--app-header"
             elems={{
               header: (
-                // $FlowExpectError Flow doesn't know about this fluent rule for react component.
                 <InnerNavigationLink
                   dataSource="none"
                   className="appHeaderLink"
diff --git a/src/components/app/CompareHome.css b/src/components/app/CompareHome.css
@@ -17,7 +17,7 @@
 .compareHomeForm {
   display: grid;
   align-items: center;
-  grid-gap: 1em;
+  gap: 1em;
   grid-template-columns: auto 1fr;
 }
 
diff --git a/src/components/app/Home.tsx b/src/components/app/Home.tsx
@@ -660,7 +660,6 @@ class HomeImpl extends React.PureComponent<HomeProps, HomeState> {
                 id="Home--compare-recordings-info"
                 elems={{
                   a: (
-                    // $FlowExpectError Flow doesn't know about this fluent rule for react component.
                     <InnerNavigationLink dataSource="compare">
                       Compare
                     </InnerNavigationLink>
diff --git a/src/components/app/KeyboardShortcut.css b/src/components/app/KeyboardShortcut.css
@@ -64,7 +64,7 @@
 .appKeyboardShortcutsContent {
   display: grid;
   margin: 40px;
-  grid-gap: 80px;
+  gap: 80px;
   grid-template-columns: 1fr 1fr;
 }
 
diff --git a/src/components/flame-graph/Canvas.css b/src/components/flame-graph/Canvas.css
@@ -18,7 +18,7 @@
 
 .flameGraphCanvasTooltip > .tooltipHeader {
   display: grid;
-  grid-gap: 2px 0;
+  gap: 2px 0;
   grid-template-columns: min-content auto;
 }
 
diff --git a/src/components/js-tracer/Chart.tsx b/src/components/js-tracer/Chart.tsx
@@ -104,7 +104,6 @@ class JsTracerExpensiveChartImpl extends React.PureComponent<Props> {
         chartProps={{
           jsTracerTimingRows,
           jsTracerTable,
-          // $FlowFixMe Error introduced by upgrading to v0.96.0. See issue #1936.
           updatePreviewSelection,
           rangeStart: timeRange.start,
           rangeEnd: timeRange.end,
diff --git a/src/components/marker-chart/index.tsx b/src/components/marker-chart/index.tsx
@@ -153,7 +153,6 @@ class MarkerChartImpl extends React.PureComponent<Props> {
                 getMarker,
                 getMarkerLabel,
                 markerListLength,
-                // $FlowFixMe Error introduced by upgrading to v0.96.0. See issue #1936.
                 updatePreviewSelection,
                 changeMouseTimePosition,
                 changeRightClickedMarker,
diff --git a/src/components/shared/CodeView.css b/src/components/shared/CodeView.css
@@ -128,9 +128,9 @@
 .cm-content {
   font-family: ui-monospace, 'Roboto Mono', monospace;
   hyphens: none;
+  overflow-wrap: normal;
   word-break: normal;
   word-spacing: normal;
-  word-wrap: normal;
 }
 
 /**
diff --git a/src/components/sidebar/sidebar.css b/src/components/sidebar/sidebar.css
@@ -21,7 +21,7 @@
   display: grid;
   align-content: start; /* the grid isn't vertically stretched */
   align-items: center;
-  grid-gap: 2px 5px;
+  gap: 2px 5px;
   grid-template-columns:
     /* Label */
     1fr
@@ -51,7 +51,7 @@
 
 .sidebar-title-label {
   display: grid;
-  grid-gap: 5px;
+  gap: 5px;
   grid-template-columns: min-content 1fr;
 }
 
diff --git a/src/components/stack-chart/index.tsx b/src/components/stack-chart/index.tsx
@@ -266,7 +266,6 @@ class StackChartImpl extends React.PureComponent<Props> {
                   combinedTimingRows,
                   sameWidthsIndexToTimestampMap,
                   getMarker,
-                  // $FlowFixMe Error introduced by upgrading to v0.96.0. See issue #1936.
                   updatePreviewSelection,
                   changeMouseTimePosition,
                   rangeStart: timeRange.start,
diff --git a/src/components/tooltip/CallNode.css b/src/components/tooltip/CallNode.css
@@ -7,7 +7,7 @@
   align-items: center;
   padding-bottom: 10px;
   border-top: 1px solid var(--grey-40);
-  grid-gap: 4px;
+  gap: 4px;
   grid-template-columns: repeat(4, min-content);
 }
 
diff --git a/src/components/tooltip/NetworkMarker.css b/src/components/tooltip/NetworkMarker.css
@@ -11,7 +11,7 @@
   padding-top: 4px;
   border-top: 1px solid var(--grey-40);
   margin-top: 4px;
-  grid-gap: 2px 5px;
+  gap: 2px 5px;
 
   /* When changing the number of columns, don't forget to change the span values
    * in grid-column-start properties. */
diff --git a/src/components/tooltip/Tooltip.css b/src/components/tooltip/Tooltip.css
@@ -66,7 +66,7 @@
 
 .tooltipDetails {
   display: grid;
-  grid-gap: 2px 5px;
+  gap: 2px 5px;
 
   /* Make the right column "definitely" sized (ignore its intrinsic size) by setting a min-width of 0.
    * This stops long contents from overflowing the tooltip. */
@@ -129,7 +129,7 @@
 .sidebar .tooltipDetails {
   /* Force the details to the max-width, even if they have long pieces of text. */
   overflow: hidden;
-  grid-gap: 2px 0;
+  gap: 2px 0;
 
   /* Don't let the width overflow for long pieces of text */
   grid-template-columns: minmax(0, 1fr);
diff --git a/src/components/tooltip/TrackPower.tsx b/src/components/tooltip/TrackPower.tsx
@@ -142,7 +142,6 @@ class TooltipTrackPowerImpl extends React.PureComponent<Props> {
     );
 
     return (
-      // $FlowExpectError our version of Flow doesn't understand Fragments very well.
       <>
         {this._formatPowerValue(
           powerSumForPreviewRange,
diff --git a/src/profile-logic/merge-compare.ts b/src/profile-logic/merge-compare.ts
@@ -1363,9 +1363,6 @@ function mergeMarkers(
           );
         }
 
-        // Flow doesn't know well how to handle the spread operator with our
-        // MarkerPayload type.
-        // $FlowExpectError
         newMarkerTable.data.push({
           ...oldData,
           cause: {
diff --git a/src/test/components/AppLocalizationProvider.test.tsx b/src/test/components/AppLocalizationProvider.test.tsx
@@ -70,7 +70,6 @@ describe('AppLocalizationProvider', () => {
       await screen.findByText(translatedText('en-US'))
     ).toBeInTheDocument();
     expect(document.documentElement).toHaveAttribute('lang', 'en-US');
-    // $FlowExpectError Our version of flow doesn't know about document.dir
     expect(document.dir).toBe('ltr');
 
     // Now we're testing the LTR pseudo-localization.
@@ -79,7 +78,6 @@ describe('AppLocalizationProvider', () => {
     });
     expect(await screen.findByText('Ŧħīş īş ḗḗƞ-ŬŞ Ŧḗḗẋŧ')).toBeInTheDocument();
     expect(document.documentElement).toHaveAttribute('lang', 'en-US');
-    // $FlowExpectError Our version of flow doesn't know about document.dir
     expect(document.dir).toBe('ltr');
 
     // And now the RTL pseudo-localization.
@@ -88,7 +86,6 @@ describe('AppLocalizationProvider', () => {
     });
     expect(await screen.findByText(/⊥ɥıs ıs ǝu-∩S ⊥ǝxʇ/)).toBeInTheDocument();
     expect(document.documentElement).toHaveAttribute('lang', 'en-US');
-    // $FlowExpectError Our version of flow doesn't know about document.dir
     expect(document.dir).toBe('rtl');
 
     // Back to no pseudo-localization
@@ -99,7 +96,6 @@ describe('AppLocalizationProvider', () => {
       await screen.findByText(translatedText('en-US'))
     ).toBeInTheDocument();
     expect(document.documentElement).toHaveAttribute('lang', 'en-US');
-    // $FlowExpectError Our version of flow doesn't know about document.dir
     expect(document.dir).toBe('ltr');
   });
 
@@ -136,7 +132,6 @@ describe('AppLocalizationProvider', () => {
       await screen.findByText(translatedText('en-US'))
     ).toBeInTheDocument();
     expect(document.documentElement).toHaveAttribute('lang', 'en-US');
-    // $FlowExpectError Our version of flow doesn't know about document.dir
     expect(document.dir).toBe('ltr');
 
     // Switch to german
@@ -146,7 +141,6 @@ describe('AppLocalizationProvider', () => {
     });
     expect(await screen.findByText(translatedText('de'))).toBeInTheDocument();
     expect(document.documentElement).toHaveAttribute('lang', 'de');
-    // $FlowExpectError Our version of flow doesn't know about document.dir
     expect(document.dir).toBe('ltr');
   });
 
diff --git a/src/test/components/BeforeUnloadManager.test.tsx b/src/test/components/BeforeUnloadManager.test.tsx
@@ -38,10 +38,8 @@ describe('app/BeforeUnloadManager', () => {
     const event = new Event('beforeunload');
 
     /* Because of the current jsdom implementation, we need to mock
-       preventDefault(). To prevent a Flow error when assigning jest.fn()
-       to event.preventDefault (not writeable), we add the following line.
+       preventDefault().
     */
-    // $FlowExpectError
     event.preventDefault = jest.fn();
 
     fireEvent(window as any, event);
diff --git a/src/test/components/FooterLinks.test.tsx b/src/test/components/FooterLinks.test.tsx
@@ -19,7 +19,6 @@ beforeEach(() => {
     .get(fetchUrlRe, ({ url }: { url: string }) => {
       const matchUrlResult = fetchUrlRe.exec(url);
       if (matchUrlResult) {
-        // $FlowExpectError Our Flow doesn't know about named groups.
         const { language } = matchUrlResult.groups!;
         const path = `locales/${language}/app.ftl`;
         if (fs.existsSync(path)) {
diff --git a/src/test/components/GlobalTrack.test.tsx b/src/test/components/GlobalTrack.test.tsx
@@ -180,7 +180,6 @@ describe('timeline/GlobalTrack', function () {
   it('displays the private browsing status of a fission thread', () => {
     setup(PRIVATE_TRACK_INDEX);
     const track = screen.getByText('Private');
-    // $FlowExpectError The parent element is an HTML Element but Flow doesn't know that.
     expect(ensureExists(track.parentElement).title).toBe(stripIndent`
       Private
       Thread: "Private" (6666)
@@ -192,7 +191,6 @@ describe('timeline/GlobalTrack', function () {
   it('displays the container status of a fission thread', () => {
     setup(CONTAINER_TRACK_INDEX);
     const track = screen.getByText('InContainer');
-    // $FlowExpectError The parent element is an HTML Element but Flow doesn't know that.
     expect(ensureExists(track.parentElement).title).toBe(stripIndent`
       InContainer
       Thread: "InContainer" (7777)
diff --git a/src/test/components/MenuButtons.test.tsx b/src/test/components/MenuButtons.test.tsx
@@ -416,7 +416,6 @@ describe('app/MenuButtons', function () {
 
     it('matches the snapshot for a compression error', async () => {
       const { compress } = require('firefox-profiler/utils/gz');
-      // $FlowExpectError Flow doesn't know about Jest mocks
       compress.mockRejectedValue(new Error('Compression error'));
       jest.spyOn(console, 'error').mockImplementation(() => {});
       const { getPanel, openPublishPanel } = setupForPublish();
diff --git a/src/test/components/ServiceWorkerManager.test.tsx b/src/test/components/ServiceWorkerManager.test.tsx
@@ -43,7 +43,6 @@ describe('app/ServiceWorkerManager', () => {
 
     // It seems node v8 doesn't let us change the value unless we delete it before.
     delete (window as any).location;
-    // $FlowExpectError because the value we pass isn't a proper Location object.
     Object.defineProperty(window, 'location', {
       value: { reload: jest.fn() },
       writable: true,
diff --git a/src/test/components/Viewport.test.tsx b/src/test/components/Viewport.test.tsx
@@ -623,8 +623,6 @@ function setup(profileOverrides: MixedObject = {}) {
 
   // Hook up a dummy chart with a viewport.
   const DummyChart = jest.fn((_props) => <div id="dummy-chart" />);
-  // Flow's internal structures for React don't recognize our mock function as a
-  // valid stateless component. $FlowExpectError
   const ChartWithViewport = withChartViewport(DummyChart);
 
   type OwnProps = {
diff --git a/src/test/fixtures/mocks/indexeddb.ts b/src/test/fixtures/mocks/indexeddb.ts
@@ -9,9 +9,8 @@ import { IDBFactory } from 'fake-indexeddb';
 
 function resetIndexedDb() {
   // This is the recommended way to reset the IDB state between test runs, but
-  // neither flow nor eslint like that we assign to indexedDB directly, for
-  // different reasons.
-  /* $FlowExpectError */ /* eslint-disable-next-line no-global-assign */
+  // eslint does not like that we assign to indexedDB directly.
+  /* eslint-disable-next-line no-global-assign */
   indexedDB = new IDBFactory();
 }
 
diff --git a/src/test/fixtures/mocks/intersection-observer.ts b/src/test/fixtures/mocks/intersection-observer.ts
@@ -101,18 +101,11 @@ function triggerSingleObserver(
 
   for (const element of item.elements) {
     entries.push({
-      // $FlowExpectError Flow thinks they are different but they are both DOMRectReadOnly.
       boundingClientRect: element.getBoundingClientRect(),
       intersectionRatio: 1,
-      // $FlowExpectError Flow thinks they are different but they are both DOMRectReadOnly.
       intersectionRect: element.getBoundingClientRect(),
       isIntersecting: isIntersecting,
-      rootBounds: observer.root
-        ? // $FlowExpectError Flow thinks they are different but they are both DOMRectReadOnly.
-          observer.root.getBoundingClientRect()
-        : // $FlowExpectError We don't know anything, so putting null instead.
-          null,
-
+      rootBounds: observer.root ? observer.root.getBoundingClientRect() : null,
       target: element,
       time: Date.now() - item.created,
     });
diff --git a/src/test/fixtures/mocks/window-navigation.ts b/src/test/fixtures/mocks/window-navigation.ts
diff --git a/src/test/integration/symbolicator-cli/symbolicator-cli.test.ts b/src/test/integration/symbolicator-cli/symbolicator-cli.test.ts
diff --git a/src/test/unit/path.test.ts b/src/test/unit/path.test.ts
diff --git a/src/test/unit/process-profile.test.ts b/src/test/unit/process-profile.test.ts
diff --git a/src/utils/path.ts b/src/utils/path.ts
diff --git a/src/utils/types.ts b/src/utils/types.ts
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@`
`17`	`17`	`.compareHomeForm {`
`18`	`18`	`display: grid;`
`19`	`19`	`align-items: center;`
`20`		`- grid-gap: 1em;`
	`20`	`+ gap: 1em;`
`21`	`21`	`grid-template-columns: auto 1fr;`
`22`	`22`	`}`
`23`	`23`
Original file line number	Diff line number	Diff line change
`@@ -64,7 +64,7 @@`
`64`	`64`	`.appKeyboardShortcutsContent {`
`65`	`65`	`display: grid;`
`66`	`66`	`margin: 40px;`
`67`		`- grid-gap: 80px;`
	`67`	`+ gap: 80px;`
`68`	`68`	`grid-template-columns: 1fr 1fr;`
`69`	`69`	`}`
`70`	`70`
Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@`
`18`	`18`
`19`	`19`	`.flameGraphCanvasTooltip > .tooltipHeader {`
`20`	`20`	`display: grid;`
`21`		`- grid-gap: 2px 0;`
	`21`	`+ gap: 2px 0;`
`22`	`22`	`grid-template-columns: min-content auto;`
`23`	`23`	`}`
`24`	`24`