chrome-devtools-frontend/front_end/panels/event_listeners/eventListenersView.css

Chrome DevTools UI

/*
 * Copyright 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.
 */

.tree-outline-disclosure li {
  padding: 0 0 0 5px;
  overflow: hidden;
  display: flex;
  min-height: var(--sys-size-8);
  align-items: center;
}

.tree-outline-disclosure {
  padding-left: 0 !important; /* stylelint-disable-line declaration-no-important */
  padding-right: 3px;
}

.tree-outline-disclosure li.parent::before {
  top: 0 !important; /* stylelint-disable-line declaration-no-important */
}

.tree-outline-disclosure .name {
  color: var(--sys-color-token-tag);
}

.tree-outline-disclosure .object-value-node,
.tree-outline-disclosure .object-value-object {
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-listener-details {
  display: flex;
  min-height: var(--sys-size-8);
  align-items: center;
  gap: var(--sys-size-2);

  devtools-button {
    height: var(--sys-size-8);
  }
}

.event-listener-tree-subtitle {
  float: right;
  margin-left: 5px;
  flex-shrink: 0;
}

.event-listener-button {
  padding: 0 5px;
  color: var(--sys-color-primary);
  background-color: var(--sys-color-cdt-base-container);
  border-radius: 7px;
  border: 1px solid var(--sys-color-tonal-outline);
  margin-left: 5px;
  display: block;
  flex-shrink: 0;

  &:hover {
    background-color: var(--sys-color-state-hover-on-subtle);
  }

  &:active {
    background-color: var(--sys-color-state-ripple-neutral-on-subtle);
  }
}

.placeholder:not(.hidden) + .event-listener-tree {
  display: none;
}

.placeholder {
  display: flex;
  margin: auto;
  align-items: center;
  justify-content: center;
}

.sources.panel .empty-view-scroller {
  display: none;
}

.elements.panel .placeholder {
  display: block;

  .gray-info-message {
    display: none;
  }
}

.tree-outline-disclosure li:hover .event-listener-button {
  display: inline;
}

@media (forced-colors: active) {
  .event-listener-details .event-listener-button {
    forced-color-adjust: none;
    opacity: 100%;
    background: ButtonFace;
    color: ButtonText;
    border-color: ButtonText;
  }

  .event-listener-button:hover {
    background-color: Highlight !important; /* stylelint-disable-line declaration-no-important */
    color: HighlightText;
    border-color: ButtonText;
  }

  .tree-outline.hide-selection-when-blurred .selected:focus-visible .event-listener-button,
  .tree-outline-disclosure li:focus-visible .gray-info-message {
    background-color: Highlight;
    color: HighlightText;
    border-color: HighlightText;
  }
}