Merge branch 'main' into new-withchartviewport

Author: mstange

locales/en-US/app.ftl

@@ -786,8 +786,8 @@ ServiceWorkerManager--hide-notice-button =
 
 StackSettings--implementation-all-frames = All frames
     .title = Do not filter the stack frames
-StackSettings--implementation-javascript2 = JavaScript
-    .title = Show only the stack frames related to JavaScript execution
+StackSettings--implementation-script = Script
+    .title = Show only the stack frames related to script execution
 StackSettings--implementation-native2 = Native
     .title = Show only the stack frames for native code
 

package.json

@@ -54,7 +54,7 @@
     "test-coverage": "run-s test-build-coverage test-serve-coverage",
     "test-alex": "alex ./docs-* *.md",
     "test-lockfile": "lockfile-lint --path yarn.lock --allowed-hosts yarn --validate-https",
-    "test-debug": "node --inspect-brk node_modules/.bin/jest --runInBand",
+    "test-debug": "cross-env LC_ALL=C TZ=UTC NODE_ENV=test node --inspect-brk node_modules/.bin/jest --runInBand",
     "postinstall": "patch-package"
   },
   "license": "MPL-2.0",

src/actions/profile-view.js

@@ -182,7 +182,7 @@ export function selectSelfCallNode(
     // We're not calling callNodeInfo.getCallNodePathFromIndex here because we
     // only have a non-inverted call node index, which wouldn't be accepted by
     // the inverted call node info.
-    const callNodeTable = callNodeInfo.getNonInvertedCallNodeTable();
+    const callNodeTable = callNodeInfo.getCallNodeTable();
     const callNodePath = [];
     let cni = nonInvertedSelfCallNode;
     while (cni !== -1) {
@@ -1951,7 +1951,7 @@ export function handleCallNodeTransformShortcut(
     const funcIndex = callNodeInfo.funcForNode(callNodeIndex);
     const category = callNodeInfo.categoryForNode(callNodeIndex);
 
-    const nonInvertedCallNodeTable = callNodeInfo.getNonInvertedCallNodeTable();
+    const callNodeTable = callNodeInfo.getCallNodeTable();
 
     switch (event.key) {
       case 'F':
@@ -2010,7 +2010,7 @@ export function handleCallNodeTransformShortcut(
         break;
       }
       case 'r': {
-        if (funcHasRecursiveCall(nonInvertedCallNodeTable, funcIndex)) {
+        if (funcHasRecursiveCall(callNodeTable, funcIndex)) {
           dispatch(
             addTransformToStack(threadsKey, {
               type: 'collapse-recursion',
@@ -2021,7 +2021,7 @@ export function handleCallNodeTransformShortcut(
         break;
       }
       case 'R': {
-        if (funcHasDirectRecursiveCall(nonInvertedCallNodeTable, funcIndex)) {
+        if (funcHasDirectRecursiveCall(callNodeTable, funcIndex)) {
           dispatch(
             addTransformToStack(threadsKey, {
               type: 'collapse-direct-recursion',

src/components/app/Home.js

@@ -54,7 +54,7 @@ class ActionButtons extends React.PureComponent<
   ActionButtonsProps,
   ActionButtonsState,
 > {
-  _fileInput: HTMLInputElement | null;
+  _fileInput: HTMLInputElement | null = null;
 
   state = {
     isLoadFromUrlPressed: false,

src/components/app/KeyboardShortcut.js

@@ -54,23 +54,23 @@ export class KeyboardShortcut extends React.PureComponent<Props, State> {
     });
   }
 
-  _open = (state: State): $Shape<State> => {
+  _open = (state: State): State => {
     if (state.isOpen) {
       // Do nothing.
-      return {};
+      return state;
     }
     const focusAfterClosed = document.activeElement;
     this._trapFocus();
     this._focus();
     return { isOpen: true, focusAfterClosed };
   };
 
-  _close = (state: State): $Shape<State> => {
+  _close = (state: State): State => {
     const { focusAfterClosed, isOpen } = state;
 
     if (!isOpen) {
       // Do nothing.
-      return {};
+      return state;
     }
     this._untrapFocus();
     if (focusAfterClosed) {

src/components/app/MenuButtons/Permalink.js

@@ -27,7 +27,7 @@ type State = {|
 |};
 
 export class MenuButtonsPermalink extends React.PureComponent<Props, State> {
-  _permalinkTextField: HTMLInputElement | null;
+  _permalinkTextField: HTMLInputElement | null = null;
   _takePermalinkTextFieldRef = (elem: HTMLInputElement | null) => {
     this._permalinkTextField = elem;
   };

src/components/flame-graph/Canvas.js

@@ -158,7 +158,7 @@ class FlameGraphCanvasImpl extends React.PureComponent<Props> {
       return;
     }
 
-    const callNodeTable = callNodeInfo.getNonInvertedCallNodeTable();
+    const callNodeTable = callNodeInfo.getCallNodeTable();
     const depth = callNodeTable.depth[selectedCallNodeIndex];
     const y = (maxStackDepthPlusOne - depth - 1) * ROW_HEIGHT;
 
@@ -232,7 +232,7 @@ class FlameGraphCanvasImpl extends React.PureComponent<Props> {
     fastFillStyle.set('#ffffff');
     ctx.fillRect(0, 0, deviceContainerWidth, deviceContainerHeight);
 
-    const callNodeTable = callNodeInfo.getNonInvertedCallNodeTable();
+    const callNodeTable = callNodeInfo.getCallNodeTable();
 
     const startDepth = Math.floor(
       maxStackDepthPlusOne - viewportBottom / stackFrameHeight

src/components/flame-graph/FlameGraph.js

@@ -163,7 +163,7 @@ class FlameGraphImpl extends React.PureComponent<Props> {
   _wideEnough = (callNodeIndex: IndexIntoCallNodeTable): boolean => {
     const { flameGraphTiming, callNodeInfo } = this.props;
 
-    const callNodeTable = callNodeInfo.getNonInvertedCallNodeTable();
+    const callNodeTable = callNodeInfo.getCallNodeTable();
     const depth = callNodeTable.depth[callNodeIndex];
     const row = flameGraphTiming[depth];
     const columnIndex = row.callNode.indexOf(callNodeIndex);
@@ -188,7 +188,7 @@ class FlameGraphImpl extends React.PureComponent<Props> {
 
     let callNodeIndex = startingCallNodeIndex;
 
-    const callNodeTable = callNodeInfo.getNonInvertedCallNodeTable();
+    const callNodeTable = callNodeInfo.getCallNodeTable();
     const depth = callNodeTable.depth[callNodeIndex];
     const row = flameGraphTiming[depth];
     let columnIndex = row.callNode.indexOf(callNodeIndex);
@@ -219,7 +219,7 @@ class FlameGraphImpl extends React.PureComponent<Props> {
       changeSelectedCallNode,
       handleCallNodeTransformShortcut,
     } = this.props;
-    const callNodeTable = callNodeInfo.getNonInvertedCallNodeTable();
+    const callNodeTable = callNodeInfo.getCallNodeTable();
 
     if (
       // Please do not forget to update the switch/case below if changing the array to allow more keys.
@@ -305,7 +305,7 @@ class FlameGraphImpl extends React.PureComponent<Props> {
     if (document.activeElement === this._viewport) {
       event.preventDefault();
       const { callNodeInfo, selectedCallNodeIndex, thread } = this.props;
-      const callNodeTable = callNodeInfo.getNonInvertedCallNodeTable();
+      const callNodeTable = callNodeInfo.getCallNodeTable();
       if (selectedCallNodeIndex !== null) {
         const funcIndex = callNodeTable.func[selectedCallNodeIndex];
         const funcName = thread.stringTable.getString(

src/components/network-chart/NetworkChartRow.js

@@ -13,6 +13,10 @@ import {
   guessMimeTypeFromNetworkMarker,
   getColorClassNameForMimeType,
 } from '../../profile-logic/marker-data';
+import {
+  getLatestPreconnectPhaseAndValue,
+  getMatchingPhaseValues,
+} from '../../profile-logic/network';
 import { formatNumber } from '../../utils/format-numbers';
 import {
   TIMELINE_MARGIN_LEFT,
@@ -28,6 +32,7 @@ import type {
   Marker,
   MarkerIndex,
   NetworkPayload,
+  NetworkPhaseName,
   MixedObject,
 } from 'firefox-profiler/types';
 
@@ -65,14 +70,14 @@ const PATH_SPLIT_RE = /(.*)(\/[^/]+\/?)$/;
 // `endTime` is the timestamp when the response is delivered to the caller. It's
 // not present in this array as it's implicit in the component logic.
 // They may be all missing in a specific marker, that's fine.
-const PROPERTIES_IN_ORDER = [
+const PHASE_NAMES_IN_ORDER: NetworkPhaseName[] = [
   'domainLookupStart',
   'requestStart',
   'responseStart',
   'responseEnd',
 ];
 
-const PHASE_OPACITIES = PROPERTIES_IN_ORDER.reduce(
+const PHASE_OPACITIES = PHASE_NAMES_IN_ORDER.reduce(
   (result, property, i, { length }) => {
     result[property] = length > 1 ? i / (length - 1) : 0;
     return result;
@@ -81,8 +86,8 @@ const PHASE_OPACITIES = PROPERTIES_IN_ORDER.reduce(
 );
 
 type NetworkPhaseProps = {|
-  +name: string,
-  +previousName: string,
+  +name: NetworkPhaseName,
+  +previousName: NetworkPhaseName,
   +value: number | string,
   +duration: Milliseconds,
   +style: MixedObject,
@@ -140,25 +145,6 @@ class NetworkChartRowBar extends React.PureComponent<NetworkChartRowBarProps> {
     return markerPosition;
   }
 
-  /**
-   * Properties `connectEnd` and `domainLookupEnd` aren't always present. This
-   * function returns the latest one so that we can determine if these phases
-   * happen in a preconnect session.
-   */
-  _getLatestPreconnectEndProperty(): 'connectEnd' | 'domainLookupEnd' | null {
-    const { networkPayload } = this.props;
-
-    if (typeof networkPayload.connectEnd === 'number') {
-      return 'connectEnd';
-    }
-
-    if (typeof networkPayload.domainLookupEnd === 'number') {
-      return 'domainLookupEnd';
-    }
-
-    return null;
-  }
-
   /**
    * This returns the preconnect component, or null if there's no preconnect
    * operation for this marker.
@@ -175,15 +161,14 @@ class NetworkChartRowBar extends React.PureComponent<NetworkChartRowBarProps> {
     // The preconnect bar goes from the start to the end of the whole preconnect
     // operation, that includes both the domain lookup and the connection
     // process. Therefore we want the property that represents the latest phase.
-    const latestPreconnectEndProperty = this._getLatestPreconnectEndProperty();
+    const latestPreconnectEndProperty = getLatestPreconnectPhaseAndValue(
+      this.props.networkPayload
+    );
     if (!latestPreconnectEndProperty) {
       return null;
     }
 
-    // We force-coerce the value into a number just to appease Flow. Indeed
-    // the previous find operation ensures that all values are numbers but
-    // Flow can't know that.
-    const preconnectEnd = +networkPayload[latestPreconnectEndProperty];
+    const preconnectEnd = latestPreconnectEndProperty.value;
 
     // If the latest phase ends before the start of the marker, we'll display a
     // separate preconnect bar.
@@ -201,7 +186,7 @@ class NetworkChartRowBar extends React.PureComponent<NetworkChartRowBarProps> {
     const preconnectWidth = preconnectEndPosition - preconnectStartPosition;
 
     const preconnectPhase = {
-      name: latestPreconnectEndProperty,
+      name: latestPreconnectEndProperty.phase,
       previousName: 'domainLookupStart',
       value: preconnectEnd,
       duration: preconnectDuration,
@@ -243,42 +228,33 @@ class NetworkChartRowBar extends React.PureComponent<NetworkChartRowBarProps> {
     const preconnectComponent = this._preconnectComponent();
 
     // Compute the phases for this marker.
-
-    // If there's a preconnect phase, we remove `domainLookupStart` from the
-    // main bar, but we'll draw a separate bar to represent it.
-    const mainBarProperties = preconnectComponent
-      ? PROPERTIES_IN_ORDER.slice(1)
-      : PROPERTIES_IN_ORDER;
-
-    // Not all properties are always present.
-    const availableProperties = mainBarProperties.filter(
-      (property) => typeof networkPayload[property] === 'number'
+    const availablePhases = getMatchingPhaseValues(
+      networkPayload,
+      // If there's a preconnect phase, we remove `domainLookupStart` from the
+      // main bar, but we'll draw a separate bar to represent it.
+      preconnectComponent ? PHASE_NAMES_IN_ORDER.slice(1) : PHASE_NAMES_IN_ORDER
     );
 
     const mainBarPhases = [];
     let previousValue = start;
     let previousName = 'startTime';
 
     // In this loop we add the various phases to the array.
-    availableProperties.forEach((property, i) => {
-      // We force-coerce the value into a number just to appease Flow. Indeed the
-      // previous filter ensures that all values are numbers but Flow can't know
-      // that.
-      const value = +networkPayload[property];
+    availablePhases.forEach(({ phase, value }, i) => {
       mainBarPhases.push({
-        name: property,
+        name: phase,
         previousName,
         value,
         duration: value - previousValue,
         style: {
           left: ((previousValue - start) / dur) * markerWidth,
           width: Math.max(((value - previousValue) / dur) * markerWidth, 1),
           // The first phase is always transparent because this represents the wait time.
-          opacity: i === 0 ? 0 : PHASE_OPACITIES[property],
+          opacity: i === 0 ? 0 : PHASE_OPACITIES[phase],
         },
       });
       previousValue = value;
-      previousName = property;
+      previousName = phase;
     });
 
     // The last part isn't generally colored (opacity is 0) unless it's the only
@@ -395,6 +371,10 @@ export class NetworkChartRow extends React.PureComponent<
 
   // Remove `Load 123: ` from markers.name
   _cropNameToUrl(name: string): string {
+    const colonPos = this._findIndexOfLoadid(name);
+    if (colonPos === null) {
+      return '';
+    }
     const url = name.slice(this._findIndexOfLoadid(name) + 2);
     return url;
   }