LCARStrek/devtools/netmonitor.css

   1 /* vim:set ts=2 sw=2 sts=2 et: */
   2 /* This Source Code Form is subject to the terms of the Mozilla Public
   3  * License, v. 2.0. If a copy of the MPL was not distributed with this
   4  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   5
   6 @import url("resource://devtools/client/shared/components/tree/tree-view.css");
   7 @import url(variables.css); /* No idea why this is needed but we get error messages without it */
   8
   9 window {
  10   padding: 0;
  11 }
  12
  13 #toolbar-labels {
  14   overflow: hidden;
  15   display: flex;
  16   flex: auto;
  17 }
  18
  19 .devtools-toolbar-container {
  20   display: flex;
  21   justify-content: space-between;
  22 }
  23
  24 .devtools-toolbar-group {
  25   display: flex;
  26   flex: 0 0 auto;
  27   flex-wrap: nowrap;
  28   align-items: stretch;
  29 }
  30
  31 /**
  32  * Collapsed details pane needs to be truly hidden to prevent both accessibility
  33  * tools and keyboard from accessing its contents.
  34  */
  35 #details-pane.pane-collapsed {
  36   visibility: hidden;
  37 }
  38
  39 #details-pane-toggle[disabled] {
  40   display: none;
  41 }
  42
  43 #custom-pane {
  44   overflow: auto;
  45 }
  46
  47 #response-content-image-box {
  48   overflow: auto;
  49 }
  50
  51 #network-statistics-charts {
  52   overflow: auto;
  53 }
  54
  55 .cropped-textbox .textbox-input {
  56   /* workaround for textbox not supporting the @crop attribute */
  57   text-overflow: ellipsis;
  58 }
  59
  60 /* Responsive sidebar */
  61 @media (max-width: 700px) {
  62   #toolbar-spacer,
  63   #details-pane-toggle,
  64   #details-pane.pane-collapsed,
  65   .requests-menu-waterfall,
  66   #requests-menu-network-summary-button > .summary-info-text {
  67     display: none;
  68   }
  69 }
  70
  71 :root.theme-dark,
  72 :root.theme-light {
  73   --table-splitter-color: #A09090;
  74   --table-zebra-background: rgba(255,159,0,0.1);
  75
  76   --timing-blocked-color: #FF0000;
  77   --timing-dns-color: #E7ADE7; /* pink */
  78   --timing-connect-color: #FF9F00; /* orange */
  79   --timing-send-color: #FFCF00; /* light blue */
  80   --timing-wait-color: #9C9CFF; /* blue grey */
  81   --timing-receive-color: #A09090; /* green */
  82
  83   --sort-ascending-image: url(chrome://devtools/skin/images/sort-arrows.svg#ascending);
  84   --sort-descending-image: url(chrome://devtools/skin/images/sort-arrows.svg#descending);
  85 }
  86
  87 #network-table {
  88   display: -moz-box;
  89   -moz-box-orient: vertical;
  90   -moz-box-flex: 1;
  91   overflow: hidden;
  92 }
  93
  94 .request-list-container {
  95   display: -moz-box;
  96   -moz-box-orient: vertical;
  97   -moz-box-flex: 1;
  98 }
  99
 100 #requests-menu-empty-notice,
 101 .request-list-empty-notice {
 102   margin: 0;
 103   padding: 12px;
 104   font-size: 120%;
 105 }
 106
 107 #notice-perf-message {
 108   margin-top: 2px;
 109 }
 110
 111 #requests-menu-perf-notice-button {
 112   min-width: 30px;
 113   min-height: 26px;
 114   list-style-image: url("images/profiler-stopwatch.svg");
 115   margin: 0 5px;
 116   vertical-align: middle;
 117 }
 118
 119 #requests-menu-perf-notice-button::before {
 120   background-image: url("images/profiler-stopwatch.svg");
 121 }
 122
 123 /* Make sure the icon is visible on Linux (to overwrite a rule
 124   in xul.css that hides the icon if there is no label.
 125   See also bug 1278050. */
 126 #requests-menu-perf-notice-button .button-icon {
 127   display: block;
 128 }
 129
 130 #requests-menu-perf-notice-button .button-text {
 131   display: none;
 132 }
 133
 134 #requests-menu-reload-notice-button {
 135   font-size: inherit;
 136   min-height: 26px;
 137   padding-left: 10px;
 138   padding-right: 10px;
 139   margin: 0 5px;
 140 }
 141
 142 /* Network requests table */
 143
 144 #requests-menu-toolbar {
 145   background: var(--theme-capped-toolbar-background);
 146 }
 147
 148 #requests-menu-toolbar::before, #requests-menu-toolbar::after {
 149   display: none; /* Remove caps from this toolbar (and above background rule make the background fill it completely) */
 150 }
 151
 152 #requests-menu-filter-buttons {
 153   display: flex;
 154   flex-wrap: nowrap;
 155 }
 156
 157 #requests-menu-toolbar > .toolbar-box > .toolbar-startcap,
 158 #requests-menu-toolbar > .toolbar-box > .toolbar-endcap {
 159   display: none;
 160 }
 161
 162 .requests-menu-contents {
 163   display: -moz-box;
 164   -moz-box-orient: vertical;
 165   -moz-box-flex: 1;
 166   overflow-x: hidden;
 167   overflow-y: auto;
 168
 169   --timings-scale: 1;
 170   --timings-rev-scale: 1;
 171 }
 172
 173 .requests-menu-subitem {
 174   display: flex;
 175   flex: none;
 176   box-sizing: border-box;
 177   align-items: center;
 178   padding: 3px;
 179 }
 180
 181 .subitem-label {
 182   white-space: nowrap;
 183   overflow: hidden;
 184   text-overflow: ellipsis;
 185 }
 186
 187 .requests-menu-header {
 188   display: flex;
 189   flex: none;
 190 }
 191
 192 #requests-menu-status-button,
 193 .requests-menu-header-button {
 194   display: flex;
 195   align-items: center;
 196   flex: auto;
 197   -moz-appearance: none;
 198   background-color: transparent;
 199   border-image: linear-gradient(transparent 15%,
 200                                 var(--theme-toolbar-background) 15%,
 201                                 var(--theme-toolbar-background) 85%,
 202                                 transparent 85%) 1 1;
 203   border-style: solid;
 204   border-width: 0;
 205   border-inline-start-width: 1px;
 206   border-radius: 0;
 207   min-width: 1px;
 208   min-height: 24px;
 209   margin: 0;
 210   padding-top: 2px;
 211   padding-bottom: 2px;
 212   padding-inline-start: 16px;
 213   padding-inline-end: 0;
 214   text-align: center;
 215 /*  color: inherit;*/
 216   font-weight: inherit !important;
 217 }
 218
 219 .requests-menu-header-button::-moz-focus-inner {
 220   border: 0;
 221   padding: 0;
 222 }
 223
 224 .requests-menu-header:first-child .requests-menu-header-button {
 225   border-width: 0;
 226 }
 227
 228 .requests-menu-header-button:hover {
 229   background-color: var(--theme-hover-background);
 230   color: var(--theme-hover-color);
 231 }
 232
 233 .requests-menu-header-button:hover:active {
 234   background-color: var(--theme-active-background);
 235   color: var(--theme-active-color);
 236 }
 237
 238 .requests-menu-header-button > .button-text {
 239   flex: auto;
 240   white-space: nowrap;
 241   overflow: hidden;
 242   text-overflow: ellipsis;
 243 }
 244
 245 .requests-menu-header-button > .button-box > .button-icon,
 246 #requests-menu-waterfall-image {
 247   display: -moz-box;
 248   -moz-box-ordinal-group: 2;
 249 }
 250 .requests-menu-header-button > .button-box > .button-icon,
 251 #requests-menu-waterfall-image,
 252 .requests-menu-header-button > .button-icon {
 253   flex: none;
 254   height: 4px;
 255   margin-inline-start: 3px;
 256   margin-inline-end: 6px;
 257   width: 7px;
 258 }
 259
 260 .requests-menu-header-button[sorted=ascending] > .button-box > .button-icon,
 261 .requests-menu-header-button[sorted=ascending] #requests-menu-waterfall-image {
 262   list-style-image: var(--sort-ascending-image);
 263 }
 264
 265 .requests-menu-header-button[data-sorted=ascending] > .button-icon {
 266   background-image: var(--sort-ascending-image);
 267 }
 268
 269 .requests-menu-header-button[sorted=descending] > .button-box > .button-icon,
 270 .requests-menu-header-button[sorted=descending] #requests-menu-waterfall-image {
 271   list-style-image: var(--sort-descending-image);
 272 }
 273
 274 .requests-menu-header-button[data-sorted=descending] > .button-icon {
 275   background-image: var(--sort-descending-image);
 276 }
 277
 278 .requests-menu-header-button > .button-box > .button-text,
 279 #requests-menu-waterfall-label-wrapper {
 280   -moz-box-flex: 1;
 281 }
 282
 283 .requests-menu-waterfall-label-wrapper {
 284   display: flex;
 285 }
 286
 287 .requests-menu-header-button[sorted],
 288 .requests-menu-header-button[sorted]:hover,
 289 .requests-menu-header-button[data-sorted],
 290 .requests-menu-header-button[data-sorted]:hover {
 291   background-color: var(--theme-selection-background);
 292   color: var(--theme-selection-color);
 293 }
 294
 295 .requests-menu-header-button[sorted],
 296 .requests-menu-header[active] + .requests-menu-header .requests-menu-header-button,
 297 .requests-menu-header-button[data-sorted],
 298 .requests-menu-header[data-active] + .requests-menu-header .requests-menu-header-button {
 299   border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1;
 300 }
 301
 302 #requests-menu-status-button {
 303   border: none;
 304 }
 305
 306 #requests-menu-status-button > .button-box {
 307   padding: 0;
 308 }
 309
 310 /* Network requests table: specific column dimensions */
 311
 312 .requests-menu-status {
 313   max-width: 6em;
 314   text-align: center;
 315   width: 10vw;
 316 }
 317
 318 .requests-menu-method,
 319 .requests-menu-method-box {
 320   max-width: 7em;
 321   text-align: center;
 322   width: 10vw;
 323 }
 324
 325 .requests-menu-icon-and-file {
 326   width: 22vw;
 327 }
 328
 329 .requests-menu-icon {
 330   background: transparent;
 331   width: 15px;
 332   height: 15px;
 333   margin-inline-end: 4px;
 334 }
 335
 336 .requests-menu-icon {
 337   outline: 1px solid var(--table-splitter-color);
 338 }
 339
 340 .requests-menu-security-and-domain {
 341   width: 14vw;
 342 }
 343
 344 .requests-security-state-icon {
 345   flex: none;
 346   width: 16px;
 347   height: 16px;
 348   margin-inline-end: 4px;
 349 }
 350
 351 .security-state-insecure {
 352   list-style-image: url("chrome://devtools/skin/images/security-state-insecure.svg");
 353 }
 354
 355 .security-state-secure {
 356   list-style-image: url("chrome://devtools/skin/images/security-state-secure.svg");
 357 }
 358
 359 .security-state-weak {
 360   list-style-image: url("chrome://devtools/skin/images/security-state-weak.svg");
 361 }
 362
 363 .security-state-broken {
 364   list-style-image: url("chrome://devtools/skin/images/security-state-broken.svg");
 365 }
 366
 367 .security-state-local {
 368   list-style-image: url("chrome://devtools/skin/images/security-state-local.svg");
 369 }
 370
 371 .requests-menu-type,
 372 .requests-menu-size {
 373   max-width: 6em;
 374   text-align: center;
 375   width: 8vw;
 376   justify-content: center;
 377 }
 378
 379 .requests-menu-transferred {
 380   max-width: 8em;
 381   width: 8vw;
 382   justify-content: center;
 383 }
 384
 385 .request-list-item.selected .requests-menu-transferred.theme-comment {
 386   color: var(--theme-selection-color);
 387 }
 388
 389 .requests-menu-cause {
 390   max-width: 8em;
 391   width: 8vw;
 392 }
 393
 394 .requests-menu-cause-stack {
 395   background-color: var(--theme-body-color-alt);
 396   color: var(--theme-body-background);
 397   font-size: 8px;
 398   font-weight: bold;
 399   line-height: 10px;
 400   border-radius: 3px;
 401   padding: 0 2px;
 402   margin: 0;
 403   margin-inline-end: 3px;
 404   -moz-user-select: none;
 405 }
 406
 407 .requests-menu-transferred {
 408   max-width: 8em;
 409   text-align: center;
 410   width: 8vw;
 411 }
 412
 413 /* Network requests table: status codes */
 414
 415 .requests-menu-status-code {
 416   margin-inline-start: 3px !important;
 417   width: 3em;
 418   margin-inline-end: -3em !important;
 419 }
 420
 421 .requests-menu-status-icon {
 422   background-color: #A09090;
 423   height: 10px;
 424   width: 10px;
 425   margin-inline-start: 5px;
 426   margin-inline-end: 5px;
 427   border-radius: 20px;
 428   border: 1px solid #000000;
 429   transition: background-color 0.5s ease-in-out;
 430 }
 431
 432 .request-list-item.selected .requests-menu-status-icon {
 433 }
 434
 435 .requests-menu-status-icon:not([code]),
 436 .requests-menu-status-icon:not([data-code]) {
 437   background-color: var(--theme-content-color2);
 438 }
 439
 440 .requests-menu-status-icon[code="cached"],
 441 .requests-menu-status-icon[data-code="cached"] {
 442   border: 2px solid var(--theme-content-color2);
 443   background-color: transparent;
 444 }
 445
 446 .requests-menu-status-icon[code^="1"],
 447 .requests-menu-status-icon[data-code^="1"] {
 448   background-color: var(--theme-highlight-blue);
 449 }
 450
 451 .requests-menu-status-icon[code^="2"],
 452 .requests-menu-status-icon[data-code^="2"] {
 453   background-color: var(--theme-highlight-green);
 454 }
 455
 456 /* 3xx are triangles */
 457 .requests-menu-status-icon[code^="3"],
 458 .requests-menu-status-icon[data-code^="3"] {
 459   background-color: transparent;
 460   width: 0;
 461   height: 0;
 462   border-left: 5px solid transparent;
 463   border-right: 5px solid transparent;
 464   border-bottom: 10px solid var(--theme-highlight-lightorange);
 465   border-radius: 0;
 466 }
 467
 468 /* 4xx and 5xx are squares - error codes */
 469 .requests-menu-status-icon[code^="4"],
 470 .requests-menu-status-icon[data-code^="4"] {
 471   background-color: var(--theme-highlight-red);
 472   border-radius: 0; /* squares */
 473 }
 474
 475 .requests-menu-status-icon[code^="5"],
 476 .requests-menu-status-icon[data-code^="5"] {
 477   background-color: var(--theme-highlight-pink);
 478   border-radius: 0;
 479   transform: rotate(45deg);
 480 }
 481
 482 /* Network requests table: waterfall header */
 483
 484 .requests-menu-waterfall {
 485   flex: auto;
 486   padding-inline-start: 0;
 487 }
 488
 489 #requests-menu-waterfall-label:not(.requests-menu-waterfall-visible),
 490 .requests-menu-waterfall-label-wrapper:not(.requests-menu-waterfall-visible) {
 491   padding-inline-start: 16px;
 492 }
 493
 494 .requests-menu-timings-division {
 495   width: 100px;
 496   padding-top: 2px;
 497   padding-inline-start: 4px;
 498   font-size: 75%;
 499   pointer-events: none;
 500   box-sizing: border-box;
 501   text-align: start;
 502   /* Allow the timing label to shrink if the container gets too narrow.
 503    * The container width then is not limited by the content. */
 504   flex: initial;
 505 }
 506
 507 .requests-menu-timings-division:first-child {
 508   width: 98px; /* Substract 2px for borders */
 509 }
 510
 511 .requests-menu-timings-division:not(:first-child) {
 512   border-inline-start: 1px dashed;
 513 /*   margin-inline-start: -100px !important; / Don't affect layout. */
 514 }
 515
 516 .requests-menu-timings-division:-moz-locale-dir(ltr) {
 517   transform-origin: left center;
 518 }
 519
 520 .requests-menu-timings-division:-moz-locale-dir(rtl) {
 521   transform-origin: right center;
 522 }
 523
 524 .requests-menu-timings-division {
 525   border-inline-start-color: var(--theme-body-color) !important;
 526 }
 527
 528 .requests-menu-timings-division[division-scale=second],
 529 .requests-menu-timings-division[division-scale=minute],
 530 .requests-menu-timings-division[data-division-scale=second],
 531 .requests-menu-timings-division[data-division-scale=minute] {
 532   font-weight: 600;
 533 }
 534
 535 /* Network requests table: waterfall items */
 536
 537 .requests-menu-subitem.requests-menu-waterfall {
 538   padding-inline-start: 0;
 539   padding-inline-end: 4px;
 540   /* Background created on a <canvas> in js. */
 541   /* @see devtools/client/netmonitor/netmonitor-view.js */
 542   background-image: -moz-element(#waterfall-background);
 543   background-repeat: repeat-y;
 544   background-position: left center;
 545 }
 546
 547 .requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) {
 548   background-position: right center;
 549 }
 550
 551 .requests-menu-timings {
 552   display: flex;
 553   flex: none;
 554   align-items: center;
 555   transform: scaleX(var(--timings-scale));
 556 }
 557
 558 .requests-menu-timings:-moz-locale-dir(ltr) {
 559   transform-origin: left center;
 560 }
 561
 562 .requests-menu-timings:-moz-locale-dir(rtl) {
 563   transform-origin: right center;
 564 }
 565
 566 .requests-menu-timings-total:-moz-locale-dir(ltr) {
 567   transform-origin: left center;
 568 }
 569
 570 .requests-menu-timings-total:-moz-locale-dir(rtl) {
 571   transform-origin: right center;
 572 }
 573
 574 .requests-menu-timings-total {
 575   display: inline-block;
 576   padding-inline-start: 4px;
 577   font-size: 85%;
 578   font-weight: 600;
 579   white-space: nowrap;
 580   /* This node should not be scaled - apply a reversed transformation */
 581   transform: scaleX(var(--timings-rev-scale));
 582 }
 583
 584 .requests-menu-timings-box {
 585   display: inline-block;
 586   height: 9px;
 587 }
 588
 589 .requests-menu-timings-box.blocked {
 590   background-color: var(--timing-blocked-color);
 591 }
 592
 593 .requests-menu-timings-box.dns {
 594   background-color: var(--timing-dns-color);
 595 }
 596
 597 .requests-menu-timings-box.connect {
 598   background-color: var(--timing-connect-color);
 599 }
 600
 601 .requests-menu-timings-box.send {
 602   background-color: var(--timing-send-color);
 603 }
 604
 605 .requests-menu-timings-box.wait {
 606   background-color: var(--timing-wait-color);
 607 }
 608
 609 .requests-menu-timings-box.receive {
 610   background-color: var(--timing-receive-color);
 611 }
 612
 613 /* SideMenuWidget */
 614
 615 #network-table .side-menu-widget-empty-text,
 616 #network-table .side-menu-widget-container,
 617 #network-table .request-list-empty-notice,
 618 #network-table .request-list-container {
 619   background-color: var(--theme-body-background);
 620 }
 621
 622 #network-table .side-menu-widget-item,
 623 .request-list-item {
 624   display: flex;
 625   border-top-color: transparent;
 626   border-bottom-color: transparent;
 627   padding: 0;
 628 }
 629
 630 .request-list-item.selected {
 631   background-color: var(--theme-selection-background);
 632   color: var(--theme-selection-color);
 633 }
 634
 635 .side-menu-widget-item-contents {
 636   padding: 0px;
 637 }
 638
 639 .side-menu-widget-container {
 640   box-shadow: none !important;
 641 }
 642
 643 .side-menu-widget-item:not(.selected)[odd],
 644 .request-list-item:not(.selected).odd {
 645   background-color: var(--table-zebra-background);
 646 }
 647
 648 .side-menu-widget-item:not(.selected):hover,
 649 .request-list-item:not(.selected):hover {
 650   background-color: var(--theme-selection-background-semitransparent);
 651 }
 652
 653 /* Method Column */
 654
 655 .request-list-item.selected .requests-menu-method {
 656   color: var(--theme-selection-color);
 657 }
 658
 659 /* Network request details */
 660
 661 #details-pane-toggle {
 662   list-style-image: var(--theme-pane-collapse-image);
 663 }
 664
 665 #details-pane-toggle.pane-collapsed {
 666   list-style-image: var(--theme-pane-expand-image);
 667 }
 668
 669 #details-pane-toggle:-moz-locale-dir(ltr)::before,
 670 #details-pane-toggle.pane-collapsed:-moz-locale-dir(rtl)::before {
 671   background-image: var(--theme-pane-collapse-image);
 672 }
 673
 674 #details-pane-toggle.pane-collapsed:-moz-locale-dir(ltr)::before,
 675 #details-pane-toggle:-moz-locale-dir(rtl)::before {
 676   background-image: var(--theme-pane-expand-image);
 677 }
 678
 679 /* Network request details tabpanels */
 680
 681 .tabpanel-content {
 682   background-color: var(--theme-sidebar-background);
 683
 684   color: var(--theme-body-color);
 685 }
 686
 687 #headers-tabpanel {
 688   background-color: var(--theme-toolbar-background);
 689 }
 690
 691 /* Summary tabpanel */
 692
 693 .tabpanel-summary-container {
 694   padding: 1px;
 695 }
 696
 697 .tabpanel-summary-label {
 698   display: inline-block;
 699   padding-inline-start: 4px;
 700   padding-inline-end: 3px;
 701   font-weight: 600;
 702 }
 703
 704 .tabpanel-summary-value {
 705   color: inherit;
 706   padding-inline-start: 3px;
 707 }
 708
 709 /* Headers tabpanel */
 710
 711 #headers-summary-status,
 712 #headers-summary-version {
 713   padding-bottom: 2px;
 714 }
 715
 716 #headers-summary-size {
 717   padding-top: 2px;
 718 }
 719
 720 #headers-summary-resend {
 721   margin-top: -10px;
 722   margin-inline-end: 6px;
 723 }
 724
 725 #toggle-raw-headers {
 726   margin-top: -10px;
 727   margin-inline-end: 6px;
 728 }
 729
 730 .raw-response-textarea {
 731   height: 50vh;
 732 }
 733
 734 /* Response tabpanel */
 735
 736 #response-content-info-header {
 737   margin: 0;
 738   padding: 3px 8px;
 739   background-color: var(--theme-highlight-red);
 740   color: var(--theme-selection-color);
 741 }
 742
 743 #response-content-image-box {
 744   padding-top: 10px;
 745   padding-bottom: 10px;
 746 }
 747
 748 #response-content-image {
 749   background: #FFFFFF;
 750   border: 1px dashed #A09090;
 751   margin-bottom: 10px;
 752 }
 753
 754 /* Preview tabpanel */
 755
 756 #preview-tabpanel {
 757   background: #fff;
 758 }
 759
 760 #response-preview {
 761   display: -moz-box;
 762   -moz-box-flex: 1;
 763 }
 764
 765 /* Timings tabpanel */
 766
 767 #timings-tabpanel .tabpanel-summary-container {
 768   display: flex;
 769 }
 770
 771 #timings-tabpanel .tabpanel-summary-label {
 772   width: 10em;
 773 }
 774
 775 #timings-tabpanel .requests-menu-timings-container {
 776   display: flex;
 777   flex: 1;
 778   align-items: center;
 779 }
 780
 781 #timings-tabpanel .requests-menu-timings-offset {
 782   transition: width 0.2s ease-out;
 783 }
 784
 785 #timings-tabpanel .requests-menu-timings-box {
 786   border: none;
 787   min-width: 1px;
 788   transition: width 0.2s ease-out;
 789 }
 790
 791 #timings-tabpanel .requests-menu-timings-total {
 792   transition: transform 0.2s ease-out;
 793 }
 794
 795 /* Security tabpanel */
 796
 797 .security-info-section {
 798   padding-inline-start: 1em;
 799 }
 800
 801 #security-tabpanel {
 802   overflow: auto;
 803   -moz-user-select: text;
 804 }
 805
 806 .security-warning-icon {
 807   background-image: url("images/alerticon-warning.png");
 808   background-size: 13px 12px;
 809   margin-inline-start: 5px;
 810   vertical-align: top;
 811   width: 13px;
 812   height: 12px;
 813 }
 814
 815 @media (min-resolution: 1.1dppx) {
 816   .security-warning-icon {
 817     background-image: url("images/alerticon-warning@2x.png");
 818   }
 819 }
 820
 821 /* Custom request form */
 822
 823 #custom-pane {
 824   padding: 0.6em 0.5em;
 825 }
 826
 827 .custom-header {
 828   font-size: 1.1em;
 829 }
 830
 831 .custom-section {
 832   margin-top: 0.5em;
 833 }
 834
 835 #custom-method-value {
 836   width: 4.5em;
 837 }
 838
 839 /* Main toolbar */
 840 .requests-menu-filter-button {
 841 /*  -moz-appearance: none;
 842   background: rgba(128,128,128,0.1);
 843   border: none;
 844   border-radius: 2px;
 845   min-width: 0;
 846   padding: 0 5px;
 847   margin: 2px;
 848   color: var(--theme-body-color);*/
 849   margin-top: 0;
 850   margin-bottom: 0;
 851 }
 852
 853 .requests-menu-filter-button:hover {
 854 /*  background: rgba(128,128,128,0.2);*/
 855 }
 856
 857 .requests-menu-filter-button:hover:active {
 858 /*  background-color: var(--theme-selection-background-semitransparent);*/
 859 }
 860
 861 /* Performance analysis buttons */
 862
 863 #requests-menu-network-summary-button {
 864   display: flex;
 865   flex-wrap: nowrap;
 866   align-items: center;
 867   font: inherit;
 868   box-shadow: none;
 869   border-color: transparent;
 870   list-style-image: url("images/profiler-stopwatch-tbutton.svg");
 871   cursor: pointer;
 872   min-width: 0;
 873 }
 874
 875 #requests-menu-network-summary-button > .summary-info-icon {
 876   background-image: url(images/profiler-stopwatch.svg);
 877   filter: var(--icon-filter);
 878   width: 16px;
 879   height: 16px;
 880 }
 881
 882 #requests-menu-network-summary-button > .summary-info-text {
 883   margin-inline-start: 0.5em;
 884 }
 885
 886 #requests-menu-network-summary-button:hover > .summary-info-icon,
 887 #requests-menu-network-summary-button:hover > .summary-info-text {
 888 }
 889
 890 /* Performance analysis view */
 891
 892 #network-statistics-toolbar {
 893   /* Make the toolbar invisible, it only hold the back button */
 894   -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar");
 895   background-color: #000000;
 896   border: none;
 897   margin: 0;
 898   padding: 0;
 899 }
 900
 901 #network-statistics-back-button {
 902   min-width: 4em;
 903   min-height: 100vh;
 904   margin: 0;
 905   padding: 0;
 906   border-radius: 0;
 907   border-top: none;
 908   border-bottom: none;
 909   border-inline-start: none;
 910 }
 911
 912 #network-statistics-view-splitter {
 913 /*  border-color: rgba(0,0,0,0.2);*/
 914   cursor: default;
 915   pointer-events: none;
 916 }
 917
 918 #network-statistics-charts {
 919   min-height: 1px;
 920 }
 921
 922 #network-statistics-charts {
 923   background-color: var(--theme-sidebar-background);
 924 }
 925
 926 #network-statistics-charts .pie-chart-container {
 927   margin-inline-start: 3vw;
 928   margin-inline-end: 1vw;
 929 }
 930
 931 #network-statistics-charts .table-chart-container {
 932   margin-inline-start: 1vw;
 933   margin-inline-end: 3vw;
 934 }
 935
 936 .chart-colored-blob[name=html] {
 937   fill: var(--theme-highlight-bluegrey);
 938   background: var(--theme-highlight-bluegrey);
 939 }
 940
 941 .chart-colored-blob[name=css] {
 942   fill: var(--theme-highlight-blue);
 943   background: var(--theme-highlight-blue);
 944 }
 945
 946 .chart-colored-blob[name=js] {
 947   fill: var(--theme-highlight-lightorange);
 948   background: var(--theme-highlight-lightorange);
 949 }
 950
 951 .chart-colored-blob[name=xhr] {
 952   fill: var(--theme-highlight-orange);
 953   background: var(--theme-highlight-orange);
 954 }
 955
 956 .chart-colored-blob[name=fonts] {
 957   fill: var(--theme-highlight-darkpurple);
 958   background: var(--theme-highlight-darkpurple);
 959 }
 960
 961 .chart-colored-blob[name=images] {
 962   fill: var(--theme-highlight-pink);
 963   background: var(--theme-highlight-pink);
 964 }
 965
 966 .chart-colored-blob[name=media] {
 967   fill: var(--theme-highlight-green);
 968   background: var(--theme-highlight-green);
 969 }
 970
 971 .chart-colored-blob[name=flash] {
 972   fill: var(--theme-highlight-red);
 973   background: var(--theme-highlight-red);
 974 }
 975
 976 .table-chart-row-label[name=cached] {
 977   display: none;
 978 }
 979
 980 .table-chart-row-label[name=count] {
 981   width: 3em;
 982   text-align: end;
 983 }
 984
 985 .table-chart-row-label[name=label] {
 986   width: 7em;
 987 }
 988
 989 .table-chart-row-label[name=size] {
 990   width: 7em;
 991 }
 992
 993 .table-chart-row-label[name=time] {
 994   width: 7em;
 995 }
 996
 997 /* Responsive sidebar */
 998 @media (max-width: 700px) {
 999   #requests-menu-toolbar {
1000     height: 22px;
1001   }
1002
1003   .requests-menu-header-button {
1004     min-height: 22px;
1005     padding-left: 8px;
1006   }
1007
1008   #details-pane {
1009     margin: 0 !important;
1010     /* To prevent all the margin hacks to hide the sidebar. */
1011   }
1012
1013   .requests-menu-status {
1014     max-width: none;
1015     width: 10vw;
1016   }
1017
1018   .requests-menu-status-code {
1019     width: auto;
1020   }
1021
1022   .requests-menu-method,
1023   .requests-menu-method-box {
1024     max-width: none;
1025     width: 12vw;
1026   }
1027
1028   .requests-menu-icon-and-file {
1029     width: 22vw;
1030   }
1031
1032   .requests-menu-security-and-domain {
1033     width: 16vw;
1034   }
1035
1036   .requests-menu-cause,
1037   .requests-menu-type,
1038   .requests-menu-transferred,
1039   .requests-menu-size {
1040     max-width: none;
1041     width: 10vw;
1042   }
1043
1044   .requests-menu-waterfall {
1045     display: none;
1046   }
1047 }
1048
1049 /* Platform overrides (copied in from the old platform specific files) */
1050 :root[platform="win"] .requests-menu-header-button > .button-box {
1051   padding: 0;
1052 }
1053
1054 :root[platform="win"] .requests-menu-timings-division {
1055   padding-top: 1px;
1056   font-size: 90%;
1057 }
1058
1059 :root[platform="linux"] #headers-summary-resend {
1060   padding: 4px;
1061 }
1062
1063 :root[platform="linux"] #toggle-raw-headers {
1064   padding: 4px;
1065 }
1066
1067 /* Responsive sidebar */
1068 @media (max-width: 700px) {
1069   :root[platform="linux"] .requests-menu-header-button {
1070     font-size: 85%;
1071   }
1072 }
1073
1074 /* Overwrite tree-view cell colon and use l10n string instead */
1075 .treeTable .treeLabelCell::after {
1076   content: "";
1077 }
1078
1079 /* Layout additional warning icon in tree value cell  */
1080 .security-info-value {
1081   display: flex;
1082 }
1083
1084 .security-info-value .textbox-input {
1085   text-overflow: ellipsis;
1086   border: none;
1087   background: none;
1088   color: inherit;
1089   width: 100%;
1090   margin-inline-end: 2px;
1091 }
1092
1093 .security-info-value .textbox-input:focus {
1094   outline: 0;
1095   box-shadow: var(--theme-focus-box-shadow-textbox);
1096 }
1097
1098 .treeTable .treeLabel {
1099   font-weight: 600;
1100 }
1101
1102 /* Customize default tree table style to align with devtools theme  */
1103 .theme-light .treeTable .treeLabel,
1104 .theme-light .treeTable .treeRow.hasChildren > .treeLabelCell > .treeLabel:hover {
1105   color: var(--theme-highlight-red);
1106 }
1107
1108 .theme-dark .treeTable .treeLabel,
1109 .theme-dark .treeTable .treeRow.hasChildren > .treeLabelCell > .treeLabel:hover {
1110   color: var(--theme-highlight-purple);
1111 }
1112
1113 .theme-firebug .treeTable .treeLabel {
1114   color: var(--theme-body-color);
1115 }
1116
1117 .treeTable .treeRow.hasChildren > .treeLabelCell > .treeLabel:hover {
1118   cursor: default;
1119   text-decoration: none;
1120 }
1121
1122 /*
1123  * FIXME: normal html block element cannot fill outer XUL element
1124  * This workaround should be removed after sidebar is migrated to react
1125  */
1126 #react-security-tabpanel-hook,
1127 #react-timings-tabpanel-hook {
1128   display: -moz-box;
1129   -moz-box-orient: vertical;
1130   -moz-box-flex: 1;
1131 }