Merge branch 'main' into fix-compare-url-upgraders

Author: mstange

locales/be/app.ftl

@@ -315,6 +315,7 @@ Home--additional-content-title = Загрузіць існуючыя профі
 Home--additional-content-content = Вы можаце <strong>перацягнуць</strong> файл профілю сюды, каб загрузіць яго, або:
 Home--compare-recordings-info = Вы таксама можаце параўнаць запісы. <a>Адкрыць інтэрфейс параўнання.</a>
 Home--your-recent-uploaded-recordings-title = Вашы нядаўна запампаваныя запісы
+Home--dark-mode-title = Цёмны рэжым
 # We replace the elements such as <perf> and <simpleperf> with links to the
 # documentation to use these tools.
 Home--load-files-from-other-tools2 =
@@ -569,6 +570,8 @@ MenuButtons--metaInfo--buffer-duration-seconds =
 MenuButtons--metaInfo--buffer-duration-unlimited = Неабмежавана
 MenuButtons--metaInfo--application = Праграма
 MenuButtons--metaInfo--name-and-version = Назва і версія:
+# The time between application startup and when the profiler was started
+MenuButtons--metaInfo--application-uptime2 = Час працы:
 MenuButtons--metaInfo--update-channel = Канал абнаўлення:
 MenuButtons--metaInfo--build-id = ID зборкі:
 MenuButtons--metaInfo--build-type = Тып зборкі:
@@ -881,6 +884,11 @@ TrackPower--tooltip-power-watt = { $value } Вт
 #   $value (String) - the power value at this location
 TrackPower--tooltip-power-milliwatt = { $value } мВт
     .label = Магутнасць
+# This is used in the tooltip when the instant power value uses the microwatt unit.
+# Variables:
+#   $value (String) - the power value at this location
+TrackPower--tooltip-power-microwatt = { $value } мкВт
+    .label = Энэргія
 # This is used in the tooltip when the power value uses the kilowatt unit.
 # Variables:
 #   $value (String) - the power value at this location
@@ -1175,6 +1183,17 @@ AssemblyView--show-button =
 # Assembly refers to the low-level programming language.
 AssemblyView--hide-button =
     .title = Схаваць прагляд асэмблера
+# The "◀" button above the assembly view.
+AssemblyView--prev-button =
+    .title = Назад
+# The "▶" button above the assembly view.
+AssemblyView--next-button =
+    .title = Далей
+# The label showing the current position and total count above the assembly view.
+# Variables:
+#   $current (Number) - The current position (1-indexed).
+#   $total (Number) - The total count.
+AssemblyView--position-label = { $current } з { $total }
 
 ## UploadedRecordingsHome
 ## This is the page that displays all the profiles that user has uploaded.

locales/el/app.ftl

@@ -348,6 +348,9 @@ Home--record-instructions =
     Για να αρχίσει η καταγραφή προφίλ, κάντε κλικ στο αντίστοιχο κουμπί ή χρησιμοποιήστε
     τις συντομεύσεις πληκτρολογίου. Το εικονίδιο είναι μπλε κατά την καταγραφή ενός προφίλ.
     Πατήστε το <kbd>Καταγραφή</kbd> για να φορτώσετε τα δεδομένα στο profiler.firefox.com.
+Home--instructions-content2 =
+    Η καταγραφή των προφίλ επιδόσεων απαιτεί το <a>{ -firefox-brand-name } για υπολογιστές</a>.
+    Ωστόσο, τα υπάρχοντα προφίλ μπορούν να προβληθούν σε όλα τα σύγχρονα προγράμματα περιήγησης.
 Home--fenix-instructions-directly =
     Μπορείτε να καταγράψετε προφίλ για το { -firefox-android-brand-name } απευθείας σε αυτήν τη συσκευή. Για
     περισσότερες πληροφορίες, διαβάστε το <a>Καταγραφή προφίλ του { -firefox-android-brand-name } απευθείας στη συσκευή</a>.

locales/en-GB/app.ftl

@@ -352,6 +352,9 @@ Home--record-instructions =
     To start profiling, click on the profiling button, or use the
     keyboard shortcuts. The icon is blue when a profile is recording.
     Hit <kbd>Capture</kbd> to load the data into profiler.firefox.com.
