Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css

/*
 * Copyright (C) 2013 Apple Inc. All rights reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions
 * are met:
 * 1. Redistributions of source code must retain the above copyright
 *    notice, this list of conditions and the following disclaimer.
 * 2. Redistributions in binary form must reproduce the above copyright
 *    notice, this list of conditions and the following disclaimer in the
 *    documentation and/or other materials provided with the distribution.
 *
 * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
 * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
 * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
 * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
 * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
 * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
 * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
 * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
 * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
 * THE POSSIBILITY OF SUCH DAMAGE.
 */

.tree-outline.dom {
    position: relative;

    min-width: 100%;
    margin: 0;
    padding: 0;

    outline: none;

    list-style-type: none;

 /* Needed to make the negative z-index on .selection-area works. Otherwise the background-color from .syntax-highlighted hides the selection. */
    background-color: transparent !important;
    color: var(--text-color);

    --item-pseudo-class-enabled-selection-before-start: 2px;

    --sublist-margin-start: 4px;
    --sublist-padding-start: 1px;
    --sublist-border-width-start: 9px;
}

.tree-outline.dom li .selection-area {
    position: absolute;
    left: 0;
    right: 0;
    height: 15px;
    z-index: -1;
}

.tree-outline.dom li.selected .selection-area {
    background-color: var(--selected-background-color-unfocused);
}

.tree-outline.dom li.elements-drag-over .selection-area {
    margin-top: -2px;
    border-top: 2px solid var(--selected-background-color);
}

.tree-outline.dom:not(.non-selectable):focus li:matches(.selected, .hovered) .selection-area {
    background-color: var(--selected-background-color);
}

.tree-outline.dom:not(.non-selectable) li.hovered:not(.selected) .selection-area {
    opacity: 0.3;
}

.tree-outline.dom.show-last-selected li.last-selected > span::after {
    content: " = $0";
    color: var(--console-secondary-text-color);
    position: absolute;
    white-space: pre;
}

.tree-outline.dom.show-last-selected:focus li.last-selected > span::after {
    color: var(--selected-secondary-text-color);
}

.tree-outline.dom ol {
    list-style-type: none;
    margin: 0;
    -webkit-padding-start: calc(var(--sublist-margin-start) + var(--sublist-padding-start) + var(--sublist-border-width-start));
}

.tree-outline.dom ol.children {
    display: none;
}

.tree-outline.dom ol.children.expanded {
    display: block;
}

.tree-outline.dom li:matches(.hovered, .selected) + ol.children.expanded {
    -webkit-margin-start: var(--sublist-margin-start);
    -webkit-padding-start: var(--sublist-padding-start);
    border: 0 solid hsla(0, 0%, 83%, 0.5);
}

body[dir=ltr] .tree-outline.dom li:matches(.hovered, .selected) + ol.children.expanded {
    border-left-width: var(--sublist-border-width-start);
}

body[dir=rtl] .tree-outline.dom li:matches(.hovered, .selected) + ol.children.expanded {
    border-right-width: var(--sublist-border-width-start);
}

.tree-outline.dom li.selected + ol.children.expanded {
    border-color: hsl(0, 0%, 65%, 0.5);
}

.tree-outline.dom li {
    padding: 0;
    word-wrap: break-word;

    --item-padding-start: 17px;
    --item-padding-end: 6px;
}

.tree-outline.dom li:not(.editing) {
    -webkit-padding-start: var(--item-padding-start);
    -webkit-padding-end: var(--item-padding-end);
}

.tree-outline.dom li.editing {
    -webkit-margin-start: var(--item-padding-start);
    -webkit-margin-end: var(--item-padding-end);
}

.tree-outline.dom li.pseudo-class-enabled > .selection-area::before {
    display: inline-block;
    position: absolute;
    top: 4px;
    width: 5px;
    height: 5px;
    content: "";
    background-color: var(--glyph-color-active);
    border-radius: 50%;
}

body[dir=ltr] .tree-outline.dom li.pseudo-class-enabled > .selection-area::before {
    left: var(--item-pseudo-class-enabled-selection-before-start);
}

body[dir=rtl] .tree-outline.dom li.pseudo-class-enabled > .selection-area::before {
    right: var(--item-pseudo-class-enabled-selection-before-start);
}

