diff options
Diffstat (limited to '')
| -rw-r--r-- | devtools/client/netmonitor/src/assets/styles/RequestList.css | 653 |
1 files changed, 653 insertions, 0 deletions
diff --git a/devtools/client/netmonitor/src/assets/styles/RequestList.css b/devtools/client/netmonitor/src/assets/styles/RequestList.css new file mode 100644 index 0000000000..3d1b77fdef --- /dev/null +++ b/devtools/client/netmonitor/src/assets/styles/RequestList.css @@ -0,0 +1,653 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* Request list empty panel */ + +.request-list-empty-notice { + margin: 0; + flex: 1; + overflow-x: hidden; +} + +.empty-notice-element { + padding-top: 12px; + padding-inline: 12px; + font-size: 1.2rem; +} + +.notice-perf-message { + margin-top: 2px; + align-items: center; +} + +.requests-list-perf-notice-button { + min-width: 30px; + min-height: 26px; + margin: 0 5px; + vertical-align: middle; +} + +.requests-list-perf-notice-button::before { + background-image: url(chrome://devtools/skin/images/profiler-stopwatch.svg); +} + +.requests-list-slow-button { + width: 12px; + height: 12px; + position: absolute; + right: 0; + transform: translateY(-50%); + top: 50%; + cursor: pointer; + background-image: linear-gradient(to right,transparent, var(--theme-body-background) 43%); + padding-inline-end: 30px; + padding-inline-start: 5px; +} + +.request-list-item:not(.selected).odd .requests-list-slow-button { + background-image: linear-gradient(to right,transparent, var(--table-zebra-inline-icons-background) 43%); +} + +.request-list-item:not(.selected):hover .requests-list-slow-button, +.request-list-item:not(.selected).odd:hover .requests-list-slow-button { + background-image: linear-gradient(to right,transparent, var(--table-selection-inline-icons-background-hover) 43%); +} + +.request-list-item.selected .requests-list-slow-button { + background-image: linear-gradient(to right,transparent, var(--theme-selection-background) 43%); +} + +.requests-list-slow-button::before { + content: ""; + width: 12px; + height: 16px; + display: inline-block; + background-image: url(chrome://devtools/content/netmonitor/src/assets/icons/turtle.svg); + background-repeat: no-repeat; + background-position-x: right; + padding-inline-end: 14px; + fill: var(--grey-40); + -moz-context-properties: fill; +} + +.request-list-item.selected .requests-list-slow-button::before { + fill: currentColor; +} + +.requests-list-reload-notice-button { + font-size: inherit; + min-height: 26px; + margin: 0 5px; +} + +/* Requests list table */ + +.request-list-container { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + overflow: hidden; + color: var(--theme-body-color); +} + +.requests-list-scroll { + overflow-x: hidden; + overflow-y: auto; + width: 100% !important; +} + +.requests-list-scroll table { + /* Disable overflow-anchor for only child in the scrollable element */ + overflow-anchor: none; +} + +.requests-list-anchor { + overflow-anchor: auto; + opacity: 0; + height: 1px; +} + +.requests-list-table, +.message-list-table { + /* Reset default browser style of <table> */ + border-spacing: 0; + width: 100%; + /* The layout must be fixed for resizing of columns to work. + The layout is based on the first row. + Set the width of those cells, and the rest of the table follows. */ + table-layout: fixed; +} + +.requests-list-table { + /* Clip column resizers when they are higher than the table. */ + overflow: hidden; +} + +.requests-list-column, +.message-list-column { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + vertical-align: middle; + /* Reset default browser style of <td> */ + padding: 0; + /* Prevent text selection because it's often invisible (blue on blue), + * it conflicts easily with existing click and double-click actions, + * and we already have several Copy and Export options. */ + user-select: none; +} + +.requests-list-column { + position: relative; +} + +.requests-list-column > * { + display: inline-block; +} + +/* Requests list headers */ + +.requests-list-headers-group, +.message-list-headers-group { + position: sticky; + top: 0; + left: 0; + width: 100%; + z-index: 1; +} + +.requests-list-headers, +.message-list-headers { + padding: 0; + color: var(--theme-body-color); + background-color: var(--theme-toolbar-background); +} + +.requests-list-headers th, +.message-list-headers th { + height: calc(var(--theme-toolbar-height) + 1px); + border-bottom: 1px solid var(--theme-splitter-color); +} + +.requests-list-headers th { + /* Allow column-resizers to be visible beyond the headers. */ + overflow: visible; +} + +.requests-list-headers th:not(:first-child), +.message-list-headers th:not(:first-child) { + border-inline-start: 1px solid var(--theme-splitter-color); +} + +.requests-list-header-button, +.message-list-header-button { + width: 100%; + min-height: var(--theme-toolbar-height); + border-width: 0; + padding-block: 1px; + padding-inline-start: 5px; + padding-inline-end: 4px; + text-align: start; + color: inherit; + background-color: transparent; +} + +.requests-list-header-button::-moz-focus-inner, +.message-list-header-button::-moz-focus-inner { + border: 0; + padding: 0; +} + +.requests-list-header-button:hover { + background-color: rgba(0, 0, 0, 0.1); +} + +.requests-list-header-button > .button-text, +.message-list-header-button > .button-text { + display: inline-block; + vertical-align: middle; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; +} + +.requests-list-header-button > .button-icon, +.message-list-header-button > .button-icon { + /* display icon only when column sorted otherwise display:none */ + display: none; + width: 7px; + height: 4px; + margin-inline: 3px 6px; + vertical-align: middle; +} + +.requests-list-header-button[data-sorted] > .button-icon { + /* display icon only when column sorted */ + display: inline-block; +} + +.requests-list-header-button[data-sorted] > .button-text { + /* when sorted - adjust width to fit the icon inside the button */ + width: calc(100% - 11px); +} + +.requests-list-header-button[data-sorted=ascending] > .button-icon { + background-image: url("chrome://devtools/skin/images/sort-ascending-arrow.svg"); +} + +.requests-list-header-button[data-sorted=descending] > .button-icon { + background-image: url("chrome://devtools/skin/images/sort-descending-arrow.svg"); +} + +.requests-list-header-button[data-sorted], +.requests-list-header-button[data-sorted]:hover { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); +} + +.requests-list-header-button[data-sorted], +.requests-list-column[data-active] + .requests-list-column .requests-list-header-button { + border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1; +} + +/* Requests list headers column-resizer */ + +.requests-list-headers .column-resizer { + z-index: 1000; + cursor: ew-resize; + margin-inline-start: -3px; + width: 7px; + min-height: 23px; + position: absolute; + background-color: transparent; + /* Extend column-resizers beyond table header to allow resizing on + * column borders as well.*/ + height: 100vh; +} + +/** + * Make sure headers are not processing any mouse + * events. This is good for performance during dragging. + */ +.requests-list-headers.dragging { + pointer-events: none; +} + +/* Requests list column */ + +/* Status column */ + +.requests-list-status { + /* Don't ellipsize status codes */ + text-overflow: initial; +} + +.requests-list-status-code.status-code-blocked { + /* Improve the icon's vertical alignment by matching the row height. */ + display: inline-flex; + vertical-align: top; + align-items: center; + justify-content: center; + height: 24px; +} + +.requests-security-icon-group { + display: inline-flex; + vertical-align: top; + align-items: center; + height: 24px; + /* Icons are drawn as backgrounds on a 16x16 element but are often smaller + * (e.g. 12x12). Shift them a few pixels to align with the header text. */ + margin-inline-start: -3px; + margin-inline-end: 2px; +} + +.requests-security-state-icon { + display: inline-block; + height: 16px; + background-position: center; + background-repeat: no-repeat; + -moz-context-properties: fill, stroke; + fill: var(--theme-icon-dimmed-color); + stroke: var(--theme-icon-color); +} + +.security-state-secure { + background-image: url(chrome://devtools/skin/images/security-state-secure.svg); + width: 16px; +} + +.security-state-weak { + /* Shift icon to the right (in both LTR and RTL directions) to align the + * padlock shape with other padlock icons. */ + position: relative; + width: 16px; + left: 2px; + background-image: url(chrome://devtools/skin/images/security-state-weak.svg); + stroke: var(--theme-icon-warning-color); +} + +.security-state-insecure { + background-image: url(chrome://devtools/skin/images/security-state-insecure.svg); + width: 16px; + stroke: var(--theme-icon-error-color); +} + +.security-state-broken { + background-image: url(chrome://devtools/skin/images/error-small.svg); + width: 16px; + fill: var(--theme-icon-error-color); +} + +.tracking-resource { + display: inline-block; + width: 16px; + height: 16px; + background-image: url(chrome://devtools/content/netmonitor/src/assets/icons/shield.svg); + background-repeat: no-repeat; + -moz-context-properties: fill; + fill: var(--theme-icon-dimmed-color); +} + +.request-list-item.selected .status-code-blocked, +.request-list-item.selected .requests-security-state-icon, +.request-list-item.selected .tracking-resource { + fill: currentColor; + stroke: currentColor; + color: var(--theme-selection-color); +} + +.theme-dark .request-list-item.selected .status-code-blocked, +.theme-dark .request-list-item.selected .requests-security-state-icon, +.theme-dark .request-list-item.selected .tracking-resource { + color: rgba(255, 255, 255, 0.75); +} + +.request-list-item .requests-list-column, +.message-list-item .message-list-column { + padding-inline-start: 5px; + /* Column text should not touch the next column's border. + We could use a 5px space to be symmetrical, but we're using + text-overflow:ellipsis which makes that padding look wider in most cases, + and a smaller padding saves space for content. */ + padding-inline-end: 4px; +} + +.request-list-item .requests-list-column:not(:first-child), +.message-list-item .message-list-column:not(:first-child) { + border-inline-start: 1px solid var(--table-splitter-color); +} + +.request-list-item:hover .requests-list-column, +.request-list-item.selected .requests-list-column, +.message-list-item:hover .message-list-column, +.message-list-item.selected .message-list-column { + border-inline-start-color: transparent; +} + +.request-list-item .requests-list-waterfall { + padding-inline-start: 0; +} + +.requests-list-cause-stack { + display: inline-block; + background-color: var(--theme-text-color-alt); + color: var(--theme-body-background); + font-size: 8px; + font-weight: bold; + line-height: 10px; + border-radius: 3px; + padding: 0 2px; + margin: 0; + margin-inline-end: 3px; +} + +/* Waterfall column */ + +.requests-list-waterfall { + background-repeat: repeat-y; + background-position: left center; + overflow: visible; + /* Background created on a <canvas> in js. */ + /* @see devtools/client/netmonitor/src/widgets/WaterfallBackground.js */ + background-image: -moz-element(#waterfall-background); +} + +.requests-list-waterfall:dir(rtl) { + background-position: right center; +} + +.requests-list-waterfall > .requests-list-header-button { + padding: 0; +} + +.requests-list-waterfall > .requests-list-header-button > .button-text { + width: auto; +} + +.requests-list-waterfall-label-wrapper:not(.requests-list-waterfall-visible) { + padding-inline-start: 16px; +} + +.requests-list-timings-division { + display: inline-block; + padding-inline-start: 4px; + font-size: 75%; + pointer-events: none; + text-align: start; +} + +:root[platform="win"] .requests-list-timings-division { + padding-top: 1px; + font-size: 90%; +} + +.requests-list-timings-division:not(:first-child) { + border-inline-start: 1px dashed; +} + +.requests-list-timings-division:dir(ltr) { + transform-origin: left center; +} + +.requests-list-timings-division:dir(rtl) { + transform-origin: right center; +} + +.theme-dark .requests-list-timings-division { + border-inline-start-color: #5a6169 !important; +} + +.theme-light .requests-list-timings-division { + border-inline-start-color: #585959 !important; +} + +.requests-list-timings-division[data-division-scale=second], +.requests-list-timings-division[data-division-scale=minute] { + font-weight: 600; +} + +.requests-list-timings { + display: flex; + align-items: center; +} + +.requests-list-timings:dir(ltr) { + transform-origin: left center; +} + +.requests-list-timings:dir(rtl) { + transform-origin: right center; +} + +.requests-list-timings-box { + display: inline-block; + height: 12px; +} + +.requests-list-timings-box.filler { + background-color: var(--theme-splitter-color); +} + +.requests-list-timings-box.blocked { + background-color: var(--timing-blocked-color); +} + +.requests-list-timings-box.dns { + background-color: var(--timing-dns-color); +} + +.requests-list-timings-box.connect { + background-color: var(--timing-connect-color); +} + +.requests-list-timings-box.ssl { + background-color: var(--timing-ssl-color); +} + +.requests-list-timings-box.send { + background-color: var(--timing-send-color); +} + +.requests-list-timings-box.wait { + background-color: var(--timing-wait-color); +} + +.requests-list-timings-box.receive { + background-color: var(--timing-receive-color); +} + +.requests-list-timings-total { + display: inline-block; + padding-inline-start: 4px; + font-size: 80%; + font-weight: 600; + white-space: nowrap; + text-align: left; +} + +.requests-list-timings-total:dir(ltr) { + transform-origin: left center; +} + +.requests-list-timings-total:dir(rtl) { + transform-origin: right center; +} + +/* Request list item */ + +.request-list-item, +.message-list-item { + height: 24px; + line-height: 24px; +} + +.request-list-item:not(.selected).odd, +.message-list-item:not(.selected).odd { + background-color: var(--table-zebra-background); +} + +.request-list-item:not(.selected):hover, +.message-list-item:not(.selected):hover { + background-color: var(--table-selection-background-hover); +} + +/* + * Dim requests served from cache + */ +.request-list-item:not(.selected, :hover).fromCache { + --table-icon-opacity: 0.7; + color: var(--theme-text-color-alt); +} + +/* + * Apply partial opacity to specific icons and icon-like elements + * (e.g. for cached requests) + */ +.requests-security-icon-group, +.requests-list-status-code:not([data-code^="3"]) { + opacity: var(--table-icon-opacity, 1); +} + +/* + * Showing blocked requests in red should always have priority + * except when the request is selected. + */ +.request-list-item:not(.selected).blocked { + color: var(--timing-blocked-color) !important; +} + +/* + * Put after .request-list-item.blocked to avoid specificity conflict. + * Bug 1530914 - Highlighted Security Value is difficult to read. + */ +.request-list-item.selected, +.message-list-item.selected { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); + /* Rows have tabindex=0 and get a default outline when clicked, but we already + * have a visible selection style so hiding the outline should be okay. */ + outline: none; +} + +.theme-light { + --network-initiator-line-color: var(--theme-highlight-blue); + --network-initiator-color: var(--theme-highlight-purple); +} + +.theme-dark { + --network-initiator-line-color: hsl(210, 40%, 60%); + --network-initiator-color: var(--blue-40); +} + +.requests-list-initiator .requests-list-initiator-lastframe { + text-decoration: underline; + text-decoration-skip-ink: none; +} + +.requests-list-initiator-lastframe { + display: unset; +} + +.request-list-item .requests-list-initiator-filename, +.request-list-item .requests-list-initiator-line { + cursor: pointer; + text-decoration: inherit; +} + +.request-list-item:not(.selected) .requests-list-initiator-filename { + color: var(--network-initiator-color); +} + +.request-list-item:not(selected) .requests-list-initiator-line { + color: var(--network-initiator-line-color); +} + +.request-list-item.selected .requests-list-initiator-filename, +.request-list-item.selected .requests-list-initiator-line { + color: inherit; +} + +.request-list-item .requests-list-initiator-cause { + display: unset; + white-space: pre; +} + +/* Responsive web design support */ + +@media (max-width: 700px) { + .requests-list-status-code { + width: auto; + } + + .requests-list-size { + /* Given a fix max-width to display all columns in RWD mode */ + max-width: 7%; + } + + .requests-list-waterfall { + display: none; + } +} |