[RPP] Sort markers before appending

Markers (LCP, FCP, etc.) can come from different sources
(ExtensionDataHandler & PageLoadMetricsHandler). The
FlameChart::drawMarkers implementation assumes these markers are
appended in order so that they can be drawn correctly [1]. So, before
we append the concatenation of markers from both sources we need to
sort them.

This fixes a bug I noticed with extension markers being drawn on an
incorrect x position. [2]

[1] https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/legacy/components/perf_ui/FlameChart.ts;l=2635;drc=d9e4f0e53f58da1f8d8d84fa0d2e661226dd2d73
[2] https://screenshot.googleplex.com/5LiDg9Uv7LA8sSg

Fixed: 357056787
Change-Id: Ie60ad9dd92d7269f0fb5fda80af1114105160f8a
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5757144
Auto-Submit: Andres Olivares <andoli@chromium.org>
Reviewed-by: Nancy Li <nancyly@chromium.org>
Commit-Queue: Nancy Li <nancyly@chromium.org>

Author: and-oli

front_end/panels/timeline/TimingsTrackAppender.ts

@@ -105,7 +105,8 @@ export class TimingsTrackAppender implements TrackAppender {
   #appendMarkersAtLevel(currentLevel: number): number {
     let markers: (TraceEngine.Types.Extensions.SyntheticExtensionMarker|TraceEngine.Types.TraceEvents.PageLoadEvent)[] =
         this.#traceParsedData.PageLoadMetrics.allMarkerEvents;
-    markers = markers.concat(ExtensionDataGatherer.instance().getExtensionData().extensionMarkers);
+    markers = markers.concat(ExtensionDataGatherer.instance().getExtensionData().extensionMarkers)
+                  .sort((m1, m2) => m1.ts - m2.ts);
     if (markers.length === 0) {
       return currentLevel;
     }