Deploy July 26, 2022

.circleci/config.yml

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

docs-user/_sidebar.md

@@ -5,7 +5,9 @@
   * [Profiler Fundamentals](./guide-profiler-fundamentals.md)
   * [Stack samples and call trees](./guide-stack-samples-and-call-trees.md)
   * [Filtering call trees](./guide-filtering-call-trees.md)
-  * [Remote Profiling Firefox for Android](./guide-remote-profiling.md)
+  * [Profiling Firefox for Android](./guide-profiling-firefox-android.md)
+    * [Remote Profiling](./guide-remote-profiling.md)
+    * [Profiling directly on the device](./guide-profiling-android-directly-on-device.md)
   * [Memory Allocations](./memory-allocations.md)
 * [Advanced Topics](./advanced-topics.md)
   * [Profiling Firefox Startup & Shutdown](./guide-startup-shutdown.md)

docs-user/guide-profiling-android-directly-on-device.md

@@ -0,0 +1,34 @@
+# Profiling Firefox for Android directly on device
+
+The Firefox Profiler can be used without the remote debugging option. It offers a little less flexibility (can't edit the options and the profile is 
+automatically uploaded). However, it does allow you to capture a profile without the need of a PC.
+
+## Setup
+
+### Pick a build to profile
+We recommend profiling a Firefox build from any release channel (i.e. not debug), whether downloaded from Google Play, Taskcluster, or built locally.
+
+### Enable secret settings on the mobile device
+
+To enable secret settings, follow these steps:
+
+ - Click on the [three dot icon next to the URL bar](./images/about-url.png)
+ - Select the ["Settings" option](./images/settings-menu.png).
+ - Scroll to the bottom of the settings page and select the "About Firefox"
+ - Click the "Firefox" logo 5 times. [A toast should appear at the bottom of your screen with the number of click left before unlocking the secret menu](./images/secret-menu-toast.png).
+ - Go back to the "Settings" screen and scroll to the bottom where you should see the ["Start Profiler" option](./images/start-profiler.png).
+
+## Usage instructions
+
+### To start the profiler
+
+ - Click on "Start Profiler" and you should see a dialogue appear.
+ - Choose one of the four options that matches the closest to what you're trying to profile.
+ - Click "Start Profiler" and a toast should appear with the "Profiler started" message.
+
+### To stop the profiler
+
+  - Go back to the Settings screen
+  - Scroll to the bottom and you should see a "Stop profiler" option has replaced the "Start Profiler" one.
+  - After you click it, you should see a dialogue with a warning regarding the information contained in the profile.
+  - Once stopped, the URL for the profile that finished recording will be copied to your clipboard which you can then use to share.

docs-user/guide-profiling-firefox-android.md

@@ -0,0 +1,7 @@
+# Profiling Firefox for Android
+
+Two options are possible:
+
+* [Remote Profiling Firefox for Android](./guide-remote-profiling.md) provides the most options but can be cumbersome to set up;
+* [Profiling Firefox for Android directly on the device](./guide-profiling-android-directly-on-device.md) has fewer options but should be easier to set up.
+

locales/el/app.ftl

@@ -677,6 +677,21 @@ TrackMemoryGraph--relative-memory-at-this-time = σχετική μνήμη αυ
 TrackMemoryGraph--memory-range-in-graph = εύρος μνήμης στο γράφημα
 TrackMemoryGraph--operations-since-the-previous-sample = λειτουργίες από το προηγούμενο δείγμα
 
+## TrackPowerGraph
+## 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
+## https://share.firefox.dev/3a1fiT7.
+
+# This is used in the tooltip when the power value uses the Watt unit.
+# Variables:
+#   $value (String) - the power value at this location
+TrackPowerGraph--tooltip-power-watt = Ισχύς: <em>{ $value } W</em>
+# This is used in the tooltip when the power value uses the Milliwatt unit.
+# Variables:
+#   $value (String) - the power value at this location
+TrackPowerGraph--tooltip-power-milliwatt = Ισχύς: <em>{ $value } mW</em>
+
 ## TrackSearchField
 ## The component that is used for the search input in the track context menu.
 

