UNPKG

chrome-devtools-frontend

Version:
458 lines (384 loc) • 12.6 kB
/* * Copyright (C) 2013 Google 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: * * * Redistributions of source code must retain the above copyright * notice, this list of conditions and the following disclaimer. * * 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. * * Neither the name of Google Inc. nor the names of its * contributors may be used to endorse or promote products derived from * this software without specific prior written permission. * * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND 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 THE COPYRIGHT * OWNER OR 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. */ .network-log-grid.data-grid { border: none !important; /* stylelint-disable-line declaration-no-important */ flex: auto; } .network-log-grid.data-grid.no-selection:focus-visible { border: none !important; /* stylelint-disable-line declaration-no-important */ } #network-container { border: 1px solid var(--color-details-hairline); overflow: hidden; } #network-container.grid-focused.no-node-selected:focus-within { border: 1px solid var(--legacy-accent-color); } .network-summary-bar { flex: 0 0 27px; line-height: 27px; padding-left: 5px; background-color: var(--color-background-elevation-1); border-top: 1px solid var(--color-details-hairline); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; user-select: text; } .panel.network .toolbar.network-summary-bar { border-bottom: 0; } .network-summary-bar span[is="dt-icon-label"] { margin-right: 6px; } .network-summary-bar > * { flex: none; } .network-log-grid.data-grid tbody { background: transparent; } .network-log-grid.data-grid td { height: 41px; border-left: 1px solid var(--color-details-hairline); vertical-align: middle; } .network-log-grid.data-grid .corner { display: none; } .network-log-grid.data-grid.small td { height: 21px; } .network-log-grid.data-grid th { border-bottom: none; } .network-waterfall-header, .network-log-grid.data-grid thead th { border-bottom: 1px solid var(--color-details-hairline); border-left: 1px solid var(--color-details-hairline); } .network-waterfall-header, .network-log-grid.data-grid thead { height: 31px; background-color: var(--color-background-elevation-1); } .network-waterfall-header.small, .network-log-grid.data-grid.small thead { height: 27px; } .network-log-grid.data-grid select { appearance: none; border: none; width: 100%; color: inherit; } .network-log-grid.data-grid .waterfall-column { padding: 1px 0; } .network-log-grid.data-grid .waterfall-column .sort-order-icon-container { right: 15px; pointer-events: none; } .network-log-grid.data-grid th.sortable:active { background-image: none !important; /* stylelint-disable-line declaration-no-important */ } .network-cell-subtitle { font-weight: normal; color: var(--color-text-secondary); } .network-badge { margin-right: 4px; } .status-column .devtools-link { color: inherit; } .initiator-column .devtools-link { color: inherit; } .network-error-row, .network-error-row .network-cell-subtitle { /* stylelint-disable-next-line declaration-no-important */ color: var(--color-red) !important; } .network-log-grid.data-grid tr.selected.network-error-row, .network-log-grid.data-grid tr.selected.network-error-row .network-cell-subtitle, .network-log-grid.data-grid tr.selected.network-error-row .network-dim-cell, .network-log-grid.data-grid:focus-within tr.selected.network-error-row .devtools-link, .network-log-grid.data-grid:focus-within tr.selected.network-error-row, .network-log-grid.data-grid:focus-within tr.selected.network-error-row .network-cell-subtitle, .network-log-grid.data-grid:focus-within tr.selected.network-error-row .network-dim-cell { color: var(--color-accent-red); } /* We are using a multitude of different selector specificity rules here, which is incompatible with what stylelint requires as ordering of the rules. */ /* stylelint-disable no-descending-specificity */ .network-log-grid.data-grid tr.selected, .network-log-grid.data-grid tr.selected .network-cell-subtitle, .network-log-grid.data-grid tr.selected .network-dim-cell { color: inherit; } .network-log-grid.data-grid:focus-within tr.selected, .network-log-grid.data-grid:focus-within tr.selected .network-cell-subtitle, .network-log-grid.data-grid:focus-within tr.selected .network-dim-cell { color: var(--legacy-selection-fg-color); } .network-log-grid.data-grid:focus-within tr.selected [is="ui-icon"] { background-color: var(--icon-force-white); } .network-header-subtitle { color: var(--color-text-secondary); } .network-log-grid.data-grid.small .network-cell-subtitle, .network-log-grid.data-grid.small .network-header-subtitle { display: none; } .network-log-grid.data-grid.small tr.selected .network-cell-subtitle-show-inline-when-selected { display: inline; margin-left: 4px; } .network-log-grid tr.highlighted-row { --override-highlight-fade-from: rgb(255 255 120 / 100%); --override-highlight-fade-to: rgb(255 255 120 / 0%); animation: network-row-highlight-fadeout 2s 0s; } /* See comment above why the rules were disabled */ /* stylelint-enable no-descending-specificity */ @keyframes network-row-highlight-fadeout { from { background-color: var(--override-highlight-fade-from); } to { background-color: var(--override-highlight-fade-to); } } /* Resource preview icons */ /* These rules are grouped by type and therefore do not adhere to the ordering of stylelint */ /* stylelint-disable no-descending-specificity, no-duplicate-selectors */ .network-log-grid.data-grid .icon.image { position: relative; } .network-log-grid.data-grid .icon { float: left; width: 32px; height: 32px; margin-top: 1px; margin-right: 3px; } .network-log-grid.data-grid:focus-within .data-grid-data-grid-node.selected div.icon:not(.image) { filter: brightness(0) invert(1); } .network-log-grid.data-grid:focus-within .data-grid-data-grid-node.selected [is="ui-icon"].icon-mask { --network-grid-selected-color: #dadce0; --override-icon-mask-background-color: var(--network-grid-selected-color); } .data-grid-data-grid-node [is="ui-icon"].arrow-up-down-circle { transform: scale(0.8); } .network-log-grid.data-grid .network-error-row.data-grid-data-grid-node img.icon, .network-log-grid.data-grid .network-error-row.data-grid-data-grid-node.selected img.icon { /* This is generated with https://codepen.io/sosuke/pen/Pjoqqp to target var(--color-red) */ filter: brightness(0) saturate(100%) invert(35%) sepia(76%) saturate(1413%) hue-rotate(338deg) brightness(92%) contrast(103%); } .network-log-grid.data-grid.small .icon { margin-top: 2px; width: 16px; height: 16px; } .image-network-icon-preview { background: var(--color-image-preview-background); border: 1px solid var(--color-details-hairline); bottom: 0; left: 0; margin: auto; overflow: hidden; right: 0; top: 0; } .network-log-grid.data-grid .image-network-icon-preview { position: absolute; max-width: 18px; max-height: 21px; min-width: 1px; min-height: 1px; } .network-log-grid.data-grid.small .image-network-icon-preview { left: 2px; right: 2px; max-width: 10px; max-height: 12px; } .network-log-grid.data-grid .trailing-link-icon { padding-left: 0.5ex; } /* stylelint-enable no-descending-specificity, no-duplicate-selectors */ /* This is part of the large color block declared above, but should not be extracted out. */ /* stylelint-disable-next-line no-descending-specificity */ .network-dim-cell { color: var(--color-text-secondary); } .network-frame-divider { --override-frame-divider: #fccc49; width: 2px; background-color: var(--override-frame-divider); z-index: 10; visibility: hidden; } .-theme-with-dark-background .network-frame-divider, :host-context(.-theme-with-dark-background) .network-frame-divider { --override-frame-divider: rgb(182 134 3); } #network-container:not(.brief-mode) .data-container { overflow: hidden; } .network-log-grid.data-grid .resources-dividers { z-index: 0; } .network-log-grid.data-grid .resources-dividers-label-bar { background-color: transparent; border: none; height: 30px; pointer-events: none; } .network-log-grid.data-grid span.separator-in-cell { user-select: none; min-width: 1ex; display: inline-block; } .network-status-pane { color: var(--color-text-secondary); background-color: var(--color-background); z-index: 500; display: flex; justify-content: center; align-items: center; text-align: center; padding: 0 20px; overflow: auto; } .network-status-pane > .recording-hint { font-size: 14px; text-align: center; line-height: 28px; } .network-waterfall-header { position: absolute; border-left: 0; width: 100%; display: table; z-index: 200; } .network-waterfall-header:hover { background-color: var(--color-background-highlight); } .network-waterfall-header div { display: table-cell; line-height: 14px; margin: auto 0; vertical-align: middle; text-align: left; font-weight: normal; padding: 0 4px; } /* All network-waterfall-header rules are defined here instead of above */ /* stylelint-disable-next-line no-descending-specificity */ .network-waterfall-header .sort-order-icon-container { position: absolute; top: 1px; right: 0; bottom: 1px; display: flex; align-items: center; } .network-waterfall-header .sort-order-icon { align-items: center; margin-right: 4px; margin-bottom: -2px; } .network-frame-group-icon { display: inline-block; margin: -7px 1px; } .network-frame-group-badge { margin-right: 4px; } .network-override-marker { background: rgb(175 75 246); /* stylelint-disable-line plugin/use_theme_colors */ border-radius: 50%; width: 8px; height: 8px; display: inline-block; margin-right: 3px; } @media (forced-colors: active) { .network-status-pane > .recording-hint { color: canvastext; } .initiator-column .devtools-link { color: linktext; } /* This is part of the large color block declared above, but should not be extracted out. */ /* stylelint-disable no-descending-specificity */ .network-log-grid.data-grid tbody tr.revealed.selected, .network-log-grid.data-grid:focus-within tbody tr.revealed.selected, .network-log-grid.data-grid:focus-within tr.selected .network-dim-cell, .network-log-grid.data-grid tr.selected .network-dim-cell, .network-log-grid.data-grid:focus-within tr.selected .initiator-column .devtools-link, .network-log-grid.data-grid tr.selected .initiator-column .devtools-link, .network-waterfall-header:hover * { color: HighlightText; } /* stylelint-enable no-descending-specificity */ .network-log-grid { --network-grid-default-color: canvas; --network-grid-stripe-color: canvas; --network-grid-hovered-color: Highlight; --network-grid-selected-color: ButtonText; --network-grid-focus-selected-color: Highlight; } #network-container.no-node-selected:focus-within, .network-status-pane { forced-color-adjust: none; border-color: Highlight; background-color: canvas !important; /* stylelint-disable-line declaration-no-important */ } .network-waterfall-header:hover { forced-color-adjust: none; background-color: Highlight; } .network-waterfall-header.small, .network-log-grid.data-grid.small thead .network-waterfall-header, .network-log-grid.data-grid thead { background-color: canvas; } .network-waterfall-header:hover .sort-order-icon-container [is="ui-icon"].icon-mask { background-color: HighlightText; } }