chrome-devtools-frontend/front_end/panels/timeline/timelineFlameChartView.css

Chrome DevTools UI

/*
 * Copyright 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.
 */

.timeline-overlays-container {
  position: absolute;
  inset: 0;
  /* Ensure it appears on top of everything */
  z-index: 200;
  pointer-events: none;
}

.overlay-item {
  position: absolute;
  /* The FlameChartView will move these as the FlameChart is drawn */
  top: 0;
  left: 0;
}

.overlay-type-ENTRY_LABEL {
  /* keep these above the selected entry overline, else they can become hard to read */
  z-index: 2;

  /* if an overlay is being edited, keep it above the rest so the user is not obstructed */
  /* also bump the z-index if the label is being hovered, to ensure it appears above any other labels that might obstruct it */
  &:has([data-user-editing-label]),
  &:hover {
    z-index: 3;
  }
}


.overlay-type-ENTRY_SELECTED,
.overlay-type-ENTRY_OUTLINE {
  pointer-events: none;
  border: 2px solid var(--sys-color-primary);
  background-color: var(--sys-color-state-ripple-primary);

  &.cut-off-top {
    border-top: none;
  }

  &.cut-off-bottom {
    border-bottom: none;
  }

  &.cut-off-right {
    border-right: none;
  }

  &.cut-off-left {
    border-left: none;
  }
}

.overlay-type-ENTRY_SELECTED {
  /* Ensure ENTRY_SELECTED overlays are always displayed on top of ENTRY_OUTLINE overlays */
  z-index: 1;
}

.overlay-type-ENTRY_OUTLINE {
  background-color: transparent;
  border-width: 1px;
  /* Ensure ENTRY_SELECTED overlays are always displayed on top of ENTRY_OUTLINE overlays */
  z-index: 0;

  &.outline-reason-ERROR {
    border-color: var(--sys-color-error-bright);
  }

  &.outline-reason-INFO {
    border-color: var(--sys-color-primary);
  }
}

.overlay-type-CANDY_STRIPED_TIME_RANGE {
  --red-stripe-width: 2px;
  --white-stripe-width: 7px;

  background-image:
    repeating-linear-gradient(
      315deg,
      var(--sys-color-error-bright),
      var(--sys-color-error-bright) var(--red-stripe-width),
      transparent var(--red-stripe-width),
      transparent var(--white-stripe-width)
    );
  border: 1px solid var(--sys-color-error-bright);

  &.cut-off-bottom {
    border-bottom: none;
  }

  &.cut-off-top {
    border-top: none;
  }

  &.cut-off-right {
    border-right: none;
  }

  &.cut-off-left {
    border-left: none;
  }
}

.overlay-type-ENTRIES_LINK {
  height: 100%;
  width: 100%;
}

.overlay-type-TIME_RANGE {
  top: 0;
  bottom: 0;

  &.overlap-1 {
    bottom: 55px;
  }

  &.overlap-2 {
    bottom: 105px;
  }
}

.overlay-type-TIMESTAMP_MARKER {
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--sys-color-primary);
  pointer-events: none;
}

.timeline-entry-tooltip-element:not(:empty) {
  z-index: 2000;
  position: absolute;
  contain: content;
  background-color: var(--sys-color-cdt-base-container);
  pointer-events: none;
  padding: var(--sys-size-3) var(--sys-size-4);
  border-radius: var(--sys-shape-corner-extra-small);
  white-space: nowrap;
  max-width: 80%;
  box-shadow: var(--sys-elevation-level2);
}

.overlay-type-TIMESPAN_BREAKDOWN {
  /* This overlay by default is shown at the bottom of the UI, not the top */
  top: unset;
  bottom: 0;
  height: 100px;
}

.overlay-type-TIMINGS_MARKER {
  bottom: 0;
  width: 0.5px;
  pointer-events: auto;
}

.marker-title {
  display: flex;
  justify-content: center;
  padding: 0 var(--sys-size-3);
  font-size: var(--sys-typescale-body4-size);
  color: var(--sys-color-base);

  &:hover {
    cursor: default;
    transition: opacity 0.2s ease;
  }
}

.markers {
  position: fixed;
  display: flex;
  bottom: 0;
}

.overlay-popover span {
  margin-right: var(--sys-size-3);
}

.overlay-popover span.overlay-popover-time {
  color: var(--sys-color-green);
}

.timeline-flamechart-resizer {
  flex: 8px 0 0;
  background-color: var(--sys-color-surface2);
  border: 1px var(--sys-color-divider);
  border-style: solid none;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
}

.timeline-network-resizer-disabled > .timeline-flamechart-resizer {
  display: none;
}

.timeline-flamechart-resizer::after {
  content: "...";
  font-size: 14px;
  margin-bottom: -1px;
}

.timeline-details {
  vertical-align: top;
}

/* TODO(@jacktfranklin): move this into a TimelineDetailsView.css file */
.timeline-details-view {
  color: var(--sys-color-on-surface);
  overflow: hidden;
}

.timeline-details-view-body {
  flex: auto;
  overflow: auto;
  position: relative;
  background-color: var(--sys-color-cdt-base-container);
  user-select: text;
}

.timeline-details-view-block {
  flex: none;
  display: flex;
  background-color: var(--sys-color-cdt-base-container);
  flex-direction: column;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--sys-color-divider);
}

.timeline-details-view-row {
  padding-left: 10px;
  min-height: 20px;
  line-height: 16px; /* Vertically center text within row, important for background-color rows like .timeline-details-warning */
}

.timeline-details-view-block .timeline-details-stack-values {
  flex-direction: column !important; /* stylelint-disable-line declaration-no-important */
}

.timeline-details-chip-title {
  font-size: 12px;
  padding: 8px;
  display: flex;
  align-items: center;
}

.timeline-details-view-block:first-child > .timeline-details-chip-title {
  font-size: 13px;
}

.timeline-details-range-summary {
  height: 100%;
  margin: var(--sys-size-4) 0 0;

  & > devtools-performance-timeline-summary {
    /* The category summary can't be more narrow than this, so we'll force a horizontal scrollbar
       Also this style can't be applied on the element's :host without !important, thus its here. */
    min-width: 192px;
  }
}

/* Dont need to see insight chips in range summary */
.timeline-details-range-summary > devtools-related-insight-chips {
  display:none;
}

.timeline-details-chip-title > div {
  width: 12px;
  height: 12px;
  border: 1px solid var(--sys-color-divider);
  display: inline-block;
  margin-right: 4px;
  content: " ";
}

.timeline-details-view-row-title:not(:empty) {
  color: var(--sys-color-token-subtle);
  overflow: hidden;
  padding-right: 10px;
  display: inline-block;
  vertical-align: top;
}

.timeline-details-warning {
  --override-details-warning-background-color: rgb(250 209 209 / 48%);

  background-color: var(--override-details-warning-background-color);
}

.theme-with-dark-background .timeline-details-warning,
:host-context(.theme-with-dark-background) .timeline-details-warning {
  --override-details-warning-background-color: rgb(87 10 10 / 48%);
}

.timeline-details-warning .timeline-details-view-row-title {
  color: var(--sys-color-error);
}

.timeline-details-view-row-value {
  display: inline-block;
  user-select: text;
  text-overflow: ellipsis;
  overflow: visible;
}

.timeline-details-warning .timeline-details-view-row-value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timeline-details-view-pie-chart-wrapper {
  margin: 4px 0;
}

.timeline-details-view-pie-chart {
  margin-top: 5px;
}