locales/en-US/app.ftl

@@ -223,11 +223,6 @@ FooterLinks--hide-button =
 ## The timeline component of the full view in the analysis UI at the top of the
 ## page.
 
-FullTimeline--graph-type = Graph type:
-FullTimeline--categories-with-cpu = Categories with CPU
-FullTimeline--categories = Categories
-FullTimeline--stack-height = Stack height
-
 # This string is used as the text of the track selection button.
 # Displays the ratio of visible tracks count to total tracks count in the timeline.
 # We have spans here to make the numbers bold.

locales/sv-SE/app.ftl

@@ -674,6 +674,21 @@ TrackMemoryGraph--relative-memory-at-this-time = relativa minnet vid denna tidpu
 TrackMemoryGraph--memory-range-in-graph = minnesintervall i grafen
 TrackMemoryGraph--operations-since-the-previous-sample = operationer sedan föregående prov
 
+## TrackPowerGraph
+## 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
+## https://share.firefox.dev/3a1fiT7.
+
+# This is used in the tooltip when the power value uses the Watt unit.
+# Variables:
+#   $value (String) - the power value at this location
+TrackPowerGraph--tooltip-power-watt = Effekt: <em>{ $value } W</em>
+# This is used in the tooltip when the power value uses the Milliwatt unit.
+# Variables:
+#   $value (String) - the power value at this location
+TrackPowerGraph--tooltip-power-milliwatt = Effekt: <em>{ $value } mW </em>
+
 ## TrackSearchField
 ## The component that is used for the search input in the track context menu.
 

package.json

@@ -52,7 +52,7 @@
     "@codemirror/lang-javascript": "^6.0.1",
     "@codemirror/lang-rust": "^6.0.0",
     "@codemirror/language": "^6.2.0",
-    "@codemirror/state": "^6.0.1",
+    "@codemirror/state": "^6.1.0",
     "@codemirror/view": "^6.0.2",
     "@firefox-devtools/react-contextmenu": "^5.0.0",
     "@fluent/bundle": "^0.17.1",
@@ -65,7 +65,7 @@
     "classnames": "^2.3.1",
     "common-tags": "^1.8.2",
     "copy-to-clipboard": "^3.1.0",
-    "core-js": "^3.23.3",
+    "core-js": "^3.23.5",
     "escape-string-regexp": "^4.0.0",
     "gecko-profiler-demangle": "^0.3.3",
     "idb": "^7.0.2",
@@ -79,7 +79,7 @@
     "query-string": "^7.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-intersection-observer": "^9.3.4",
+    "react-intersection-observer": "^9.3.5",
     "react-redux": "^8.0.2",
     "react-splitter-layout": "^4.0.0",
     "react-transition-group": "^4.4.2",
@@ -100,7 +100,7 @@
     "@babel/preset-env": "^7.18.6",
     "@babel/preset-flow": "^7.18.6",
     "@babel/preset-react": "^7.18.6",
-    "@testing-library/dom": "^8.14.0",
+    "@testing-library/dom": "^8.16.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "alex": "^10.0.0",
@@ -117,12 +117,12 @@
     "css-loader": "^5.2.7",
     "cssnano": "^5.0.2",
     "devtools-license-check": "^0.9.0",
-    "eslint": "^8.18.0",
+    "eslint": "^8.19.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^26.5.3",
+    "eslint-plugin-jest": "^26.6.0",
     "eslint-plugin-jest-dom": "^4.0.2",
     "eslint-plugin-jest-formatting": "^3.1.0",
     "eslint-plugin-prettier": "^4.2.1",
@@ -139,7 +139,7 @@
     "husky": "^4.3.8",
     "jest": "^28.1.2",
     "jest-environment-jsdom": "^28.1.2",
-    "jest-extended": "^2.0.0",
+    "jest-extended": "^2.1.0",
     "json-loader": "^0.5.7",
     "local-web-server": "^4.2.1",
     "lockfile-lint": "^4.7.6",

