perfetto-ui: Show/hide sidebar
There is now a button on the sidebar that allows it to be
hidden to make full use of screen real-estate for
looking at a trace.
Bug:130355032
Change-Id: I9a6e583bb8d63544dbe28bb0170922f664c52645
diff --git a/ui/src/frontend/panel_container.ts b/ui/src/frontend/panel_container.ts
index a57f068..9b3a7e6 100644
--- a/ui/src/frontend/panel_container.ts
+++ b/ui/src/frontend/panel_container.ts
@@ -25,6 +25,7 @@
RunningStatistics,
runningStatStr
} from './perf';
+import {TRACK_SHELL_WIDTH} from './track_constants';
/**
* If the panel container scrolls, the backing canvas height is
@@ -39,6 +40,7 @@
interface Attrs {
panels: AnyAttrsVnode[];
doesScroll: boolean;
+ kind: 'TRACKS'|'OVERVIEW'|'DETAILS';
}
export class PanelContainer implements m.ClassComponent<Attrs> {
@@ -149,10 +151,15 @@
const parentSizeChanged = this.readParentSizeFromDom(vnodeDom.dom);
const canvasSizeShouldChange =
- this.attrs.doesScroll ? parentSizeChanged : totalPanelHeightChanged;
+ parentSizeChanged || !this.attrs.doesScroll && totalPanelHeightChanged;
if (canvasSizeShouldChange) {
this.updateCanvasDimensions();
this.repositionCanvas();
+ if (this.attrs.kind === 'TRACKS') {
+ globals.frontendLocalState.timeScale.setLimitsPx(
+ 0, this.parentWidth - TRACK_SHELL_WIDTH);
+ }
+ this.redrawCanvas();
}
}
diff --git a/ui/src/frontend/sidebar.ts b/ui/src/frontend/sidebar.ts
index f56d719..9db20c1 100644
--- a/ui/src/frontend/sidebar.ts
+++ b/ui/src/frontend/sidebar.ts
@@ -129,7 +129,7 @@
i: 'folder_open'
},
{
- t: 'Truncate and open with legacy UI',
+ t: 'Truncate and open',
a: popupFileSelectionDialogOldUITruncate,
i: 'flip'
},
@@ -363,7 +363,14 @@
}
}
+
export class Sidebar implements m.ClassComponent {
+ private displaySidebar = 'show-sidebar';
+
+ private showing(): boolean {
+ return this.displaySidebar === 'show-sidebar';
+ }
+
view() {
const vdomSections = [];
for (const section of SECTIONS) {
@@ -425,8 +432,26 @@
m('.section-content', m('ul', videoVdomItems))));
}
return m(
- 'nav.sidebar',
- m('header', 'Perfetto'),
+ `nav.sidebar.${this.displaySidebar}`,
+ m('header',
+ 'Perfetto',
+ m('.sidebar-button',
+ {
+ style: {
+ left: (this.showing()) ? '46px' : '96px',
+ }
+ },
+ m('button',
+ m('i.material-icons',
+ {
+ title: (this.showing()) ? 'Hide menu' : 'Show menu',
+ onclick: () => {
+ this.displaySidebar =
+ (this.showing()) ? 'hide-sidebar' : 'show-sidebar';
+ globals.rafScheduler.scheduleFullRedraw();
+ },
+ },
+ 'menu')), )),
m('input[type=file]', {onchange: onInputElementFileSelectionChanged}),
...vdomSections);
}
diff --git a/ui/src/frontend/viewer_page.ts b/ui/src/frontend/viewer_page.ts
index 699037c..5a6c4b5 100644
--- a/ui/src/frontend/viewer_page.ts
+++ b/ui/src/frontend/viewer_page.ts
@@ -317,35 +317,38 @@
return m(
'.page',
m('.split-panel',
- m('.pan-and-zoom-content',
- {
- onclick: () => {
- // We don't want to deselect when panning/drag selecting.
- if (this.keepCurrentSelection) {
- this.keepCurrentSelection = false;
- return;
+ m('.pan-and-zoom-content',
+ {
+ onclick: () => {
+ // We don't want to deselect when panning/drag selecting.
+ if (this.keepCurrentSelection) {
+ this.keepCurrentSelection = false;
+ return;
+ }
+ globals.dispatch(Actions.deselect({}));
}
- globals.dispatch(Actions.deselect({}));
- }
- },
- m('.pinned-panel-container', m(PanelContainer, {
- doesScroll: false,
- panels: [
- m(OverviewTimelinePanel, {key: 'overview'}),
- m(TimeAxisPanel, {key: 'timeaxis'}),
- m(TimeSelectionPanel, {key: 'timeselection'}),
- m(NotesPanel, {key: 'notes'}),
- ...globals.state.pinnedTracks.map(
- id => m(TrackPanel, {key: id, id})),
- ],
- })),
- m('.scrolling-panel-container', m(PanelContainer, {
- doesScroll: true,
- panels: scrollingPanels,
- }))),
- m('.video-panel', (globals.state.videoEnabled &&
- globals.state.video != null) ?
- m(VideoPanel) : null)),
+ },
+ m('.pinned-panel-container', m(PanelContainer, {
+ doesScroll: false,
+ panels: [
+ m(OverviewTimelinePanel, {key: 'overview'}),
+ m(TimeAxisPanel, {key: 'timeaxis'}),
+ m(TimeSelectionPanel, {key: 'timeselection'}),
+ m(NotesPanel, {key: 'notes'}),
+ ...globals.state.pinnedTracks.map(
+ id => m(TrackPanel, {key: id, id})),
+ ],
+ kind: 'OVERVIEW',
+ })),
+ m('.scrolling-panel-container', m(PanelContainer, {
+ doesScroll: true,
+ panels: scrollingPanels,
+ kind: 'TRACKS',
+ }))),
+ m('.video-panel',
+ (globals.state.videoEnabled && globals.state.video != null) ?
+ m(VideoPanel) :
+ null)),
m('.details-content',
{
style: {
@@ -360,7 +363,8 @@
height: this.detailsHeight,
}),
m('.details-panel-container',
- m(PanelContainer, {doesScroll: true, panels: detailsPanels}))));
+ m(PanelContainer,
+ {doesScroll: true, panels: detailsPanels, kind: 'DETAILS'}))));
}
}