chrome-devtools-frontend/front_end/ui/legacy/reportView.css

Chrome DevTools UI

/*
 * Copyright 2016 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 {
  background-color: var(--sys-color-cdt-base-container);
}

.report-content-box {
  background-color: var(--sys-color-cdt-base-container);
  overflow: auto;
}

.report-content-box.no-scroll {
  overflow: visible;
}

.report-header {
  border-bottom: 1px solid var(--sys-color-divider);
  padding: var(--sys-size-7) var(--sys-size-9);
}

.report-header devtools-toolbar {
  margin-bottom: -8px;
  margin-top: 5px;
  margin-left: -8px;
}

.report-title {
  font: var(--sys-typescale-headline4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
}

.report-url,
.report-subtitle {
  font: var(--sys-typescale-body4-regular);
}

.report-section {
  display: flex;
  padding: var(--sys-size-7) var(--sys-size-9) 11px var(--sys-size-9);
  border-bottom: 1px solid var(--sys-color-divider);
  flex-direction: column;
}

.report-section-header {
  padding-bottom: var(--sys-size-5);
  display: flex;
  flex-direction: row;
  align-items: center;

  devtools-button {
    flex: 0 0 auto;
  }

  &:has(.report-section-title:empty) {
    padding: 0;
  }
}

.report-section-title {
  font: var(--sys-typescale-headline5);
  flex: 1 1 auto;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 16px;
  color: var(--sys-color-on-surface);
  min-width: var(--sys-size-21);
  white-space: nowrap;
}

.report-field {
  display: flex;
  padding: var(--sys-size-3) 0;
}

.report-row {
  font: var(--sys-typescale-body4-regular);
  margin: var(--sys-size-3) 0;

  > devtools-checkbox:first-child {
    margin-left: calc(var(--sys-size-4) * -1);
  }

  > devtools-icon:first-child {
    /* We have inline icons that would otherwise be mis-aligned */
    margin-inline-start: 0;
  }
}

.report-field-name {
  font: var(--sys-typescale-body5-medium);
  color: var(--sys-color-on-surface-subtle);
  flex: 0 0 128px;
  text-align: left;
  white-space: pre-wrap;
}

.report-field-value {
  font: var(--sys-typescale-body4-regular);
  flex: auto;
  padding: 0 var(--sys-size-6);
  white-space: pre;
  user-select: text;
}

.report-field-value-is-flexed {
  display: flex;
  white-space: pre-wrap;
}

.report-field-value-subtitle {
  color: var(--sys-color-state-disabled);
  line-height: 14px;
}

.report-row-selectable {
  user-select: text;
}

.image-wrapper,
.image-wrapper img {
  max-width: 200px;
  max-height: 200px;
  display: block;
  object-fit: contain;
}

.image-wrapper {
  height: fit-content;
  margin-right: 8px;
}

.show-mask img {
  /* The safe zone is a centrally positioned circle, with radius 2/5
  * (40%) of the minimum of the icon's width and height.
  * https://w3c.github.io/manifest/#icon-masks */
  clip-path: circle(40% at 50% 50%);
}

.show-mask .image-wrapper {
  background: var(--image-file-checker);
}

@media (forced-colors: active) {
  .report-field-value .inline-icon {
    color: ButtonText;
  }

  .report-field-value .multiline-value {
    color: ButtonText;
  }
}