Merge branch 'main' into push-rpnlzllzpywq

Author: mstange

package.json

@@ -134,8 +134,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.56.0",
-    "@typescript-eslint/parser": "^8.56.0",
+    "@typescript-eslint/eslint-plugin": "^8.58.0",
+    "@typescript-eslint/parser": "^8.58.0",
     "alex": "^11.0.1",
     "babel-jest": "^30.2.0",
     "babel-plugin-module-resolver": "^5.0.2",
@@ -177,7 +177,7 @@
     "stylelint-config-idiomatic-order": "^10.0.0",
     "stylelint-config-standard": "^40.0.0",
     "typescript": "^6.0.2",
-    "typescript-eslint": "^8.56.0",
+    "typescript-eslint": "^8.58.0",
     "workbox-cli": "^7.4.0",
     "yargs": "^18.0.0"
   },

src/app-logic/url-handling.ts

@@ -309,7 +309,7 @@ export function getQueryStringFromUrlState(urlState: UrlState): string {
         : urlState.profileSpecific.implementation,
     timelineType:
       // The default is the cpu-category view, so only add it to the URL if it's
-      // the stack or category view.
+      // the stack view.
       urlState.profileSpecific.timelineType === 'cpu-category'
         ? undefined
         : urlState.profileSpecific.timelineType,
@@ -1445,14 +1445,10 @@ function getVersion4JSCallNodePathFromStackIndex(
 function validateTimelineType(
   timelineType: string | null | undefined
 ): TimelineType {
-  const VALID_TIMELINE_TYPES: Record<TimelineType, true> = {
-    stack: true,
-    category: true,
-    'cpu-category': true,
-  };
-  if (timelineType && timelineType in VALID_TIMELINE_TYPES) {
-    return timelineType as TimelineType;
+  if (timelineType === 'stack') {
+    return 'stack';
   }
+  // 'category' is an old value that is treated as 'cpu-category'.
   return 'cpu-category';
 }
 

src/components/shared/SourceView-codemirror.ts

@@ -20,7 +20,7 @@
  */
 import { EditorView, lineNumbers } from '@codemirror/view';
 import { EditorState, Compartment } from '@codemirror/state';
-import { syntaxHighlighting } from '@codemirror/language';
+import { type LanguageSupport, syntaxHighlighting } from '@codemirror/language';
 import { classHighlighter } from '@lezer/highlight';
 import { cpp } from '@codemirror/lang-cpp';
 import { rust } from '@codemirror/lang-rust';
@@ -46,9 +46,7 @@ const highlightedLineConf = new Compartment();
 const lineNumbersConf = new Compartment();
 
 // Detect the right language based on the file extension.
-function _languageExtForPath(
-  path: string | null
-): any /* LanguageSupport | [] */ {
+function _languageExtForPath(path: string | null): LanguageSupport | [] {
   if (path === null) {
     return [];
   }
@@ -77,7 +75,11 @@ function _languageExtForPath(
   ) {
     return cpp();
   }
-  return [];
+
+  // Fallback to JavaScript highlighting. Inline scripts share the page URL, so
+  // their path won't have a .js extension. This may be incorrect for
+  // unknown/unsupported file types, but is the best guess for the common case.
+  return javascript();
 }
 
 // Adjustments to make a CodeMirror editor work as a non-editable code viewer.

src/components/shared/thread/ActivityGraph.tsx

@@ -23,7 +23,6 @@ import type {
   IndexIntoSamplesTable,
   Milliseconds,
   CssPixels,
-  TimelineType,
 } from 'firefox-profiler/types';
 import type {
   ActivityFillGraphQuerier,
@@ -49,9 +48,7 @@ export type Props = {
     a: IndexIntoSamplesTable,
     b: IndexIntoSamplesTable
   ) => number;
-  readonly enableCPUUsage: boolean;
   readonly implementationFilter: ImplementationFilter;
-  readonly timelineType: TimelineType;
   readonly zeroAt: Milliseconds;
   readonly profileTimelineUnit: string;
 } & SizeProps;
@@ -136,11 +133,9 @@ class ThreadActivityGraphImpl extends React.PureComponent<Props, State> {
       sampleIndexOffset,
       sampleSelectedStates,
       treeOrderSampleComparator,
-      enableCPUUsage,
       implementationFilter,
       width,
       height,
-      timelineType,
       zeroAt,
       profileTimelineUnit,
     } = this.props;
@@ -168,19 +163,14 @@ class ThreadActivityGraphImpl extends React.PureComponent<Props, State> {
           categories={categories}
           passFillsQuerier={this._setFillsQuerier}
           onClick={this._onClick}
-          enableCPUUsage={enableCPUUsage}
           width={width}
           height={height}
         />
         {hoveredPixelState === null ? null : (
           <Tooltip mouseX={mouseX} mouseY={mouseY}>
             <SampleTooltipContents
               sampleIndex={hoveredPixelState.sample}
-              cpuRatioInTimeRange={
-                timelineType === 'cpu-category'
-                  ? hoveredPixelState.cpuRatioInTimeRange
-                  : null
-              }
+              cpuRatioInTimeRange={hoveredPixelState.cpuRatioInTimeRange}
               rangeFilteredThread={rangeFilteredThread}
               categories={categories}
               implementationFilter={implementationFilter}

src/components/shared/thread/ActivityGraphCanvas.tsx

@@ -37,7 +37,6 @@ type CanvasProps = {
   readonly categories: CategoryList;
   readonly passFillsQuerier: (param: ActivityFillGraphQuerier) => void;
   readonly onClick: (param: React.MouseEvent<HTMLCanvasElement>) => void;
-  readonly enableCPUUsage: boolean;
 } & SizeProps;
 
 export class ActivityGraphCanvas extends React.PureComponent<CanvasProps> {
@@ -132,7 +131,6 @@ export class ActivityGraphCanvas extends React.PureComponent<CanvasProps> {
       sampleIndexOffset,
       sampleSelectedStates,
       treeOrderSampleComparator,
-      enableCPUUsage,
       width,
       height,
     } = this.props;
@@ -153,7 +151,6 @@ export class ActivityGraphCanvas extends React.PureComponent<CanvasProps> {
       rangeEnd,
       sampleIndexOffset,
       sampleSelectedStates,
-      enableCPUUsage,
       xPixelsPerMs: canvasPixelWidth / (rangeEnd - rangeStart),
       treeOrderSampleComparator,
       categoryDrawStyles: this._getCategoryDrawStyles(ctx!),

src/components/shared/thread/ActivityGraphFills.tsx

@@ -36,7 +36,6 @@ type RenderedComponentSettings = {
   readonly rangeEnd: Milliseconds;
   readonly sampleIndexOffset: number;
   readonly xPixelsPerMs: number;
-  readonly enableCPUUsage: boolean;
   readonly treeOrderSampleComparator:
     | ((a: IndexIntoSamplesTable, b: IndexIntoSamplesTable) => number)
     | null;
@@ -215,7 +214,6 @@ export class ActivityGraphFillComputer {
       fullThread,
       rangeFilteredThread: { samples },
       interval,
-      enableCPUUsage,
       sampleIndexOffset,
       rangeStart,
       sampleSelectedStates,
@@ -243,12 +241,8 @@ export class ActivityGraphFillComputer {
       const nextSampleTime = samples.time[i + 1];
       const category = samples.category[i];
 
-      let beforeSampleCpuPercent = 100;
-      let afterSampleCpuPercent = 100;
-      if (enableCPUUsage) {
-        beforeSampleCpuPercent = threadCPUPercent[i];
-        afterSampleCpuPercent = threadCPUPercent[i + 1];
-      }
+      const beforeSampleCpuPercent = threadCPUPercent[i];
+      const afterSampleCpuPercent = threadCPUPercent[i + 1];
 
       const percentageBuffers = this.mutablePercentageBuffers[category];
       const selectedState = sampleSelectedStates[i];
@@ -273,12 +267,8 @@ export class ActivityGraphFillComputer {
     const lastIdx = samples.length - 1;
     const lastSampleCategory = samples.category[lastIdx];
 
-    let beforeSampleCpuPercent = 100;
-    let afterSampleCpuPercent = 100;
-    if (enableCPUUsage) {
-      beforeSampleCpuPercent = threadCPUPercent[lastIdx];
-      afterSampleCpuPercent = threadCPUPercent[lastIdx + 1]; // guaranteed to exist
-    }
+    const beforeSampleCpuPercent = threadCPUPercent[lastIdx];
+    const afterSampleCpuPercent = threadCPUPercent[lastIdx + 1]; // guaranteed to exist
 
     const nextSampleTime = sampleTime + interval;
     const percentageBuffers = this.mutablePercentageBuffers[lastSampleCategory];
@@ -596,7 +586,6 @@ export class ActivityFillGraphQuerier {
   ): number {
     const {
       rangeFilteredThread: { samples },
-      enableCPUUsage,
       interval,
       sampleIndexOffset,
       fullThread,
@@ -617,13 +606,9 @@ export class ActivityFillGraphQuerier {
         ? fullThread.samples.time[fullThreadSample + 1]
         : sampleTime + interval;
 
-    let beforeSampleCpuPercent = 100;
-    let afterSampleCpuPercent = 100;
     const { threadCPUPercent } = samples;
-    if (enableCPUUsage) {
-      beforeSampleCpuPercent = threadCPUPercent[sample];
-      afterSampleCpuPercent = threadCPUPercent[sample + 1]; // guaranteed to exist
-    }
+    const beforeSampleCpuPercent = threadCPUPercent[sample];
+    const afterSampleCpuPercent = threadCPUPercent[sample + 1]; // guaranteed to exist
 
     const kernelRangeStartTime = rangeStart + kernelPos / xPixelsPerMs;
 

src/components/shared/thread/SampleGraph.tsx

@@ -25,17 +25,14 @@ import type {
   IndexIntoSamplesTable,
   Milliseconds,
   CssPixels,
-  TimelineType,
   ImplementationFilter,
 } from 'firefox-profiler/types';
 import { SelectedState } from 'firefox-profiler/types';
 import type { SizeProps } from 'firefox-profiler/components/shared/WithSize';
-import type { CpuRatioInTimeRange } from './ActivityGraphFills';
 import { lightDark } from 'firefox-profiler/utils/dark-mode';
 
 export type HoveredPixelState = {
   readonly sample: IndexIntoSamplesTable | null;
-  readonly cpuRatioInTimeRange: CpuRatioInTimeRange | null;
 };
 
 type Props = {
@@ -51,7 +48,6 @@ type Props = {
     sampleIndex: IndexIntoSamplesTable | null
   ) => void;
   readonly trackName: string;
-  readonly timelineType: TimelineType;
   readonly implementationFilter: ImplementationFilter;
   readonly zeroAt: Milliseconds;
   readonly profileTimelineUnit: string;
@@ -252,7 +248,7 @@ class ThreadSampleGraphCanvas extends React.PureComponent<CanvasProps> {
 }
 
 export class ThreadSampleGraphImpl extends PureComponent<Props, State> {
-  override state = {
+  override state: State = {
     hoveredPixelState: null,
     mouseX: 0,
     mouseY: 0,
@@ -333,15 +329,13 @@ export class ThreadSampleGraphImpl extends PureComponent<Props, State> {
 
     return {
       sample: sampleIndex,
-      cpuRatioInTimeRange: null,
     };
   }
 
   override render() {
     const {
       className,
       trackName,
-      timelineType,
       categories,
       implementationFilter,
       thread,
@@ -379,12 +373,8 @@ export class ThreadSampleGraphImpl extends PureComponent<Props, State> {
         {hoveredPixelState === null ? null : (
           <Tooltip mouseX={mouseX} mouseY={mouseY}>
             <SampleTooltipContents
-              sampleIndex={(hoveredPixelState as HoveredPixelState).sample}
-              cpuRatioInTimeRange={
-                timelineType === 'cpu-category'
-                  ? (hoveredPixelState as HoveredPixelState).cpuRatioInTimeRange
-                  : null
-              }
+              sampleIndex={hoveredPixelState.sample}
+              cpuRatioInTimeRange={null}
               rangeFilteredThread={thread}
               categories={categories}
               implementationFilter={implementationFilter}

src/components/timeline/TrackThread.tsx

@@ -87,7 +87,6 @@ type StateProps = {
     b: IndexIntoSamplesTable
   ) => number;
   readonly selectedThreadIndexes: Set<ThreadIndex>;
-  readonly enableCPUUsage: boolean;
   readonly isExperimentalCPUGraphsEnabled: boolean;
   readonly implementationFilter: ImplementationFilter;
   readonly callTreeVisible: boolean;
@@ -186,7 +185,6 @@ class TimelineTrackThreadImpl extends PureComponent<Props> {
       treeOrderSampleComparator,
       trackType,
       trackName,
-      enableCPUUsage,
       isExperimentalCPUGraphsEnabled,
       implementationFilter,
       zeroAt,
@@ -241,8 +239,7 @@ class TimelineTrackThreadImpl extends PureComponent<Props> {
           />
         ) : null}
 
-        {(timelineType === 'category' || timelineType === 'cpu-category') &&
-        !filteredThread.isJsTracer ? (
+        {timelineType !== 'stack' && !filteredThread.isJsTracer ? (
           <>
             <ThreadActivityGraph
               className="threadActivityGraph"
@@ -257,9 +254,7 @@ class TimelineTrackThreadImpl extends PureComponent<Props> {
               categories={categories}
               sampleSelectedStates={sampleSelectedStates}
               treeOrderSampleComparator={treeOrderSampleComparator}
-              enableCPUUsage={enableCPUUsage}
               implementationFilter={implementationFilter}
-              timelineType={timelineType}
               zeroAt={zeroAt}
               profileTimelineUnit={profileTimelineUnit}
             />
@@ -274,7 +269,6 @@ class TimelineTrackThreadImpl extends PureComponent<Props> {
                 sampleSelectedStates={sampleSelectedStates}
                 categories={categories}
                 onSampleClick={this._onSampleClick}
-                timelineType={timelineType}
                 implementationFilter={implementationFilter}
                 zeroAt={zeroAt}
                 profileTimelineUnit={profileTimelineUnit}
@@ -335,8 +329,6 @@ export const TimelineTrackThread = explicitConnect<
     const committedRange = getCommittedRange(state);
     const fullThread = selectors.getThread(state);
     const timelineType = getTimelineType(state);
-    const enableCPUUsage =
-      timelineType === 'cpu-category' && fullThread.samples.hasCPUDeltas;
 
     return {
       fullThread,
@@ -361,7 +353,6 @@ export const TimelineTrackThread = explicitConnect<
       treeOrderSampleComparator:
         selectors.getTreeOrderComparatorInFilteredThread(state),
       selectedThreadIndexes,
-      enableCPUUsage,
       isExperimentalCPUGraphsEnabled: getIsExperimentalCPUGraphsEnabled(state),
       implementationFilter: getImplementationFilter(state),
       callTreeVisible: selectors.getUsefulTabs(state).includes('calltree'),

src/profile-logic/profile-data.ts

@@ -4305,10 +4305,8 @@ export function getNativeSymbolInfo(
 /**
  * Determines the timeline type by looking at the profile data.
  *
- * There are three options:
- * 'cpu-category': If a profile has both category and cpu usage information.
- * 'category': If a profile has category information but not the cpu usage.
- * 'stack': If a profile doesn't have category or cpu usage information.
+ * 'cpu-category': If a profile has category information.
+ * 'stack':        If a profile doesn't have category information.
  */
 export function determineTimelineType(profile: Profile): TimelineType {
   if (!profile.meta.categories) {
@@ -4318,16 +4316,6 @@ export function determineTimelineType(profile: Profile): TimelineType {
     return 'stack';
   }
 
-  if (
-    !profile.meta.sampleUnits ||
-    !profile.threads.some((thread) => thread.samples.threadCPUDelta)
-  ) {
-    // Have category information but doesn't have the CPU usage information.
-    // Use 'category'.
-    return 'category';
-  }
-
-  // Have both category and CPU usage information. Use 'cpu-category'.
   return 'cpu-category';
 }
 

src/test/store/profile-view.test.ts

@@ -3869,12 +3869,14 @@ describe('timeline type', function () {
     );
   });
 
-  it('should use the category view when cpu is not provided', () => {
+  it('should use the cpu-category view even if no cpu is provided', () => {
     const { profile } = getProfileFromTextSamples('A');
 
     // Load the store after mutating the profile.
     const { getState } = storeWithProfile(profile);
-    expect(UrlStateSelectors.getTimelineType(getState())).toEqual('category');
+    expect(UrlStateSelectors.getTimelineType(getState())).toEqual(
+      'cpu-category'
+    );
   });
 
   it('should use the stack height view when category and cpu is not provided', () => {