Add first pass at adding carbon metrics to Firefox profiler

locales/en-US/app.ftl

@@ -771,8 +771,12 @@ TrackMemoryGraph--operations-since-the-previous-sample = operations since the pr
 ## 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.
 
 # This is used in the tooltip when the power value uses the watt unit.
 # Variables:
@@ -790,42 +794,48 @@ TrackPower--tooltip-power-milliwatt = { $value } mW
 # watt-hour unit.
 # Variables:
 #   $value (String) - the energy value for this range
-TrackPower--tooltip-energy-used-in-range-watthour = { $value } Wh
+#   $carbonValue (string) - the carbon dioxide equivalent (CO₂e) value (grams)
+TrackPower--tooltip-energy-carbon-used-in-range-watthour = { $value } Wh ({ $carbonValue } g CO₂e)
   .label = Energy used in the visible range
 
 # This is used in the tooltip when the energy used in the current range uses the
 # milliwatt-hour unit.
 # Variables:
 #   $value (String) - the energy value for this range
-TrackPower--tooltip-energy-used-in-range-milliwatthour = { $value } mWh
+#   $carbonValue (string) - the carbon dioxide equivalent (CO₂e) value (milligrams)
+TrackPower--tooltip-energy-carbon-used-in-range-milliwatthour = { $value } mWh ({ $carbonValue } mg CO₂e)
   .label = Energy used in the visible range
 
 # This is used in the tooltip when the energy used in the current range uses the
 # microwatt-hour unit.
 # Variables:
 #   $value (String) - the energy value for this range
-TrackPower--tooltip-energy-used-in-range-microwatthour = { $value } µWh
+#   $carbonValue (string) - the carbon dioxide equivalent (CO₂e) value (milligrams)
+TrackPower--tooltip-energy-carbon-used-in-range-microwatthour = { $value } µWh ({ $carbonValue } mg CO₂e)
   .label = Energy used in the visible range
 
 # This is used in the tooltip when the energy used in the current preview
 # selection uses the watt-hour unit.
 # Variables:
 #   $value (String) - the energy value for this range
-TrackPower--tooltip-energy-used-in-preview-watthour = { $value } Wh
+#   $carbonValue (string) - the carbon dioxide equivalent (CO₂e) value (grams)
+TrackPower--tooltip-energy-carbon-used-in-preview-watthour = { $value } Wh ({ $carbonValue } g CO₂e)
   .label = Energy used in the current selection
 
 # This is used in the tooltip when the energy used in the current preview
 # selection uses the milliwatt-hour unit.
 # Variables:
 #   $value (String) - the energy value for this range
-TrackPower--tooltip-energy-used-in-preview-milliwatthour = { $value } mWh
+#   $carbonValue (string) - the carbon dioxide equivalent (CO₂e) value (milligrams)
+TrackPower--tooltip-energy-carbon-used-in-preview-milliwatthour = { $value } mWh ({ $carbonValue } mg CO₂e)
   .label = Energy used in the current selection
 
 # This is used in the tooltip when the energy used in the current preview
 # selection uses the microwatt-hour unit.
 # Variables:
 #   $value (String) - the energy value for this range
-TrackPower--tooltip-energy-used-in-preview-microwatthour = { $value } µWh
+#   $carbonValue (string) - the carbon dioxide equivalent (CO₂e) value (milligrams)
+TrackPower--tooltip-energy-carbon-used-in-preview-microwatthour = { $value } µWh ({ $carbonValue } mg CO₂e)
   .label = Energy used in the current selection
 
 ## TrackSearchField

package.json

@@ -59,6 +59,7 @@
     "@fluent/langneg": "^0.6.2",
     "@fluent/react": "^0.14.1",
     "@lezer/highlight": "^1.1.3",
+    "@tgwf/co2": "^0.11.4",
     "array-move": "^3.0.1",
     "array-range": "^1.0.1",
     "clamp": "^1.0.1",

src/components/tooltip/TrackPower.js

@@ -8,6 +8,8 @@ import * as React from 'react';
 import { Localized } from '@fluent/react';
 import memoize from 'memoize-one';
 
