@quick-game/cli
Version:
Command line interface for rapid qg development
1,112 lines • 86.1 kB
JavaScript
/**
* Copyright (C) 2013 Google Inc. All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are
* met:
*
* * Redistributions of source code must retain the above copyright
* notice, this list of conditions and the following disclaimer.
* * Redistributions in binary form must reproduce the above
* copyright notice, this list of conditions and the following disclaimer
* in the documentation and/or other materials provided with the
* distribution.
* * Neither the name of Google Inc. nor the names of its
* contributors may be used to endorse or promote products derived from
* this software without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
* "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
* LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
* A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
* OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
* SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
* LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
* DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
* THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
import * as Common from '../../../../core/common/common.js';
import * as i18n from '../../../../core/i18n/i18n.js';
import * as Platform from '../../../../core/platform/platform.js';
import * as TraceEngine from '../../../../models/trace/trace.js';
import * as UI from '../../legacy.js';
import * as ThemeSupport from '../../theme_support/theme_support.js';
import { ChartViewport } from './ChartViewport.js';
import flameChartStyles from './flameChart.css.legacy.js';
import { DEFAULT_FONT_SIZE, getFontFamilyForCanvas } from './Font.js';
import { TimelineGrid } from './TimelineGrid.js';
const UIStrings = {
/**
*@description Aria accessible name in Flame Chart of the Performance panel
*/
flameChart: 'Flame Chart',
/**
*@description Text for the screen reader to announce a hovered group
*@example {Network} PH1
*/
sHovered: '{PH1} hovered',
/**
*@description Text for screen reader to announce a selected group.
*@example {Network} PH1
*/
sSelected: '{PH1} selected',
/**
*@description Text for screen reader to announce an expanded group
*@example {Network} PH1
*/
sExpanded: '{PH1} expanded',
/**
*@description Text for screen reader to announce a collapsed group
*@example {Network} PH1
*/
sCollapsed: '{PH1} collapsed',
};
const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/perf_ui/FlameChart.ts', UIStrings);
const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
export class FlameChartDelegate {
windowChanged(_startTime, _endTime, _animate) {
}
updateRangeSelection(_startTime, _endTime) {
}
updateSelectedGroup(_flameChart, _group) {
}
}
export class FlameChart extends Common.ObjectWrapper.eventMixin(UI.Widget.VBox) {
groupExpansionSetting;
groupExpansionState;
flameChartDelegate;
chartViewport;
dataProvider;
candyStripePattern;
viewportElement;
canvas;
entryInfo;
markerHighlighElement;
highlightElement;
selectedElement;
rulerEnabled;
barHeight;
textBaseline;
textPadding;
headerLeftPadding;
arrowSide;
expansionArrowIndent;
headerLabelXPadding;
headerLabelYPadding;
highlightedMarkerIndex;
/**
* Represents the index of the entry that the user's mouse cursor is over.
* Note that this is updated as the user moves their cursor: they do not have
* to click for this to be updated.
**/
highlightedEntryIndex;
/**
* Represents the index of the entry that is selected. For an entry to be
* selected, it has to be clicked by the user.
**/
selectedEntryIndex;
rawTimelineDataLength;
markerPositions;
lastMouseOffsetX;
selectedGroup;
keyboardFocusedGroup;
offsetWidth;
offsetHeight;
dragStartX;
dragStartY;
lastMouseOffsetY;
minimumBoundaryInternal;
maxDragOffset;
timelineLevels;
visibleLevelOffsets;
visibleLevels;
groupOffsets;
rawTimelineData;
forceDecorationCache;
entryColorsCache;
visibleLevelHeights;
totalTime;
#font;
constructor(dataProvider, flameChartDelegate, groupExpansionSetting) {
super(true);
this.#font = `${DEFAULT_FONT_SIZE} ${getFontFamilyForCanvas()}`;
this.registerRequiredCSS(flameChartStyles);
this.contentElement.classList.add('flame-chart-main-pane');
this.groupExpansionSetting = groupExpansionSetting;
this.groupExpansionState = groupExpansionSetting && groupExpansionSetting.get() || {};
this.flameChartDelegate = flameChartDelegate;
this.chartViewport = new ChartViewport(this);
this.chartViewport.show(this.contentElement);
this.dataProvider = dataProvider;
this.viewportElement = this.chartViewport.viewportElement;
this.canvas = this.viewportElement.createChild('canvas', 'fill');
this.candyStripePattern = null;
this.canvas.tabIndex = 0;
UI.ARIAUtils.setLabel(this.canvas, i18nString(UIStrings.flameChart));
UI.ARIAUtils.markAsTree(this.canvas);
this.setDefaultFocusedElement(this.canvas);
this.canvas.classList.add('flame-chart-canvas');
this.canvas.addEventListener('mousemove', this.onMouseMove.bind(this), false);
this.canvas.addEventListener('mouseout', this.onMouseOut.bind(this), false);
this.canvas.addEventListener('click', this.onClick.bind(this), false);
this.canvas.addEventListener('keydown', this.onKeyDown.bind(this), false);
this.canvas.addEventListener('contextmenu', this.#onContextMenu.bind(this), false);
this.entryInfo = this.viewportElement.createChild('div', 'flame-chart-entry-info');
this.markerHighlighElement = this.viewportElement.createChild('div', 'flame-chart-marker-highlight-element');
this.highlightElement = this.viewportElement.createChild('div', 'flame-chart-highlight-element');
this.selectedElement = this.viewportElement.createChild('div', 'flame-chart-selected-element');
this.canvas.addEventListener('focus', () => {
this.dispatchEventToListeners(Events.CanvasFocused);
}, false);
UI.UIUtils.installDragHandle(this.viewportElement, this.startDragging.bind(this), this.dragging.bind(this), this.endDragging.bind(this), null);
this.rulerEnabled = true;
this.barHeight = 17;
this.textBaseline = 5;
this.textPadding = 5;
this.chartViewport.setWindowTimes(dataProvider.minimumBoundary(), dataProvider.minimumBoundary() + dataProvider.totalTime());
this.headerLeftPadding = 6;
this.arrowSide = 8;
this.expansionArrowIndent = this.headerLeftPadding + this.arrowSide / 2;
this.headerLabelXPadding = 3;
this.headerLabelYPadding = 2;
this.highlightedMarkerIndex = -1;
this.highlightedEntryIndex = -1;
this.selectedEntryIndex = -1;
this.rawTimelineDataLength = 0;
this.markerPositions = new Map();
this.lastMouseOffsetX = 0;
this.selectedGroup = -1;
// Keyboard focused group is used to navigate groups irrespective of whether they are selectable or not
this.keyboardFocusedGroup = -1;
ThemeSupport.ThemeSupport.instance().addEventListener(ThemeSupport.ThemeChangeEvent.eventName, () => {
this.scheduleUpdate();
});
}
willHide() {
this.hideHighlight();
}
setBarHeight(value) {
this.barHeight = value;
}
setTextBaseline(value) {
this.textBaseline = value;
}
setTextPadding(value) {
this.textPadding = value;
}
enableRuler(enable) {
this.rulerEnabled = enable;
}
alwaysShowVerticalScroll() {
this.chartViewport.alwaysShowVerticalScroll();
}
disableRangeSelection() {
this.chartViewport.disableRangeSelection();
}
highlightEntry(entryIndex) {
if (this.highlightedEntryIndex === entryIndex) {
return;
}
if (!this.dataProvider.entryColor(entryIndex)) {
return;
}
this.highlightedEntryIndex = entryIndex;
this.updateElementPosition(this.highlightElement, this.highlightedEntryIndex);
this.dispatchEventToListeners(Events.EntryHighlighted, entryIndex);
}
hideHighlight() {
this.entryInfo.removeChildren();
this.highlightedEntryIndex = -1;
this.updateElementPosition(this.highlightElement, this.highlightedEntryIndex);
this.dispatchEventToListeners(Events.EntryHighlighted, -1);
}
createCandyStripePattern() {
// Set the candy stripe pattern to 17px so it repeats well.
const size = 17;
const candyStripeCanvas = document.createElement('canvas');
candyStripeCanvas.width = size;
candyStripeCanvas.height = size;
const ctx = candyStripeCanvas.getContext('2d');
// Rotate the stripe by 45deg to the right.
ctx.translate(size * 0.5, size * 0.5);
ctx.rotate(Math.PI * 0.25);
ctx.translate(-size * 0.5, -size * 0.5);
ctx.fillStyle = 'rgba(255, 0, 0, 0.8)';
for (let x = -size; x < size * 2; x += 3) {
ctx.fillRect(x, -size, 1, size * 3);
}
// Because we're using a canvas, we know createPattern won't return null
// https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-createpattern-dev
return ctx.createPattern(candyStripeCanvas, 'repeat');
}
resetCanvas() {
const ratio = window.devicePixelRatio;
const width = Math.round(this.offsetWidth * ratio);
const height = Math.round(this.offsetHeight * ratio);
this.canvas.width = width;
this.canvas.height = height;
this.canvas.style.width = `${width / ratio}px`;
this.canvas.style.height = `${height / ratio}px`;
}
windowChanged(startTime, endTime, animate) {
this.flameChartDelegate.windowChanged(startTime, endTime, animate);
}
updateRangeSelection(startTime, endTime) {
this.flameChartDelegate.updateRangeSelection(startTime, endTime);
}
setSize(width, height) {
this.offsetWidth = width;
this.offsetHeight = height;
}
startDragging(event) {
this.hideHighlight();
this.maxDragOffset = 0;
this.dragStartX = event.pageX;
this.dragStartY = event.pageY;
return true;
}
dragging(event) {
const dx = event.pageX - this.dragStartX;
const dy = event.pageY - this.dragStartY;
this.maxDragOffset = Math.max(this.maxDragOffset, Math.sqrt(dx * dx + dy * dy));
}
endDragging(_event) {
this.updateHighlight();
}
timelineData() {
if (!this.dataProvider) {
return null;
}
const timelineData = this.dataProvider.timelineData();
if (timelineData !== this.rawTimelineData ||
(timelineData && timelineData.entryStartTimes.length !== this.rawTimelineDataLength)) {
this.processTimelineData(timelineData);
}
return this.rawTimelineData || null;
}
revealEntry(entryIndex) {
const timelineData = this.timelineData();
if (!timelineData) {
return;
}
const timeLeft = this.chartViewport.windowLeftTime();
const timeRight = this.chartViewport.windowRightTime();
const entryStartTime = timelineData.entryStartTimes[entryIndex];
const entryTotalTime = timelineData.entryTotalTimes[entryIndex];
const entryEndTime = entryStartTime + entryTotalTime;
let minEntryTimeWindow = Math.min(entryTotalTime, timeRight - timeLeft);
const level = timelineData.entryLevels[entryIndex];
this.chartViewport.setScrollOffset(this.levelToOffset(level), this.levelHeight(level));
const minVisibleWidthPx = 30;
const futurePixelToTime = (timeRight - timeLeft) / this.offsetWidth;
minEntryTimeWindow = Math.max(minEntryTimeWindow, futurePixelToTime * minVisibleWidthPx);
if (timeLeft > entryEndTime) {
const delta = timeLeft - entryEndTime + minEntryTimeWindow;
this.windowChanged(timeLeft - delta, timeRight - delta, /* animate */ true);
}
else if (timeRight < entryStartTime) {
const delta = entryStartTime - timeRight + minEntryTimeWindow;
this.windowChanged(timeLeft + delta, timeRight + delta, /* animate */ true);
}
}
setWindowTimes(startTime, endTime, animate) {
this.chartViewport.setWindowTimes(startTime, endTime, animate);
this.updateHighlight();
}
onMouseMove(event) {
const mouseEvent = event;
this.lastMouseOffsetX = mouseEvent.offsetX;
this.lastMouseOffsetY = mouseEvent.offsetY;
if (!this.enabled()) {
return;
}
if (this.chartViewport.isDragging()) {
return;
}
if (this.coordinatesToGroupIndex(mouseEvent.offsetX, mouseEvent.offsetY, true /* headerOnly */) >= 0) {
this.hideHighlight();
this.viewportElement.style.cursor = 'pointer';
return;
}
this.updateHighlight();
}
updateHighlight() {
const entryIndex = this.coordinatesToEntryIndex(this.lastMouseOffsetX, this.lastMouseOffsetY);
if (entryIndex === -1) {
this.hideHighlight();
const group = this.coordinatesToGroupIndex(this.lastMouseOffsetX, this.lastMouseOffsetY, false /* headerOnly */);
if (group >= 0 && this.rawTimelineData && this.rawTimelineData.groups &&
this.rawTimelineData.groups[group].selectable) {
this.viewportElement.style.cursor = 'pointer';
}
else {
this.viewportElement.style.cursor = 'default';
}
return;
}
if (this.chartViewport.isDragging()) {
return;
}
this.updatePopover(entryIndex);
this.viewportElement.style.cursor = this.dataProvider.canJumpToEntry(entryIndex) ? 'pointer' : 'default';
this.highlightEntry(entryIndex);
}
onMouseOut() {
this.lastMouseOffsetX = -1;
this.lastMouseOffsetY = -1;
this.hideHighlight();
}
updatePopover(entryIndex) {
if (entryIndex === this.highlightedEntryIndex) {
this.updatePopoverOffset();
return;
}
this.entryInfo.removeChildren();
const popoverElement = this.dataProvider.prepareHighlightedEntryInfo(entryIndex);
if (popoverElement) {
this.entryInfo.appendChild(popoverElement);
this.updatePopoverOffset();
}
}
updatePopoverOffset() {
const mouseX = this.lastMouseOffsetX;
const mouseY = this.lastMouseOffsetY;
const parentWidth = this.entryInfo.parentElement ? this.entryInfo.parentElement.clientWidth : 0;
const parentHeight = this.entryInfo.parentElement ? this.entryInfo.parentElement.clientHeight : 0;
const infoWidth = this.entryInfo.clientWidth;
const infoHeight = this.entryInfo.clientHeight;
const /** @const */ offsetX = 10;
const /** @const */ offsetY = 6;
let x;
let y;
for (let quadrant = 0; quadrant < 4; ++quadrant) {
const dx = quadrant & 2 ? -offsetX - infoWidth : offsetX;
const dy = quadrant & 1 ? -offsetY - infoHeight : offsetY;
x = Platform.NumberUtilities.clamp(mouseX + dx, 0, parentWidth - infoWidth);
y = Platform.NumberUtilities.clamp(mouseY + dy, 0, parentHeight - infoHeight);
if (x >= mouseX || mouseX >= x + infoWidth || y >= mouseY || mouseY >= y + infoHeight) {
break;
}
}
this.entryInfo.style.left = x + 'px';
this.entryInfo.style.top = y + 'px';
}
onClick(event) {
const mouseEvent = event;
this.focus();
// onClick comes after dragStart and dragEnd events.
// So if there was drag (mouse move) in the middle of that events
// we skip the click. Otherwise we jump to the sources.
const clickThreshold = 5;
if (this.maxDragOffset > clickThreshold) {
return;
}
this.selectGroup(this.coordinatesToGroupIndex(mouseEvent.offsetX, mouseEvent.offsetY, false /* headerOnly */));
this.toggleGroupExpand(this.coordinatesToGroupIndex(mouseEvent.offsetX, mouseEvent.offsetY, true /* headerOnly */));
const timelineData = this.timelineData();
if (mouseEvent.shiftKey && this.highlightedEntryIndex !== -1 && timelineData) {
const start = timelineData.entryStartTimes[this.highlightedEntryIndex];
const end = start + timelineData.entryTotalTimes[this.highlightedEntryIndex];
this.chartViewport.setRangeSelection(start, end);
}
else {
this.chartViewport.onClick(mouseEvent);
this.dispatchEventToListeners(Events.EntryInvoked, this.highlightedEntryIndex);
}
}
selectGroup(groupIndex) {
if (groupIndex < 0 || this.selectedGroup === groupIndex) {
return;
}
if (!this.rawTimelineData) {
return;
}
const groups = this.rawTimelineData.groups;
if (!groups) {
return;
}
this.keyboardFocusedGroup = groupIndex;
this.scrollGroupIntoView(groupIndex);
const groupName = groups[groupIndex].name;
if (!groups[groupIndex].selectable) {
this.deselectAllGroups();
UI.ARIAUtils.alert(i18nString(UIStrings.sHovered, { PH1: groupName }));
}
else {
this.selectedGroup = groupIndex;
this.flameChartDelegate.updateSelectedGroup(this, groups[groupIndex]);
this.resetCanvas();
this.draw();
UI.ARIAUtils.alert(i18nString(UIStrings.sSelected, { PH1: groupName }));
}
}
deselectAllGroups() {
this.selectedGroup = -1;
this.flameChartDelegate.updateSelectedGroup(this, null);
this.resetCanvas();
this.draw();
}
deselectAllEntries() {
this.selectedEntryIndex = -1;
this.resetCanvas();
this.draw();
}
isGroupFocused(index) {
return index === this.selectedGroup || index === this.keyboardFocusedGroup;
}
scrollGroupIntoView(index) {
if (index < 0) {
return;
}
if (!this.rawTimelineData) {
return;
}
const groups = this.rawTimelineData.groups;
const groupOffsets = this.groupOffsets;
if (!groupOffsets || !groups) {
return;
}
const groupTop = groupOffsets[index];
let nextOffset = groupOffsets[index + 1];
if (index === groups.length - 1) {
nextOffset += groups[index].style.padding;
}
// For the top group, scroll all the way to the top of the chart
// to accommodate the bar with time markers
const scrollTop = index === 0 ? 0 : groupTop;
const scrollHeight = Math.min(nextOffset - scrollTop, this.chartViewport.chartHeight());
this.chartViewport.setScrollOffset(scrollTop, scrollHeight);
}
toggleGroupExpand(groupIndex) {
if (groupIndex < 0 || !this.isGroupCollapsible(groupIndex)) {
return;
}
if (!this.rawTimelineData || !this.rawTimelineData.groups) {
return;
}
this.expandGroup(groupIndex, !this.rawTimelineData.groups[groupIndex].expanded /* setExpanded */);
}
expandGroup(groupIndex, setExpanded = true, propagatedExpand = false) {
if (groupIndex < 0 || !this.isGroupCollapsible(groupIndex)) {
return;
}
if (!this.rawTimelineData) {
return;
}
const groups = this.rawTimelineData.groups;
if (!groups) {
return;
}
const group = groups[groupIndex];
group.expanded = setExpanded;
this.groupExpansionState[group.name] = group.expanded;
if (this.groupExpansionSetting) {
this.groupExpansionSetting.set(this.groupExpansionState);
}
this.updateLevelPositions();
this.updateHighlight();
if (!group.expanded) {
const timelineData = this.timelineData();
if (timelineData) {
const level = timelineData.entryLevels[this.selectedEntryIndex];
if (this.selectedEntryIndex >= 0 && level >= group.startLevel &&
(groupIndex >= groups.length - 1 || groups[groupIndex + 1].startLevel > level)) {
this.selectedEntryIndex = -1;
}
}
}
this.updateHeight();
this.resetCanvas();
this.draw();
this.scrollGroupIntoView(groupIndex);
// We only want to read expanded/collapsed state on user inputted expand/collapse
if (!propagatedExpand) {
const groupName = groups[groupIndex].name;
const content = group.expanded ? i18nString(UIStrings.sExpanded, { PH1: groupName }) :
i18nString(UIStrings.sCollapsed, { PH1: groupName });
UI.ARIAUtils.alert(content);
}
}
#onContextMenu(_event) {
// The context menu only applies if the user is hovering over an individual entry.
if (this.highlightedEntryIndex === -1) {
return;
}
const data = this.timelineData();
if (!data) {
return;
}
const group = data.groups.at(this.selectedGroup);
// Early exit here if there is no group or:
// 1. The group is not expanded: it needs to be expanded to allow the
// context menu actions to occur.
// 2. The group does not have the showStackContextMenu flag which indicates
// that it does not show entries that support the stack actions.
if (!group || !group.expanded || !group.showStackContextMenu) {
return;
}
// TODO(crbug.com/1469887): implement a context menu that supports stack editing options. See bug for more details.
// At this point once a context menu is implemented we will also want to
// update the selected index to match the highlighted index, which
// represents the entry under the cursor where the user has right clicked
// to trigger a context menu.
}
onKeyDown(e) {
if (!UI.KeyboardShortcut.KeyboardShortcut.hasNoModifiers(e) || !this.timelineData()) {
return;
}
const eventHandled = this.handleSelectionNavigation(e);
// Handle keyboard navigation in groups
if (!eventHandled && this.rawTimelineData && this.rawTimelineData.groups) {
this.handleKeyboardGroupNavigation(e);
}
}
bindCanvasEvent(eventName, onEvent) {
this.canvas.addEventListener(eventName, onEvent);
}
handleKeyboardGroupNavigation(event) {
const keyboardEvent = event;
let handled = false;
let entrySelected = false;
if (keyboardEvent.code === 'ArrowUp') {
handled = this.selectPreviousGroup();
}
else if (keyboardEvent.code === 'ArrowDown') {
handled = this.selectNextGroup();
}
else if (keyboardEvent.code === 'ArrowLeft') {
if (this.keyboardFocusedGroup >= 0) {
this.expandGroup(this.keyboardFocusedGroup, false /* setExpanded */);
handled = true;
}
}
else if (keyboardEvent.code === 'ArrowRight') {
if (this.keyboardFocusedGroup >= 0) {
this.expandGroup(this.keyboardFocusedGroup, true /* setExpanded */);
this.selectFirstChild();
handled = true;
}
}
else if (keyboardEvent.key === 'Enter') {
entrySelected = this.selectFirstEntryInCurrentGroup();
handled = entrySelected;
}
if (handled && !entrySelected) {
this.deselectAllEntries();
}
if (handled) {
keyboardEvent.consume(true);
}
}
selectFirstEntryInCurrentGroup() {
if (!this.rawTimelineData) {
return false;
}
const allGroups = this.rawTimelineData.groups;
if (this.keyboardFocusedGroup < 0 || !allGroups) {
return false;
}
const group = allGroups[this.keyboardFocusedGroup];
const startLevelInGroup = group.startLevel;
// Return if no levels in this group
if (startLevelInGroup < 0) {
return false;
}
// Make sure this is the innermost nested group with this startLevel
// This is because a parent group also contains levels of all its child groups
// So check if the next group has the same level, if it does, user should
// go to that child group to select this entry
if (this.keyboardFocusedGroup < allGroups.length - 1 &&
allGroups[this.keyboardFocusedGroup + 1].startLevel === startLevelInGroup) {
return false;
}
if (!this.timelineLevels) {
return false;
}
// Get first (default) entry in startLevel of selected group
const firstEntryIndex = this.timelineLevels[startLevelInGroup][0];
this.expandGroup(this.keyboardFocusedGroup, true /* setExpanded */);
this.setSelectedEntry(firstEntryIndex);
return true;
}
selectPreviousGroup() {
if (this.keyboardFocusedGroup <= 0) {
return false;
}
const groupIndexToSelect = this.getGroupIndexToSelect(-1 /* offset */);
this.selectGroup(groupIndexToSelect);
return true;
}
selectNextGroup() {
if (!this.rawTimelineData || !this.rawTimelineData.groups) {
return false;
}
if (this.keyboardFocusedGroup >= this.rawTimelineData.groups.length - 1) {
return false;
}
const groupIndexToSelect = this.getGroupIndexToSelect(1 /* offset */);
this.selectGroup(groupIndexToSelect);
return true;
}
getGroupIndexToSelect(offset) {
if (!this.rawTimelineData || !this.rawTimelineData.groups) {
throw new Error('No raw timeline data');
}
const allGroups = this.rawTimelineData.groups;
let groupIndexToSelect = this.keyboardFocusedGroup;
let groupName, groupWithSubNestingLevel;
do {
groupIndexToSelect += offset;
groupName = this.rawTimelineData.groups[groupIndexToSelect].name;
groupWithSubNestingLevel = this.keyboardFocusedGroup !== -1 &&
allGroups[groupIndexToSelect].style.nestingLevel > allGroups[this.keyboardFocusedGroup].style.nestingLevel;
} while (groupIndexToSelect > 0 && groupIndexToSelect < allGroups.length - 1 &&
(!groupName || groupWithSubNestingLevel));
return groupIndexToSelect;
}
selectFirstChild() {
if (!this.rawTimelineData || !this.rawTimelineData.groups) {
return;
}
const allGroups = this.rawTimelineData.groups;
if (this.keyboardFocusedGroup < 0 || this.keyboardFocusedGroup >= allGroups.length - 1) {
return;
}
const groupIndexToSelect = this.keyboardFocusedGroup + 1;
if (allGroups[groupIndexToSelect].style.nestingLevel > allGroups[this.keyboardFocusedGroup].style.nestingLevel) {
this.selectGroup(groupIndexToSelect);
}
}
handleSelectionNavigation(event) {
if (this.selectedEntryIndex === -1) {
return false;
}
const timelineData = this.timelineData();
if (!timelineData) {
return false;
}
function timeComparator(time, entryIndex) {
if (!timelineData) {
throw new Error('No timeline data');
}
return time - timelineData.entryStartTimes[entryIndex];
}
function entriesIntersect(entry1, entry2) {
if (!timelineData) {
throw new Error('No timeline data');
}
const start1 = timelineData.entryStartTimes[entry1];
const start2 = timelineData.entryStartTimes[entry2];
const end1 = start1 + timelineData.entryTotalTimes[entry1];
const end2 = start2 + timelineData.entryTotalTimes[entry2];
return start1 < end2 && start2 < end1;
}
const keyboardEvent = event;
const keys = UI.KeyboardShortcut.Keys;
if (keyboardEvent.keyCode === keys.Left.code || keyboardEvent.keyCode === keys.Right.code) {
const level = timelineData.entryLevels[this.selectedEntryIndex];
const levelIndexes = this.timelineLevels ? this.timelineLevels[level] : [];
let indexOnLevel = Platform.ArrayUtilities.lowerBound(levelIndexes, this.selectedEntryIndex, (a, b) => a - b);
indexOnLevel += keyboardEvent.keyCode === keys.Left.code ? -1 : 1;
event.consume(true);
if (indexOnLevel >= 0 && indexOnLevel < levelIndexes.length) {
this.dispatchEventToListeners(Events.EntrySelected, levelIndexes[indexOnLevel]);
}
return true;
}
if (keyboardEvent.keyCode === keys.Up.code || keyboardEvent.keyCode === keys.Down.code) {
let level = timelineData.entryLevels[this.selectedEntryIndex];
level += keyboardEvent.keyCode === keys.Up.code ? -1 : 1;
if (level < 0 || (this.timelineLevels && level >= this.timelineLevels.length)) {
this.deselectAllEntries();
keyboardEvent.consume(true);
return true;
}
const entryTime = timelineData.entryStartTimes[this.selectedEntryIndex] +
timelineData.entryTotalTimes[this.selectedEntryIndex] / 2;
const levelIndexes = this.timelineLevels ? this.timelineLevels[level] : [];
let indexOnLevel = Platform.ArrayUtilities.upperBound(levelIndexes, entryTime, timeComparator) - 1;
if (!entriesIntersect(this.selectedEntryIndex, levelIndexes[indexOnLevel])) {
++indexOnLevel;
if (indexOnLevel >= levelIndexes.length ||
!entriesIntersect(this.selectedEntryIndex, levelIndexes[indexOnLevel])) {
if (keyboardEvent.code === 'ArrowDown') {
return false;
}
// Stay in the current group and give focus to the parent group instead of entries
this.deselectAllEntries();
keyboardEvent.consume(true);
return true;
}
}
keyboardEvent.consume(true);
this.dispatchEventToListeners(Events.EntrySelected, levelIndexes[indexOnLevel]);
return true;
}
if (event.key === 'Enter') {
event.consume(true);
this.dispatchEventToListeners(Events.EntryInvoked, this.selectedEntryIndex);
return true;
}
return false;
}
coordinatesToEntryIndex(x, y) {
if (x < 0 || y < 0) {
return -1;
}
const timelineData = this.timelineData();
if (!timelineData) {
return -1;
}
y += this.chartViewport.scrollOffset();
if (!this.visibleLevelOffsets) {
throw new Error('No visible level offsets');
}
const cursorLevel = Platform.ArrayUtilities.upperBound(this.visibleLevelOffsets, y, Platform.ArrayUtilities.DEFAULT_COMPARATOR) - 1;
if (cursorLevel < 0 || (this.visibleLevels && !this.visibleLevels[cursorLevel])) {
return -1;
}
const offsetFromLevel = y - this.visibleLevelOffsets[cursorLevel];
if (offsetFromLevel > this.levelHeight(cursorLevel)) {
return -1;
}
// Check markers first.
for (const [index, pos] of this.markerPositions) {
if (timelineData.entryLevels[index] !== cursorLevel) {
continue;
}
if (pos.x <= x && x < pos.x + pos.width) {
return index;
}
}
// Check regular entries.
const entryStartTimes = timelineData.entryStartTimes;
const entriesOnLevel = this.timelineLevels ? this.timelineLevels[cursorLevel] : [];
if (!entriesOnLevel || !entriesOnLevel.length) {
return -1;
}
const cursorTime = this.chartViewport.pixelToTime(x);
const indexOnLevel = Math.max(Platform.ArrayUtilities.upperBound(entriesOnLevel, cursorTime, (time, entryIndex) => time - entryStartTimes[entryIndex]) -
1, 0);
function checkEntryHit(entryIndex) {
if (entryIndex === undefined) {
return false;
}
if (!timelineData) {
return false;
}
const startTime = entryStartTimes[entryIndex];
const duration = timelineData.entryTotalTimes[entryIndex];
const startX = this.chartViewport.timeToPosition(startTime);
const endX = this.chartViewport.timeToPosition(startTime + duration);
const barThresholdPx = 3;
return startX - barThresholdPx < x && x < endX + barThresholdPx;
}
let entryIndex = entriesOnLevel[indexOnLevel];
if (checkEntryHit.call(this, entryIndex)) {
return entryIndex;
}
entryIndex = entriesOnLevel[indexOnLevel + 1];
if (checkEntryHit.call(this, entryIndex)) {
return entryIndex;
}
return -1;
}
coordinatesToGroupIndex(x, y, headerOnly) {
if (!this.rawTimelineData || !this.rawTimelineData.groups || !this.groupOffsets) {
return -1;
}
if (x < 0 || y < 0) {
return -1;
}
y += this.chartViewport.scrollOffset();
const groups = this.rawTimelineData.groups || [];
const group = Platform.ArrayUtilities.upperBound(this.groupOffsets, y, Platform.ArrayUtilities.DEFAULT_COMPARATOR) - 1;
if (group < 0 || group >= groups.length) {
return -1;
}
const height = headerOnly ? groups[group].style.height : this.groupOffsets[group + 1] - this.groupOffsets[group];
if (y - this.groupOffsets[group] >= height) {
return -1;
}
if (!headerOnly) {
return group;
}
const context = this.canvas.getContext('2d');
context.save();
context.font = this.#font;
const right = this.headerLeftPadding + this.labelWidthForGroup(context, groups[group]);
context.restore();
if (x > right) {
return -1;
}
return group;
}
markerIndexBeforeTime(time) {
const timelineData = this.timelineData();
if (!timelineData) {
throw new Error('No timeline data');
}
const markers = timelineData.markers;
if (!markers) {
throw new Error('No timeline markers');
}
return Platform.ArrayUtilities.lowerBound(timelineData.markers, time, (markerTimestamp, marker) => markerTimestamp - marker.startTime());
}
draw() {
const timelineData = this.timelineData();
if (!timelineData) {
return;
}
const canvasWidth = this.offsetWidth;
const canvasHeight = this.offsetHeight;
const context = this.canvas.getContext('2d');
context.save();
const ratio = window.devicePixelRatio;
const top = this.chartViewport.scrollOffset();
context.scale(ratio, ratio);
context.fillStyle = 'rgba(0, 0, 0, 0)';
context.fillRect(0, 0, canvasWidth, canvasHeight);
context.translate(0, -top);
context.font = this.#font;
const { markerIndices, colorBuckets, titleIndices } = this.getDrawableData(context, timelineData);
context.save();
this.forEachGroupInViewport((offset, index, group, isFirst, groupHeight) => {
if (this.isGroupFocused(index)) {
context.fillStyle =
ThemeSupport.ThemeSupport.instance().getComputedValue('--selected-group-background', this.contentElement);
context.fillRect(0, offset, canvasWidth, groupHeight - group.style.padding);
}
});
context.restore();
for (const [color, { indexes }] of colorBuckets) {
this.#drawGenericEvents(context, timelineData, color, indexes);
}
const allIndexes = Array.from(colorBuckets.values()).map(x => x.indexes).flat();
this.#drawDecorations(context, timelineData, allIndexes);
this.drawMarkers(context, timelineData, markerIndices);
this.drawEventTitles(context, timelineData, titleIndices, canvasWidth);
context.restore();
this.drawGroupHeaders(canvasWidth, canvasHeight);
this.drawFlowEvents(context, canvasWidth, canvasHeight);
this.drawMarkerLines();
const dividersData = TimelineGrid.calculateGridOffsets(this);
const navStartTimes = this.dataProvider.mainFrameNavigationStartEvents?.() || [];
let navStartTimeIndex = 0;
const drawAdjustedTime = (time) => {
if (navStartTimes.length === 0) {
return this.formatValue(time, dividersData.precision);
}
// Track when the time crosses the boundary to the next nav start record,
// and when it does, move the nav start array index accordingly.
const hasNextNavStartTime = navStartTimes.length > navStartTimeIndex + 1;
if (hasNextNavStartTime) {
const nextNavStartTime = navStartTimes[navStartTimeIndex + 1];
const nextNavStartTimeStartTimestamp = TraceEngine.Helpers.Timing.microSecondsToMilliseconds(nextNavStartTime.ts);
if (time > nextNavStartTimeStartTimestamp) {
navStartTimeIndex++;
}
}
// Adjust the time by the nearest nav start marker's value.
const nearestMarker = navStartTimes[navStartTimeIndex];
if (nearestMarker) {
const nearestMarkerStartTime = TraceEngine.Helpers.Timing.microSecondsToMilliseconds(nearestMarker.ts);
time -= nearestMarkerStartTime - this.zeroTime();
}
return this.formatValue(time, dividersData.precision);
};
TimelineGrid.drawCanvasGrid(context, dividersData);
if (this.rulerEnabled) {
TimelineGrid.drawCanvasHeaders(context, dividersData, drawAdjustedTime, 3, HeaderHeight);
}
this.updateElementPosition(this.highlightElement, this.highlightedEntryIndex);
this.updateElementPosition(this.selectedElement, this.selectedEntryIndex);
this.updateMarkerHighlight();
}
/**
* Draws generic flame chart events, that is, the plain rectangles that fill several parts
* in the timeline like the Main Thread flamechart and the timings track.
* Drawn on a color by color basis to minimize the amount of times context.style is switched.
*/
#drawGenericEvents(context, timelineData, color, indexes) {
context.save();
context.beginPath();
for (let i = 0; i < indexes.length; ++i) {
const entryIndex = indexes[i];
this.#drawEventRect(context, timelineData, entryIndex);
}
context.fillStyle = color;
context.fill();
context.restore();
}
/**
* Draws decorations onto events. {@see FlameChartDecoration}.
*/
#drawDecorations(context, timelineData, indexes) {
const { entryTotalTimes, entryStartTimes, entryLevels } = timelineData;
context.save();
for (let i = 0; i < indexes.length; ++i) {
const entryIndex = indexes[i];
const decorationsForEvent = timelineData.entryDecorations.at(entryIndex);
if (!decorationsForEvent || decorationsForEvent.length < 1) {
continue;
}
if (decorationsForEvent.length > 1) {
sortDecorationsForRenderingOrder(decorationsForEvent);
}
const entryStartTime = entryStartTimes[entryIndex];
for (const decoration of decorationsForEvent) {
const duration = entryTotalTimes[entryIndex];
if (decoration.type === 'CANDY') {
const candyStripeStartTime = TraceEngine.Helpers.Timing.microSecondsToMilliseconds(decoration.startAtTime);
if (duration < candyStripeStartTime) {
// If the duration of the event is less than the start time to draw the candy stripes, then we have no stripes to draw.
continue;
}
if (!this.candyStripePattern) {
this.candyStripePattern = this.createCandyStripePattern();
}
context.save();
context.beginPath();
// Draw a rectangle over the event, starting at the X value of the
// event's start time + the startDuration of the candy striping.
const barXStart = this.timeToPositionClipped(entryStartTime + candyStripeStartTime);
const barXEnd = this.timeToPositionClipped(entryStartTime + duration);
this.#drawEventRect(context, timelineData, entryIndex, {
startX: barXStart,
width: barXEnd - barXStart,
});
context.fillStyle = this.candyStripePattern;
context.fill();
context.restore();
}
else if (decoration.type === 'WARNING_TRIANGLE') {
const barX = this.timeToPositionClipped(entryStartTime);
const barLevel = entryLevels[entryIndex];
const barHeight = this.#eventBarHeight(timelineData, entryIndex);
const barY = this.levelToOffset(barLevel);
const barWidth = this.#eventBarWidth(timelineData, entryIndex);
const triangleSize = 8;
context.save();
context.beginPath();
context.rect(barX, barY, barWidth, barHeight);
context.clip();
context.beginPath();
context.fillStyle = 'red';
context.moveTo(barX + barWidth - triangleSize, barY);
context.lineTo(barX + barWidth, barY);
context.lineTo(barX + barWidth, barY + triangleSize);
context.fill();
context.restore();
}
}
}
context.restore();
}
/**
* Draws (but does not fill) a rectangle for a given event onto the provided
* context. Because sometimes we need to draw a portion of the rect, it
* optionally allows the start X and width of the rect to be overriden by
* custom pixel values. It currently does not allow the start Y and height to
* be changed because we have no need to do so, but this can be extended in
* the future if required.
**/
#drawEventRect(context, timelineData, entryIndex, overrides) {
const { entryTotalTimes, entryStartTimes, entryLevels } = timelineData;
const duration = entryTotalTimes[entryIndex];
if (isNaN(duration)) {
return;
}
const entryStartTime = entryStartTimes[entryIndex];
const barX = overrides?.startX || this.timeToPositionClipped(entryStartTime);
const barLevel = entryLevels[entryIndex];
const barHeight = this.#eventBarHeight(timelineData, entryIndex);
const barY = this.levelToOffset(barLevel);
const barWidth = overrides?.width || this.#eventBarWidth(timelineData, entryIndex);
// We purposefully leave a 1px gap off the height so there is a small gap
// visually between events vertically in the panel.
// Similarly, we leave 0.5 pixels off the width so that there is a small
// gap between events. Otherwise if a trace has a lot of events it looks
// like one solid block and is not very easy to distinguish when events
// start and end.
context.rect(barX, barY, barWidth - 0.5, barHeight - 1);
}
#eventBarHeight(timelineData, entryIndex) {
const { entryLevels } = timelineData;
const barLevel = entryLevels[entryIndex];
const barHeight = this.levelHeight(barLevel);
return barHeight;
}
#eventBarWidth(timelineData, entryIndex) {
const { entryTotalTimes, entryStartTimes } = timelineData;
const duration = entryTotalTimes[entryIndex];
const entryStartTime = entryStartTimes[entryIndex];
const barXStart = this.timeToPositionClipped(entryStartTime);
const barXEnd = this.timeToPositionClipped(entryStartTime + duration);
// Ensure that the width of the bar is at least one pixel.
const barWidth = Math.max(barXEnd - barXStart, 1);
return barWidth;
}
/**
* Preprocess the data to be drawn to speed the rendering time.
* Especifically:
* - Groups events into color buckets.
* - Discards non visible events.
* - Gathers marker events (LCP, FCP, DCL, etc.).
* - Gathers event titles that should be rendered.
*/
getDrawableData(context, timelineData) {
// These are the event indexes of events that we are drawing onto the timeline that:
// 1) have text within them
// 2) are visually wide enough in pixels to make it worth rendering the text.
const titleIndices = [];
// These point to events that represent single points in the timeline, most
// often an event such as DCL/LCP.
const markerIndices = [];
const { entryTotalTimes, entryStartTimes } = timelineData;
const height = this.offsetHeight;
const top = this.chartViewport.scrollOffset();
const visibleLevelOffsets = this.visibleLevelOffsets ? this.visibleLevelOffsets : new Uint32Array();
const textPadding = this.textPadding;
// How wide in pixels / long in duration an event needs to be to make it
// worthwhile rendering the text inside it.
const minTextWidth = 2 * textPadding + UI.UIUtils.measureTextWidth(context, '…');
const minTextWidthDuration = this.chartViewport.pixelToTimeOffset(minTextWidth);
const minVisibleBarLevel = Math.max(Platform.ArrayUtilities.upperBound(visibleLevelOffsets, top, Platform.ArrayUtilities.DEFAULT_COMPARATOR) - 1, 0);
// As we parse each event, we bucket them into groups based on the color we
// will render them with. The key of this map will be a color, and all
// events stored in the `indexes` array for that color will be painted as
// such. This way, when rendering events, we can render them based on
// color, and ensure the minimum amount of changes to context.fillStyle.
const colorBuckets = new Map();
for (let level = minVisibleBarLevel; level < this.dataProvider.maxStackDepth(); ++level) {
if (this.levelToOffset(level) > top + height) {
break;
}
if (!this.visibleLevels || !this.visibleLevels[level]) {
continue;
}
if (!this.timelineLevels) {
continue;
}
// Entries are ordered by start time within a level, so find the last visible entry.
const levelIndexes = this.timelineLevels[level];
const rightIndexOnLevel = Platform.ArrayUtilities.lowerBound(levelIndexes, this.chartViewport.windowRightTime(), (time, entryIndex) => time - entryStartTimes[entryIndex]) -
1;
let lastDrawOffset = Infinity;
for (let entryIndexOnLevel = rightIndexOnLevel; entryIndexOnLevel >= 0; --entryIndexOnLevel) {
const entryIndex = levelIndexes[entryIndexOnLevel];
const duration = entryTotalTimes[entryIndex];
// Markers are single events in time (e.g. LCP): they do not have a duration.
if (isNaN(duration)) {
markerIndices.push(entryIndex);
continue;
}
if (duration >= minTextWidthDuration || (this.forceDecorationCache && this.forceDecorationCache[entryIndex])) {
// If the event is big enough visually to have its text rendered,
// or if it's in the array of event indexes that we forcibly render (as defined by the data provider)
// then we store its index. Later on, we'll loop through all
// `titleIndices` to render the text for each event.
titleIndices.push(entr