.tree-outline.dom.single-node li {
    -webkit-padding-start: 2px;
}

.tree-outline.dom:focus li.selected {
    color: white;
}

.tree-outline.dom:focus li.selected.pseudo-class-enabled > .selection-area::before {
    background-color: hsl(0, 100%, 100%);
}

.tree-outline.dom:focus li.selected * {
    color: inherit;
}

.tree-outline.dom li.parent {
    -webkit-margin-start: -15px;
    line-height: 13px;
}

.tree-outline.dom li .html-tag.close {
    -webkit-margin-start: calc(-1 * var(--sublist-margin-start) - var(--sublist-border-width-start));
}

.tree-outline.dom li .html-tag ~ .go-to-arrow {
    height: 13px;
    vertical-align: -3px;
}

.tree-outline.dom li:not(.hovered) .html-tag ~ .go-to-arrow {
    visibility: hidden;
}

.tree-outline.dom li.parent::before {
    position: relative;
    z-index: 20;
    width: 13px;
    height: 13px;
    -webkit-padding-end: 2px;
    content: "";
    background-image: url(../Images/DisclosureTriangles.svg#closed-normal);
    background-size: 13px 13px;
    background-repeat: no-repeat;
}

body[dir=ltr] .tree-outline.dom li.parent::before {
    float: left;
}

body[dir=rtl] .tree-outline.dom li.parent::before {
    float: right;
    transform: scaleX(-1);
}

.tree-outline.dom:focus li.parent.selected::before {
    background-image: url(../Images/DisclosureTriangles.svg#closed-selected);
}

.tree-outline.dom li.parent.expanded::before {
    background-image: url(../Images/DisclosureTriangles.svg#open-normal);
}

.tree-outline.dom:focus li.parent.expanded.selected::before {
    background-image: url(../Images/DisclosureTriangles.svg#open-selected);
}

.tree-outline.dom .html-text-node.large {
    display: inline-block;
    min-width: 100%;
    white-space: pre-wrap;
}

.tree-outline.dom .html-pseudo-element {
    color: hsl(0, 59%, 41%);
}

.tree-outline.dom .shadow {
    color: gray;
}

/* Cannot apply styling directly to the parent element since it has a disclosure triangle. */
.tree-outline.dom li.parent.shadow::after {
    display: block;
    /* Adds padding to the right edge. */
    width: calc(100% + 8px);
    height: 1.2em;
    margin-top: -13px;
    -webkit-margin-start: -2px;
    content: "";
    background-color: hsla(0, 0%, 90%, 0.5);
}

.tree-outline.dom li.parent.shadow + ol.children.expanded {
    background-color: hsla(0, 0%, 90%, 0.5);
}

.showing-find-banner .tree-outline.dom .search-highlight {
    color: black;
    background-color: hsla(53, 83%, 53%, 0.2);
    border-bottom: 1px solid hsl(47, 82%, 60%);
}

@keyframes node-state-changed {
    from { background-color: var(--value-changed-highlight); }
}

.node-state-changed {
    animation: node-state-changed 1s cubic-bezier(0.25, 0, 0.25, 1);
}

@keyframes dom-tree-outline-highlight-fadeout {
    from { background-color: highlight; }
}

.highlight .selection-area {
    animation: "dom-tree-outline-highlight-fadeout" 2s;
}

.tree-outline.dom li .highlight {
    background-color: hsla(53, 83%, 53%, 0.2);
    border-bottom: 1px solid hsl(47, 82%, 60%);
}

@media (prefers-color-scheme: dark) {
    .tree-outline.dom .shadow {
        color: var(--text-color);
    }

    /* FIXME: extract this as a variable. It's slightly different from var(background-color-secondary),
    but close enough for now. It needs to use partial translucency so that the selection area shines through. */
    .tree-outline.dom li.parent.shadow + ol.children.expanded,
    .tree-outline.dom li.parent.shadow::after {
        background-color: hsla(0, 0%, 90%, 0.1);
    }

    .showing-find-banner .tree-outline.dom .search-highlight {
        /* FIXME: This should use a variable. */
        background-color: hsla(53, 83%, 53%, 0.8);
    }

    .tree-outline.dom .html-pseudo-element {
        color: hsl(0, 80%, 65%);
    }
}