profile
viewpoint
Firefox DevTools firefox-devtools https://firefox-dev.tools Firefox Developer Tools

firefox-devtools/debugger 4538

The faster and smarter Debugger for Firefox DevTools 🔥🦊🛠

firefox-devtools/profiler 447

Firefox Profiler — Web app for Firefox performance analysis

firefox-devtools/vscode-firefox-debug 202

VS Code Debug Adapter for Firefox

firefox-devtools/devtools-core 125

:rocket: Packages for Firefox DevTools

firefox-devtools/ux 78

Firefox DevTools UX Community

firefox-devtools/har-export-trigger 29

Trigger HAR export any time directly from within a page.

firefox-devtools/debugger-examples 26

Collection of good debugging examples

firefox-devtools/devtools-bug-finder 24

Find easy and mentored devtools bugs

firefox-devtools/Gecko-Profiler-Addon 19

(deprecated) Addon to control the Gecko Built-in Profiler

firefox-devtools/rust-cdp 19

🔨 Chrome DevTools Protocol toolkit for Rust

push eventfirefox-devtools/docs

travis

commit sha 4261606b61ec21740ad1c0f474aa0824e6c219df

Built from commit 05bf08c8bce2f9c0d263a977554635cff2620eb2

view details

push time in 9 hours

issue commentfirefox-devtools/profiler

Measure arbitrary time in the marker chart

Hey @Manish-Giri , yes, thanks !

padenot

comment created time in 15 hours

pull request commentfirefox-devtools/profiler

Persist published profile information to a local store

Codecov Report

Merging #2472 into main will increase coverage by 0.00%. The diff coverage is 80.00%.

Impacted file tree graph

@@           Coverage Diff           @@
##             main    #2472   +/-   ##
=======================================
  Coverage   86.41%   86.41%           
=======================================
  Files         218      219    +1     
  Lines       17377    17437   +60     
  Branches     4512     4527   +15     
=======================================
+ Hits        15016    15068   +52     
- Misses       2162     2170    +8     
  Partials      199      199           
Impacted Files Coverage Δ
src/components/shared/WindowTitle.js 96.15% <ø> (ø)
src/app-logic/published-profiles-store.js 66.66% <66.66%> (ø)
src/actions/publish.js 89.65% <85.71%> (-1.39%) :arrow_down:
src/app-logic/url-handling.js 81.61% <86.66%> (+0.52%) :arrow_up:
src/components/app/MenuButtons/MetaInfo.js 85.71% <100.00%> (ø)
src/profile-logic/profile-metainfo.js 88.57% <100.00%> (ø)
src/selectors/url-state.js 98.09% <100.00%> (+4.76%) :arrow_up:

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 5c9cfc7...b73bc8d. Read the comment docs.

julienw

comment created time in 17 hours

push eventfirefox-devtools/profiler

Julien Wajsberg

commit sha efdca473f8bcfcc6ac6e0d52b4c2d5a92a39bfa0

Extract the meta info formatting to a separate file

view details

Julien Wajsberg

commit sha 661b6f8710ad5894ac4345f517ebdbf810644cdf

Update existing tests

view details

Julien Wajsberg

commit sha b0251a7d66b5915b8752989ba5dda7e3a88b7c94

Add a new test

view details

Julien Wajsberg

commit sha 48176e870a16c0ac1ab60036cde927c0ca2a87e9

Fix review comments

view details

Julien Wajsberg

commit sha 5c9cfc73e4721afe9dad494cf353ed617c06e2ec

