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

.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: 4px 8px;
  white-space: nowrap;
  max-width: 80%;
  box-shadow: var(--drop-shadow);
}

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