RequestList.css (17310B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 /* Request list empty panel */ 6 7 .request-list-empty-notice { 8 margin: 0; 9 flex: 1; 10 overflow-x: hidden; 11 } 12 13 .empty-notice-element { 14 padding-top: 12px; 15 padding-inline: 12px; 16 font-size: 1.2rem; 17 } 18 19 .notice-perf-message { 20 margin-top: 2px; 21 align-items: center; 22 } 23 24 .requests-list-perf-notice-button { 25 min-width: 30px; 26 min-height: 26px; 27 margin: 0 5px; 28 vertical-align: middle; 29 } 30 31 .requests-list-perf-notice-button::before { 32 background-image: url(chrome://devtools/skin/images/profiler-stopwatch.svg); 33 } 34 35 .requests-list-slow-button { 36 width: 22px; 37 position: absolute; 38 right: 0; 39 inset-block: 0; 40 cursor: pointer; 41 /* The slow icon is absolutely positioned and can can overlap the column text. 42 This background gradient is added on its left side so the icon 43 has a solid background and the text slowly fades before the icon. */ 44 background-image: linear-gradient(to right, transparent, var(--theme-body-background) 43%); 45 padding-inline: 5px 30px; 46 47 &::before { 48 content: ""; 49 width: 12px; 50 height: 100%; 51 display: inline-block; 52 background-image: url(chrome://devtools/content/netmonitor/src/assets/icons/turtle.svg); 53 background-repeat: no-repeat; 54 background-position: right center; 55 padding-inline-end: 14px; 56 fill: var(--theme-icon-dimmed-color); 57 -moz-context-properties: fill; 58 } 59 60 :root[forced-colors-active] & { 61 /* In High Contrast Mode, the background gradient is removed, so the icon would 62 overlap the text underneath, making it unreadable. 63 To fix this, we set a plain solid color on the icon in HCM, which also needed 64 some dimensions tweaks to make it look nice. */ 65 background-color: Canvas; 66 padding-inline: 5px; 67 68 &::before { 69 color: CanvasText; 70 padding: 0; 71 } 72 } 73 } 74 75 .request-list-item:not(.selected).odd .requests-list-slow-button { 76 background-image: linear-gradient(to right, transparent, var(--table-zebra-inline-icons-background) 43%); 77 } 78 79 .request-list-item:not(.selected):hover .requests-list-slow-button, 80 .request-list-item:not(.selected).odd:hover .requests-list-slow-button { 81 background-image: linear-gradient(to right, transparent, var(--table-selection-inline-icons-background-hover) 43%); 82 } 83 84 .request-list-item.selected .requests-list-slow-button { 85 background-image: linear-gradient(to right, transparent, var(--theme-selection-background) 43%); 86 87 :root[forced-colors-active] & { 88 background-color: var(--theme-selection-background); 89 &::before { 90 color: var(--theme-selection-color); 91 } 92 } 93 } 94 95 .request-list-item.selected .requests-list-slow-button::before { 96 fill: currentColor; 97 } 98 99 .requests-list-reload-notice-button { 100 font-size: inherit; 101 min-height: 26px; 102 margin: 0 5px; 103 } 104 105 /* Requests list table */ 106 107 .request-list-container { 108 display: flex; 109 flex-direction: column; 110 width: 100%; 111 height: 100%; 112 overflow: hidden; 113 color: var(--theme-body-color); 114 } 115 116 .requests-list-scroll { 117 overflow-x: hidden; 118 overflow-y: auto; 119 width: 100% !important; 120 } 121 122 .requests-list-scroll table { 123 /* Disable overflow-anchor for only child in the scrollable element */ 124 overflow-anchor: none; 125 } 126 127 .requests-list-anchor { 128 overflow-anchor: auto; 129 opacity: 0; 130 height: 1px; 131 } 132 133 .requests-list-table, 134 .message-list-table { 135 /* Reset default browser style of <table> */ 136 border-spacing: 0; 137 width: 100%; 138 /* The layout must be fixed for resizing of columns to work. 139 The layout is based on the first row. 140 Set the width of those cells, and the rest of the table follows. */ 141 table-layout: fixed; 142 } 143 144 .requests-list-table { 145 /* Clip column resizers when they are higher than the table. */ 146 overflow: hidden; 147 } 148 149 .requests-list-column, 150 .message-list-column { 151 white-space: nowrap; 152 overflow: hidden; 153 text-overflow: ellipsis; 154 vertical-align: middle; 155 /* Reset default browser style of <td> */ 156 padding: 0; 157 /* Prevent text selection because it's often invisible (blue on blue), 158 * it conflicts easily with existing click and double-click actions, 159 * and we already have several Copy and Export options. */ 160 user-select: none; 161 } 162 163 .requests-list-column { 164 position: relative; 165 } 166 167 .requests-list-column > * { 168 display: inline-block; 169 } 170 171 .requests-list-column.requests-list-number-column { 172 text-align: end; 173 } 174 175 /* Requests list headers */ 176 177 .requests-list-headers-group, 178 .message-list-headers-group { 179 position: sticky; 180 top: 0; 181 left: 0; 182 width: 100%; 183 z-index: 1; 184 } 185 186 .requests-list-headers, 187 .message-list-headers { 188 padding: 0; 189 color: var(--theme-body-color); 190 background-color: var(--theme-toolbar-background); 191 } 192 193 .requests-list-headers th, 194 .message-list-headers th { 195 height: calc(var(--theme-toolbar-height) + 1px); 196 border-bottom: 1px solid var(--theme-splitter-color); 197 } 198 199 .requests-list-headers th { 200 /* Allow column-resizers to be visible beyond the headers. */ 201 overflow: visible; 202 } 203 204 .requests-list-headers th:not(:first-child), 205 .message-list-headers th:not(:first-child) { 206 border-inline-start: 1px solid var(--theme-splitter-color); 207 } 208 209 .requests-list-header-button, 210 .message-list-header-button { 211 width: 100%; 212 min-height: var(--theme-toolbar-height); 213 border-width: 0; 214 padding-block: 1px; 215 padding-inline-start: 5px; 216 padding-inline-end: 4px; 217 text-align: start; 218 color: inherit; 219 background-color: transparent; 220 } 221 222 .requests-list-header-button:hover { 223 background-color: rgba(0, 0, 0, 0.1); 224 } 225 226 #requests-list-override-button:hover { 227 background-color: unset; 228 } 229 230 .requests-list-header-button > .button-text, 231 .message-list-header-button > .button-text { 232 display: inline-block; 233 vertical-align: middle; 234 width: 100%; 235 overflow: hidden; 236 text-overflow: ellipsis; 237 } 238 239 .requests-list-header-button > .button-icon, 240 .message-list-header-button > .button-icon { 241 /* display icon only when column sorted otherwise display:none */ 242 display: none; 243 width: 7px; 244 height: 4px; 245 margin-inline: 3px 6px; 246 vertical-align: middle; 247 } 248 249 .requests-list-header-button[data-sorted] > .button-icon { 250 /* display icon only when column sorted */ 251 display: inline-block; 252 } 253 254 .requests-list-header-button[data-sorted] > .button-text { 255 /* when sorted - adjust width to fit the icon inside the button */ 256 width: calc(100% - 11px); 257 } 258 259 .requests-list-header-button[data-sorted="ascending"] > .button-icon { 260 background-image: url("chrome://devtools/skin/images/sort-ascending-arrow.svg"); 261 } 262 263 .requests-list-header-button[data-sorted="descending"] > .button-icon { 264 background-image: url("chrome://devtools/skin/images/sort-descending-arrow.svg"); 265 } 266 267 .requests-list-header-button[data-sorted], 268 .requests-list-header-button[data-sorted]:hover { 269 background-color: var(--theme-selection-background); 270 color: var(--theme-selection-color); 271 } 272 273 .requests-list-header-button[data-sorted], 274 .requests-list-column[data-active] + .requests-list-column .requests-list-header-button { 275 border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1; 276 } 277 278 /* Requests list headers column-resizer */ 279 280 .requests-list-headers .column-resizer { 281 z-index: 1000; 282 cursor: ew-resize; 283 margin-inline-start: -3px; 284 width: 7px; 285 min-height: 23px; 286 position: absolute; 287 background-color: transparent; 288 /* Extend column-resizers beyond table header to allow resizing on 289 * column borders as well.*/ 290 height: 100vh; 291 } 292 293 /** 294 * Make sure headers are not processing any mouse 295 * events. This is good for performance during dragging. 296 */ 297 .requests-list-headers.dragging { 298 pointer-events: none; 299 } 300 301 /* Requests list column */ 302 303 /* Status column */ 304 305 .requests-list-status { 306 /* Don't ellipsize status codes */ 307 text-overflow: initial; 308 } 309 310 .requests-list-status-code.status-code-blocked { 311 /* Improve the icon's vertical alignment by matching the row height. */ 312 display: inline-flex; 313 vertical-align: top; 314 align-items: center; 315 justify-content: center; 316 height: 24px; 317 } 318 319 .requests-security-icon-group { 320 display: inline-flex; 321 vertical-align: top; 322 align-items: center; 323 height: 24px; 324 /* Icons are drawn as backgrounds on a 16x16 element but are often smaller 325 * (e.g. 12x12). Shift them a few pixels to align with the header text. */ 326 margin-inline-start: -3px; 327 margin-inline-end: 2px; 328 } 329 330 .requests-security-state-icon { 331 display: inline-block; 332 height: 16px; 333 background-position: center; 334 background-repeat: no-repeat; 335 -moz-context-properties: fill, stroke; 336 fill: var(--theme-icon-dimmed-color); 337 stroke: var(--theme-icon-color); 338 } 339 340 .security-state-secure { 341 background-image: url(chrome://devtools/skin/images/security-state-secure.svg); 342 width: 16px; 343 } 344 345 .security-state-weak { 346 /* Shift icon to the right (in both LTR and RTL directions) to align the 347 * padlock shape with other padlock icons. */ 348 position: relative; 349 width: 16px; 350 left: 2px; 351 background-image: url(chrome://devtools/skin/images/security-state-weak.svg); 352 stroke: var(--theme-icon-warning-color); 353 } 354 355 .security-state-insecure { 356 background-image: url(chrome://devtools/skin/images/security-state-insecure.svg); 357 width: 16px; 358 stroke: var(--theme-icon-error-color); 359 } 360 361 .security-state-broken { 362 background-image: url(resource://devtools-shared-images/error-small.svg); 363 width: 16px; 364 fill: var(--theme-icon-error-color); 365 } 366 367 .tracking-resource { 368 display: inline-block; 369 width: 16px; 370 height: 16px; 371 background-image: url(chrome://devtools/content/netmonitor/src/assets/icons/shield.svg); 372 background-repeat: no-repeat; 373 -moz-context-properties: fill; 374 fill: var(--theme-icon-dimmed-color); 375 } 376 377 .request-list-item.selected .status-code:not(.status-code-blocked) { 378 outline: 1px solid currentColor; 379 } 380 381 :root[forced-colors-active] .request-list-item.selected .status-code { 382 color: var(--theme-selection-color); 383 } 384 385 .request-list-item.selected .status-code-blocked, 386 .request-list-item.selected .requests-security-state-icon, 387 .request-list-item.selected .tracking-resource { 388 fill: currentColor; 389 stroke: currentColor; 390 color: var(--theme-selection-color); 391 } 392 393 .theme-dark .request-list-item.selected .status-code-blocked, 394 .theme-dark .request-list-item.selected .requests-security-state-icon, 395 .theme-dark .request-list-item.selected .tracking-resource { 396 color: rgba(255, 255, 255, 0.75); 397 } 398 399 .request-list-item .requests-list-column, 400 .message-list-item .message-list-column { 401 padding-inline-start: 5px; 402 /* Column text should not touch the next column's border. 403 We could use a 5px space to be symmetrical, but we're using 404 text-overflow:ellipsis which makes that padding look wider in most cases, 405 and a smaller padding saves space for content. */ 406 padding-inline-end: 4px; 407 } 408 409 .request-list-item .requests-list-column:not(:first-child), 410 .message-list-item .message-list-column:not(:first-child) { 411 border-inline-start: 1px solid var(--table-splitter-color); 412 } 413 414 .request-list-item:hover .requests-list-column, 415 .request-list-item.selected .requests-list-column, 416 .message-list-item:hover .message-list-column, 417 .message-list-item.selected .message-list-column { 418 border-inline-start-color: transparent; 419 } 420 421 .request-list-item .requests-list-waterfall { 422 padding-inline-start: 0; 423 } 424 425 .requests-list-cause-stack { 426 display: inline-block; 427 background-color: var(--theme-text-color-alt); 428 color: var(--theme-body-background); 429 font-size: 8px; 430 font-weight: bold; 431 line-height: 10px; 432 border-radius: 3px; 433 padding: 0 2px; 434 margin: 0; 435 margin-inline-end: 3px; 436 } 437 438 /* Waterfall column */ 439 440 .requests-list-waterfall { 441 background-repeat: repeat-y; 442 background-position: left center; 443 overflow: visible; 444 /* Background created on a <canvas> in js. */ 445 /* @see devtools/client/netmonitor/src/widgets/WaterfallBackground.js */ 446 background-image: -moz-element(#waterfall-background); 447 448 :root[forced-colors-active] & { 449 /* Make sure that the background is visible in High Contrast Mode */ 450 forced-color-adjust: none; 451 & > * { 452 /* and reset forced-color-adjust on children so we respect HCM */ 453 forced-color-adjust: auto; 454 } 455 } 456 } 457 458 .requests-list-waterfall:dir(rtl) { 459 background-position: right center; 460 } 461 462 .requests-list-waterfall > .requests-list-header-button { 463 padding: 0; 464 } 465 466 .requests-list-waterfall > .requests-list-header-button > .button-text { 467 width: auto; 468 } 469 470 .requests-list-waterfall-label-wrapper:not(.requests-list-waterfall-visible) { 471 padding-inline-start: 16px; 472 } 473 474 .requests-list-timings-division { 475 display: inline-block; 476 padding-inline-start: 4px; 477 font-size: 75%; 478 pointer-events: none; 479 text-align: start; 480 } 481 482 :root[platform="win"] .requests-list-timings-division { 483 padding-top: 1px; 484 font-size: 90%; 485 } 486 487 .requests-list-timings-division:not(:first-child) { 488 border-inline-start: 1px dashed; 489 } 490 491 .requests-list-timings-division:dir(ltr) { 492 transform-origin: left center; 493 } 494 495 .requests-list-timings-division:dir(rtl) { 496 transform-origin: right center; 497 } 498 499 .theme-dark .requests-list-timings-division { 500 border-inline-start-color: #5a6169 !important; 501 } 502 503 .theme-light .requests-list-timings-division { 504 border-inline-start-color: #585959 !important; 505 } 506 507 .requests-list-timings-division[data-division-scale="second"], 508 .requests-list-timings-division[data-division-scale="minute"] { 509 font-weight: 600; 510 } 511 512 .requests-list-timings { 513 display: flex; 514 align-items: center; 515 } 516 517 .requests-list-timings:dir(ltr) { 518 transform-origin: left center; 519 } 520 521 .requests-list-timings:dir(rtl) { 522 transform-origin: right center; 523 } 524 525 .requests-list-timings-box { 526 display: inline-block; 527 height: 12px; 528 } 529 530 .requests-list-timings-box.filler { 531 background-color: var(--theme-splitter-color); 532 } 533 534 .requests-list-timings-box.blocked { 535 background-color: var(--timing-blocked-color); 536 } 537 538 .requests-list-timings-box.dns { 539 background-color: var(--timing-dns-color); 540 } 541 542 .requests-list-timings-box.connect { 543 background-color: var(--timing-connect-color); 544 } 545 546 .requests-list-timings-box.ssl { 547 background-color: var(--timing-ssl-color); 548 } 549 550 .requests-list-timings-box.send { 551 background-color: var(--timing-send-color); 552 } 553 554 .requests-list-timings-box.wait { 555 background-color: var(--timing-wait-color); 556 } 557 558 .requests-list-timings-box.receive { 559 background-color: var(--timing-receive-color); 560 } 561 562 .requests-list-timings-total { 563 display: inline-block; 564 padding-inline-start: 4px; 565 font-size: 80%; 566 font-weight: 600; 567 white-space: nowrap; 568 text-align: left; 569 } 570 571 .requests-list-timings-total:dir(ltr) { 572 transform-origin: left center; 573 } 574 575 .requests-list-timings-total:dir(rtl) { 576 transform-origin: right center; 577 } 578 579 /* Request list item */ 580 581 .request-list-item, 582 .message-list-item { 583 height: 24px; 584 line-height: 24px; 585 } 586 587 .request-list-item:not(.selected).odd, 588 .message-list-item:not(.selected).odd { 589 background-color: var(--table-zebra-background); 590 } 591 592 .request-list-item:not(.selected):hover, 593 .message-list-item:not(.selected):hover { 594 background-color: var(--table-selection-background-hover); 595 } 596 597 /* 598 * Dim requests served from cache when High Contrast Mode is not enabled 599 */ 600 :root:not([forced-colors-active]) .request-list-item:not(.selected, :hover).fromCache { 601 color: var(--theme-text-color-alt); 602 } 603 604 /* 605 * Showing blocked requests in red should always have priority 606 * except when the request is selected. 607 */ 608 .request-list-item:not(.selected).blocked { 609 color: var(--timing-blocked-color) !important; 610 } 611 612 /* 613 * Put after .request-list-item.blocked to avoid specificity conflict. 614 * Bug 1530914 - Highlighted Security Value is difficult to read. 615 */ 616 .request-list-item.selected, 617 .message-list-item.selected { 618 background-color: var(--theme-selection-background); 619 color: var(--theme-selection-color); 620 /* Rows have tabindex=0 and get a default outline when clicked, but we already 621 * have a visible selection style so hiding the outline should be okay. */ 622 outline: none; 623 } 624 625 .theme-light { 626 --network-initiator-line-color: var(--theme-highlight-blue); 627 --network-initiator-color: var(--theme-highlight-purple); 628 } 629 630 .theme-dark { 631 --network-initiator-line-color: hsl(210, 40%, 60%); 632 --network-initiator-color: var(--blue-40); 633 } 634 635 .requests-list-initiator .requests-list-initiator-lastframe { 636 text-decoration: underline; 637 text-decoration-skip-ink: none; 638 } 639 640 .requests-list-initiator-lastframe { 641 display: unset; 642 } 643 644 .request-list-item .requests-list-initiator-filename, 645 .request-list-item .requests-list-initiator-line { 646 cursor: pointer; 647 text-decoration: inherit; 648 } 649 650 .request-list-item:not(.selected) .requests-list-initiator-filename { 651 color: var(--network-initiator-color); 652 } 653 654 .request-list-item:not(selected) .requests-list-initiator-line { 655 color: var(--network-initiator-line-color); 656 } 657 658 .request-list-item.selected .requests-list-initiator-filename, 659 .request-list-item.selected .requests-list-initiator-line { 660 color: inherit; 661 } 662 663 .request-list-item .requests-list-initiator-cause { 664 display: unset; 665 white-space: pre; 666 } 667 668 /* Responsive web design support */ 669 670 @media (max-width: 700px) { 671 .requests-list-status-code { 672 width: auto; 673 } 674 675 .requests-list-size { 676 /* Given a fix max-width to display all columns in RWD mode */ 677 max-width: 7%; 678 } 679 680 .requests-list-waterfall { 681 display: none; 682 } 683 }