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