Deploy January 15, 2025 (#5318)

Updates: [Nicolas Chevobbe] Adapt Keyboard shortcut dialog in High Contrast Mode. (#5245) [Nicolas Chevobbe] Fix sidebar-toggle in High Contrast Mode. (#5246) [Nicolas Chevobbe] Fix timeline selection overlay time / hover line in High Contrast Mode (#5247) [Zac Spitzer] fix broken link for processed profile format (#5267) [Greg Tatum] Update the memory allocation docs and add DHAT docs (#5270) [Markus Stange] Simplify some code related to thread CPU deltas (#5265) [Greg Tatum] Update dhat convertor to work better with valgrind (#5269) [Markus Stange] Rename UniqueStringArray to StringTable. (#5283) [Markus Stange] Use snapshot testing in the symbolicator CLI test. (#5284) [Markus Stange] Fix two confused upgraders which didn't expect to be run on the serialized format. (#5285) [Nicolas Chevobbe] Fix timelineSettingsHiddenTracks in High Contrast Mode. (#5250) [Julien Wajsberg] Fix some test and non-test warnings (#5294) [Nisarg Jhaveri] Support importing simpleperf trace files from Android Studio (#5212) [Sean Kim] Add HTTP response status code in the profiler network tab (#5297) [Markus Stange] Change StringTable API a bit. (#5286) [Markus Stange] Correctly declare imported simpleperf trace profiles to be of the current version. (#5312) [Markus Stange] Two small changes (#5313) [Nazım Can Altınova] Show sample tooltips on sample graph hover (#5298) Also thanks to our localizers: en-CA: chutten es-CL: ravmn es-CL: ravmn fr: Théo Chevalier ia: Melo46 ia: Melo46 sv-SE: Andreas Pettersson uk: Lobodzets zh-TW: Olvcpr423
firefox-devtools · Jan 15, 2025 · d879b1b · d879b1b
2 parents 4b6079e + 0845e7d
commit d879b1b
Show file tree

Hide file tree

Showing 73 changed files with 202,209 additions and 6,566 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,3 +1,4 @@
+src/profile-logic/import/proto
 src/types/libdef/npm
 docs-user
 coverage
diff --git a/.flowconfig b/.flowconfig
@@ -10,6 +10,7 @@ esproposal.optional_chaining=enable
 [ignore]
 <PROJECT_ROOT>/node_modules/.*
 <PROJECT_ROOT>/dist/.*
+src/profile-logic/import/proto/.*
 
 [libs]
 src/types/libdef

diff --git a/.prettierignore b/.prettierignore
@@ -1,3 +1,4 @@
+src/profile-logic/import/proto
 src/types/libdef/npm
 docs-user
 src/test/fixtures/upgrades

diff --git a/docs-developer/custom-importer.md b/docs-developer/custom-importer.md
@@ -1,6 +1,6 @@
 # Writing a Custom Profile Importer
 
-The Firefox Profiler supports a few [external profile formats](../src/profile-logic/import) that the profiler imports by converting them to either the [Gecko profile format](./gecko-profile-format.md) or the [processed profile format](./process-profile-format). The good news is that once an importer targets a specific profile version, the Firefox Profiler will always upgrade that profile to the currently supported format.
+The Firefox Profiler supports a few [external profile formats](../src/profile-logic/import) that the profiler imports by converting them to either the [Gecko profile format](./gecko-profile-format.md) or the [processed profile format](./processed-profile-format.md). The good news is that once an importer targets a specific profile version, the Firefox Profiler will always upgrade that profile to the currently supported format.
 
 ## Useful Docs
 

diff --git a/docs-user/memory-allocations.md b/docs-user/memory-allocations.md
@@ -1,10 +1,11 @@
 # Memory Allocations
 
-The Firefox Profiler supports three different types of memory profiling
+The Firefox Profiler supports different types of memory profiling
 
 1. Memory Track
-2. Native Allocations (experimental)
-3. JavaScript Allocations (experimental)
+2. Native Allocations
+3. JavaScript Allocations
+4. Valgrind DHAT Profiles
 
 ## Memory Track
 
@@ -14,9 +15,9 @@ The memory track graphs overall allocation and deallocation numbers over time fo
 
 The graph visualization tracks the relative memory usage over the committed range of time. It's important to note that this is not absolute memory usage. The graph and numbers will change when committing a range selection.
 
-## Native Memory Allocations (experimental)
+## Native Memory Allocations
 
-The profiler has experimental support for analyzing allocations in native code (C++ and Rust) via stack sampling. These features require Nightly. To follow along you can open this [example showing DevTools opening and closing](https://perfht.ml/2LKZsfY)
+The profiler has support for analyzing allocations in native code (C++ and Rust) via stack sampling. These features require Nightly. To follow along you can open this [example showing DevTools opening and closing](https://perfht.ml/2LKZsfY)
 
 The Native Allocations feature works by collecting the stack and size of memory allocations from native (C++ or Rust) code. It does not collect every allocation, but only samples a subset of them. The sampling is biased towards larger allocations and larger frees. Larger allocations are more likely show up in the profile, and will most likely be more representative of the actual memory usage. Keep in mind that since these allocations are only sampled, not all allocations will be recorded. This means that memory track (the orange graph at the top) will most likely report different numbers for memory usage.
 
@@ -63,8 +64,29 @@ This option shows all of the deallocations that were sampled. Keep in mind that
 
 Some components inside of Gecko may implement their own memory management systems, and bypass the usage of system-level functions like `malloc` that are instrumented with this feature. For instance, some code could create a large buffer, and manage its own memory inside of that buffer. This feature would know about the allocation of the larger chunk of memory, but not how smaller allocations could be created inside of that buffer of memory. If this happens, information could be missing or misleading.
 
-## JavaScript Allocations (experimental)
+## JavaScript Allocations
 
 There is also a JavaScript-only allocation feature. This may be less useful as it only samples the creation of JS objects, and does not track garbage collection or frees. In fact, the Native Allocations feature is a superset of the JavaScript allocations feature, and includes the JavaScript stack information. Enable this through the `Features` section of the popup.
 
 ![A screenshot of the call tree showing JS.](images/allocation-js.png)
+
+## Valgrind's "Dynamic Heap Analysis Tool" DHAT
+
+When working outside of Firefox, you can use [Valgrind's DHAT tool](https://valgrind.org/docs/manual/dh-manual.html). DHAT has its own viewer, but it lacks some of the visualization and filtering capabilities of the Firefox Profiler. The converted profile will lack some of the finer details like read, write, and access information, but it does contain the amount of bytes allocated. On a Linux system (or even a Linux docker image), you can install it via:
+
+```sh
+sudo apt-get install valgrind
+```
+
+Then run your command:
+
+```
+valgrind --tool=dhat ./my-program
+```
+
+A dhat profile will be output in the same directory as your program: `dhat.out.<pid>`. Drag that file into the profiler to view it. There will be 4 tracks containing the memory information. Only the call tree and flame graph are supported.
+
+ * **Bytes at End** - Allocations that were never freed when the program ended.
+ * **Bytes at Global Max** - Bytes allocated when the global heap size peaked.
+ * **Maximum Bytes** - The maximum bytes allocated at that call site at one time.
+ * **Total Bytes** - The total bytes allocated over the course of the program.
diff --git a/locales/en-CA/app.ftl b/locales/en-CA/app.ftl
@@ -343,6 +343,15 @@ Home--load-files-from-other-tools2 =
     any file using the <dhat>dhat format</dhat> or <traceevent>Google’s Trace Event
     Format</traceevent>. <write>Learn how to write your
     own importer</write>.
+Home--install-chrome-extension = Install the Chrome extension
+Home--chrome-extension-instructions =
+    Use the <a>{ -profiler-brand-name } extension for Chrome</a>
+    to capture performance profiles in Chrome and analyze them in the
+    { -profiler-brand-name }. Install the extension from the Chrome Web Store.
+Home--chrome-extension-recording-instructions =
+    Once installed, use the extension’s
+    toolbar icon or the shortcuts to start and stop profiling. You can also
+    export profiles and load them here for detailed analysis.
 
 ## IdleSearchField
 ## The component that is used for all the search inputs in the application.

diff --git a/locales/es-CL/app.ftl b/locales/es-CL/app.ftl
@@ -277,12 +277,18 @@ Home--load-files-from-other-tools2 =
     panel de rendimiento de Chrome, <androidstudio>Android Studio</androidstudio>, o
     cualquier archivo usando el <dhat>formato dhat</dhat> o el <traceevent>formato Trace Event de Google</traceevent>. <write>Aprende a escribir tu
     propio importador</write>.
+Home--install-chrome-extension = Instalar la extensión de Chrome
+Home--chrome-extension-instructions =
+    Utiliza la <a>extensión de { -profiler-brand-name } para Chrome</a>
+    para capturar perfiles de rendimiento en Chrome y analizarlos en
+    { -profiler-brand-name }. Instala la extensión desde la Chrome Web Store.
+Home--chrome-extension-recording-instructions = Una vez instalada, utiliza el icono de la barra de herramientas de la extensión o los accesos directos para iniciar y detener la creación de perfiles. También puedes exportar perfiles y cargarlos aquí para realizar un análisis detallado.
 
 ## IdleSearchField
 ## The component that is used for all the search inputs in the application.
 
 IdleSearchField--search-input =
-    .placeholder = Ingrese términos de filtro
+    .placeholder = Ingresa los términos de filtro
 
 ## JsTracerSettings
 ## JSTracer is an experimental feature and it's currently disabled. See Bug 1565788.
@@ -877,7 +883,7 @@ TrackBandwidthGraph--total-bandwidth-in-range = { $value } ({ $carbonValue } g C
 ## The component that is used for the search input in the track context menu.
 
 TrackSearchField--search-input =
-    .placeholder = Ingrese términos de filtro
+    .placeholder = Ingresa los términos de filtro
     .title = Mostrar solo las pistas que coinciden con cierto texto
 
 ## TransformNavigator

diff --git a/locales/fr/app.ftl b/locales/fr/app.ftl
@@ -271,6 +271,12 @@ Home--load-files-from-other-tools2 =
     Panneau de performances Chrome, <androidstudio>Android Studio</androidstudio>, ou
     tout fichier utilisant les formats <dhat>dhat</dhat> ou <traceevent>Trace Event de Google</traceevent>. <write>Apprenez à écrire votre
     propre importateur</write>.
+Home--install-chrome-extension = Installer l’extension Chrome
+Home--chrome-extension-instructions =
+    Utilisez l’extension <a>{ -profiler-brand-name } pour Chrome</a>
+    pour capturer des profils de performance dans Chrome et les analyser dans le
+    { -profiler-brand-name }. Installez l’extension depuis le Chrome Web Store.
+Home--chrome-extension-recording-instructions = Une fois l’extension installée, utilisez l’icône de la barre d’outils ou les raccourcis pour démarrer et arrêter le profilage. Vous pouvez également exporter des profils et les charger ici pour une analyse détaillée.
 
 ## IdleSearchField
 ## The component that is used for all the search inputs in the application.

diff --git a/locales/ia/app.ftl b/locales/ia/app.ftl
@@ -334,6 +334,9 @@ Home--load-files-from-other-tools2 =
     ulle file que usa le <dhat>formato dhat</dhat> o <traceevent>le formato Trace Event
     de Google</traceevent>. <write>Apprende a scriber tu 
     proprie importator</write>.
+Home--install-chrome-extension = Installar le extension de Chrome
+Home--chrome-extension-instructions = Usa le <a>extension  de { -profiler-brand-name } pro Chrome</a> pro capturar profilos  de prestation in Chrome e analysar los in le { -profiler-brand-name }.
+Home--chrome-extension-recording-instructions = Installar le extension ab le Boteca web de Chrome. Un vice installate, usar le icone  barra del instrumentos del extensiones o le vias breve pro cessar de profilar. Tu alsi pote exportar profilos e cargar los ci pro analyse detaliate.
 
 ## IdleSearchField
 ## The component that is used for all the search inputs in the application.

diff --git a/locales/sv-SE/app.ftl b/locales/sv-SE/app.ftl
@@ -338,6 +338,15 @@ Home--load-files-from-other-tools2 =
     vilken fil som helst som använder <dhat>dhat-formatet</dhat> eller <traceevent>Googles spårningshändelse
     Format</traceevent>. <write>Lär dig hur du skriver din
     egen importör</write>.
+Home--install-chrome-extension = Installera tillägget för Chrome
+Home--chrome-extension-instructions =
+    Använd tillägget <a>{ -profiler-brand-name } för Chrome</a>
+    för att fånga prestandaprofiler i Chrome och analysera dem i
+    { -profiler-brand-name }. Installera tillägget från Chrome Web Store.
+Home--chrome-extension-recording-instructions =
+    När det är installerat använder du tilläggets verktygsfältsikon
+    eller genvägarna för att starta och stoppa profilering.
+    Du kan också exportera profiler och ladda dem här för detaljerad analys.
 
 ## IdleSearchField
 ## The component that is used for all the search inputs in the application.

diff --git a/locales/uk/app.ftl b/locales/uk/app.ftl
@@ -338,6 +338,15 @@ Home--load-files-from-other-tools2 =
     Панель швидкодії Chrome, <androidstudio>Android Studio</androidstudio>, або
     з будь-якого файлу в форматі <dhat>dhat</dhat> чи <traceevent>Google’s Trace Event</traceevent>.
     <write>Навчіться записувати власний імпортер</write>.
+Home--install-chrome-extension = Встановіть розширення Chrome
+Home--chrome-extension-instructions =
+    Використовуйте розширення <a>{ -profiler-brand-name } для Chrome</a>
+    для фіксації профілів продуктивності в Chrome та їх аналізу в
+    { -profiler-brand-name }. Установіть розширення з вебмагазину Chrome.
+Home--chrome-extension-recording-instructions =
+    Після встановлення використовуйте піктограму розширення на панелі інструментів
+    або ярлики для запуску та зупинки профілювання. Ви також можете
+    експортувати профілі та завантажити їх тут для детального аналізу.
 
 ## IdleSearchField
 ## The component that is used for all the search inputs in the application.

diff --git a/locales/zh-TW/app.ftl b/locales/zh-TW/app.ftl
@@ -262,7 +262,7 @@ Home--load-files-from-other-tools2 =
     { -profiler-brand-name } 也可以匯入其他效能檢測器，例如 <perf>Linux perf</perf>、<simpleperf>Android SimplePerf</simpleperf>、Chrome 效能面板、<androidstudio>Android Studio</androidstudio> 所產生的效能檢測檔、任何使用 <dhat>dhat 格式</dhat> 或 <traceevent>Google 的 Trace Event
     格式</traceevent>儲存的效能檢測檔。<write>點擊此處了解如何撰寫您自己的匯入程式</write>。
 Home--install-chrome-extension = 安裝 Chrome 擴充套件
-Home--chrome-extension-instructions = 可使用 <a>Chrome 的 { -profiler-brand-name } 擴充套件</a>，在 Chrome 當中捕捉效能紀錄檔，再使用 { -profiler-brand-name } 進行分析。請到 Chrome 線上應用程式安裝此套件。
+Home--chrome-extension-instructions = 可使用 <a>Chrome 的 { -profiler-brand-name } 擴充套件</a>，在 Chrome 當中捕捉效能紀錄檔，再使用 { -profiler-brand-name } 進行分析。請到 Chrome 線上應用程式商店安裝此套件。
 Home--chrome-extension-recording-instructions = 安裝完成後，即可使用擴充套件在工具列新增的圖示或快速鍵開始或停止捕捉效能紀錄。您也可以匯出檢測檔，匯入此處，進行更詳細的分析。
 
 ## IdleSearchField

diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "flow-stop": "flow stop",
     "flow-coverage": "flow-coverage-report -i 'src/**/*.js' -t html -t text",
     "flow-generate-libdefs": "flow-typed install --libdefDir src/types/libdef",
+    "protoc": "npx -p protobufjs-cli pbjs -t static-module -w commonjs -o ./src/profile-logic/import/proto/simpleperf_report.js ./src/profile-logic/import/proto/simpleperf_report.proto",
     "license-check": "devtools-license-check",
     "preinstall": "node bin/pre-install.js",
     "publish": "rimraf public_html && cp -r dist public_html",
@@ -58,37 +59,39 @@
     "@codemirror/lang-cpp": "^6.0.2",
     "@codemirror/lang-javascript": "^6.2.2",
     "@codemirror/lang-rust": "^6.0.1",
-    "@codemirror/language": "^6.10.3",
-    "@codemirror/state": "^6.4.1",
-    "@codemirror/view": "^6.35.0",
-    "@firefox-devtools/react-contextmenu": "^5.1.1",
+    "@codemirror/language": "^6.10.8",
+    "@codemirror/state": "^6.5.0",
+    "@codemirror/view": "^6.36.1",
+    "@firefox-devtools/react-contextmenu": "^5.2.0",
     "@fluent/bundle": "^0.18.0",
     "@fluent/langneg": "^0.7.0",
     "@fluent/react": "^0.15.2",
     "@lezer/highlight": "^1.2.1",
-    "@tgwf/co2": "^0.16.2",
+    "@tgwf/co2": "^0.16.4",
     "array-move": "^3.0.1",
     "array-range": "^1.0.1",
     "clamp": "^1.0.1",
     "classnames": "^2.5.1",
     "common-tags": "^1.8.2",
     "copy-to-clipboard": "^3.3.3",
-    "core-js": "^3.39.0",
+    "core-js": "^3.40.0",
     "escape-string-regexp": "^4.0.0",
     "gecko-profiler-demangle": "^0.3.3",
     "idb": "^8.0.0",
     "jszip": "^3.10.1",
+    "long": "^5.2.3",
     "memoize-immutable": "^3.0.0",
     "memoize-one": "^6.0.0",
     "minimist": "^1.2.8",
     "mixedtuplemap": "^1.0.0",
     "namedtuplemap": "^1.0.0",
     "photon-colors": "^3.3.2",
+    "protobufjs": "^7.4.0",
     "query-string": "^9.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-intersection-observer": "^9.13.1",
-    "react-redux": "^9.1.2",
+    "react-intersection-observer": "^9.14.1",
+    "react-redux": "^9.2.0",
     "react-splitter-layout": "^4.0.0",
     "react-transition-group": "^4.4.5",
     "redux": "^5.0.1",
@@ -100,24 +103,24 @@
     "workbox-window": "^7.3.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.25.9",
+    "@babel/cli": "^7.26.4",
     "@babel/core": "^7.26.0",
     "@babel/eslint-parser": "^7.25.9",
     "@babel/eslint-plugin": "^7.25.9",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-flow": "^7.25.9",
-    "@babel/preset-react": "^7.25.9",
+    "@babel/preset-react": "^7.26.3",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.0.1",
+    "@testing-library/react": "^16.1.0",
     "alex": "^11.0.1",
     "autoprefixer": "^10.4.20",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.2.1",
     "babel-plugin-module-resolver": "^5.0.2",
-    "browserslist": "^4.24.2",
-    "caniuse-lite": "^1.0.30001680",
+    "browserslist": "^4.24.3",
+    "caniuse-lite": "^1.0.30001690",
     "circular-dependency-plugin": "^5.2.1",
     "codecov": "^3.8.3",
     "copy-webpack-plugin": "^12.0.2",
@@ -130,11 +133,11 @@
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-jest": "^28.9.0",
+    "eslint-plugin-jest": "^28.10.0",
     "eslint-plugin-jest-dom": "^5.5.0",
     "eslint-plugin-jest-formatting": "^3.1.0",
-    "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-testing-library": "^6.5.0",
+    "eslint-plugin-react": "^7.37.3",
+    "eslint-plugin-testing-library": "^7.1.1",
     "espree": "^10.3.0",
     "fake-indexeddb": "^6.0.0",
     "fetch-mock-jest": "^1.5.1",
@@ -153,20 +156,20 @@
     "lockfile-lint": "^4.14.0",
     "mkdirp": "^3.0.1",
     "node-fetch": "^2.6.11",
-    "npm-run-all2": "^7.0.1",
+    "npm-run-all2": "^7.0.2",
     "open": "^10.1.0",
     "postcss": "^8.4.49",
     "postcss-loader": "^8.1.1",
-    "prettier": "^3.4.1",
+    "prettier": "^3.4.2",
     "raw-loader": "^4.0.2",
     "rimraf": "^5.0.10",
     "style-loader": "^4.0.0",
-    "stylelint": "^16.10.0",
+    "stylelint": "^16.12.0",
     "stylelint-config-idiomatic-order": "^10.0.0",
     "stylelint-config-standard": "^36.0.1",
-    "webpack": "^5.96.1",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.1.0",
+    "webpack": "^5.97.1",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.0",
     "workbox-webpack-plugin": "^7.3.0",
     "yargs": "^17.7.2"
   },

diff --git a/src/components/app/KeyboardShortcut.css b/src/components/app/KeyboardShortcut.css
@@ -126,3 +126,27 @@
     animation: none;
   }
 }
+
+@media (forced-colors: active) {
+  .appKeyboardShortcutsBox {
+    border: 1px solid CanvasText;
+  }
+
+  .appKeyboardShortcutsHeaderClose {
+    border: 1px solid ButtonText;
+    background-color: ButtonFace;
+    color: ButtonText;
+  }
+
+  .appKeyboardShortcutsHeaderClose:hover {
+    border-color: SelectedItem;
+    background-color: SelectedItemText;
+    color: SelectedItem;
+  }
+
+  .appKeyboardShortcutsShortcut {
+    background: SelectedItemText;
+    color: SelectedItem;
+    outline: 1px solid CanvasText;
+  }
+}
diff --git a/src/components/app/MenuButtons/MetaInfo.js b/src/components/app/MenuButtons/MetaInfo.js
@@ -33,7 +33,7 @@ import type {
   ExtraProfileInfoSection,
 } from 'firefox-profiler/types';
 import type { ConnectedProps } from 'firefox-profiler/utils/connect';
-import { UniqueStringArray } from 'firefox-profiler/utils/unique-string-array';
+import { StringTable } from 'firefox-profiler/utils/string-table';
 
 import './MetaInfo.css';
 
@@ -153,7 +153,7 @@ class MetaInfoPanelImpl extends React.PureComponent<Props, State> {
                     'moreInfo',
                     format,
                     value,
-                    new UniqueStringArray()
+                    StringTable.withBackingArray([])
                   )}
                 </div>
               </div>