1// Copyright (C) 2023 The Android Open Source Project 2// 3// Licensed under the Apache License, Version 2.0 (the "License"); 4// you may not use this file except in compliance with the License. 5// You may obtain a copy of the License at 6// 7// http://www.apache.org/licenses/LICENSE-2.0 8// 9// Unless required by applicable law or agreed to in writing, software 10// distributed under the License is distributed on an "AS IS" BASIS, 11// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12// See the License for the specific language governing permissions and 13// limitations under the License. 14 15import m from 'mithril'; 16import { 17 Details, 18 DetailsSchema, 19} from '../../components/widgets/sql/details/details'; 20import {DetailsShell} from '../../widgets/details_shell'; 21import {GridLayout, GridLayoutColumn} from '../../widgets/grid_layout'; 22import {TrackEventDetailsPanel} from '../../public/details_panel'; 23import {Trace} from '../../public/trace'; 24import d = DetailsSchema; 25 26export class PageLoadDetailsPanel implements TrackEventDetailsPanel { 27 private data: Details; 28 29 constructor( 30 private readonly trace: Trace, 31 id: number, 32 ) { 33 this.data = new Details(this.trace, 'chrome_page_loads', id, { 34 'Navigation start': d.Timestamp('navigation_start_ts'), 35 'FCP event': d.Timestamp('fcp_ts'), 36 'FCP': d.Interval('navigation_start_ts', 'fcp'), 37 'LCP event': d.Timestamp('lcp_ts', {skipIfNull: true}), 38 'LCP': d.Interval('navigation_start_ts', 'lcp', {skipIfNull: true}), 39 'DOMContentLoaded': d.Timestamp('dom_content_loaded_event_ts', { 40 skipIfNull: true, 41 }), 42 'onload timestamp': d.Timestamp('load_event_ts', {skipIfNull: true}), 43 'performance.mark timings': d.Dict({ 44 data: { 45 'Fully loaded': d.Timestamp('mark_fully_loaded_ts', { 46 skipIfNull: true, 47 }), 48 'Fully visible': d.Timestamp('mark_fully_visible_ts', { 49 skipIfNull: true, 50 }), 51 'Interactive': d.Timestamp('mark_interactive_ts', { 52 skipIfNull: true, 53 }), 54 }, 55 skipIfEmpty: true, 56 }), 57 'Navigation ID': 'navigation_id', 58 'Browser process': d.SqlIdRef('process', 'browser_upid'), 59 'URL': d.URLValue('url'), 60 }); 61 } 62 63 render() { 64 return m( 65 DetailsShell, 66 { 67 title: 'Chrome Page Load', 68 }, 69 m(GridLayout, m(GridLayoutColumn, this.data.render())), 70 ); 71 } 72} 73