ui: Add notes about new features to the home page
Add a few notes on the front page linking to new (and not so
new features). Also add some docs to explain the features.
Slightly cleanup the the CSS for the home page to make it work
better when resizing.
Change-Id: Id8afbc8f751db34edf73a481e7402f659cc9abb2
diff --git a/docs/visualization/perfetto-ui.md b/docs/visualization/perfetto-ui.md
index 5f094b6..2fd1f89 100644
--- a/docs/visualization/perfetto-ui.md
+++ b/docs/visualization/perfetto-ui.md
@@ -4,6 +4,32 @@
the browser. It supports several different tracing formats, including the
perfetto proto trace format and the legacy json trace format.
+## New Features
+What features have come to the UI recently? See below.
+
+### Command Palette
+Tired of remembering the location of buttons in the Perfetto UI?
+Commands to the rescue!
+
+
+
+Commands are:
+- Discoverable & Searchable
+- Keyboard driven
+- Plugin-able
+- Context sensitive
+- ...with more added every day
+
+Access the command palette via `Ctrl-Shift-P` or by typing `>` in the
+search bar.
+
+### Changing the time format and offset
+
+
+
+The displayed timestamp format can be changed globally, cycling between seconds, raw nanoseconds and a new "timecode" format.
+We also have a new `TO_TIMECODE()` function in Trace Processor to print timestamps in the timecode format.
+
## UI Tips and Tricks
### Pivot Tables
diff --git a/test/data/ui-screenshots/ui-modal_dialog_dismiss_1.png.sha256 b/test/data/ui-screenshots/ui-modal_dialog_dismiss_1.png.sha256
index d3f8e1f..d79c836 100644
--- a/test/data/ui-screenshots/ui-modal_dialog_dismiss_1.png.sha256
+++ b/test/data/ui-screenshots/ui-modal_dialog_dismiss_1.png.sha256
@@ -1 +1 @@
-34f006d4b048b1ff73d29f442217d47d8b8371a546a88795aa40536fe8849816
\ No newline at end of file
+38a08a5232880f0c09e62f837a3839fe056c99853817b57dd98a0a5a0b9d6ee9
\ No newline at end of file
diff --git a/test/data/ui-screenshots/ui-routing_open_trace_and_go_back_to_landing_page.png.sha256 b/test/data/ui-screenshots/ui-routing_open_trace_and_go_back_to_landing_page.png.sha256
index f322f8b..a5e428b 100644
--- a/test/data/ui-screenshots/ui-routing_open_trace_and_go_back_to_landing_page.png.sha256
+++ b/test/data/ui-screenshots/ui-routing_open_trace_and_go_back_to_landing_page.png.sha256
@@ -1 +1 @@
-74d286045d5faf0a2f66374bc3d4cd16fd1c4c975b91636152adcfb0022a7931
\ No newline at end of file
+03ad81a20b383b8d73ab66e50c64b38932ebff83b686f5e96874621d4b17e3e7
\ No newline at end of file
diff --git a/ui/src/assets/home_page.scss b/ui/src/assets/home_page.scss
index f421b83..9785bd6 100644
--- a/ui/src/assets/home_page.scss
+++ b/ui/src/assets/home_page.scss
@@ -15,34 +15,41 @@
@import "widgets/theme";
.home-page {
- text-align: center;
- align-items: center;
display: grid;
+ align-items: stretch;
+ justify-items: center;
grid-template-columns: 1fr;
- grid-template-rows: 2em 1fr 60px;
- grid-template-areas: "." "center" "footer";
+ grid-template-rows: 1fr 60px;
+ grid-template-areas: "center" "footer";
.home-page-center {
grid-area: center;
+
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ align-items: center;
+
.logo {
- width: var(--track-shell-width);
+ height: 1em;
+ margin-right: 1rem;
}
.home-page-title {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
font-size: 60px;
margin: 25px;
text-align: center;
- font-family: "Roboto", sans-serif;
- font-weight: 400;
+ font-family: $pf-font;
color: #333;
}
.channel-select {
- font-family: "Roboto", sans-serif;
- font-size: 1.2rem;
- font-weight: 400;
- margin-top: 3em;
+ font-family: $pf-font;
--chan-width: 100px;
--chan-num: 2;
@@ -67,7 +74,8 @@
}
fieldset {
- margin: 30px auto 10px auto;
+ text-align: center;
+ margin: 1rem auto;
padding: 0;
position: relative;
background-color: hsl(218, 8%, 30%);
@@ -90,9 +98,7 @@
z-index: 2;
text-transform: uppercase;
font-size: 16px;
- font-family: "Roboto";
- font-weight: 400;
- letter-spacing: 0.3px;
+ font-family: $pf-font;
}
.highlight {
@@ -122,14 +128,46 @@
}
}
} // .channel-select
+
+ .home-page-hints {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ font-family: $pf-font;
+
+ .pf-hotkey {
+ display: inline-flex;
+ vertical-align: middle;
+ }
+
+ ul {
+ margin: 0;
+ padding: 0;
+
+ li {
+ padding-top: 0.5rem;
+ }
+ }
+
+ .tagline {
+ font-style: italic;
+ color: red;
+ }
+
+ img {
+ display: block;
+ object-fit: contain;
+ max-width: 30vw;
+ }
+ }
} // .home-page-center
.privacy {
grid-area: footer;
+ align-self: center;
text-decoration: none;
- font-family: "Roboto", sans-serif;
- font-weight: 400;
+ font-family: $pf-font;
color: #333;
- font-size: 15px;
}
} // .home-page
diff --git a/ui/src/frontend/home_page.ts b/ui/src/frontend/home_page.ts
index 11342b0..bbe09d7 100644
--- a/ui/src/frontend/home_page.ts
+++ b/ui/src/frontend/home_page.ts
@@ -16,9 +16,55 @@
import {channelChanged, getNextChannel, setChannel} from '../common/channels';
+import {Anchor} from './anchor';
import {globals} from './globals';
import {createPage} from './pages';
+import {HotkeyGlyphs} from './widgets/hotkey_glyphs';
+export class Hints implements m.ClassComponent {
+ view() {
+ return m(
+ '.home-page-hints',
+ m('.tagline', 'New!'),
+ m(
+ 'ul',
+ m(
+ 'li',
+ 'Use ',
+ m(HotkeyGlyphs, {hotkey: 'W'}),
+ m(HotkeyGlyphs, {hotkey: 'A'}),
+ m(HotkeyGlyphs, {hotkey: 'S'}),
+ m(HotkeyGlyphs, {hotkey: 'D'}),
+ ' to navigate the trace.',
+ ),
+ m('li',
+ 'Try the ',
+ m(Anchor,
+ {
+ href:
+ 'https://perfetto.dev/docs/visualization/perfetto-ui#command-pallete',
+ },
+ 'command pallete,'),
+ ' press ',
+ m(HotkeyGlyphs, {hotkey: '!Mod+Shift+P'}),
+ '.'),
+ m(
+ 'li',
+ 'Customize the ',
+ m(
+ Anchor,
+ {
+ href:
+ 'https://perfetto.dev/docs/visualization/perfetto-ui#changing-the-time-format-and-offset',
+ },
+ 'time format',
+ ),
+ '.',
+ ),
+ ),
+ );
+ }
+}
export const HomePage = createPage({
view() {
@@ -26,11 +72,15 @@
'.page.home-page',
m(
'.home-page-center',
- m('.home-page-title', 'Perfetto'),
- m(`img.logo[src=${globals.root}assets/logo-3d.png]`),
m(
- 'div.channel-select',
- m('div',
+ '.home-page-title',
+ m(`img.logo[src=${globals.root}assets/logo-3d.png]`),
+ 'Perfetto',
+ ),
+ m(Hints),
+ m(
+ '.channel-select',
+ m('',
'Feeling adventurous? Try our bleeding edge Canary version'),
m(
'fieldset',
diff --git a/ui/src/frontend/index.ts b/ui/src/frontend/index.ts
index 94b7ad3..dbf9eb1 100644
--- a/ui/src/frontend/index.ts
+++ b/ui/src/frontend/index.ts
@@ -157,6 +157,7 @@
'blob:',
'https://www.google-analytics.com',
'https://www.googletagmanager.com',
+ 'https://*.googleapis.com',
],
'style-src': [
`'self'`,
