Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Resize track shells horizontally #109

Open
wants to merge 4 commits into
base: reuse_timeline
Choose a base branch
from
Open

Resize track shells horizontally #109

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0c35081
Compute track-shell-width as needed
ALevansSamsung May 7, 2024
3d85dd4
Resize on notes-panel
ALevansSamsung May 7, 2024
e9a2e73
Resize on more parts of the vertical line
ALevansSamsung May 7, 2024
48658c3
Add an upper limit to track-shell-width
ALevansSamsung May 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ui/src/frontend/css_constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export function getCssStr(prop: string): string {
return window.getComputedStyle(doc).getPropertyValue(prop).trim();
}

function getCssNum(prop: string): number|undefined {
export function getCssNum(prop: string): number|undefined {
const str = getCssStr(prop);
if (str === undefined) return undefined;
const match = str.match(/^\W*(\d+)px(|\!important')$/);
Expand Down
7 changes: 4 additions & 3 deletions ui/src/frontend/flow_events_renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
// limitations under the License.

import {TPTime} from '../common/time';
import {TRACK_SHELL_WIDTH} from './css_constants';
import {getCssNum} from './css_constants';
import {ALL_CATEGORIES, getFlowCategories} from './flow_events_panel';
import {Flow, FlowPoint, globals} from './globals';
import {PanelVNode} from './panel';
Expand Down Expand Up @@ -156,8 +156,9 @@ export class FlowEventsRenderer {

render(ctx: CanvasRenderingContext2D, args: FlowEventsRendererArgs) {
ctx.save();
ctx.translate(TRACK_SHELL_WIDTH, 0);
ctx.rect(0, 0, args.canvasWidth - TRACK_SHELL_WIDTH, args.canvasHeight);
const trackShellWidth = getCssNum('--track-shell-width') || 0;
ctx.translate(trackShellWidth, 0);
ctx.rect(0, 0, args.canvasWidth - trackShellWidth, args.canvasHeight);
ctx.clip();

globals.connectedFlows.forEach((flow) => {
Expand Down
9 changes: 5 additions & 4 deletions ui/src/frontend/gridline_helper.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {assertTrue} from '../base/logging';
import {Span, tpDurationToSeconds} from '../common/time';
import {TPDuration, TPTime, TPTimeSpan} from '../common/time';

import {TRACK_SHELL_WIDTH, getCssStr} from './css_constants';
import {getCssNum, getCssStr} from './css_constants';
import {globals} from './globals';
import {TimeScale} from './time_scale';

Expand Down Expand Up @@ -216,9 +216,10 @@ export function drawGridLines(

const {earliest, latest} = globals.frontendLocalState.visibleWindow;
const span = new TPTimeSpan(earliest, latest);
if (width > TRACK_SHELL_WIDTH && span.duration > 0n) {
const maxMajorTicks = getMaxMajorTicks(width - TRACK_SHELL_WIDTH);
const map = timeScaleForVisibleWindow(TRACK_SHELL_WIDTH, width);
const trackShellWidth = getCssNum('--track-shell-width') || 0;
if (width > trackShellWidth && span.duration > 0n) {
const maxMajorTicks = getMaxMajorTicks(width - trackShellWidth);
const map = timeScaleForVisibleWindow(trackShellWidth, width);
for (const {type, time} of new TickGenerator(
span, maxMajorTicks, globals.state.traceTime.start)) {
const px = Math.floor(map.tpTimeToPx(time));
Expand Down
54 changes: 38 additions & 16 deletions ui/src/frontend/notes_panel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import {
bottomTabRegistry,
NewBottomTabArgs,
} from './bottom_tab';
import {getCssStr, TRACK_SHELL_WIDTH} from './css_constants';
import {getCssNum, getCssStr} from './css_constants';
import {PerfettoMouseEvent} from './events';
import {globals} from './globals';
import {
Expand All @@ -38,6 +38,7 @@ import {
import {Panel, PanelSize} from './panel';
import {isTraceLoaded} from './sidebar';
import {customButtonRegistry} from './button_registry';
import {resizeTrackShell} from './vertical_line_helper';

const FLAG_WIDTH = 16;
const AREA_TRIANGLE_WIDTH = 10;
Expand All @@ -61,11 +62,11 @@ export class NotesPanel extends Panel {

oncreate({dom}: m.CVnodeDOM) {
dom.addEventListener('mousemove', (e: Event) => {
this.hoveredX = (e as PerfettoMouseEvent).layerX - TRACK_SHELL_WIDTH;
this.hoveredX = (e as PerfettoMouseEvent).layerX - (getCssNum('--track-shell-width') || 0);
globals.rafScheduler.scheduleRedraw();
}, {passive: true});
dom.addEventListener('mouseenter', (e: Event) => {
this.hoveredX = (e as PerfettoMouseEvent).layerX - TRACK_SHELL_WIDTH;
this.hoveredX = (e as PerfettoMouseEvent).layerX - (getCssNum('--track-shell-width') || 0);
globals.rafScheduler.scheduleRedraw();
});
dom.addEventListener('mouseout', () => {
Expand All @@ -82,11 +83,32 @@ export class NotesPanel extends Panel {
'.notes-panel',
{
onclick: (e: PerfettoMouseEvent) => {
this.onClick(e.layerX - TRACK_SHELL_WIDTH, e.layerY);
this.onClick(e.layerX - (getCssNum('--track-shell-width') || 0), e.layerY);
e.stopPropagation();
},
onmousemove: (e: PerfettoMouseEvent)=>{
if (e.currentTarget instanceof HTMLElement &&
(
(e.layerX +2) >= (getCssNum('--track-shell-width') || 0) &&
(e.layerX -2) <= (getCssNum('--track-shell-width') || 0)
)
) {
document.addEventListener('mousedown', resizeTrackShell);
e.currentTarget.style.cursor = 'col-resize';
return;
} else if (e.currentTarget instanceof HTMLElement) {
e.currentTarget.style.cursor = 'unset';
}
document.removeEventListener('mousedown', resizeTrackShell);
},
onmouseleave: (e: PerfettoMouseEvent) =>{
if (e.currentTarget instanceof HTMLElement) {
e.currentTarget.style.cursor = 'unset';
document.removeEventListener('mousedown', resizeTrackShell);
}
},
oncontextmenu: (e: PerfettoMouseEvent)=>{
this.onRightClick(e.layerX - TRACK_SHELL_WIDTH, e.layerY);
this.onRightClick(e.layerX - (getCssNum('--track-shell-width') || 0), e.layerY);
e.stopPropagation();
},
},
Expand Down Expand Up @@ -145,20 +167,20 @@ export class NotesPanel extends Panel {

renderCanvas(ctx: CanvasRenderingContext2D, size: PanelSize) {
let aNoteIsHovered = false;

const trackShellWidth = (getCssNum('--track-shell-width') || 0);
ctx.fillStyle = getCssStr('--main-foreground-color');
ctx.fillRect(TRACK_SHELL_WIDTH - 2, 0, 2, size.height);
ctx.fillRect(trackShellWidth - 2, 0, 2, size.height);

ctx.save();
ctx.beginPath();
ctx.rect(TRACK_SHELL_WIDTH, 0, size.width - TRACK_SHELL_WIDTH, size.height);
ctx.rect(trackShellWidth, 0, size.width - trackShellWidth, size.height);
ctx.clip();

const span = globals.frontendLocalState.visibleWindow.timestampSpan;
const {visibleTimeScale} = globals.frontendLocalState;
if (size.width > TRACK_SHELL_WIDTH && span.duration > 0n) {
const maxMajorTicks = getMaxMajorTicks(size.width - TRACK_SHELL_WIDTH);
const map = timeScaleForVisibleWindow(TRACK_SHELL_WIDTH, size.width);
if (size.width > trackShellWidth && span.duration > 0n) {
const maxMajorTicks = getMaxMajorTicks(size.width - trackShellWidth);
const map = timeScaleForVisibleWindow(trackShellWidth, size.width);
for (const {type, time} of new TickGenerator(
span, maxMajorTicks, globals.state.traceTime.start)) {
const px = Math.floor(map.tpTimeToPx(time));
Expand Down Expand Up @@ -190,7 +212,7 @@ export class NotesPanel extends Panel {
((selection.kind === 'NOTE' && selection.id === note.id) ||
(selection.kind === 'AREA' && selection.noteId === note.id));
const x = visibleTimeScale.tpTimeToPx(timestamp);
const left = Math.floor(x + TRACK_SHELL_WIDTH);
const left = Math.floor(x + trackShellWidth);

// Draw flag or marker.
if (note.noteType === 'AREA') {
Expand All @@ -199,7 +221,7 @@ export class NotesPanel extends Panel {
ctx,
left,
Math.floor(
visibleTimeScale.tpTimeToPx(area.end) + TRACK_SHELL_WIDTH),
visibleTimeScale.tpTimeToPx(area.end) + trackShellWidth),
note.color,
isSelected);
} else {
Expand Down Expand Up @@ -230,7 +252,7 @@ export class NotesPanel extends Panel {
if (span.contains(timestamp)) {
globals.dispatch(Actions.setHoveredNoteTimestamp({ts: timestamp}));
const x = visibleTimeScale.tpTimeToPx(timestamp);
const left = Math.floor(x + TRACK_SHELL_WIDTH);
const left = Math.floor(x + trackShellWidth);
this.drawFlag(ctx, left, size.height, '#aaa', /* fill */ true);
}
}
Expand All @@ -245,7 +267,7 @@ export class NotesPanel extends Panel {
ctx.strokeStyle = color;
const topOffset = 10;
// Don't draw in the track shell section.
if (x >= globals.frontendLocalState.windowSpan.start + TRACK_SHELL_WIDTH) {
if (x >= globals.frontendLocalState.windowSpan.start + (getCssNum('--track-shell-width') || 0)) {
// Draw left triangle.
ctx.beginPath();
ctx.moveTo(x, topOffset);
Expand All @@ -266,7 +288,7 @@ export class NotesPanel extends Panel {

// Start line after track shell section, join triangles.
const startDraw = Math.max(
x, globals.frontendLocalState.windowSpan.start + TRACK_SHELL_WIDTH);
x, globals.frontendLocalState.windowSpan.start + (getCssNum('--track-shell-width') || 0));
ctx.beginPath();
ctx.moveTo(startDraw, topOffset);
ctx.lineTo(xEnd, topOffset);
Expand Down
16 changes: 8 additions & 8 deletions ui/src/frontend/overview_timeline_panel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import {

import {
OVERVIEW_TIMELINE_NON_VISIBLE_COLOR,
TRACK_SHELL_WIDTH,
getCssNum,
getCssStr,
} from './css_constants';
import {BorderDragStrategy} from './drag/border_drag_strategy';
Expand Down Expand Up @@ -59,7 +59,7 @@ export class OverviewTimelinePanel extends Panel {
this.width = newWidth;
this.traceTime = globals.stateTraceTimeTP();
const traceTime = globals.stateTraceTime();
const pxSpan = new PxSpan(TRACK_SHELL_WIDTH, this.width);
const pxSpan = new PxSpan((getCssNum('--track-shell-width') || 0), this.width);
this.timeScale = TimeScale.fromHPTimeSpan(traceTime, pxSpan);
if (this.gesture === undefined) {
this.gesture = new DragGestureHandler(
Expand Down Expand Up @@ -92,12 +92,12 @@ export class OverviewTimelinePanel extends Panel {
const headerHeight = 20;
const tracksHeight = size.height - headerHeight;

if (size.width > TRACK_SHELL_WIDTH && this.traceTime.duration > 0n) {
const maxMajorTicks = getMaxMajorTicks(this.width - TRACK_SHELL_WIDTH);
if (size.width > (getCssNum('--track-shell-width') || 0) && this.traceTime.duration > 0n) {
const maxMajorTicks = getMaxMajorTicks(this.width - (getCssNum('--track-shell-width') || 0));
const tickGen = new TickGenerator(
this.traceTime, maxMajorTicks, globals.state.traceTime.start);
ctx.fillStyle = getCssStr('--overview-background-color');
ctx.fillRect(TRACK_SHELL_WIDTH, headerHeight, this.width, size.height - headerHeight);
ctx.fillRect((getCssNum('--track-shell-width') || 0), headerHeight, this.width, size.height - headerHeight);
// Draw time labels on the top header.
ctx.font = '10px Roboto Condensed';
ctx.fillStyle = getCssStr('--main-foreground-color');
Expand Down Expand Up @@ -146,9 +146,9 @@ export class OverviewTimelinePanel extends Panel {

ctx.fillStyle = OVERVIEW_TIMELINE_NON_VISIBLE_COLOR;
ctx.fillRect(
TRACK_SHELL_WIDTH - 1,
(getCssNum('--track-shell-width') || 0) - 1,
headerHeight,
vizStartPx - TRACK_SHELL_WIDTH,
vizStartPx - (getCssNum('--track-shell-width') || 0),
tracksHeight);
ctx.fillRect(vizEndPx, headerHeight, this.width - vizEndPx, tracksHeight);

Expand Down Expand Up @@ -186,7 +186,7 @@ export class OverviewTimelinePanel extends Panel {
if (OverviewTimelinePanel.inBorderRange(x, startBound) ||
OverviewTimelinePanel.inBorderRange(x, endBound)) {
return 'ew-resize';
} else if (x < TRACK_SHELL_WIDTH) {
} else if (x < (getCssNum('--track-shell-width') || 0)) {
return 'default';
} else if (x < startBound || endBound < x) {
return 'crosshair';
Expand Down
6 changes: 3 additions & 3 deletions ui/src/frontend/panel_container.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import {assertExists, assertFalse, assertTrue} from '../base/logging';

import {
TOPBAR_HEIGHT,
TRACK_SHELL_WIDTH,
getCssNum,
getCssStr,
} from './css_constants';
import {
Expand Down Expand Up @@ -326,7 +326,7 @@ export class PanelContainer implements m.ClassComponent<Attrs> {
this.repositionCanvas();
if (this.attrs.kind === 'TRACKS') {
globals.frontendLocalState.updateLocalLimits(
0, this.parentWidth - TRACK_SHELL_WIDTH);
0, this.parentWidth - (getCssNum('--track-shell-width') || 0));
}
this.redrawCanvas();
}
Expand Down Expand Up @@ -508,7 +508,7 @@ export class PanelContainer implements m.ClassComponent<Attrs> {
this.ctx.lineWidth = 1;
const canvasYStart =
Math.floor(this.scrollTop - this.getCanvasOverdrawHeightPerSide());
this.ctx.translate(TRACK_SHELL_WIDTH, -canvasYStart);
this.ctx.translate((getCssNum('--track-shell-width') || 0), -canvasYStart);
this.ctx.strokeRect(
startX,
selectedTracksMaxY,
Expand Down
20 changes: 10 additions & 10 deletions ui/src/frontend/tickmark_panel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import m from 'mithril';

import {TPTimeSpan} from '../common/time';

import {getCssStr, TRACK_SHELL_WIDTH} from './css_constants';
import {getCssNum, getCssStr} from './css_constants';
import {globals} from './globals';
import {
getMaxMajorTicks,
Expand Down Expand Up @@ -61,19 +61,19 @@ export class TickmarkPanel extends Panel {
renderCanvas(ctx: CanvasRenderingContext2D, size: PanelSize) {
this.indicators = [];
const {visibleTimeScale} = globals.frontendLocalState;

const trackShellWidth = (getCssNum('--track-shell-width') || 0);
ctx.fillStyle = getCssStr('--main-foreground-color');
ctx.fillRect(TRACK_SHELL_WIDTH - 2, 0, 2, size.height);
ctx.fillRect(trackShellWidth - 2, 0, 2, size.height);

ctx.save();
ctx.beginPath();
ctx.rect(TRACK_SHELL_WIDTH, 0, size.width - TRACK_SHELL_WIDTH, size.height);
ctx.rect(trackShellWidth, 0, size.width - trackShellWidth, size.height);
ctx.clip();

const visibleSpan = globals.frontendLocalState.visibleWindow.timestampSpan;
if (size.width > TRACK_SHELL_WIDTH && visibleSpan.duration > 0n) {
const maxMajorTicks = getMaxMajorTicks(size.width - TRACK_SHELL_WIDTH);
const map = timeScaleForVisibleWindow(TRACK_SHELL_WIDTH, size.width);
if (size.width > trackShellWidth && visibleSpan.duration > 0n) {
const maxMajorTicks = getMaxMajorTicks(size.width - trackShellWidth);
const map = timeScaleForVisibleWindow(trackShellWidth, size.width);
for (const {type, time} of new TickGenerator(
visibleSpan, maxMajorTicks, globals.state.traceTime.start)) {
const px = Math.floor(map.tpTimeToPx(time));
Expand All @@ -92,8 +92,8 @@ export class TickmarkPanel extends Panel {
continue;
}
const rectStart =
Math.max(visibleTimeScale.tpTimeToPx(tStart), 0) + TRACK_SHELL_WIDTH;
const rectEnd = visibleTimeScale.tpTimeToPx(tEnd) + TRACK_SHELL_WIDTH;
Math.max(visibleTimeScale.tpTimeToPx(tStart), 0) + trackShellWidth;
const rectEnd = visibleTimeScale.tpTimeToPx(tEnd) + trackShellWidth;
ctx.fillStyle = '#dcdc3b';
const x = Math.floor(rectStart);
const w = Math.ceil(rectEnd - rectStart);
Expand All @@ -108,7 +108,7 @@ export class TickmarkPanel extends Panel {
if (index !== -1) {
const start = globals.currentSearchResults.tsStarts[index];
const triangleStart =
Math.max(visibleTimeScale.tpTimeToPx(start), 0) + TRACK_SHELL_WIDTH;
Math.max(visibleTimeScale.tpTimeToPx(start), 0) + trackShellWidth;
ctx.fillStyle = getCssStr('--main-foreground-color');
ctx.strokeStyle = getCssStr('--main-background-color');
ctx.beginPath();
Expand Down
Loading