src/actions/profile-view.js

@@ -349,9 +349,7 @@ export function selectTrack(
           case 'memory': {
             const { counterIndex } = localTrack;
             const counterSelectors = getCounterSelectors(counterIndex);
-            const counter = counterSelectors.getCommittedRangeFilteredCounter(
-              getState()
-            );
+            const counter = counterSelectors.getCounter(getState());
             selectedThreadIndex = counter.mainThreadIndex;
             break;
           }
@@ -363,9 +361,7 @@ export function selectTrack(
           case 'power': {
             const { counterIndex } = localTrack;
             const counterSelectors = getCounterSelectors(counterIndex);
-            const counter = counterSelectors.getCommittedRangeFilteredCounter(
-              getState()
-            );
+            const counter = counterSelectors.getCounter(getState());
             selectedThreadIndex = counter.mainThreadIndex;
             break;
           }
@@ -384,14 +380,13 @@ export function selectTrack(
         );
     }
 
-    const doesNextTrackHaveSelectedTab = getThreadSelectors(selectedThreadIndex)
-      .getUsefulTabs(getState())
-      .includes(selectedTab);
-
-    if (!doesNextTrackHaveSelectedTab) {
+    const visibleTabs = getThreadSelectors(selectedThreadIndex).getUsefulTabs(
+      getState()
+    );
+    if (!visibleTabs.includes(selectedTab)) {
       // If the user switches to another track that doesn't have the current
-      // selectedTab then switch to the calltree.
-      selectedTab = 'calltree';
+      // selectedTab then switch to the first tab.
+      selectedTab = visibleTabs[0];
     }
 
     let selectedThreadIndexes = new Set(getSelectedThreadIndexes(getState()));
@@ -550,16 +545,13 @@ export function selectActiveTabTrack(
         );
     }
 
-    const doesNextTrackHaveSelectedTab = getThreadSelectors(
-      selectedThreadIndexes
-    )
-      .getUsefulTabs(getState())
-      .includes(selectedTab);
-
-    if (!doesNextTrackHaveSelectedTab) {
+    const visibleTabs = getThreadSelectors(selectedThreadIndexes).getUsefulTabs(
+      getState()
+    );
+    if (!visibleTabs.includes(selectedTab)) {
       // If the user switches to another track that doesn't have the current
-      // selectedTab then switch to the calltree.
-      selectedTab = 'calltree';
+      // selectedTab then switch to the first tab.
+      selectedTab = visibleTabs[0];
     }
 
     if (

src/actions/receive-profile.js

@@ -33,7 +33,6 @@ import {
   getProfile,
   getView,
   getRelevantPagesForActiveTab,
-  getIsCPUUtilizationProvided,
   getSymbolServerUrl,
   getActiveTabID,
 } from 'firefox-profiler/selectors';
@@ -58,6 +57,7 @@ import { computeActiveTabTracks } from 'firefox-profiler/profile-logic/active-ta
 import { setDataSource } from './profile-view';
 import { fatalError } from './errors';
 import { GOOGLE_STORAGE_BUCKET } from 'firefox-profiler/app-logic/constants';
+import { determineTimelineType } from 'firefox-profiler/profile-logic/profile-data';
 
 import type {
   RequestedLib,
@@ -335,20 +335,9 @@ export function finalizeFullProfileView(
       profile
     );
 
-    // Check the profile to see if we have threadCPUDelta values and switch to
-    // the category view with CPU if we have. This is needed only while we are
-    // still experimenting with the new activity graph. We should remove this
-    // when we have this on by default.
     let timelineType = null;
-    if (
-      !hasUrlInfo &&
-      profile.meta.sampleUnits &&
-      profile.threads.some((thread) => thread.samples.threadCPUDelta)
-    ) {
-      const hasCPUDeltaValues = getIsCPUUtilizationProvided(getState());
-      if (hasCPUDeltaValues) {
-        timelineType = 'cpu-category';
-      }
+    if (!hasUrlInfo) {
+      timelineType = determineTimelineType(profile);
     }
 
     withHistoryReplaceStateSync(() => {
@@ -588,15 +577,8 @@ export function finalizeActiveTabProfileView(
     // still experimenting with the new activity graph. We should remove this
     // when we have this on by default.
     let timelineType = null;
-    if (
-      !hasUrlInfo &&
-      profile.meta.sampleUnits &&
-      profile.threads[0].samples.threadCPUDelta
-    ) {
-      const hasCPUDeltaValues = getIsCPUUtilizationProvided(getState());
-      if (hasCPUDeltaValues) {
-        timelineType = 'cpu-category';
-      }
+    if (!hasUrlInfo) {
+      timelineType = determineTimelineType(profile);
     }
 
     dispatch({

src/app-logic/constants.js

@@ -18,8 +18,6 @@ export const TIMELINE_MARGIN_RIGHT = 15;
 export const TIMELINE_MARGIN_LEFT = 150;
 export const ACTIVE_TAB_TIMELINE_MARGIN_LEFT = 0;
 
-export const TIMELINE_SETTINGS_HEIGHT = 26;
-
 // Export the value for tests, and for computing the max height of the timeline
 // for the splitter.
 export const FULL_TRACK_SCREENSHOT_HEIGHT = 50;

src/app-logic/tabs-handling.js

@@ -40,3 +40,9 @@ export const tabsWithTitleL10nIdArray: $ReadOnlyArray<TabsWithTitleL10nId> =
     name: tabSlug,
     title: tabsWithTitleL10nId[tabSlug],
   }));
+
+export const tabsShowingSampleData: $ReadOnlyArray<TabSlug> = [
+  'calltree',
+  'flame-graph',
+  'stack-chart',
+];

src/app-logic/url-handling.js

@@ -46,7 +46,7 @@ import {
 } from '../utils/uintarray-encoding';
 import { tabSlugs } from '../app-logic/tabs-handling';
 
-export const CURRENT_URL_VERSION = 6;
+export const CURRENT_URL_VERSION = 7;
 
 /**
  * This static piece of state might look like an anti-pattern, but it's a relatively
@@ -366,10 +366,9 @@ export function getQueryStringFromUrlState(urlState: UrlState): string {
         ? undefined
         : urlState.profileSpecific.implementation,
     timelineType:
-      // The default is the category view, so only add it to the URL if it's the
-      // stack or cpu-category view.
-      // TODO: We should make the 'cpu-category' the new default with an upgrader.
-      urlState.profileSpecific.timelineType === 'category'
+      // The default is the cpu-category view, so only add it to the URL if it's
+      // the stack or category view.
+      urlState.profileSpecific.timelineType === 'cpu-category'
         ? undefined
         : urlState.profileSpecific.timelineType,
   }: BaseQueryShape);
@@ -1088,6 +1087,26 @@ const _upgraders: {|
       delete query.transforms;
     }
   },
+  [7]: ({ query }: ProcessedLocationBeforeUpgrade) => {
+    // Default timeline type has been changed to 'cpu-category' from 'category'.
+    // Default timeline type isn't needed to be in the url, revert the values in
+    // the query to reflect that.
+    switch (query.timelineType) {
+      case 'cpu-category':
+        // This is the default value now. It's not needed in the url.
+        delete query.timelineType;
+        break;
+      case 'stack':
+        // Do nothing for this.
+        break;
+      case 'category':
+      default:
+        // We can either have 'category' or nothing for this value. We should
+        // explicitly add for this case.
+        query.timelineType = 'category';
+        break;
+    }
+  },
 };
 
 for (let destVersion = 1; destVersion <= CURRENT_URL_VERSION; destVersion++) {
@@ -1213,6 +1232,6 @@ function validateTimelineType(type: ?string): TimelineType {
     default:
       // Type assert we've checked everything:
       (timelineType: empty);
-      return 'category';
+      return 'cpu-category';
   }
 }