path: root/devtools/client/netmonitor/src/assets/styles/RequestList.css

/* 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;
  }
}