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

Chrome DevTools UI

/*
 * Copyright 2024 The Chromium Authors
 * 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;
  transition: opacity 0.2s;

  /* 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: 4;
  }

  /* Added to the selected entry label to bring it forward. Hovered entry's label will still be on top */
  &.bring-forward {
    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;
}

.overlay-type-BOTTOM_INFO_BAR {
  top: unset;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  /* Unlike other overlays, the user can click + interact with this one */
  pointer-events: auto;
  /* Ensure this one is always on top of any others */
  z-index: 5;
}

.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;
}