+import { averageIntensity } from '@tgwf/co2';
+
 import explicitConnect from 'firefox-profiler/utils/connect';
 import { formatNumber } from 'firefox-profiler/utils/format-numbers';
 import {
@@ -63,6 +65,13 @@ class TooltipTrackPowerImpl extends React.PureComponent<Props> {
     return sum * 1e-12;
   }
 
+  _computeCO2eFromPower(power: number): number {
+    // total energy Wh to kWh
+    const energy = power / 1000;
+    const { WORLD } = averageIntensity.data;
+    return energy * WORLD;
+  }
+
   _computePowerSumForCommittedRange = memoize(
     ({ start, end }: StartEndRange): number =>
       this._computePowerSumForRange(start, end)
@@ -85,23 +94,34 @@ class TooltipTrackPowerImpl extends React.PureComponent<Props> {
     l10nIdMilliUnit,
     l10nIdMicroUnit
   ): Localized {
-    let value, l10nId;
+    let value, l10nId, carbonValue;
+    const carbon = this._computeCO2eFromPower(power);
     if (power > 1) {
       value = formatNumber(power, 3);
+      carbonValue = formatNumber(carbon, 3);
       l10nId = l10nIdUnit;
     } else if (power === 0) {
       value = 0;
+      carbonValue = 0;
       l10nId = l10nIdUnit;
     } else if (power < 0.001 && l10nIdMicroUnit) {
       value = formatNumber(power * 1000000);
+      // Note: even though the power value is expressed in µWh, the carbon value
+      // is still expressed in mg.
+      carbonValue = formatNumber(carbon * 1000);
       l10nId = l10nIdMicroUnit;
     } else {
       value = formatNumber(power * 1000);
+      carbonValue = formatNumber(carbon * 1000);
       l10nId = l10nIdMilliUnit;
     }
 
     return (
-      <Localized id={l10nId} vars={{ value }} attrs={{ label: true }}>
+      <Localized
+        id={l10nId}
+        vars={{ value, carbonValue }}
+        attrs={{ label: true }}
+      >
         <TooltipDetail label="">{value}</TooltipDetail>
       </Localized>
     );
@@ -139,16 +159,16 @@ class TooltipTrackPowerImpl extends React.PureComponent<Props> {
           {previewSelection.hasSelection
             ? this._formatPowerValue(
                 this._computePowerSumForPreviewRange(previewSelection),
-                'TrackPower--tooltip-energy-used-in-preview-watthour',
-                'TrackPower--tooltip-energy-used-in-preview-milliwatthour',
-                'TrackPower--tooltip-energy-used-in-preview-microwatthour'
+                'TrackPower--tooltip-energy-carbon-used-in-preview-watthour',
+                'TrackPower--tooltip-energy-carbon-used-in-preview-milliwatthour',
+                'TrackPower--tooltip-energy-carbon-used-in-preview-microwatthour'
               )
             : null}
           {this._formatPowerValue(
             this._computePowerSumForCommittedRange(committedRange),
-            'TrackPower--tooltip-energy-used-in-range-watthour',
-            'TrackPower--tooltip-energy-used-in-range-milliwatthour',
-            'TrackPower--tooltip-energy-used-in-range-microwatthour'
+            'TrackPower--tooltip-energy-carbon-used-in-range-watthour',
+            'TrackPower--tooltip-energy-carbon-used-in-range-milliwatthour',
+            'TrackPower--tooltip-energy-carbon-used-in-range-microwatthour'
           )}
         </TooltipDetails>
       </div>

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

@@ -27,7 +27,7 @@ exports[`TrackPower has a tooltip that matches the snapshot 1`] = `
       Energy used in the visible range
       :
     </div>
-    ⁨7.2⁩ µWh
+    ⁨7.2⁩ µWh (⁨0.003⁩ mg CO₂e)
   </div>
 </div>
 `;

src/types/libdef/npm/@tgwf/co2_vx.x.x.js

@@ -0,0 +1,18 @@
+// flow-typed signature: b2f76cdf45a9f020ccc81f4258e36209
+// flow-typed version: <<STUB>>/@tgwf/co2_v0.11.4/flow_v0.96.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   '@tgwf/co2'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module '@tgwf/co2' {
+  declare module.exports: any;
+}

yarn.lock

@@ -1832,6 +1832,13 @@
     "@testing-library/dom" "^8.5.0"
     "@types/react-dom" "^18.0.0"
 
+"@tgwf/co2@^0.11.4":
+  version "0.11.4"
+  resolved "https://registry.yarnpkg.com/@tgwf/co2/-/co2-0.11.4.tgz#1e919364a3b1ce5ed835fb6449f78a7c7277e3f4"
+  integrity sha512-I6e+WzdDpVbKLkTDJXAA0kJvOJQg1TNfTOu7PA5+FfxLEix9EqdigVK0Qd4flC82fLgTKSw4upuh+nCm4fFCaQ==
+  dependencies:
+    debug "^4.3.4"
+
 "@tootallnate/once@1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"