Merge branch 'main' into show-library-on-flame-graph-tooltip

package.json

@@ -87,13 +87,13 @@
     "@testing-library/react": "^11.0.4",
     "alex": "^9.0.1",
     "babel-eslint": "^10.0.1",
-    "babel-jest": "^26.3.0",
+    "babel-jest": "^26.5.2",
     "babel-loader": "^8.0.5",
     "babel-plugin-module-resolver": "^4.0.0",
     "browserslist": "^4.14.5",
-    "caniuse-lite": "^1.0.30001125",
+    "caniuse-lite": "^1.0.30001148",
     "circular-dependency-plugin": "^5.0.2",
-    "copy-webpack-plugin": "^6.1.1",
+    "copy-webpack-plugin": "^6.2.1",
     "cross-env": "^7.0.2",
     "css-loader": "^4.3.0",
     "cssnano": "^4.1.10",
@@ -105,26 +105,26 @@
     "eslint-plugin-babel": "^5.3.1",
     "eslint-plugin-flowtype": "^5.2.0",
     "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jest": "^24.0.2",
+    "eslint-plugin-jest": "^24.1.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.21.2",
     "fake-indexeddb": "^3.1.2",
-    "file-loader": "^6.1.0",
+    "file-loader": "^6.1.1",
     "flow-bin": "^0.96.0",
     "flow-coverage-report": "^0.8.0",
     "flow-typed": "^3.2.1",
     "glob": "^7.1.3",
     "html-webpack-plugin": "^4.5.0",
     "husky": "^4.3.0",
-    "jest": "^26.4.2",
+    "jest": "^26.5.3",
     "json-loader": "^0.5.7",
     "local-web-server": "^4.2.1",
     "lockfile-lint": "^4.3.7",
     "mkdirp": "^1.0.4",
     "npm-run-all": "^4.1.5",
     "postcss-loader": "^4.0.3",
     "prettier": "^1.16.4",
-    "raw-loader": "^4.0.1",
+    "raw-loader": "^4.0.2",
     "rimraf": "^3.0.2",
     "style-loader": "^1.3.0",
     "stylelint": "^13.7.2",

src/components/app/Details.js