+Home--instructions-content2 =
+    Recording performance profiles requires <a>{ -firefox-brand-name } for desktop</a>.
+    However, existing profiles can be viewed in any modern browser.
 Home--fenix-instructions-directly =
     { -firefox-android-brand-name } can be profiled directly on this device. For
     more information, read <a>Profiling { -firefox-android-brand-name } directly on device</a>.

locales/es-CL/app.ftl

@@ -284,6 +284,9 @@ Home--enable-button-unavailable =
 # This message can be seen on https://main--perf-html.netlify.app/ .
 Home--web-channel-unavailable = Esta instancia del perfilador no pudo conectarse a WebChannel. Esto usualmente significa que está ejecutándose en un servidor diferente del especificado en la preferencia <code>devtools.performance.recording.ui-base-url</code>. Si quieres capturar nuevos perfiles con esta instancia, y otorgarle control programático del botón del menú del perfilador, puedes ir a <code>about:config</code> y cambiar la preferencia.
 Home--record-instructions = Para empezar a perfilar, haz clic en el botón de perfilado o utiliza los atajos del teclado. El icono se torna azul cuando se está grabando un perfil. Pulsa <kbd>Capturar</kbd> para cargar los datos en profiler.firefox.com.
+Home--instructions-content2 =
+    Registrar perfiles de rendimiento requiere de <a>{ -firefox-brand-name } para escritorio</a>.
+    Sin embargo, los perfiles existentes pueden ser vistos en cualquier navegador moderno.
 Home--fenix-instructions-directly = { -firefox-android-brand-name } puede ser perfilado directamente en este dispositivo. Para más información, consulta <a>Perfilar { -firefox-android-brand-name } directamente en el dispositivo</a>.
 Home--fenix-instructions-remotely = También puedes perfilar { -firefox-android-brand-name } de forma remota desde { -firefox-brand-name } para escritorio. Para más información, consulta esta documentación: <a>Perfilar { -firefox-android-brand-name } de forma remota</a>.
 Home--record-instructions-start-stop = Detener e iniciar perfilado

locales/ia/app.ftl

@@ -344,6 +344,9 @@ Home--record-instructions =
     Pro comenciar le profilage, clicca sur le button de profilage o usa le
     claves de accesso directe. Le icone es blau quando un profilo se registra.
     Pulsa <kbd>Capturar</kbd> pro cargar le datos in profiler.firefox.com.
+Home--instructions-content2 =
+    Registrar profilos de prestation require <a>{ -firefox-brand-name } pro scriptorio</a>.
+    Totevia, le profilos existente pote esser vidite in qualcunque navigator moderne.
 Home--fenix-instructions-directly =
     { -firefox-android-brand-name } pote esser profilate directemente sur iste
     apparato. Pro altere informationes, lege <a>Profilar { -firefox-android-brand-name }

locales/sv-SE/app.ftl

@@ -347,6 +347,9 @@ Home--record-instructions =
     För att starta profilering, klicka på profileringsknappen eller använd
     kortkommandona. Ikonen är blå när en profil spelas in. Tryck på
     <kbd>Fånga</kbd> för att ladda data till profiler.firefox.com.
+Home--instructions-content2 =
+    Inspelning av prestandaprofiler kräver <a>{ -firefox-brand-name } för datorer</a>.
+    Befintliga profiler kan dock visas i vilken modern webbläsare som helst.
 Home--fenix-instructions-directly =
     { -firefox-android-brand-name } kan profileras direkt på den här enheten. För
     mer information, läs <a>Profilering av { -firefox-android-brand-name } direkt på enheten</a>.

locales/tr/app.ftl

@@ -265,6 +265,9 @@ Home--record-instructions =
     Profillemeyi başlatmak için profilleme düğmesine tıklayın veya
     klavye kısayollarını kullanın. Profil kaydedilirken simge maviye dönüşür.
     Verileri profiler.firefox.com’a yüklemek için <kbd>Kaydet</kbd>’e tıklayın.
+Home--instructions-content2 =
+    Performans profilleri yalnızca <a>{ -firefox-brand-name }’un masaüstü sürümü</a> ile kaydedilebilir.
+    Ancak mevcut profiller herhangi bir modern tarayıcıda görüntülenebilir.
 Home--record-instructions-start-stop = Profillemeyi durdur ve başlat
 Home--record-instructions-capture-load = Profili yakala ve yükle
 Home--profiler-motto = Performans profili kaydedin. Analiz edin. Paylaşın. Web’i daha hızlı hale getirin.

