xref: /aosp_15_r20/external/perfetto/ui/src/frontend/home_page.ts (revision 6dbdd20afdafa5e3ca9b8809fa73465d530080dc) 
1// Copyright (C) 2018 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 {channelChanged, getNextChannel, setChannel} from '../core/channels';
17import {Anchor} from '../widgets/anchor';
18import {HotkeyGlyphs} from '../widgets/hotkey_glyphs';
19import {PageAttrs} from '../public/page';
20import {assetSrc} from '../base/assets';
21
22export class Hints implements m.ClassComponent {
23  view() {
24    return m(
25      '.home-page-hints',
26      m('.tagline', 'New!'),
27      m(
28        'ul',
29        m(
30          'li',
31          'New updated ',
32          m(
33            Anchor,
34            {
35              href: 'https://perfetto.dev/docs/visualization/perfetto-ui#tabs-v2',
36            },
37            'tabs',
38          ),
39          ' are extensible and user friendly.',
40        ),
41        m(
42          'li',
43          'Use ',
44          m(HotkeyGlyphs, {hotkey: 'W'}),
45          m(HotkeyGlyphs, {hotkey: 'A'}),
46          m(HotkeyGlyphs, {hotkey: 'S'}),
47          m(HotkeyGlyphs, {hotkey: 'D'}),
48          ' to navigate the trace.',
49        ),
50        m(
51          'li',
52          'Try the ',
53          m(
54            Anchor,
55            {
56              href: 'https://perfetto.dev/docs/visualization/perfetto-ui#command-palette',
57            },
58            'command palette,',
59          ),
60          ' press ',
61          m(HotkeyGlyphs, {hotkey: '!Mod+Shift+P'}),
62          '.',
63        ),
64      ),
65    );
66  }
67}
68
69export class HomePage implements m.ClassComponent<PageAttrs> {
70  view() {
71    return m(
72      '.page.home-page',
73      m(
74        '.home-page-center',
75        m(
76          '.home-page-title',
77          m(`img.logo[src=${assetSrc('assets/logo-3d.png')}]`),
78          'Perfetto',
79        ),
80        m(Hints),
81        m(
82          '.channel-select',
83          m('', 'Feeling adventurous? Try our bleeding edge Canary version'),
84          m('fieldset', mkChan('stable'), mkChan('canary'), m('.highlight')),
85          m(
86            `.home-page-reload${channelChanged() ? '.show' : ''}`,
87            'You need to reload the page for the changes to have effect',
88          ),
89        ),
90      ),
91      m(
92        'a.privacy',
93        {href: 'https://policies.google.com/privacy', target: '_blank'},
94        'Privacy policy',
95      ),
96    );
97  }
98}
99
100function mkChan(chan: string) {
101  const checked = getNextChannel() === chan ? '[checked=true]' : '';
102  return [
103    m(`input[type=radio][name=chan][id=chan_${chan}]${checked}`, {
104      onchange: () => {
105        setChannel(chan);
106      },
107    }),
108    m(`label[for=chan_${chan}]`, chan),
109  ];
110}
111