Extract the meta info formatting to a separate file (Merge PR #2617)

view details

push time in a day

PR merged firefox-devtools/profiler

Extract the meta info formatting to a separate file

I'll be using these new functions when displaying the information about saved profiles.

Deploy previews:

Look at both the profile info summary, and also inside the summary itself.

+242 -143

2 comments

8 changed files

julienw

pr closed time in a day

pull request commentfirefox-devtools/profiler

Extract the meta info formatting to a separate file

Thanks for the review!

julienw

comment created time in a day

Pull request review commentfirefox-devtools/profiler

Extract the meta info formatting to a separate file

 function _formatDate(timestamp: number): string {   return timestampDate; } -function _formatVersionNumber(version?: string): string | null {-  const regex = /[0-9]+.+[0-9]/gi;--  if (version) {-    const match = version.match(regex);-    if (match) {-      return match.toString();-    }-  }-  return null;-}--function _formatLabel(meta: ProfileMeta): string {-  const product = meta.product || '';-  const version = _formatVersionNumber(meta.misc) || '';-  let os;-  // To displaying Android Version instead of Linux for Android developers.-  if (meta.platform !== undefined && meta.platform.match(/android/i)) {-    os = meta.platform;-  } else {-    os = meta.oscpu || '';-  }-  return product + (version ? ` (${version})` : '') + (os ? ` ${os}` : '');+function _formatMetainfoString(meta: ProfileMeta) {

whoops, I completely missed that comment 😅

julienw

comment created time in a day

Pull request review commentfirefox-devtools/profiler

Extract the meta info formatting to a separate file

+/* This Source Code Form is subject to the terms of the Mozilla Public+ * License, v. 2.0. If a copy of the MPL was not distributed with this+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */++// @flow++// This extracts the version number out of the 'misc' value we have in the+// profile.+// The 'misc' value looks like `rv:<version>`, we want to return the version.+// The function uses a permissive regexp to support more use cases (like having+// the version directly without the prefix `rv:`). Also we remove the `.0` at+// the end of the version if present because this gives no added value.+export function formatVersionNumber(version?: string): string {+  if (version) {+    const regex = /[\d.]+$/; // Matches any group of number and dots at the end of the string.+    const match = regex.exec(version);+    if (match) {+      return match[0];+    }+  }+  return '';+}++// This removes the ending `.0` in version strings, if present.+function removeUselessEndZeroInVersion(version: string): string {+  if (version.endsWith('.0')) {+    // Remove useless `.0` at the end of Firefox versions.+    return version.slice(0, -2);+  }+  return version;+}++// This returns a string to identify the product and its version out of the meta+// information, eg `Firefox 77` of `Firefox Preview 78`.+export function formatProductAndVersion(meta: {+  +product: string,+  +misc?: string,+}): string {+  const product = meta.product || '';+  const version = removeUselessEndZeroInVersion(formatVersionNumber(meta.misc));++  return product + (version ? ' ' + version : '');+}++export function formatPlatform(meta: {

Thanks for the suggestion, I added this:

// This function will extract a nice string out of the meta information. This is
// very inconsistent depending on the OS so we have very different code for each
// of them. We may need to tweak this further when we'll deal with importers
// too.
julienw

comment created time in a day

Pull request review commentfirefox-devtools/profiler

Extract the meta info formatting to a separate file

 class WindowTitle extends PureComponent<Props> {     let title = '';      if (profileName) {-      title = title.concat(profileName, ' - ');+      title += profileName + SEPARATOR;     }-    title = title.concat(_formatVersion(meta), ' - ');-    if (meta.oscpu) {-      title = title.concat(_formatPlatform(meta), ' - ');+    title += formatProductAndVersion(meta) + SEPARATOR;+    const os = formatPlatform(meta);+    if (os) {+      title += os + SEPARATOR;

Thanks for the suggestion! Very soon formatMetainfoString will be removed to add icons, but in the window title this will stay the same because there's no icon there. Also I find the code easier to follow here, as we see clearly what will be added to the window title :) So I'll better keep this this way.

julienw

comment created time in a day

Pull request review commentfirefox-devtools/profiler

Extract the meta info formatting to a separate file

+/* This Source Code Form is subject to the terms of the Mozilla Public+ * License, v. 2.0. If a copy of the MPL was not distributed with this+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */++// @flow++// This extracts the version number out of the 'misc' value we have in the+// profile.+// The 'misc' value looks like `rv:<version>`, we want to return the version.+// The function uses a permissive regexp to support more use cases (like having+// the version directly without the prefix `rv:`). Also we remove the `.0` at+// the end of the version if present because this gives no added value.+export function formatVersionNumber(version?: string): string {+  if (version) {+    const regex = /[\d.]+$/; // Matches any group of number and dots at the end of the string.+    const match = regex.exec(version);+    if (match) {+      return match[0];+    }+  }+  return '';+}++// This removes the ending `.0` in version strings, if present.+function removeUselessEndZeroInVersion(version: string): string {+  if (version.endsWith('.0')) {+    // Remove useless `.0` at the end of Firefox versions.+    return version.slice(0, -2);+  }+  return version;+}++// This returns a string to identify the product and its version out of the meta+// information, eg `Firefox 77` of `Firefox Preview 78`.+export function formatProductAndVersion(meta: {+  +product: string,+  +misc?: string,+}): string {+  const product = meta.product || '';+  const version = removeUselessEndZeroInVersion(formatVersionNumber(meta.misc));++  return product + (version ? ' ' + version : '');

I doubled checked with a Chrome and a perf importer, the behavior is unchanged with these.

I think we may have empty values in old profiles.

julienw

comment created time in a day

Pull request review commentfirefox-devtools/profiler

Extract the meta info formatting to a separate file

+/* This Source Code Form is subject to the terms of the Mozilla Public+ * License, v. 2.0. If a copy of the MPL was not distributed with this+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */++// @flow+import {+  formatProductAndVersion,+  formatPlatform,+} from 'firefox-profiler/profile-logic/profile-metainfo';++import { getEmptyProfile } from '../../profile-logic/data-structures';++/* This Source Code Form is subject to the terms of the Mozilla Public+ * License, v. 2.0. If a copy of the MPL was not distributed with this+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

🙃

julienw

comment created time in a day

Pull request review commentfirefox-devtools/profiler

Extract the meta info formatting to a separate file

 function _formatDate(timestamp: number): string {   return timestampDate; } -function _formatVersionNumber(version?: string): string | null {-  const regex = /[0-9]+.+[0-9]/gi;--  if (version) {-    const match = version.match(regex);-    if (match) {-      return match.toString();-    }-  }-  return null;-}--function _formatLabel(meta: ProfileMeta): string {-  const product = meta.product || '';-  const version = _formatVersionNumber(meta.misc) || '';-  let os;-  // To displaying Android Version instead of Linux for Android developers.-  if (meta.platform !== undefined && meta.platform.match(/android/i)) {-    os = meta.platform;-  } else {-    os = meta.oscpu || '';-  }-  return product + (version ? ` (${version})` : '') + (os ? ` ${os}` : '');+function _formatMetainfoString(meta: ProfileMeta) {

I wrote why I kept it here in this comment below: https://github.com/firefox-devtools/profiler/pull/2617#discussion_r448488179

julienw

comment created time in a day

Pull request review commentfirefox-devtools/profiler

[wip] Add Gecko's phased markers to the front-end

 import type { Milliseconds, Nanoseconds } from './units'; export type IndexIntoGeckoFrameTable = number; export type IndexIntoGeckoStackTable = number; +// Taken from the C+++//+// enum class MarkerPhase : int {+//   Instant = 0,+//   Interval = 1,+//   IntervalStart = 2,+//   IntervalEnd = 3,+// };+export type MarkerPhase = 0 | 1 | 2 | 3;

Maybe this was already discussed when working on the cpp side.

I wonder if we don't combine 2 different things in one value here:

  1. what type of marker this is: instant marker, interval marker, phased marker?
  2. if this is a phased marker, which phase is this?

So maybe this should be split in 2 different values.

This would very easily allow other cases, like tri-phased markers: suggested to me by @padenot, there could be:

  • marker 1: when a task is queued
  • marker 2: when the task starts running
  • marker 3: when the task ends

This could work for network markers too (where several "phased markers" would make together for 1 request):

  • one phased marker for connection (eg: start dns, start connection, start TLS)
  • one for the request (starts request, ends request, starts response, ends response -- maybe this should be 2 individual markers though for that one :) )

A phased marker would work for a sequence of related events.

gregtatum

comment created time in a day

Pull request review commentfirefox-devtools/profiler

Extract the meta info formatting to a separate file

+/* This Source Code Form is subject to the terms of the Mozilla Public+ * License, v. 2.0. If a copy of the MPL was not distributed with this+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */++// @flow++// This extracts the version number out of the 'misc' value we have in the+// profile.+// The 'misc' value looks like `rv:<version>`, we want to return the version.+// The function uses a permissive regexp to support more use cases (like having+// the version directly without the prefix `rv:`). Also we remove the `.0` at+// the end of the version if present because this gives no added value.+export function formatVersionNumber(version?: string): string {+  if (version) {+    const regex = /[\d.]+$/; // Matches any group of number and dots at the end of the string.+    const match = regex.exec(version);+    if (match) {+      return match[0];+    }+  }+  return '';+}++// This removes the ending `.0` in version strings, if present.+function removeUselessEndZeroInVersion(version: string): string {+  if (version.endsWith('.0')) {+    // Remove useless `.0` at the end of Firefox versions.+    return version.slice(0, -2);+  }+  return version;+}++// This returns a string to identify the product and its version out of the meta+// information, eg `Firefox 77` of `Firefox Preview 78`.+export function formatProductAndVersion(meta: {+  +product: string,+  +misc?: string,+}): string {+  const product = meta.product || '';+  const version = removeUselessEndZeroInVersion(formatVersionNumber(meta.misc));++  return product + (version ? ' ' + version : '');+}++export function formatPlatform(meta: {+  +platform?: string,+  +oscpu?: string,+  +toolkit?: string,+}): string {+  switch (meta.toolkit) {+    case 'android':+      // Typically `platform` contains 'Android <version>'.+      // `oscpu` contains the same thing as a normal Linux so this isn't+      // interesting in this case.+      return meta.platform+        ? removeUselessEndZeroInVersion(meta.platform)+        : 'Android';+    case 'cocoa':+      // Typically `oscpu` contains 'Intel Mac OS X <version>'.+      // We're doing the replacement in 2 steps just in case we get `macOS`+      // already in the string in the future.+      return meta.oscpu+        ? meta.oscpu.replace(/^Intel /, '').replace(/^Mac OS X/, 'macOS')

No more Mac OS X 🎉 I hope they also fix this on the platform side too. Because new macOS Big Sur is technically not a Mac OS X anymore :) Its version is 11 instead of 10.XY.

julienw

comment created time in a day

Pull request review commentfirefox-devtools/profiler

Extract the meta info formatting to a separate file

+/* This Source Code Form is subject to the terms of the Mozilla Public+ * License, v. 2.0. If a copy of the MPL was not distributed with this+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */++// @flow+import {+  formatProductAndVersion,+  formatPlatform,+} from 'firefox-profiler/profile-logic/profile-metainfo';++import { getEmptyProfile } from '../../profile-logic/data-structures';++/* This Source Code Form is subject to the terms of the Mozilla Public+ * License, v. 2.0. If a copy of the MPL was not distributed with this+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

Second license? :) Also second // @flow below too.

julienw

comment created time in a day

Pull request review commentfirefox-devtools/profiler

Extract the meta info formatting to a separate file

 class WindowTitle extends PureComponent<Props> {     let title = '';      if (profileName) {-      title = title.concat(profileName, ' - ');+      title += profileName + SEPARATOR;     }-    title = title.concat(_formatVersion(meta), ' - ');-    if (meta.oscpu) {-      title = title.concat(_formatPlatform(meta), ' - ');+    title += formatProductAndVersion(meta) + SEPARATOR;+    const os = formatPlatform(meta);+    if (os) {+      title += os + SEPARATOR;

I feel like we can use _formatMetainfoString instead of these, can't we? (when we move it to the file in profile-logic?) It's not a huge code duplication, so I'm fine either way. But it would at least help us control both of them together.

julienw

comment created time in a day

Pull request review commentfirefox-devtools/profiler

Extract the meta info formatting to a separate file

+/* This Source Code Form is subject to the terms of the Mozilla Public+ * License, v. 2.0. If a copy of the MPL was not distributed with this+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */++// @flow+import {+  formatProductAndVersion,+  formatPlatform,+} from 'firefox-profiler/profile-logic/profile-metainfo';++import { getEmptyProfile } from '../../profile-logic/data-structures';++/* This Source Code Form is subject to the terms of the Mozilla Public+ * License, v. 2.0. If a copy of the MPL was not distributed with this+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */++// @flow++describe('profile-metainfo', () => {

Thanks for the unit tests!

julienw

comment created time in a day

Pull request review commentfirefox-devtools/profiler

Extract the meta info formatting to a separate file

+/* This Source Code Form is subject to the terms of the Mozilla Public+ * License, v. 2.0. If a copy of the MPL was not distributed with this+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */++// @flow++// This extracts the version number out of the 'misc' value we have in the+// profile.+// The 'misc' value looks like `rv:<version>`, we want to return the version.+// The function uses a permissive regexp to support more use cases (like having+// the version directly without the prefix `rv:`). Also we remove the `.0` at+// the end of the version if present because this gives no added value.+export function formatVersionNumber(version?: string): string {+  if (version) {+    const regex = /[\d.]+$/; // Matches any group of number and dots at the end of the string.+    const match = regex.exec(version);+    if (match) {+      return match[0];+    }+  }+  return '';+}++// This removes the ending `.0` in version strings, if present.+function removeUselessEndZeroInVersion(version: string): string {+  if (version.endsWith('.0')) {+    // Remove useless `.0` at the end of Firefox versions.+    return version.slice(0, -2);+  }+  return version;+}++// This returns a string to identify the product and its version out of the meta+// information, eg `Firefox 77` of `Firefox Preview 78`.+export function formatProductAndVersion(meta: {+  +product: string,+  +misc?: string,+}): string {+  const product = meta.product || '';+  const version = removeUselessEndZeroInVersion(formatVersionNumber(meta.misc));++  return product + (version ? ' ' + version : '');

From the code, it looks like it can also return empty string. But I guess we don't have a profile without product name usually (and it's mostly to make flow happy, right?). But it would be good to check this with a Chrome profile to see if that's gonna work well with it.

julienw

comment created time in a day

Pull request review commentfirefox-devtools/profiler

Extract the meta info formatting to a separate file

+/* This Source Code Form is subject to the terms of the Mozilla Public+ * License, v. 2.0. If a copy of the MPL was not distributed with this+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */++// @flow++// This extracts the version number out of the 'misc' value we have in the+// profile.+// The 'misc' value looks like `rv:<version>`, we want to return the version.+// The function uses a permissive regexp to support more use cases (like having+// the version directly without the prefix `rv:`). Also we remove the `.0` at+// the end of the version if present because this gives no added value.+export function formatVersionNumber(version?: string): string {

nit: we don't need to export this anymore, thanks to formatProductAndVersion.

julienw

comment created time in a day

Pull request review commentfirefox-devtools/profiler

Extract the meta info formatting to a separate file

+/* This Source Code Form is subject to the terms of the Mozilla Public+ * License, v. 2.0. If a copy of the MPL was not distributed with this+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */++// @flow++// This extracts the version number out of the 'misc' value we have in the+// profile.+// The 'misc' value looks like `rv:<version>`, we want to return the version.+// The function uses a permissive regexp to support more use cases (like having+// the version directly without the prefix `rv:`). Also we remove the `.0` at+// the end of the version if present because this gives no added value.+export function formatVersionNumber(version?: string): string {+  if (version) {+    const regex = /[\d.]+$/; // Matches any group of number and dots at the end of the string.+    const match = regex.exec(version);+    if (match) {+      return match[0];+    }+  }+  return '';+}++// This removes the ending `.0` in version strings, if present.+function removeUselessEndZeroInVersion(version: string): string {+  if (version.endsWith('.0')) {+    // Remove useless `.0` at the end of Firefox versions.+    return version.slice(0, -2);+  }+  return version;+}++// This returns a string to identify the product and its version out of the meta+// information, eg `Firefox 77` of `Firefox Preview 78`.+export function formatProductAndVersion(meta: {+  +product: string,+  +misc?: string,+}): string {+  const product = meta.product || '';+  const version = removeUselessEndZeroInVersion(formatVersionNumber(meta.misc));++  return product + (version ? ' ' + version : '');+}++export function formatPlatform(meta: {

Thanks for the comments inside the function! It would be also good to add a generic comment that explains what that function do in a comment on top of this function.

julienw

comment created time in a day

Pull request review commentfirefox-devtools/profiler

Extract the meta info formatting to a separate file

 function _formatDate(timestamp: number): string {   return timestampDate; } -function _formatVersionNumber(version?: string): string | null {-  const regex = /[0-9]+.+[0-9]/gi;--  if (version) {-    const match = version.match(regex);-    if (match) {-      return match.toString();-    }-  }-  return null;-}--function _formatLabel(meta: ProfileMeta): string {-  const product = meta.product || '';-  const version = _formatVersionNumber(meta.misc) || '';-  let os;-  // To displaying Android Version instead of Linux for Android developers.-  if (meta.platform !== undefined && meta.platform.match(/android/i)) {-    os = meta.platform;-  } else {-    os = meta.oscpu || '';-  }-  return product + (version ? ` (${version})` : '') + (os ? ` ${os}` : '');+function _formatMetainfoString(meta: ProfileMeta) {

Also would it be better to move this to profile-logic/profile-metainfo.js file as well?

julienw

comment created time in a day

Pull request review commentfirefox-devtools/profiler

Extract the meta info formatting to a separate file

 function _formatDate(timestamp: number): string {   return timestampDate; } -function _formatVersionNumber(version?: string): string | null {-  const regex = /[0-9]+.+[0-9]/gi;--  if (version) {-    const match = version.match(regex);-    if (match) {-      return match.toString();-    }-  }-  return null;-}--function _formatLabel(meta: ProfileMeta): string {-  const product = meta.product || '';-  const version = _formatVersionNumber(meta.misc) || '';-  let os;-  // To displaying Android Version instead of Linux for Android developers.-  if (meta.platform !== undefined && meta.platform.match(/android/i)) {-    os = meta.platform;-  } else {-    os = meta.oscpu || '';-  }-  return product + (version ? ` (${version})` : '') + (os ? ` ${os}` : '');+function _formatMetainfoString(meta: ProfileMeta) {
function _formatMetaInfoString(meta: ProfileMeta) {

nit: with capitalized Info

julienw

comment created time in a day

issue commentfirefox-devtools/profiler

Measure arbitrary time in the marker chart

@julienw May I take this up?

padenot

comment created time in a day

push eventfirefox-devtools/docs

travis

commit sha 1ab770454c2f56922ce729991e53a856d6c7cdb5

Built from commit 05bf08c8bce2f9c0d263a977554635cff2620eb2

view details

push time in a day

fork WebCrazyDev/debugger

The faster and smarter Debugger for Firefox DevTools 🔥🦊🛠

https://firefox-dev.tools/

fork in a day

pull request commentfirefox-devtools/profiler

Support smaller ranges in the URL

Codecov Report

:exclamation: No coverage uploaded for pull request base (main@9b30de5). Click here to learn what that means. The diff coverage is n/a.

Impacted file tree graph

@@           Coverage Diff           @@
##             main    #2627   +/-   ##
=======================================
  Coverage        ?   86.44%           
=======================================
  Files           ?      217           
  Lines           ?    17418           
  Branches        ?     4522           
=======================================
  Hits            ?    15057           
  Misses          ?     2161           
  Partials        ?      200           

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 9b30de5...94fdfaf. Read the comment docs.

julienw

comment created time in 2 days

PR opened firefox-devtools/profiler

Support smaller ranges in the URL

Please only look at the last commit, the first one is #2613.

This changes how we serialize the ranges to the URL. Previously it was <start>_<end>, where values were in seconds, and rounded with 4 digits. Now it is <start>_<duration>, where start is rounded with a precision depending on the duration, and a duration that has a unit (either ms, µs or ns). I decided to keep the value in seconds, because this is what is displayed in the UI. But my mind isn't set yet so I could also try to use integers for this.

This change supports the PR #2625, but we could already select very small ranges with the mouse in the timeline.

+306 -82

0 comment

3 changed files

pr created time in 2 days

issue openedfirefox-devtools/ux

Ability to drag the selected area using the ruler

It would be nice to be able to move the area with:

  1. Arrow keys (with step 1px)
  2. mousedown by area

image

created time in 2 days

pull request commentfirefox-devtools/profiler

[wip] Add Gecko's phased markers to the front-end

Codecov Report

:exclamation: No coverage uploaded for pull request base (main@9b30de5). Click here to learn what that means. The diff coverage is n/a.

Impacted file tree graph

@@           Coverage Diff           @@
##             main    #2626   +/-   ##
=======================================
  Coverage        ?   86.42%           
=======================================
  Files           ?      217           
  Lines           ?    17417           
  Branches        ?     4508           
=======================================
  Hits            ?    15053           
  Misses          ?     2164           
  Partials        ?      200           

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 9b30de5...063e8fd. Read the comment docs.

gregtatum

comment created time in 2 days

PR opened firefox-devtools/profiler

[wip] Add Gecko's phased markers to the front-end

This is a WIP patch.

TODO

  • [ ] Teach tracing markers (marker pipeline) about phased markers
  • [ ] Write processed profile upgrader
  • [ ] Write a gecko profile upgrader
+12382 -2343

0 comment

25 changed files

pr created time in 2 days

pull request commentfirefox-devtools/profiler

Allow more zooming in marker chart and other adjustments to ranges

Codecov Report

:exclamation: No coverage uploaded for pull request base (main@9b30de5). Click here to learn what that means. The diff coverage is n/a.

Impacted file tree graph

@@           Coverage Diff           @@
##             main    #2625   +/-   ##
=======================================
  Coverage        ?   86.42%           
=======================================
  Files           ?      217           
  Lines           ?    17363           
  Branches        ?     4502           
=======================================
  Hits            ?    15006           
  Misses          ?     2158           
  Partials        ?      199           

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 9b30de5...4ac12e4. Read the comment docs.

julienw

comment created time in 2 days

startedfirefox-devtools/debugger

started time in 2 days

startedfirefox-devtools/profiler

started time in 2 days

PR opened firefox-devtools/profiler

Allow more zooming in marker chart and other adjustments to ranges

image

deployed

Fixes #2623

There's still a problem with the URL handling.

+16 -32

0 comment

4 changed files

pr created time in 2 days

issue commentfirefox-devtools/profiler

Remove or increase the zoom limit on the marker chart / time span

Thanks, I now have a patch for this!

padenot

comment created time in 2 days

issue commentfirefox-devtools/profiler

Remove or increase the zoom limit on the marker chart / time span

Apparently the problem is that it is possible to zoom higher than 1ms by making a time selection, but not by using the mouse wheel or pinch-to-zoom.

padenot

comment created time in 2 days

issue commentfirefox-devtools/profiler

Measure arbitrary time in the marker chart

We have some context menu options to set the start and end of the selection. However, these options always take the start of a marker for the start of the selection, and the end of a marker for the end of the selection. It would be good that we provide more options, to be able to set the end of a selection from the start of a marker, and the start of a selection from the end of a marker.

These options are defined here: https://github.com/firefox-devtools/profiler/blob/9b30de5fcce2ae9cbdbc77b62116006d4d76d974/src/components/shared/MarkerContextMenu.js#L257-L262 This should be fairly easy to add new options, but I wonder how we can make it not confusing. Maybe using sub menus (see code example here: https://github.com/vkbansal/react-contextmenu/blob/master/examples/SubMenus.js):

  • set selection start >
    • from the start of this marker
    • from the end of this marker
  • set selection end >
    • from the start of this marker
    • from the end of this marker

The option could be different if we detect that this is a dot marker (using this._isZeroDurationMarker), we could keep the previous options for this.

With the changes in #2620 we should be able to display accurately any duration then.

padenot

comment created time in 2 days

issue commentfirefox-devtools/profiler

Use an appropriate time unit in the markers chart

This can definitely use our new formatTimestamp from format-numbers.js. I think this should be as easy as replacing formatMilliseconds in https://github.com/firefox-devtools/profiler/blob/9b30de5fcce2ae9cbdbc77b62116006d4d76d974/src/components/tooltip/Marker.js#L814.

Here is a good example profile for this

Any taker ? :)

padenot

comment created time in 2 days

issue commentfirefox-devtools/profiler

Allow selecting a time range in the markers chart

There are some ways, different to your suggestion, to do a selection from the marker chart:

  • double click on a marker will preselect the range for that marker
  • right click on a marker will show some options to set the selection

But I admit this is different to your suggestion which could be useful, including in other time-synchronized charts (network, stack chart).

padenot

comment created time in 2 days

issue closedfirefox-devtools/profiler

Colorize similar things similarly in the stack chart, marker chart

This would make it easier to navigate and match things (stack frames, markers) that are the same, visually.

closed time in 2 days

padenot

issue commentfirefox-devtools/profiler

Colorize similar things similarly in the stack chart, marker chart

I think this is a dupe of #1618 :-) Closing! I think this is clearly part of the discussions for markers 2.0.

padenot

comment created time in 2 days

issue commentfirefox-devtools/profiler

Sort markers hierarchically in the markers chart

Currently we order them alphabetically. This makes more sense generally, but I see that in your case you'd like a specific order for this category. I wonder if that could be part of the marker schema planned for Markers 2.0, looping in @gregtatum :)

padenot

comment created time in 2 days

issue commentfirefox-devtools/profiler

Remove or increase the zoom limit on the marker chart / time span

I don't think we have a limit today in general, but I found this that may give problems for your use case: https://github.com/firefox-devtools/profiler/blob/9b30de5fcce2ae9cbdbc77b62116006d4d76d974/src/actions/profile-view.js#L1239-L1242. We could make the number smaller, still avoiding float rounding errors.

I tried locally and I don't see a practical issue otherwise, however we could probably display µs and ns for the range duration in the top, and in other locations. I believe this function: https://github.com/firefox-devtools/profiler/blob/9b30de5fcce2ae9cbdbc77b62116006d4d76d974/src/profile-logic/committed-ranges.js#L57-L65 could use formatTimestamp from format-numbers. (dang, this name formatTimestamp is not so good, this is more a duration than a timestamp).

Any taker?

padenot

comment created time in 2 days

issue commentfirefox-devtools/profiler

Display upload progress while importing profile from Firefox/"add-on"

The loading screen is displayed from https://github.com/firefox-devtools/profiler/blob/9b30de5fcce2ae9cbdbc77b62116006d4d76d974/src/components/app/ProfileRootMessage.js.

Maybe some contributor could look at this and add states to display them in this component? We could have a state that look like this: { loadingStep: ENUM_VALUE, progress?: <number between 0 and 100> }. Not all loadingStep would have progress. All possible enum values would be defined in a type.

squelart

comment created time in 2 days

issue commentfirefox-devtools/profiler

Display upload progress while importing profile from Firefox/"add-on"

Indeed the loading UI isn't very good when it takes a lot of time.

The significant challenge is that we have some steps that are very monolithic and can't be changed easily. Here are the steps:

  1. get the gecko profiler promise: https://github.com/firefox-devtools/profiler/blob/9b30de5fcce2ae9cbdbc77b62116006d4d76d974/src/actions/receive-profile.js#L908-L920
  2. get the raw data: https://github.com/firefox-devtools/profiler/blob/9b30de5fcce2ae9cbdbc77b62116006d4d76d974/src/actions/receive-profile.js#L802-L803
  3. possibly decompress the profile: https://github.com/firefox-devtools/profiler/blob/9b30de5fcce2ae9cbdbc77b62116006d4d76d974/src/actions/receive-profile.js#L785
  4. decode the buffer as a string, and parse the raw data into a json: https://github.com/firefox-devtools/profiler/blob/9b30de5fcce2ae9cbdbc77b62116006d4d76d974/src/actions/receive-profile.js#L790-L791
  5. upgrade the gecko profile: https://github.com/firefox-devtools/profiler/blob/9b30de5fcce2ae9cbdbc77b62116006d4d76d974/src/profile-logic/process-profile.js#L1190
  6. process it to our processed format: (same function as above, but below)

Steps 5 and 6 aren't monolithic and we could imagine to have a progress bar for these. Steps 1-4 are more monolithic though, but we can imagine updating a state between each of them, to display the current step to the user.

In the case of the user as described above, they were stuck at step 1 already, but we don't have more clue about what happened.

squelart

comment created time in 2 days

issue commentfirefox-devtools/profiler

Update home screen UI for loading existing profiles from URL, pasting, and from file.

The work in #1494 was pretty well done, I think this could be probably reused. From the UI side, I'd like that we try what I outlined in my previous comment and see how this feels.

gregtatum

comment created time in 2 days

issue commentfirefox-devtools/profiler

Add ability to name profiles.

https://github.com/firefox-devtools/profiler/pull/2059 is the PR to be able to change the profile name from the UI. It was kind of finished but we didn't much agree on the UI and we need to look at it again. Possibly the new work around showing the list of uploaded profiles will fix this too, or I'll revive that old patch.

PaulBone

comment created time in 2 days

issue closedfirefox-devtools/profiler

Explore to move perf-html.io to profiler.firefox.com

As discussed before, I wanted to get the idea of changing domains for the profiler frontend to profiler.firefox.com into the next phase.

With the move, we should also consistently name all peripherals, like the addon. I'd propose to move from the current "Gecko Profiler" to "Firefox Profiler" (but don't really have strong opinions on it).

The main benefits of the migrations would be:

  1. Firefox domain brand to underline the trustworthiness of the tool & data handling
  2. Unified "Profiler" product that includes the recording and analysis capabilities

Tradeoffs:

  • Migration of domain, existing links and existing users (mostly redirects and updating the addon?)

Questions

  • Does this have stricter legal or privacy requirements?
  • How does netlify handle subdomains for deploy previews?

Thoughts?

Decisions

Useful to do.

  1. No stricter requirements because of firefox.com domain
  2. netlify should work fine
  3. Needs final decision on sub-domain name

closed time in 2 days

digitarald

issue commentfirefox-devtools/profiler

Explore to move perf-html.io to profiler.firefox.com

I handled the leftover mentions in wikimoz. About the last point in my task list, I don't think we can have the redirection done by Mozilla because perf-html.io needs to point to netlify as our main TLD (netlify can't work from subdomains... unless that changed recently). So I'm closing this issue now as I believe everything has been handled. Yay !

digitarald

comment created time in 2 days

issue commentfirefox-devtools/profiler

Remove sidebars, and consolidate on tooltips on all panels except call tree and marker table

Hey @gregtatum , this issue has been surfacing in my search today, I wonder if this is still something we want.

Probably we want to keep sidebars but still improve tooltips. Making it possible to interact with the tooltips could be useful, but I don't see how this would be compatible with the behavior of quick skimming through the data (thinking of a lot of closeby markers or the activity graph here).

Maybe crazy idea: a keystroke (p?) that would pin the currently displayed tooltip.

gregtatum

comment created time in 2 days

issue commentfirefox-devtools/profiler

[Discussion] Modal upload progress

Hey @digitarald , do you think this is better now, with the upload bar at the top of the UI ?

digitarald

comment created time in 2 days

startedfirefox-devtools/debugger

started time in 2 days

fork victoran0508/debugger

The faster and smarter Debugger for Firefox DevTools 🔥🦊🛠

https://firefox-dev.tools/

fork in 2 days

push eventfirefox-devtools/docs

travis

commit sha 5550918f4a6b43b93e31c6b68fd6e886b7feb68f

Built from commit 05bf08c8bce2f9c0d263a977554635cff2620eb2

view details

push time in 2 days

issue openedfirefox-devtools/profiler

Display upload progress while importing profile from Firefox/"add-on"

When capturing a profile from Firefox, the profiler.firefox.com page shows a bit of animation and "Importing the profile directly from Firefox...". If that takes more than 30s, another message says "We were unable to connect to the Gecko profiler add-on within thirty seconds. [...] Still waiting..." (Side-issue: we should remove "add-on".)

It would be great to have more information during this process, to inform the user whether nothing at all is happening, or the upload is indeed very slow. A user suffering from Firefox using 100% CPU said they waited for more than ~5 minutes before giving up.

So I think we should at least display a count of bytes uploaded, to show whether data is coming through.

Other improvements:

  • Show the current data rate.
  • If the file size is known, also show a percentage.
  • Show the estimated remaining time.
  • Coordinate more with the Firefox profiler (this would require Firefox backend changes as well), to better know what's happening before the data starts streaming. E.g.: Request received, gathering main process data, gathered M/N subprocess profiles so far, zipping, and then uploading (with file size sent before the actual file).
  • If "gathered M/N subprocess profiles" doesn't seem to reach M==N after a short while, offer the option to upload the profile as-is. (bug 1648324 will attempt to add an automatic timeout on the backend side.)

created time in 2 days

pull request commentfirefox-devtools/profiler

Extend call tree background to full width

@julienw I rebased off of the main branch, so there should be no merge master into feature related commits.

By the way, this is what I am seeing on my end.

stretch

icncsx

comment created time in 3 days

startedfirefox-devtools/profiler

started time in 3 days

Pull request review commentfirefox-devtools/profiler

Extract the meta info formatting to a separate file

 function _formatDate(timestamp: number): string {   return timestampDate; } -function _formatVersionNumber(version?: string): string | null {-  const regex = /[0-9]+.+[0-9]/gi;--  if (version) {-    const match = version.match(regex);-    if (match) {-      return match.toString();-    }-  }-  return null;-}--function _formatLabel(meta: ProfileMeta): string {-  const product = meta.product || '';-  const version = _formatVersionNumber(meta.misc) || '';-  let os;-  // To displaying Android Version instead of Linux for Android developers.-  if (meta.platform !== undefined && meta.platform.match(/android/i)) {-    os = meta.platform;-  } else {-    os = meta.oscpu || '';-  }-  return product + (version ? ` (${version})` : '') + (os ? ` ${os}` : '');+function _formatMetainfoString(meta: ProfileMeta) {+  const productAndVersion = formatProductAndVersion(meta);+  const os = formatPlatform(meta);+  return productAndVersion + (os ? ` – ${os}` : ''); }

I kept it here because in the future it will disappear: indeed we'll display the 2 parts in 2 different elements, because we'll also want to add small icons to represent the platforms and products. Very probably this will all go to a different component.

julienw

comment created time in 3 days

issue openedfirefox-devtools/profiler

Remove or increase the zoom limit on the marker chart / time span

There seem to be a limit, and it's too low for my use case it seems. The maximum seems to be about 1ms for the width of the markers chart.

created time in 3 days

issue openedfirefox-devtools/profiler

Sort markers hierarchically in the markers chart

sort-fx

is a screenshot from https://share.firefox.dev/2VDDGjv, zoomed in on the GraphRunner thread. I find it harder to read than what Catapult does (not exactly the same data, but the same function calls, hopefully it conveys the idea):

sort-cr

Tracy does something similar as well:

sort-tracy

created time in 3 days

issue openedfirefox-devtools/profiler

Colorize similar things similarly in the stack chart, marker chart

This would make it easier to navigate and match things (stack frames, markers) that are the same, visually.

created time in 3 days

issue closedfirefox-devtools/debugger

cheap-module-source-map does not show source maps.

Steps to reproduce

Create a new project. Set it's devtool: "cheap-module-source-map" https://webpack.js.org/configuration/devtool/

Actual Behavior The source maps don't work

Expected Behavior They should work. If I set devtool: "eval-source-map" it works.

closed time in 3 days

andreicristianpetcu

issue commentfirefox-devtools/debugger

cheap-module-source-map does not show source maps.

That should be the https://bugzilla.mozilla.org/show_bug.cgi?id=1594550 . Closing this one, as we track all bugs in bugzilla now.

andreicristianpetcu

comment created time in 3 days

issue openedfirefox-devtools/profiler

Allow selecting a time range in the markers chart

Selecting a time range by dragging is for now only possible in the upper part of the profiler UI, it would be great if the markers chart could be used to select a region as well, as it's easier to start the mouse drag on the right marker when the mouse is on the marker.

created time in 3 days

issue openedfirefox-devtools/profiler

Use an appropriate time unit in the markers chart

See the attached screenshot:

ms not us

I would expect μs and not ms. I think this is the case in other parts of the profiler, but it's missing in the markers chart.

created time in 3 days

issue openedfirefox-devtools/profiler

Measure arbitrary time in the marker chart

I often need to measure the time between the start of a marker and the start of another (nested) marker, like the attached screenshot. This is very useful to (for example) measure the overhead of something that we think is cheap, but that calls an expensive function.

chrome-tracing-measure

I've also needed to measure time in between markers. It's always possible to subtract the numbers with a bit of mental arithmetic, but it's easier to drag a ruler.

created time in 3 days

issue commentfirefox-devtools/profiler

Marker usage scenario: compute average time used for a certain marker

https://blog.paul.cx/post/profiling-firefox-real-time-media-workloads/#the-solution-to-the-new-problem does exactly this and a lot more, using the technique @julienw mentions (in its current form, window.filteredMarkers).

mstange

comment created time in 3 days

pull request commentfirefox-devtools/profiler

Extract the meta info formatting to a separate file

Codecov Report

:exclamation: No coverage uploaded for pull request base (main@9b30de5). Click here to learn what that means. The diff coverage is n/a.

Impacted file tree graph

@@           Coverage Diff           @@
##             main    #2617   +/-   ##
=======================================
  Coverage        ?   86.36%           
=======================================
  Files           ?      218           
  Lines           ?    17378           
  Branches        ?     4514           
=======================================
  Hits            ?    15008           
  Misses          ?     2168           
  Partials        ?      202           

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 9b30de5...06b6cfe. Read the comment docs.

julienw

comment created time in 3 days

issue commentfirefox-devtools/debugger

cheap-module-source-map does not show source maps.

Yes, @digitarald , the same source maps work in Chrome.

andreicristianpetcu

comment created time in 3 days

issue commentfirefox-devtools/profiler

Use rectangles for all markers in the marker chart

I have the same problem with audio-related markers: https://paul.cx/public/rounded-corner.mp4. I also find that rounded corners make visually understanding markers horizontal alignment harder: It's often useful to understand if two markers are starting exactly at the same time. When #2570 happens, it will be even more important.

mstange

comment created time in 3 days

issue commentfirefox-devtools/profiler

Add a way to view the marker charts from multiple threads

I second this, here is a couple use cases:

  • Visually find problematic locking patterns: when something on a thread starts executing exactly when something on another thread stops executing, it's often a sign that a shared lock is being contented
  • Looking at multiple threads at once to understand scheduling patterns or workload parallelism
jrmuizel

comment created time in 3 days

issue commentfirefox-devtools/debugger

cheap-module-source-map does not show source maps.

@andreicristianpetcu does the same cheap-module-source-map config work for Chrome?

andreicristianpetcu

comment created time in 3 days

issue openedfirefox-devtools/debugger

cheap-module-source-map does not show source maps.

Steps to reproduce

Create a new project. Set it's devtool: "cheap-module-source-map" https://webpack.js.org/configuration/devtool/

Actual Behavior The source maps don't work

Expected Behavior They should work. If I set devtool: "eval-source-map" it works.

created time in 3 days

pull request commentfirefox-devtools/profiler

Extend call tree background to full width

hey @icncsx, sorry for the delay! As you can see there are problems with the PR as it has some unrelated changes. I couldn't find the time to untangle this yet, so if you can look on your side this would be very nice! Ideally this PR should see only your own changes, not the changes from other patches.

icncsx

comment created time in 3 days

PullRequestEvent

PR closed firefox-devtools/profiler

Reviewers
Rename IPC message tooltip labels to be more descriptive

This provides more descriptive labels for durations in IPC messages:

  • IPC Speed -> IPC Send Duration
  • IPC Latency -> IPC Recv Latency

I forgot to make these changes in #2535 after some feedback from Markus about the naming. This fixes the naming to be consistent with the text in the docs (which I did remember to update).

+8 -8

1 comment

4 changed files

jimporter

pr closed time in 3 days

push eventfirefox-devtools/docs

travis

commit sha 1616322984acab85eefe790f85832fa186b76661

Built from commit 05bf08c8bce2f9c0d263a977554635cff2620eb2

view details

push time in 3 days

pull request commentfirefox-devtools/profiler

Rename IPC message tooltip labels to be more descriptive

Codecov Report

Merging #2616 into main will not change coverage. The diff coverage is n/a.

Impacted file tree graph

@@           Coverage Diff           @@
##             main    #2616   +/-   ##
=======================================
  Coverage   86.58%   86.58%           
=======================================
  Files         217      217           
  Lines       17242    17242           
  Branches     4468     4468           
=======================================
  Hits        14929    14929           
  Misses       2117     2117           
  Partials      196      196           
Impacted Files Coverage Δ
src/components/tooltip/Marker.js 87.28% <ø> (ø)

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update e721329...3abf287. Read the comment docs.

jimporter

comment created time in 4 days

PR opened firefox-devtools/profiler

Reviewers
Rename IPC message tooltip labels to be more descriptive

This provides more descriptive labels for durations in IPC messages:

  • IPC Speed -> IPC Send Duration
  • IPC Latency -> IPC Recv Latency

I forgot to make these changes in #2535 after some feedback from Markus about the naming. This fixes the naming to be consistent with the text in the docs (which I did remember to update).

+8 -8

0 comment

4 changed files

pr created time in 4 days

pull request commentfirefox-devtools/profiler

Extend call tree background to full width

Hi, @julienw. Please let me know if there is anything additional I can do to help you re: this PR and the relevant issue.

icncsx

comment created time in 4 days

delete branch firefox-devtools/profiler

delete branch : ut-2

delete time in 4 days

delete branch firefox-devtools/profiler

delete branch : master

delete time in 4 days

PullRequestEvent
PullRequestEvent
PullRequestEvent
PullRequestEvent
PullRequestEvent
PullRequestEvent
PullRequestEvent
PullRequestEvent
PullRequestEvent
PullRequestEvent
PullRequestEvent
PullRequestEvent
PullRequestEvent
PullRequestEvent
PullRequestEvent
more