front_end/ui/legacy/components/utils/jsUtils.css

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

.stack-preview-async-description {
  padding: 3px 0 1px;
  font-weight: bold;
}

.stack-preview-container {
  --display-ignored-row: none;
  --display-toggle-link: var(--override-display-stack-preview-toggle-link, none);

  & > tfoot > tr {
    font-style: italic;
    display: var(--display-toggle-link);
  }

  & > tbody {
    display: var(--override-display-stack-preview-tbody, table-row-group);

    & > tr {
      height: 16px;
      line-height: 16px;

      &:has(td.link > .ignore-list-link) {
        opacity: 60%;
        display: var(--display-ignored-row);
      }
    }

    &:has(tr > td.link > .ignore-list-link) {
      &:not(:has(tr > td.link > .devtools-link:not(.ignore-list-link))) {
        .stack-preview-async-row {
          /* An async row is hidden if the following group of call frames are all hidden */
          display: var(--display-ignored-row);
        }
      }
    }
  }

  &:not(:has(tbody > tr > td.link > .devtools-link:not(.ignore-list-link))),
  &.show-hidden-rows {
    /* Display ignore listed rows if everything is ignore listed or if displaying expanded. */
    --display-ignored-row: table-row;
  }

  &:has(tbody > tr > td.link > .ignore-list-link):has(tbody > tr > td.link > .devtools-link:not(.ignore-list-link)) {
    /* Show toggle links if some rows are ignore listed but not all of them. */
    --display-toggle-link: table-row;
  }

  td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-inline: 2px;

    &.link {
      overflow: visible;

      & > button.text-button.devtools-link {
        background-color: inherit;
      }
    }
  }

  &.width-constrained {
    display: block;
    width: 100%;

    td.link {
      /* width: 100%; and max-width: 0; combination causes the link cell to be
      extended as much as possible while still staying inside the table */
      width: 100%;
      max-width: 0;
    }
  }

  .function-name {
    max-width: 80em;
  }

  &.show-hidden-rows > tfoot > tr.show-all-link {
    --display-toggle-link: none;
  }

  &:not(.show-hidden-rows) > tfoot > tr.show-less-link {
    --display-toggle-link: none;
  }

  .arrow-icon-button {
    cursor: pointer;
    padding: 1px 0;
    border: none;
    background: none;
    margin-left: -4px;
    margin-right: -2px;
  }

  .arrow-icon {
    display: inline-block;
    mask-image: var(--image-file-triangle-right);
    background-color: var(--icon-default);
    margin-top: 2px;
    height: 14px;
    width: 14px;
    transition: transform 200ms;
  }

  &.expanded .arrow-icon{
    transform: rotate(90deg);
  }

  &.expandable:not(.expanded) tbody:not(:first-of-type),
  &.expandable:not(.expanded) tbody tr:not(:first-of-type) {
    display: none;
  }
}

/* The show more/less links aren't really a part of the content
as they are equivalent to an expander triangle and not something
you would want to copy to the clipboard. Attributes are used to
insert their text through css rather than put the text in the DOM. */
.css-inserted-text::before {
  content: attr(data-inserted-text);
}