UNPKG

chrome-devtools-frontend

Version:
56 lines (48 loc) 2.08 kB
// Copyright (c) 2024 The Chromium Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. import * as ThemeSupport from '../../theme_support/theme_support.js'; import {ARROW_SIDE} from './FlameChart.js'; export function horizontalLine(context: CanvasRenderingContext2D, width: number, y: number): void { context.moveTo(0, y); context.lineTo(width, y); } export function drawExpansionArrow(context: CanvasRenderingContext2D, x: number, y: number, expanded: boolean): void { // We will draw a equilateral triangle, so first calculate the height of the triangle. const arrowHeight = ARROW_SIDE * Math.sqrt(3) / 2; const arrowCenterOffset = Math.round(arrowHeight / 2); context.save(); context.beginPath(); context.translate(x, y); context.rotate(expanded ? Math.PI / 2 : 0); // The final triangle will be this shape: (the rotation will be handled by `context.rotate`) // |\ // | \ // | / // |/ // Move to the top vertex context.moveTo(-arrowCenterOffset, -ARROW_SIDE / 2); // Line to the bottom vertex context.lineTo(-arrowCenterOffset, ARROW_SIDE / 2); // Line to the right vertex context.lineTo(arrowHeight - arrowCenterOffset, 0); context.fill(); context.restore(); } export function drawIcon( context: CanvasRenderingContext2D, x: number, y: number, width: number, pathData: string, iconColor = '--sys-color-on-surface'): void { const p = new Path2D(pathData); context.save(); context.translate(x, y); // This color is same as the background of the whole flame chart. context.fillStyle = ThemeSupport.ThemeSupport.instance().getComputedValue('--sys-color-cdt-base-container'); context.fillRect(0, 0, width, width); context.fillStyle = ThemeSupport.ThemeSupport.instance().getComputedValue(iconColor); // The pathData from front_end/images folder is for a 20 pixel icon. // So we add a scale to draw the icon in a correct size. const scale = width / 20; context.scale(scale, scale); context.fill(p); context.restore(); }