@@ -26,7 +26,7 @@ import {
 import { getSelectedTab } from 'firefox-profiler/selectors/url-state';
 import { getIsSidebarOpen } from 'firefox-profiler/selectors/app';
 import { selectedThreadSelectors } from 'firefox-profiler/selectors/per-thread';
-import CallNodeContextMenu from 'firefox-profiler/components/shared/CallNodeContextMenu';
+import { CallNodeContextMenu } from 'firefox-profiler/components/shared/CallNodeContextMenu';
 import { MaybeMarkerContextMenu } from 'firefox-profiler/components/shared/MarkerContextMenu';
 import { toValidTabSlug } from 'firefox-profiler/utils/flow';
 

src/components/flame-graph/FlameGraph.js

@@ -21,7 +21,7 @@ import {
   getSelectedThreadsKey,
   getInvertCallstack,
 } from '../../selectors/url-state';
-import ContextMenuTrigger from 'firefox-profiler/components/shared/ContextMenuTrigger';
+import { ContextMenuTrigger } from 'firefox-profiler/components/shared/ContextMenuTrigger';
 import { getCallNodePathFromIndex } from 'firefox-profiler/profile-logic/profile-data';
 import {
   changeSelectedCallNode,

src/components/js-tracer/Chart.js

@@ -35,7 +35,7 @@ import type {
 
 import type { ConnectedProps } from 'firefox-profiler/utils/connect';
 
-require('./index.css');
+import './index.css';
 
 const ROW_HEIGHT: CssPixels = 16;
 

src/components/js-tracer/index.js

@@ -24,7 +24,7 @@ import type {
 } from 'firefox-profiler/types';
 import type { ConnectedProps } from 'firefox-profiler/utils/connect';
 
-require('./index.css');
+import './index.css';
 
 type DispatchProps = {|
   +updatePreviewSelection: typeof updatePreviewSelection,

src/components/marker-chart/index.js

@@ -24,7 +24,7 @@ import {
   updatePreviewSelection,
   changeRightClickedMarker,
 } from 'firefox-profiler/actions/profile-view';
-import ContextMenuTrigger from 'firefox-profiler/components/shared/ContextMenuTrigger';
+import { ContextMenuTrigger } from 'firefox-profiler/components/shared/ContextMenuTrigger';
 
 import type {
   Marker,
@@ -40,7 +40,7 @@ import type {
 
 import type { ConnectedProps } from 'firefox-profiler/utils/connect';
 
-require('./index.css');
+import './index.css';
 
 const ROW_HEIGHT = 16;
 

src/components/network-chart/index.js

@@ -13,7 +13,7 @@ import { VirtualList } from '../shared/VirtualList';
 import { withSize } from '../shared/WithSize';
 import { NetworkChartEmptyReasons } from './NetworkChartEmptyReasons';
 import { NetworkChartRow } from './NetworkChartRow';
-import ContextMenuTrigger from '../shared/ContextMenuTrigger';
+import { ContextMenuTrigger } from '../shared/ContextMenuTrigger';
 
 import {
   getPreviewSelection,
@@ -34,7 +34,7 @@ import type {
 
 import type { ConnectedProps } from '../../utils/connect';
 
-require('./index.css');
+import './index.css';
 
 const ROW_HEIGHT = 16;
 

src/components/shared/CallNodeContextMenu.js

@@ -5,7 +5,7 @@
 // @flow
 import React, { PureComponent, Fragment } from 'react';
 import { MenuItem } from 'react-contextmenu';
-import ContextMenu from './ContextMenu';
+import { ContextMenu } from './ContextMenu';
 import explicitConnect from 'firefox-profiler/utils/connect';
 import { funcHasRecursiveCall } from 'firefox-profiler/profile-logic/transforms';
 import { getFunctionName } from 'firefox-profiler/profile-logic/function-info';
@@ -63,7 +63,7 @@ type Props = ConnectedProps<{||}, StateProps, DispatchProps>;
 
 import './CallNodeContextMenu.css';
 
-class CallNodeContextMenu extends PureComponent<Props> {
+class CallNodeContextMenuImpl extends PureComponent<Props> {
   _hidingTimeout: TimeoutID | null = null;
 
   // Using setTimeout here is a bit complex, but is necessary to make the menu
@@ -548,7 +548,11 @@ class CallNodeContextMenu extends PureComponent<Props> {
   }
 }
 
-export default explicitConnect<{||}, StateProps, DispatchProps>({
+export const CallNodeContextMenu = explicitConnect<
+  {||},
+  StateProps,
+  DispatchProps
+>({
   mapStateToProps: state => {
     const rightClickedCallNodeInfo = getRightClickedCallNodeInfo(state);
 
@@ -586,5 +590,5 @@ export default explicitConnect<{||}, StateProps, DispatchProps>({
     expandAllCallNodeDescendants,
     setContextMenuVisibility,
   },
-  component: CallNodeContextMenu,
+  component: CallNodeContextMenuImpl,
 });

src/components/shared/ContextMenu.js

@@ -6,13 +6,13 @@
 import React, { PureComponent } from 'react';
 import type { ElementConfig } from 'react';
 import ReactDOM from 'react-dom';
-import { ContextMenu } from 'react-contextmenu';
+import { ContextMenu as ReactContextMenu } from 'react-contextmenu';
 
-type Props = ElementConfig<typeof ContextMenu>;
+type Props = ElementConfig<typeof ReactContextMenu>;
 
-export default class MyContextMenu extends PureComponent<Props> {
-  _contextMenu: ContextMenu | null = null;
-  _takeContextMenuRef = (contextMenu: ContextMenu | null) => {
+export class ContextMenu extends PureComponent<Props> {
+  _contextMenu: ReactContextMenu | null = null;
+  _takeContextMenuRef = (contextMenu: ReactContextMenu | null) => {
     this._contextMenu = contextMenu;
   };
 
@@ -45,9 +45,9 @@ export default class MyContextMenu extends PureComponent<Props> {
 
   render() {
     return (
-      <ContextMenu ref={this._takeContextMenuRef} {...this.props}>
+      <ReactContextMenu ref={this._takeContextMenuRef} {...this.props}>
         {this.props.children ? this.props.children : <div />}
-      </ContextMenu>
+      </ReactContextMenu>
     );
   }
 }

src/components/shared/ContextMenuTrigger.js

@@ -4,10 +4,10 @@
 // @flow
 
 import React, { PureComponent } from 'react';
-import { ContextMenuTrigger } from 'react-contextmenu';
+import { ContextMenuTrigger as ReactContextMenuTrigger } from 'react-contextmenu';
 
-export default class MyContextMenuTrigger extends PureComponent<{}> {
+export class ContextMenuTrigger extends PureComponent<{}> {
   render() {
-    return <ContextMenuTrigger holdToDisplay={-1} {...this.props} />;
+    return <ReactContextMenuTrigger holdToDisplay={-1} {...this.props} />;
   }
 }

src/components/shared/MarkerContextMenu.js

@@ -6,7 +6,7 @@
 import React, { PureComponent } from 'react';
 import { MenuItem } from 'react-contextmenu';
 
-import ContextMenu from './ContextMenu';
+import { ContextMenu } from './ContextMenu';
 import explicitConnect from 'firefox-profiler/utils/connect';
 
 import {

src/components/shared/TreeView.js

@@ -9,7 +9,7 @@ import classNames from 'classnames';
 
 import { VirtualList } from './VirtualList';
 
-import ContextMenuTrigger from './ContextMenuTrigger';
+import { ContextMenuTrigger } from './ContextMenuTrigger';
 
 import type { CssPixels } from 'firefox-profiler/types';
 

src/components/sidebar/CallTreeSidebar.js

@@ -348,7 +348,9 @@ class CallTreeSidebarImpl extends React.PureComponent<Props> {
     if (selectedNodeIndex === null) {
       return (
         <div className="sidebar sidebar-calltree">
-          Select a node to display some information about it.
+          <div className="sidebar-contents-wrapper">
+            Select a node to display some information about it.
+          </div>
         </div>
       );
     }

src/components/sidebar/MarkerSidebar.js

@@ -29,7 +29,9 @@ class MarkerSidebarImpl extends React.PureComponent<Props> {
     if (marker === null || markerIndex === null) {
       return (
         <div className="sidebar sidebar-marker-table">
-          Select a marker to display some information about it.
+          <div className="sidebar-contents-wrapper">
+            Select a marker to display some information about it.
+          </div>
         </div>
       );
     }

src/components/stack-chart/index.js

@@ -25,7 +25,7 @@ import {
 } from '../../selectors/url-state';
 import { getTimelineMarginLeft } from '../../selectors/app';
 import { StackChartEmptyReasons } from './StackChartEmptyReasons';
-import ContextMenuTrigger from '../shared/ContextMenuTrigger';
+import { ContextMenuTrigger } from '../shared/ContextMenuTrigger';
 import { StackSettings } from '../shared/StackSettings';
 import { TransformNavigator } from '../shared/TransformNavigator';
 import {

src/components/timeline/GlobalTrack.js

@@ -11,7 +11,7 @@ import {
   changeLocalTrackOrder,
   selectTrack,
 } from 'firefox-profiler/actions/profile-view';
-import ContextMenuTrigger from 'firefox-profiler/components/shared/ContextMenuTrigger';
+import { ContextMenuTrigger } from 'firefox-profiler/components/shared/ContextMenuTrigger';
 import {
   getSelectedThreadIndexes,
   getLocalTrackOrder,

src/components/timeline/LocalTrack.js

@@ -11,7 +11,7 @@ import {
   selectTrack,
 } from 'firefox-profiler/actions/profile-view';
 import { assertExhaustiveCheck } from 'firefox-profiler/utils/flow';
-import ContextMenuTrigger from 'firefox-profiler/components/shared/ContextMenuTrigger';
+import { ContextMenuTrigger } from 'firefox-profiler/components/shared/ContextMenuTrigger';
 import {
   getSelectedThreadIndexes,
   getSelectedTab,

src/components/timeline/Markers.js

@@ -19,7 +19,7 @@ import { getPreviewSelection } from 'firefox-profiler/selectors/profile';
 import { getThreadSelectorsFromThreadsKey } from 'firefox-profiler/selectors/per-thread';
 import { getSelectedThreadIndexes } from 'firefox-profiler/selectors/url-state';
 import { changeRightClickedMarker } from 'firefox-profiler/actions/profile-view';
-import ContextMenuTrigger from 'firefox-profiler/components/shared/ContextMenuTrigger';
+import { ContextMenuTrigger } from 'firefox-profiler/components/shared/ContextMenuTrigger';
 import { hasThreadKeys } from 'firefox-profiler/profile-logic/profile-data';
 import './Markers.css';
 

src/components/tooltip/Marker.js

@@ -7,7 +7,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import {
-  formatNumber,
   formatMilliseconds,
   formatTimestamp,
 } from 'firefox-profiler/utils/format-numbers';
@@ -314,9 +313,9 @@ class MarkerTooltipContents extends React.PureComponent<Props> {
           <div className="tooltipDetailsBackTrace">
             <h2 className="tooltipBackTraceTitle">
               {data.type === 'Styles' || marker.name === 'Reflow'
-                ? `First invalidated ${formatNumber(
+                ? `First invalidated ${formatTimestamp(
                     causeAge
-                  )}ms before the flush, at:`
+                  )} before the flush, at:`
                 : `Triggered ${formatTimestamp(causeAge)} ago, at:`}
             </h2>
             <Backtrace

src/test/components/CallNodeContextMenu.test.js

@@ -4,7 +4,7 @@
 
 // @flow
 import * as React from 'react';
-import CallNodeContextMenu from '../../components/shared/CallNodeContextMenu';
+import { CallNodeContextMenu } from '../../components/shared/CallNodeContextMenu';
 import { storeWithProfile } from '../fixtures/stores';
 import { getProfileFromTextSamples } from '../fixtures/profiles/processed-profile';
 import { render } from '@testing-library/react';

src/test/components/ContextMenu.test.js

@@ -5,7 +5,7 @@
 // @flow
 import * as React from 'react';
 import { render } from '@testing-library/react';
-import ContextMenu from '../../components/shared/ContextMenu';
+import { ContextMenu } from '../../components/shared/ContextMenu';
 
 describe('ContextMenu', function() {
   it('correctly renders the context-menu with the props that were passed through', () => {

src/test/components/FlameGraph.test.js

@@ -11,7 +11,7 @@ import { Provider } from 'react-redux';
 import copy from 'copy-to-clipboard';
 
 import { FlameGraph } from '../../components/flame-graph';
-import CallNodeContextMenu from '../../components/shared/CallNodeContextMenu';
+import { CallNodeContextMenu } from '../../components/shared/CallNodeContextMenu';
 
 import mockCanvasContext from '../fixtures/mocks/canvas-context';
 import { storeWithProfile } from '../fixtures/stores';

src/test/components/ProfileCallTreeView.test.js

@@ -11,7 +11,7 @@ import copy from 'copy-to-clipboard';
 
 import { selectedThreadSelectors } from '../../selectors/per-thread';
 import { ProfileCallTreeView } from '../../components/calltree/ProfileCallTreeView';
-import CallNodeContextMenu from '../../components/shared/CallNodeContextMenu';
+import { CallNodeContextMenu } from '../../components/shared/CallNodeContextMenu';
 import { processProfile } from '../../profile-logic/process-profile';
 import { ensureExists } from '../../utils/flow';
 

src/test/components/StackChart.test.js

@@ -16,7 +16,7 @@ import {
   TIMELINE_MARGIN_RIGHT,
 } from '../../app-logic/constants';
 import { StackChart } from '../../components/stack-chart';
-import CallNodeContextMenu from '../../components/shared/CallNodeContextMenu';
+import { CallNodeContextMenu } from '../../components/shared/CallNodeContextMenu';
 import {
   getEmptyThread,
   getEmptyProfile,

src/test/components/__snapshots__/CallTreeSidebar.test.js.snap

@@ -235,7 +235,11 @@ exports[`CallTreeSidebar matches the snapshots when displaying data about the cu
 <div
   class="sidebar sidebar-calltree"
 >
-  Select a node to display some information about it.
+  <div
+    class="sidebar-contents-wrapper"
+  >
+    Select a node to display some information about it.
+  </div>
 </div>
 `;
 
@@ -978,7 +982,11 @@ exports[`CallTreeSidebar matches the snapshots when displaying data about the cu
 <div
   class="sidebar sidebar-calltree"
 >
-  Select a node to display some information about it.
+  <div
+    class="sidebar-contents-wrapper"
+  >
+    Select a node to display some information about it.
+  </div>
 </div>
 `;
 

src/test/components/__snapshots__/TooltipMarker.test.js.snap

@@ -3078,7 +3078,7 @@ exports[`TooltipMarker renders tooltips for various markers: Styles-20 1`] = `
       <h2
         class="tooltipBackTraceTitle"
       >
-        First invalidated 0.50ms before the flush, at:
+        First invalidated 500μs before the flush, at:
       </h2>
       <ul
         class="backtrace"