chrome-devtools-frontend
Version:
Chrome DevTools UI
70 lines (63 loc) • 2.12 kB
HTML
<!--
Copyright 2023 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<!--
Use this file to render a track of the Performance Panel timeline in
isolation. Use the following search params to customize the track to
be rendered:
- track: The name of the track to be rendered. It could either be
A track added by the legacy system (it has a codepath that appends
it to the timeline in
TimelineFlameChartDataProvider.appendLegacyTrackData). In this
case the value of this param must be an entry from the
Trace.TimelineModel.TrackType enum.
Or it could be a track appended by the new system. In this case
the value must be an entry from
Timeline.CompatibilityTracksAppender.TrackNames.
- fileName: the name of the trace file to be loaded (without the
.json.gz extension).
Example: track_example.html?track=GPU&fileName=threejs-gpu
- optionally, you can also use trackFilter to filter the tracks by name.
This is useful if you are loading a track type that can contain multipole
tracks (e.g. TrackType.Other). Any tracks that contain the provided string will
be shown.
Example: track_example.html?track=Other&fileName=fenced-frame-fledge&trackFilter=Worklet
-->
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<style>
p {
font-size: 18px;
padding: 10px;
}
p.loading:after {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
animation: ellipsis steps(4,end) 900ms infinite;
content: "\2026"; /* ascii code for the ellipsis character */
width: 0px;
}
@keyframes ellipsis {
to {
width: 1.25em;
}
}
#container{
display: flex;
height: 300px;
}
</style>
</head>
<body>
<div id="container">
</div>
<script type="module" src="./track_example.js"></script>
</script>
</body>
</html>