chrome-devtools-frontend/front_end/panels/elements/cssValueTraceView.css

Chrome DevTools UI

/*
 * Copyright 2025 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.
 */
:host(:focus-within) {
  /* stylelint-disable-next-line declaration-no-important */
  outline: none !important;
}

.css-value-trace {
  --cell-width: 1.5em;
  --padding: var(--sys-size-3);
  --padding-left: var(--sys-size-4);

  display: grid;
  grid-template-columns: var(--cell-width) 1fr;
  margin: calc(-1 * var(--padding));
  margin-left: calc(-1 * var(--padding-left));

  & .trace-line-icon {
    grid-column-start: 1;
    width: var(--sys-size-9);
    height: var(--sys-size-9);
    text-align: center;
    color: var(--icon-default);
    padding-top: var(--sys-size-2);
  }

  :focus {
    border-radius: var(--sys-size-2);
    outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
  }

  details {
    height: min-content;
    grid-column: 1 / 4;

    summary {
      display: grid;
      grid-template-columns: var(--cell-width) var(--cell-width) 1fr;

      &::marker {
        display: none;
        content: "";
      }
    }

    div {
      devtools-icon, .trace-line-icon {
        grid-column-start: 2;
      }

      display: grid;
      grid-template-columns: var(--cell-width) var(--cell-width) 1fr;
    }

    .trace-line {
      grid-column: 3 / 4;
    }

    .marker {
      grid-column-start: 2;

      --icon-url: var(--image-file-triangle-right);

      padding-top: var(--sys-size-3);
    }

    &[open] .marker {
      --icon-url: var(--image-file-triangle-down);
    }
  }

  & .trace-line {
    place-self: center start;
    padding: var(--padding);
    grid-column: 2 / 3;
    margin: 0;
    padding-left: var(--padding-left);
  }

  .full-row {
    grid-column-start: 1;
  }
}

::highlight(css-value-tracing) {
  background-color: var(--sys-color-tonal-container);
}