src/components/app/BottomBox.tsx

@@ -30,7 +30,10 @@ import {
   getSourceViewCode,
   getAssemblyViewCode,
 } from 'firefox-profiler/selectors/code';
-import { getSourceViewFile } from 'firefox-profiler/selectors/profile';
+import {
+  getSourceViewFile,
+  getSourceViewStartLine,
+} from 'firefox-profiler/selectors/profile';
 import explicitConnect from 'firefox-profiler/utils/connect';
 
 import type { ConnectedProps } from 'firefox-profiler/utils/connect';
@@ -55,6 +58,7 @@ type StateProps = {
   readonly sourceViewScrollGeneration: number;
   readonly sourceViewScrollToLineNumber?: number;
   readonly sourceViewHighlightedLine: number | null;
+  readonly sourceViewStartLine: number;
   readonly globalLineTimings: LineTimings;
   readonly assemblyViewIsOpen: boolean;
   readonly assemblyViewNativeSymbol: NativeSymbolInfo | null;
@@ -161,6 +165,7 @@ class BottomBoxImpl extends React.PureComponent<Props> {
       sourceViewScrollGeneration,
       sourceViewScrollToLineNumber,
       sourceViewHighlightedLine,
+      sourceViewStartLine,
       assemblyViewIsOpen,
       assemblyViewScrollGeneration,
       assemblyViewScrollToInstructionAddress,
@@ -233,6 +238,7 @@ class BottomBoxImpl extends React.PureComponent<Props> {
                   scrollGeneration={sourceViewScrollGeneration}
                   scrollToLineNumber={sourceViewScrollToLineNumber}
                   highlightedLine={sourceViewHighlightedLine}
+                  startLine={sourceViewStartLine}
                   ref={this._sourceView}
                 />
               ) : null}
@@ -303,6 +309,7 @@ export const BottomBox = explicitConnect<{}, StateProps, DispatchProps>({
     sourceViewScrollGeneration: getSourceViewScrollGeneration(state),
     sourceViewScrollToLineNumber: getSourceViewScrollToLineNumber(state),
     sourceViewHighlightedLine: getSourceViewHighlightedLine(state),
+    sourceViewStartLine: getSourceViewStartLine(state),
     assemblyViewNativeSymbol: getAssemblyViewNativeSymbol(state),
     assemblyViewCode: getAssemblyViewCode(state),
     globalAddressTimings:

src/components/network-chart/NetworkChartRow.tsx

@@ -308,18 +308,28 @@ type State = {
   pageX: CssPixels;
   pageY: CssPixels;
   hovered: boolean | null;
+  clickPageX: CssPixels | null;
+  clickPageY: CssPixels | null;
 };
 
 export class NetworkChartRow extends React.PureComponent<
   NetworkChartRowProps,
   State
 > {
-  override state = {
+  override state: State = {
     pageX: 0,
     pageY: 0,
     hovered: false,
+    clickPageX: null,
+    clickPageY: null,
   };
 
+  override componentDidUpdate(prevProps: NetworkChartRowProps) {
+    if (prevProps.isSelected && !this.props.isSelected) {
+      this.setState({ clickPageX: null, clickPageY: null });
+    }
+  }
+
   _hoverIn = (event: React.MouseEvent<HTMLDivElement>) => {
     const pageX = event.pageX;
     const pageY = event.pageY;
@@ -348,6 +358,7 @@ export class NetworkChartRow extends React.PureComponent<
   _onMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
     const { markerIndex, onLeftClick, onRightClick } = this.props;
     if (e.button === 0) {
+      this.setState({ clickPageX: e.pageX, clickPageY: e.pageY });
       if (onLeftClick) {
         onLeftClick(markerIndex);
       }
@@ -467,6 +478,17 @@ export class NetworkChartRow extends React.PureComponent<
       }
     );
 
+    const clickX = this.state.clickPageX;
+    const clickY = this.state.clickPageY;
+
+    const isSticky = isSelected && clickX !== null && clickY !== null;
+    const showTooltip =
+      isSticky || (shouldDisplayTooltips() && this.state.hovered);
+
+    // When sticky, use the click coordinates; otherwise use the current mouse position.
+    const tooltipX = isSticky ? clickX : this.state.pageX;
+    const tooltipY = isSticky ? clickY : this.state.pageY;
+
     return (
       <div
         // The className below is responsible for the blue hover effect
@@ -488,19 +510,19 @@ export class NetworkChartRow extends React.PureComponent<
           width={width}
           timeRange={timeRange}
         />
-        {shouldDisplayTooltips() && this.state.hovered ? (
-          // This magic value "5" avoids the tooltip of being too close of the
-          // row, especially when we mouseEnter the row from the top edge.
-          <Tooltip mouseX={this.state.pageX} mouseY={this.state.pageY + 5}>
+        {showTooltip ? (
+          <Tooltip
+            mouseX={tooltipX}
+            mouseY={tooltipY}
+            className={isSticky ? 'clickable' : undefined}
+          >
             <TooltipMarker
               className="tooltipNetwork"
               markerIndex={markerIndex}
               marker={marker}
               threadsKey={this.props.threadsKey}
               restrictHeightWidth={true}
-              // Network Chart doesn't have sticky tooltips yet. But we should convert it
-              // to false once we implement sticky tooltips for the network chart.
-              hideFilterButton={true}
+              hideFilterButton={false}
             />
           </Tooltip>
         ) : null}

src/components/network-chart/index.tsx

@@ -97,6 +97,11 @@ class NetworkChartImpl extends React.PureComponent<Props> {
   override componentDidMount() {
     this.focus();
     this.scrollSelectionIntoView();
+    document.addEventListener('contextmenu', this._onContextMenu, true);
+  }
+
+  override componentWillUnmount() {
+    document.removeEventListener('contextmenu', this._onContextMenu, true);
   }
 
   override componentDidUpdate(prevProps: Props) {
@@ -143,6 +148,13 @@ class NetworkChartImpl extends React.PureComponent<Props> {
   };
 
   _onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
+    if (event.key === 'Escape') {
+      event.stopPropagation();
+      event.preventDefault();
+      this._onSelectionChange(null, { source: 'keyboard' });
+      return;
+    }
+
     const hasModifier = event.ctrlKey || event.altKey;
     const isNavigationKey =
       event.key.startsWith('Arrow') ||
@@ -226,21 +238,33 @@ class NetworkChartImpl extends React.PureComponent<Props> {
     }
   };
 
+  _onContextMenu = () => {
+    if (this.props.selectedNetworkMarkerIndex !== null) {
+      this._onSelectionChange(null, { source: 'pointer' });
+    }
+  };
+
   _onRightClick = (selectedNetworkMarkerIndex: MarkerIndex) => {
     const { threadsKey, changeRightClickedMarker } = this.props;
     changeRightClickedMarker(threadsKey, selectedNetworkMarkerIndex);
   };
 
   _onLeftClick = (selectedNetworkMarkerIndex: MarkerIndex) => {
-    this._onSelectionChange(selectedNetworkMarkerIndex, { source: 'pointer' });
+    if (this.props.selectedNetworkMarkerIndex === selectedNetworkMarkerIndex) {
+      this._onSelectionChange(null, { source: 'pointer' });
+    } else {
+      this._onSelectionChange(selectedNetworkMarkerIndex, {
+        source: 'pointer',
+      });
+    }
   };
 
   _selectWithKeyboard(selectedNetworkMarkerIndex: MarkerIndex) {
     this._onSelectionChange(selectedNetworkMarkerIndex, { source: 'keyboard' });
   }
 
   _onSelectionChange = (
-    selectedNetworkMarkerIndex: MarkerIndex,
+    selectedNetworkMarkerIndex: MarkerIndex | null,
     context: SelectionContext
   ) => {
     const { threadsKey, changeSelectedNetworkMarker } = this.props;
@@ -292,7 +316,9 @@ class NetworkChartImpl extends React.PureComponent<Props> {
     this.props.changeMouseTimePosition(null);
   };
 
-  _shouldDisplayTooltips = () => this.props.rightClickedMarkerIndex === null;
+  _shouldDisplayTooltips = () =>
+    this.props.rightClickedMarkerIndex === null &&
+    this.props.selectedNetworkMarkerIndex === null;
 
   _renderRow = (markerIndex: MarkerIndex, index: number): React.ReactNode => {
     const {