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

Chrome DevTools UI

/*
 * Copyright (c) 2015 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-flamechart-popover {
  overflow: hidden;
  /* extend padding into the parent element to avoid clipping the focus-visible outline. */
  padding: 4px;
  margin: -4px;
}

.timeline-flamechart-popover devtools-interaction-breakdown {
  margin-top: 10px;
}

.timeline-flamechart-popover span {
  margin-right: 5px;
}

.timeline-flamechart-popover span.popoverinfo-network-time {
  color: var(--sys-color-primary);
}

.timeline-flamechart-popover span.popoverinfo-time {
  color: var(--sys-color-green);
}

.timeline-flamechart-popover span.popoverinfo-warning {
  color: var(--sys-color-error);
}

.timeline-flamechart-popover span.popoverinfo-url-path,
.timeline-flamechart-popover span.popoverinfo-url-origin {
  color: var(--sys-color-token-subtle);
  font-size: 11px;
}

.timeline-flamechart-popover span.popoverinfo-url-origin {
  font-style: italic;
}

.timeline-flamechart-popover span.popoverinfo-warning * {
  color: inherit;
}

.layout-shift-viz {
  position: relative;
  margin: var(--sys-size-8) var(--sys-size-5);
  outline: 1px solid var(--sys-color-divider);
}

.layout-shift-viz-rect {
  outline: 1px solid color-mix(in srgb, var(--color-background-inverted) 20%, var(--app-color-rendering));
  background-color: color-mix(in srgb, var(--color-background-inverted-opacity-0) 50%, var(--app-color-rendering-children));
  position: absolute;
  z-index: 100;
}

.layout-shift-viz > img {
  position: absolute;
  top: 0;
  left: 0;
}