Merge branch 'main' into faster-search-filter

Author: canova

eslint.config.mjs

@@ -140,14 +140,25 @@ export default [
       'no-else-return': 'error',
       'no-nested-ternary': 'error',
 
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          args: 'all',
+          argsIgnorePattern: '^_',
+          caughtErrors: 'all',
+          caughtErrorsIgnorePattern: '^_',
+          destructuredArrayIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          ignoreRestSiblings: true,
+        },
+      ],
+
       // Use `import type` everywhere we can.
       '@typescript-eslint/consistent-type-imports': 'error',
       // Allow `as any` escape hatches
       '@typescript-eslint/no-explicit-any': 'off',
       // Disable a rule that the TypeScript FAQ disapproves of
       '@typescript-eslint/no-empty-object-type': 'off',
-      // Should enable this soon, mostly finds `catch (e)` with unused e
-      '@typescript-eslint/no-unused-vars': 'off',
       // TypeScript imports react-jsx into .tsx files for us
       'react/react-in-jsx-scope': 'off',
       // Allow @ts-expect-error annotations with descriptions.
@@ -215,22 +226,6 @@ export default [
       // Allow require(), for example for importing JSON files.
       '@typescript-eslint/no-require-imports': 'off',
 
-      // Override the project-wide config to allow @ts-nocheck.
-      // We really just need this for our mocks.
-      '@typescript-eslint/ban-ts-comment': [
-        'error',
-        {
-          // Allow @ts-expect-error and @ts-no-check annotations with descriptions.
-          'ts-expect-error': 'allow-with-description',
-          'ts-nocheck': 'allow-with-description',
-          // Don't allow @ts-ignore because we want to be notified
-          // when the error goes away so we can remove the annotation - use
-          // @ts-expect-error instead
-          'ts-ignore': true,
-          'ts-check': false,
-        },
-      ],
-
       // Adding more errors now
       'testing-library/no-manual-cleanup': 'error',
       'testing-library/no-wait-for-snapshot': 'error',

package.json

@@ -80,6 +80,7 @@
     "escape-string-regexp": "^4.0.0",
     "gecko-profiler-demangle": "^0.3.3",
     "idb": "^8.0.3",
+    "iongraph-web": "0.1.4",
     "jszip": "^3.10.1",
     "long": "^5.3.2",
     "memoize-immutable": "^3.0.0",
@@ -130,8 +131,8 @@
     "@types/react-transition-group": "^4.4.5",
     "@types/redux-logger": "^3.0.6",
     "@types/tgwf__co2": "^0.14.2",
-    "@typescript-eslint/eslint-plugin": "^8.38.0",
-    "@typescript-eslint/parser": "^8.38.0",
+    "@typescript-eslint/eslint-plugin": "^8.41.0",
+    "@typescript-eslint/parser": "^8.41.0",
     "alex": "^11.0.1",
     "autoprefixer": "^10.4.21",
     "babel-jest": "^30.0.5",
@@ -154,7 +155,7 @@
     "eslint-plugin-jest-dom": "^5.5.0",
     "eslint-plugin-jest-formatting": "^3.1.0",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-testing-library": "^7.6.3",
+    "eslint-plugin-testing-library": "^7.6.6",
     "espree": "^10.4.0",
     "fake-indexeddb": "^6.1.0",
     "file-loader": "^6.2.0",
@@ -179,7 +180,7 @@
     "raw-loader": "^4.0.2",
     "rimraf": "^5.0.10",
     "style-loader": "^4.0.0",
-    "stylelint": "^16.23.0",
+    "stylelint": "^16.23.1",
     "stylelint-config-idiomatic-order": "^10.0.0",
     "stylelint-config-standard": "^39.0.0",
     "typescript": "^5.8.3",
@@ -206,7 +207,7 @@
       "tsx"
     ],
     "transformIgnorePatterns": [
-      "/node_modules/(?!(query-string|decode-uri-component|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/jest|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",

profile-server.js

@@ -8,7 +8,7 @@ const path = require('path');
 module.exports = {
   serveAndOpen(host, profilerUrl, profilePath, openOptions) {
     // Create a simple http server serving the profile file.
-    const profileServer = http.createServer((req, res) => {
+    const profileServer = http.createServer((_req, res) => {
       res.setHeader('Access-Control-Allow-Origin', profilerUrl);
       const fileStream = fs.createReadStream(profilePath);
       fileStream.pipe(res);

src/actions/profile-view.ts

@@ -1749,13 +1749,17 @@ export function changeShowJsTracerSummary(
 }
 
 export function updatePreviewSelection(
-  previewSelection: PreviewSelection
+  previewSelection: PreviewSelection | null
 ): ThunkAction<void> {
   return (dispatch, getState) => {
+    // Only dispatch if the selection changes. This function can fire in a tight loop,
+    // and this check saves a dispatch.
     const currentPreviewSelection = getPreviewSelection(getState());
-    if (!objectShallowEquals(currentPreviewSelection, previewSelection)) {
-      // Only dispatch if the selection changes. This function can fire in a tight loop,
-      // and this check saves a dispatch.
+    if (
+      !currentPreviewSelection ||
+      !previewSelection ||
+      !objectShallowEquals(currentPreviewSelection, previewSelection)
+    ) {
       dispatch({
         type: 'UPDATE_PREVIEW_SELECTION',
         previewSelection,

src/app-logic/create-store.ts

@@ -18,7 +18,7 @@ export default function initializeStore(): Store {
   if (process.env.NODE_ENV === 'development') {
     loggerMiddleware = createLogger({
       collapsed: true,
-      titleFormatter: (action, time, duration) =>
+      titleFormatter: (action, _time, duration) =>
         `[action]    ${action.type} (in ${duration.toFixed(2)} ms)`,
       logErrors: false,
       duration: true,

src/components/app/AppLocalizationProvider.tsx

@@ -137,7 +137,7 @@ class AppLocalizationInit extends React.PureComponent<InitProps> {
         console.warn(
           `The stored locale information (${strPreviouslyRequestedLocales}) looks incorrect.`
         );
-      } catch (e) {
+      } catch (_e) {
         console.warn(
           `We got an error when trying to parse the previously stored locale information (${strPreviouslyRequestedLocales}).`
         );

src/components/app/BottomBox.tsx

@@ -9,6 +9,7 @@ import classNames from 'classnames';
 import { SourceView } from '../shared/SourceView';
 import { AssemblyView } from '../shared/AssemblyView';
 import { AssemblyViewToggleButton } from './AssemblyViewToggleButton';
+import { IonGraphView } from '../shared/IonGraphView';
 import { CodeLoadingOverlay } from './CodeLoadingOverlay';
 import { CodeErrorOverlay } from './CodeErrorOverlay';
 import {
@@ -28,7 +29,7 @@ import {
   getSourceViewCode,
   getAssemblyViewCode,
 } from 'firefox-profiler/selectors/code';
-import { getPreviewSelection } from 'firefox-profiler/selectors/profile';
+import { getPreviewSelectionIsBeingModified } from 'firefox-profiler/selectors/profile';
 import explicitConnect from 'firefox-profiler/utils/connect';
 
 import type { ConnectedProps } from 'firefox-profiler/utils/connect';
@@ -177,6 +178,9 @@ class BottomBoxImpl extends React.PureComponent<Props> {
       assemblyViewCode && assemblyViewCode.type === 'AVAILABLE'
         ? assemblyViewCode.instructions
         : [];
+    const sourceIsIonGraph = path !== null && path.endsWith('iongraph.json');
+    const displaySourceView = sourceViewFile !== null && !sourceIsIonGraph;
+    const displayIonGraph = sourceViewFile !== null && sourceIsIonGraph;
 
     // The bottom box has one or more side-by-side panes.
     // At the moment it always has either one or two panes:
@@ -211,7 +215,14 @@ class BottomBoxImpl extends React.PureComponent<Props> {
               {assemblyViewIsOpen ? null : trailingHeaderButtons}
             </div>
             <div className="bottom-sourceview-wrapper">
-              {sourceViewFile !== null ? (
+              {displayIonGraph ? (
+                <IonGraphView
+                  timings={globalLineTimings}
+                  hotSpotTimings={selectedCallNodeLineTimings}
+                  sourceCode={sourceCode}
+                />
+              ) : null}
+              {displaySourceView ? (
                 <SourceView
                   disableOverscan={disableOverscan}
                   timings={globalLineTimings}
@@ -295,7 +306,7 @@ export const BottomBox = explicitConnect<{}, StateProps, DispatchProps>({
       selectedNodeSelectors.getAssemblyViewAddressTimings(state),
     assemblyViewScrollGeneration: getAssemblyViewScrollGeneration(state),
     assemblyViewIsOpen: getAssemblyViewIsOpen(state),
-    disableOverscan: getPreviewSelection(state).isModifying,
+    disableOverscan: getPreviewSelectionIsBeingModified(state),
   }),
   mapDispatchToProps: {
     closeBottomBox,

src/components/app/CodeLoadingOverlay.tsx

@@ -17,7 +17,7 @@ export function CodeLoadingOverlay({ source }: CodeLoadingOverlayProps) {
       let host;
       try {
         host = new URL(url).host;
-      } catch (e) {
+      } catch (_e) {
         host = url;
       }
       return (

src/components/app/ProfileFilterNavigator.tsx

@@ -187,7 +187,7 @@ export const ProfileFilterNavigator = explicitConnect<
     const items = getCommittedRangeLabels(state);
     const previewSelection = getPreviewSelection(state);
     const profileTimelineUnit = getProfileTimelineUnit(state);
-    const uncommittedItem = previewSelection.hasSelection
+    const uncommittedItem = previewSelection
       ? getFormattedTimelineValue(
           previewSelection.selectionEnd - previewSelection.selectionStart,
           profileTimelineUnit

src/components/calltree/CallTree.tsx

@@ -16,7 +16,7 @@ import {
 import {
   getScrollToSelectionGeneration,
   getFocusCallTreeGeneration,
-  getPreviewSelection,
+  getPreviewSelectionIsBeingModified,
   getCategories,
   getCurrentTableViewOptions,
 } from 'firefox-profiler/selectors/profile';
@@ -410,7 +410,7 @@ export const CallTree = explicitConnect<{}, StateProps, DispatchProps>({
     expandedCallNodeIndexes:
       selectedThreadSelectors.getExpandedCallNodeIndexes(state),
     searchStringsRegExp: getSearchStringsAsRegExp(state),
-    disableOverscan: getPreviewSelection(state).isModifying,
+    disableOverscan: getPreviewSelectionIsBeingModified(state),
     invertCallstack: getInvertCallstack(state),
     implementationFilter: getImplementationFilter(state),
     // Use the filtered call node max depth, rather than the preview filtered call node