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

Chrome DevTools UI

/*
 * Copyright 2025 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

devtools-performance-third-party-tree-view {
  .background-bar-container {
    /* Dont need the bars in 3p table */
    display: none;
  }

   .timeline-tree-view devtools-toolbar {
    border: 0;
   }

  .timeline-tree-view .data-grid .odd {
    background: none;
  }

  .timeline-tree-view .data-grid {
    border-width: 0 !important; /* stylelint-disable-line declaration-no-important */

    th {
      background-color: var(--sys-color-cdt-base-container);
      font-weight: var(--ref-typeface-weight-medium);
      /* Center to give some gap against sorting triangle */
      text-align: center;

      &.site-column {
        text-align: left;
      }
    }

    tr .numeric-column,
    tr .site-column {
      border-left: none;
      border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
      /* Don't let devtools-button size mess with things */
      contain: strict;
      padding: 0;
      line-height: 21px;
    }

    .bottom-filler-td,
    th.sortable {
      border: none;
    }

    tr {
      height: 22px;
    }

    devtools-button {
      display: inline-flex;
      visibility: hidden;
      margin: 0 8px 0 4px;
      vertical-align: top;
    }

    tr.revealed:hover,
    tr.selected {
     devtools-button {
        visibility: visible;
      }
    }

    /* Default data-grid has this element on the edge of the rows,
      we don't need them for the 3P table. So for now set display to none. */
    .corner,
    &.data-grid-fits-viewport .corner {
      display: none;
    }

    .data-grid-resizer:hover {
        background: linear-gradient(to right, transparent, transparent 2px, var(--sys-color-divider) 2px, var(--sys-color-divider) 3px, transparent 3px) no-repeat 0 0 / 100% 100%;
    }
  }

  .widget.vbox.timeline-tree-view {
    /* See column width comments in populateColumns() */
    max-width: min(100%, 550px);
    min-width: 350px; /* Lower than this, there's not enough room for the entity name */
    padding: 0 0 0 var(--sys-size-6);
    border-left: var(--sys-size-1) solid var(--sys-color-divider);
  }

  /* While timeline treeview name-container uses flexbox to layout, it's overkill for this table's purposes.
     By not using it, we can benefit from text-overflow:ellipsis applying correctly to names and entity-badges */
 .timeline-tree-view .data-grid .name-container {
    display: block;
    padding-left: 2px;

    .activity-name {
      display: inline;
    }

    .activity-icon-container {
      display: none;
    }

    .entity-badge {
      margin-left: var(--sys-size-4);
      font-weight: var(--ref-typeface-weight-medium);
      padding: 0 var(--sys-size-2);
      background-color: var(--sys-color-tonal-container);
      border-radius: var(--sys-shape-corner-extra-small);
      height: 16px;
      line-height: 16px;
      font-size: var(--sys-typescale-body5-size);
      display: inline-block;
    }
 }
}

.empty-table {
  display: none;
}