perfetto-ui: A number of small ui fixes
- Improve layout of record page on small width windows.
- Fix search dropdown z-fighting issues.
- Add title to track names.
- Elide from lhs of track names rather than rhs.
(Shoutout to primiano's css magic)
Change-Id: Ifc07bcf20db7b6d28b14f04d5968d38d6bbf3626
diff --git a/ui/src/assets/common.scss b/ui/src/assets/common.scss
index 12af995..9eb3687 100644
--- a/ui/src/assets/common.scss
+++ b/ui/src/assets/common.scss
@@ -268,6 +268,8 @@
margin: 0;
font-size: 14px;
text-overflow: ellipsis;
+ text-align: left;
+ direction: rtl;
font-family: 'Google Sans';
color: hsl(213, 22%, 30%);
}
@@ -507,6 +509,8 @@
font-size: 14px;
text-overflow: ellipsis;
font-family: 'Google Sans';
+ text-align: left;
+ direction: rtl;
}
.fold-button {
grid-area: fold-button;
diff --git a/ui/src/assets/record.scss b/ui/src/assets/record.scss
index 7aa736e..05a0bad 100644
--- a/ui/src/assets/record.scss
+++ b/ui/src/assets/record.scss
@@ -22,11 +22,24 @@
@media (min-width: 2000px) {
grid-template: "config command pbtxt" auto / auto auto auto;
}
- grid-template: "config command" min-content "config pbtxt" auto / auto auto;
+ @media (min-width: 1000px) {
+ grid-template:
+ "config command" min-content
+ "config pbtxt" auto / auto auto;
+ }
+ grid-template:
+ "config" auto
+ "command" auto
+ "pbtxt" auto / auto;
}
&.two {
- grid-template: "config command" auto / auto auto;
+ @media (min-width: 1000px) {
+ grid-template: "config command" auto / auto auto;
+ }
+ grid-template:
+ "config" auto
+ "command" / auto;
}
.config {
diff --git a/ui/src/assets/topbar.scss b/ui/src/assets/topbar.scss
index 62adf06..671c119 100644
--- a/ui/src/assets/topbar.scss
+++ b/ui/src/assets/topbar.scss
@@ -19,7 +19,7 @@
.topbar {
grid-area: topbar;
position: relative;
- z-index: 1;
+ z-index: 3;
overflow: visible;
background-color: hsl(215, 1%, 95%);
box-shadow: 0px -3px 14px 2px #bbb;
diff --git a/ui/src/frontend/track_group_panel.ts b/ui/src/frontend/track_group_panel.ts
index 05f0357..6d58ca3 100644
--- a/ui/src/frontend/track_group_panel.ts
+++ b/ui/src/frontend/track_group_panel.ts
@@ -53,10 +53,15 @@
view({attrs}: m.CVnode<Attrs>) {
const collapsed = this.trackGroupState.collapsed;
+ const name = StripPathFromExecutable(this.trackGroupState.name);
return m(
`.track-group-panel[collapsed=${collapsed}]`,
m('.shell',
- m('h1', `${StripPathFromExecutable(this.trackGroupState.name)}`),
+ m('h1',
+ {
+ title: name,
+ },
+ name),
m('.fold-button',
{
onclick: () =>
diff --git a/ui/src/frontend/track_panel.ts b/ui/src/frontend/track_panel.ts
index 9ef3214..3e4755c 100644
--- a/ui/src/frontend/track_panel.ts
+++ b/ui/src/frontend/track_panel.ts
@@ -55,7 +55,11 @@
ondragleave: this.ondragleave.bind(this),
ondrop: this.ondrop.bind(this),
},
- m('h1', attrs.trackState.name),
+ m('h1',
+ {
+ title: attrs.trackState.name,
+ },
+ attrs.trackState.name),
m(TrackButton, {
action: Actions.toggleTrackPinned({trackId: attrs.trackState.id}),
i: isPinned(attrs.trackState.id) ? 'star' : 'star_border',
