Deploy February 27, 2023

.circleci/config.yml

@@ -3,7 +3,7 @@ version: 2.1
 executors:
   node:
     docker:
-      - image: cimg/node:16.13
+      - image: cimg/node:18.14
   base:
     docker:
       - image: cimg/base:stable

.gitpod.yml

@@ -1,7 +1,7 @@
 ports:
 - port: 4242
 tasks:
-- before: nvm install 16
+- before: nvm install 18
   init: yarn install
   command: FX_PROFILER_HOST="0.0.0.0" yarn start
 - openMode: split-right

.nvmrc

@@ -0,0 +1 @@
+18.14

.stylelintrc

@@ -5,7 +5,6 @@
   "extends": [
     "stylelint-config-standard",
     "stylelint-config-idiomatic-order",
-    "stylelint-config-prettier"
   ],
   "rules": {
     "prettier/prettier": [

appveyor.yml

@@ -1,6 +1,6 @@
 clone_depth: 5
 environment:
-  nodejs_version: "16"
+  nodejs_version: "18.14"
 platform: x64 # flow needs 64b platforms
 
 branches:
@@ -12,12 +12,12 @@ branches:
 install:
   # 1. Select the right node
   # The following command works by fully reinstalling a version of node. It's a
-  # lot slower than the other command. This needs the full version (eg: 16.12)
-  # - ps: Update-NodeJsInstallation (Get-NodeJsLatestBuild $env:nodejs_version) $env:platform
+  # lot slower than the other command. This needs the full version (eg: 18.12)
+  - ps: Update-NodeJsInstallation (Get-NodeJsLatestBuild $env:nodejs_version) $env:platform
   # Use the following command if the wanted version is already part of
   # appveyor's windows machines, see https://www.appveyor.com/docs/windows-images-software/#node-js
-  # This needs the major version only (eg: 16)
-  - ps: Install-Product node $env:nodejs_version $env:platform
+  # This needs the major version only (eg: 18)
+  # - ps: Install-Product node $env:nodejs_version $env:platform
   # 2. Setup the project
   - yarn install --frozen-lockfile
 

bin/pre-install.js

@@ -60,7 +60,7 @@ function checkNode(agents /*: AgentsVersion */) {
       'You can use a tool like `nvm` to install and manage installed node versions.'
     );
     console.error(
-      'You can look at https://github.com/creationix/nvm to install this tool.\n'
+      'You can look at https://github.com/nvm-sh/nvm to install this tool.\n'
     );
     console.error(
       'Once `nvm` is installed you can use the following commands to upgrade:\n' +

locales/es-CL/app.ftl

@@ -289,12 +289,12 @@ MarkerContextMenu--copy-as-json = Copiar como JSON
 # IPC marker.
 # Variables:
 #   $threadName (String) - Name of the thread that will be selected.
-MarkerContextMenu--select-the-receiver-thread = Seleccione el hilo receptor "<strong>{ $threadName }</strong>"
+MarkerContextMenu--select-the-receiver-thread = Selecciona el hilo receptor "<strong>{ $threadName }</strong>"
 # This string is used on the marker context menu item when right clicked on an
 # IPC marker.
 # Variables:
 #   $threadName (String) - Name of the thread that will be selected.
-MarkerContextMenu--select-the-sender-thread = Seleccione el hilo remitente "<strong>{ $threadName }</strong>"
+MarkerContextMenu--select-the-sender-thread = Selecciona el hilo remitente "<strong>{ $threadName }</strong>"
 
 ## MarkerSettings
 ## This is used in all panels related to markers.

locales/kab/app.ftl

@@ -42,6 +42,9 @@ AppViewRouter--route-not-found--home =
 ## This is used as a context menu for the Call Tree, Flame Graph and Stack Chart
 ## panels.
 
+# Variables:
+#   $fileName (String) - Name of the file to open.
+CallNodeContextMenu--show-file = Sken <strong>{ $fileName }</strong>
 CallNodeContextMenu--transform-merge-function = Smezdi tawuri
     .title =
         Asmezdi n twuri itekkes-itt seg umaɣnu, ad tmudd akud-ines i
@@ -436,8 +439,12 @@ TrackMemoryGraph--relative-memory-at-this-time = takatut tamassaɣt deg wakud-a
 ## TrackPower
 ## This is used to show the power used by the CPU and other chips in a computer,
 ## graphed over time.
-## It's not displayed by default in the UI, but an example can be found at
+## It's not always displayed in the UI, but an example can be found at
 ## https://share.firefox.dev/3a1fiT7.
+## For the strings in this group, the carbon dioxide equivalent is computed from
+## the used energy, using the carbon dioxide equivalent for electricity
+## consumption. The carbon dioxide equivalent represents the equivalent amount
+## of CO₂ to achieve the same level of global warming potential.
 
 
 ## TrackSearchField

package.json

@@ -49,11 +49,11 @@
   },
   "dependencies": {
     "@codemirror/lang-cpp": "^6.0.2",
-    "@codemirror/lang-javascript": "^6.1.3",
+    "@codemirror/lang-javascript": "^6.1.4",
     "@codemirror/lang-rust": "^6.0.1",
     "@codemirror/language": "^6.4.0",
     "@codemirror/state": "^6.2.0",
-    "@codemirror/view": "^6.7.3",
+    "@codemirror/view": "^6.8.1",
     "@firefox-devtools/react-contextmenu": "^5.1.0",
     "@fluent/bundle": "^0.17.1",
     "@fluent/langneg": "^0.6.2",
@@ -66,7 +66,7 @@
     "classnames": "^2.3.2",
     "common-tags": "^1.8.2",
     "copy-to-clipboard": "^3.3.3",
-    "core-js": "^3.27.2",
+    "core-js": "^3.28.0",
     "escape-string-regexp": "^4.0.0",
     "gecko-profiler-demangle": "^0.3.3",
     "idb": "^7.1.1",
@@ -79,7 +79,7 @@
     "query-string": "^8.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-intersection-observer": "^9.4.1",
+    "react-intersection-observer": "^9.4.2",
     "react-redux": "^8.0.5",
     "react-splitter-layout": "^4.0.0",
     "react-transition-group": "^4.4.5",
@@ -109,15 +109,15 @@
     "babel-loader": "^9.1.2",
     "babel-plugin-module-resolver": "^5.0.0",
     "browserslist": "^4.21.5",
-    "caniuse-lite": "^1.0.30001442",
+    "caniuse-lite": "^1.0.30001451",
     "circular-dependency-plugin": "^5.2.1",
     "codecov": "^3.8.3",
     "copy-webpack-plugin": "^11.0.0",
     "cross-env": "^7.0.3",
     "css-loader": "^6.7.3",
     "cssnano": "^5.1.14",
     "devtools-license-check": "^0.9.0",
-    "eslint": "^8.32.0",
+    "eslint": "^8.34.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-flowtype": "^8.0.3",
@@ -126,7 +126,7 @@
     "eslint-plugin-jest-dom": "^4.0.3",
     "eslint-plugin-jest-formatting": "^3.1.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.1",
+    "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-testing-library": "^5.10.0",
     "fake-indexeddb": "^4.0.1",
     "fetch-mock-jest": "^1.5.1",
@@ -141,21 +141,20 @@
     "jest-environment-jsdom": "^29.4.1",
     "jest-extended": "^3.2.3",
     "json-loader": "^0.5.7",
-    "local-web-server": "^5.2.1",
+    "local-web-server": "^5.3.0",
     "lockfile-lint": "^4.10.0",
     "mkdirp": "^2.1.3",
     "node-fetch": "^2.6.7",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.21",
     "postcss-loader": "^7.0.2",
-    "prettier": "^2.8.3",
+    "prettier": "^2.8.4",
     "raw-loader": "^4.0.2",
-    "rimraf": "^4.1.1",
+    "rimraf": "^4.1.2",
     "style-loader": "^3.3.1",
-    "stylelint": "^14.16.1",
+    "stylelint": "^15.1.0",
     "stylelint-config-idiomatic-order": "^9.0.0",
-    "stylelint-config-prettier": "^9.0.4",
-    "stylelint-config-standard": "^29.0.0",
+    "stylelint-config-standard": "^30.0.1",
     "stylelint-prettier": "^2.0.0",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.1",

src/actions/profile-view.js

@@ -75,6 +75,7 @@ import type {
   KeyboardModifiers,
   TableViewOptions,
   SelectionContext,
+  BottomBoxInfo,
 } from 'firefox-profiler/types';
 import {
   funcHasDirectRecursiveCall,
@@ -1948,11 +1949,35 @@ export function changeTableViewOptions(
   };
 }
 
-export function openSourceView(file: string, currentTab: TabSlug): Action {
+export function updateBottomBoxContentsAndMaybeOpen(
+  currentTab: TabSlug,
+  { libIndex, sourceFile, nativeSymbols }: BottomBoxInfo
+): Action {
+  // TODO: If the set has more than one element, pick the native symbol with
+  // the highest total sample count
+  const nativeSymbol = nativeSymbols.length !== 0 ? nativeSymbols[0] : null;
+
   return {
-    type: 'OPEN_SOURCE_VIEW',
-    file,
+    type: 'UPDATE_BOTTOM_BOX',
+    libIndex,
+    sourceFile,
+    nativeSymbol,
+    allNativeSymbolsForInitiatingCallNode: nativeSymbols,
     currentTab,
+    shouldOpenBottomBox: sourceFile !== null || nativeSymbol !== null,
+    shouldOpenAssemblyView: sourceFile === null && nativeSymbol !== null,
+  };
+}
+
+export function openAssemblyView(): Action {
+  return {
+    type: 'OPEN_ASSEMBLY_VIEW',
+  };
+}
+
+export function closeAssemblyView(): Action {
+  return {
+    type: 'CLOSE_ASSEMBLY_VIEW',
   };
 }
 

src/app-logic/l10n.js

@@ -20,6 +20,7 @@ import { SHORTDATE } from 'firefox-profiler/utils/l10n-ftl-functions';
 // Also note that the order specified here is the order they'll be displayed in the
 // language switcher, so it's important to keep the alphabetical order.
 export const AVAILABLE_LOCALES_TO_LOCALIZED_NAMES = {
+  be: 'Беларуская',
   de: 'Deutsch',
   el: 'Ελληνικά',
   'en-GB': 'English (GB)',

src/app-logic/url-handling.js

@@ -38,6 +38,7 @@ import type {
   ThreadIndex,
   TimelineType,
   SourceViewState,
+  AssemblyViewState,
 } from 'firefox-profiler/types';
 import {
   decodeUintArrayFromUrlComponent,
@@ -411,8 +412,8 @@ export function getQueryStringFromUrlState(urlState: UrlState): string {
           : urlState.profileSpecific.lastSelectedCallTreeSummaryStrategy;
       const { sourceView, isBottomBoxOpenPerPanel } = urlState.profileSpecific;
       query.sourceView =
-        sourceView.file !== null && isBottomBoxOpenPerPanel[selectedTab]
-          ? sourceView.file
+        sourceView.sourceFile !== null && isBottomBoxOpenPerPanel[selectedTab]
+          ? sourceView.sourceFile
           : undefined;
       break;
     }
@@ -575,13 +576,20 @@ export function stateFromLocation(
   const selectedTab =
     toValidTabSlug(pathParts[selectedTabPathPart]) || 'calltree';
   const sourceView: SourceViewState = {
-    activationGeneration: 0,
-    file: null,
+    scrollGeneration: 0,
+    libIndex: null,
+    sourceFile: null,
+  };
+  const assemblyView: AssemblyViewState = {
+    isOpen: false,
+    scrollGeneration: 0,
+    nativeSymbol: null,
+    allNativeSymbolsForInitiatingCallNode: [],
   };
   const isBottomBoxOpenPerPanel = {};
   tabSlugs.forEach((tabSlug) => (isBottomBoxOpenPerPanel[tabSlug] = false));
   if (query.sourceView) {
-    sourceView.file = query.sourceView;
+    sourceView.sourceFile = query.sourceView;
     isBottomBoxOpenPerPanel[selectedTab] = true;
   }
 
@@ -617,6 +625,7 @@ export function stateFromLocation(
       networkSearchString: query.networkSearch || '',
       transforms,
       sourceView,
+      assemblyView,
       isBottomBoxOpenPerPanel,
       timelineType: validateTimelineType(query.timelineType),
       full: {

src/components/app/BottomBox.js

@@ -9,7 +9,7 @@ import classNames from 'classnames';
 import { SourceView } from '../shared/SourceView';
 import {
   getSourceViewFile,
-  getSourceViewActivationGeneration,
+  getSourceViewScrollGeneration,
 } from 'firefox-profiler/selectors/url-state';
 import {
   selectedThreadSelectors,
@@ -34,7 +34,7 @@ type StateProps = {|
   +sourceViewSource: FileSourceStatus | void,
   +globalLineTimings: LineTimings,
   +selectedCallNodeLineTimings: LineTimings,
-  +sourceViewActivationGeneration: number,
+  +sourceViewScrollGeneration: number,
   +disableOverscan: boolean,
 |};
 
@@ -218,7 +218,7 @@ class BottomBoxImpl extends React.PureComponent<Props> {
       sourceViewSource,
       globalLineTimings,
       disableOverscan,
-      sourceViewActivationGeneration,
+      sourceViewScrollGeneration,
       selectedCallNodeLineTimings,
     } = this.props;
     const source =
@@ -253,7 +253,7 @@ class BottomBoxImpl extends React.PureComponent<Props> {
               timings={globalLineTimings}
               source={source}
               filePath={path}
-              scrollToHotSpotGeneration={sourceViewActivationGeneration}
+              scrollToHotSpotGeneration={sourceViewScrollGeneration}
               hotSpotTimings={selectedCallNodeLineTimings}
               ref={this._sourceView}
             />
@@ -275,7 +275,7 @@ export const BottomBox = explicitConnect<{||}, StateProps, DispatchProps>({
     globalLineTimings: selectedThreadSelectors.getSourceViewLineTimings(state),
     selectedCallNodeLineTimings:
       selectedNodeSelectors.getSourceViewLineTimings(state),
-    sourceViewActivationGeneration: getSourceViewActivationGeneration(state),
+    sourceViewScrollGeneration: getSourceViewScrollGeneration(state),
     disableOverscan: getPreviewSelection(state).isModifying,
   }),
   mapDispatchToProps: {

src/components/calltree/CallTree.js

@@ -30,8 +30,8 @@ import {
   changeExpandedCallNodes,
   addTransformToStack,
   handleCallNodeTransformShortcut,
-  openSourceView,
   changeTableViewOptions,
+  updateBottomBoxContentsAndMaybeOpen,
 } from 'firefox-profiler/actions/profile-view';
 import { assertExhaustiveCheck } from 'firefox-profiler/utils/flow';
 
@@ -82,7 +82,7 @@ type DispatchProps = {|
   +changeExpandedCallNodes: typeof changeExpandedCallNodes,
   +addTransformToStack: typeof addTransformToStack,
   +handleCallNodeTransformShortcut: typeof handleCallNodeTransformShortcut,
-  +openSourceView: typeof openSourceView,
+  +updateBottomBoxContentsAndMaybeOpen: typeof updateBottomBoxContentsAndMaybeOpen,
   +onTableViewOptionsChange: (TableViewOptions) => any,
 |};
 
@@ -289,12 +289,9 @@ class CallTreeImpl extends PureComponent<Props> {
   };
 
   _onEnterOrDoubleClick = (nodeId: IndexIntoCallNodeTable) => {
-    const { tree, openSourceView } = this.props;
-    const file = tree.getRawFileNameForCallNode(nodeId);
-    if (file === null) {
-      return;
-    }
-    openSourceView(file, 'calltree');
+    const { tree, updateBottomBoxContentsAndMaybeOpen } = this.props;
+    const bottomBoxInfo = tree.getBottomBoxInfoForCallNode(nodeId);
+    updateBottomBoxContentsAndMaybeOpen('calltree', bottomBoxInfo);
   };
 
   maybeProcureInterestingInitialSelection() {
@@ -431,7 +428,7 @@ export const CallTree = explicitConnect<{||}, StateProps, DispatchProps>({
     changeExpandedCallNodes,
     addTransformToStack,
     handleCallNodeTransformShortcut,
-    openSourceView,
+    updateBottomBoxContentsAndMaybeOpen,
     onTableViewOptionsChange: (options: TableViewOptions) =>
       changeTableViewOptions('calltree', options),
   },