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 .side-menu-widget-item.selected .requests-security-state-icon {
 352 /*  filter: brightness(1.3);*/
 353 }
 354
 355 .security-state-insecure {
 356   list-style-image: url("chrome://devtools/skin/images/security-state-insecure.svg");
 357 }
 358
 359 .security-state-secure {
 360   list-style-image: url("chrome://devtools/skin/images/security-state-secure.svg");
 361 }
 362
 363 .security-state-weak {
 364   list-style-image: url("chrome://devtools/skin/images/security-state-weak.svg");
 365 }
 366
 367 .security-state-broken {
 368   list-style-image: url("chrome://devtools/skin/images/security-state-broken.svg");
 369 }
 370
 371 .security-state-local {
 372   list-style-image: url("chrome://devtools/skin/images/security-state-local.svg");
 373 }
 374
 375 .requests-menu-type,
 376 .requests-menu-size {
 377   max-width: 6em;
 378   text-align: center;
 379   width: 8vw;
 380   justify-content: center;
 381 }
 382
 383 .requests-menu-transferred {
 384   max-width: 8em;
 385   width: 8vw;
 386   justify-content: center;
 387 }
 388
 389 .request-list-item.selected .requests-menu-transferred.theme-comment {
 390   color: var(--theme-selection-color);
 391 }
 392
 393 .requests-menu-cause {
 394   max-width: 8em;
 395   width: 8vw;
 396 }
 397
 398 .requests-menu-cause-stack {
 399   background-color: var(--theme-body-color-alt);
 400   color: var(--theme-body-background);
 401   font-size: 8px;
 402   font-weight: bold;
 403   line-height: 10px;
 404   border-radius: 3px;
 405   padding: 0 2px;
 406   margin: 0;
 407   margin-inline-end: 3px;
 408   -moz-user-select: none;
 409 }
 410
 411 .requests-menu-transferred {
 412   max-width: 8em;
 413   text-align: center;
 414   width: 8vw;
 415 }
 416
 417 .side-menu-widget-item.selected .requests-menu-transferred.theme-comment {
 418   color: var(--theme-selection-color);
 419 }
 420
 421 /* Network requests table: status codes */
 422
 423 .requests-menu-status-code {
 424   margin-inline-start: 3px !important;
 425   width: 3em;
 426   margin-inline-end: -3em !important;
 427 }
 428
 429 .requests-menu-status-icon {
 430   background-color: #A09090;
 431   height: 10px;
 432   width: 10px;
 433   margin-inline-start: 5px;
 434   margin-inline-end: 5px;
 435   border-radius: 20px;
 436   border: 1px solid #000000;
 437   transition: background-color 0.5s ease-in-out;
 438 }
 439
 440 .side-menu-widget-item.selected .requests-menu-status-icon,
 441 .request-list-item.selected .requests-menu-status-icon {
 442 /*  filter: brightness(1.3);*/
 443 }
 444
 445 .requests-menu-status-icon:not([code]),
 446 .requests-menu-status-icon:not([data-code]) {
 447   background-color: var(--theme-content-color2);
 448 }
 449
 450 .requests-menu-status-icon[code="cached"],
 451 .requests-menu-status-icon[data-code="cached"] {
 452   border: 2px solid var(--theme-content-color2);
 453   background-color: transparent;
 454 }
 455
 456 .requests-menu-status-icon[code^="1"],
 457 .requests-menu-status-icon[data-code^="1"] {
 458   background-color: var(--theme-highlight-blue);
 459 }
 460
 461 .requests-menu-status-icon[code^="2"],
 462 .requests-menu-status-icon[data-code^="2"] {
 463   background-color: var(--theme-highlight-green);
 464 }
 465
 466 /* 3xx are triangles */
 467 .requests-menu-status-icon[code^="3"],
 468 .requests-menu-status-icon[data-code^="3"] {
 469   background-color: transparent;
 470   width: 0;
 471   height: 0;
 472   border-left: 5px solid transparent;
 473   border-right: 5px solid transparent;
 474   border-bottom: 10px solid var(--theme-highlight-lightorange);
 475   border-radius: 0;
 476 }
 477
 478 /* 4xx and 5xx are squares - error codes */
 479 .requests-menu-status-icon[code^="4"],
 480 .requests-menu-status-icon[data-code^="4"] {
 481   background-color: var(--theme-highlight-red);
 482   border-radius: 0; /* squares */
 483 }
 484
 485 .requests-menu-status-icon[code^="5"],
 486 .requests-menu-status-icon[data-code^="5"] {
 487   background-color: var(--theme-highlight-pink);
 488   border-radius: 0;
 489   transform: rotate(45deg);
 490 }
 491
 492 /* Network requests table: waterfall header */
 493
 494 .requests-menu-waterfall {
 495   flex: auto;
 496   padding-inline-start: 0;
 497 }
 498
 499 #requests-menu-waterfall-label:not(.requests-menu-waterfall-visible),
 500 .requests-menu-waterfall-label-wrapper:not(.requests-menu-waterfall-visible) {
 501   padding-inline-start: 16px;
 502 }
 503
 504 .requests-menu-timings-division {
 505   width: 100px;
 506   padding-top: 2px;
 507   padding-inline-start: 4px;
 508   font-size: 75%;
 509   pointer-events: none;
 510   box-sizing: border-box;
 511   text-align: start;
 512   /* Allow the timing label to shrink if the container gets too narrow.
 513    * The container width then is not limited by the content. */
 514   flex: initial;
 515 }
 516
 517 .requests-menu-timings-division:first-child {
 518   width: 98px; /* Substract 2px for borders */
 519 }
 520
 521 .requests-menu-timings-division:not(:first-child) {
 522   border-inline-start: 1px dashed;
 523 /*   margin-inline-start: -100px !important; / Don't affect layout. */
 524 }
 525
 526 .requests-menu-timings-division:-moz-locale-dir(ltr) {
 527   transform-origin: left center;
 528 }
 529
 530 .requests-menu-timings-division:-moz-locale-dir(rtl) {
 531   transform-origin: right center;
 532 }
 533
 534 .requests-menu-timings-division {
 535   border-inline-start-color: var(--theme-body-color) !important;
 536 }
 537
 538 .requests-menu-timings-division[division-scale=second],
 539 .requests-menu-timings-division[division-scale=minute],
 540 .requests-menu-timings-division[data-division-scale=second],
 541 .requests-menu-timings-division[data-division-scale=minute] {
 542   font-weight: 600;
 543 }
 544
 545 /* Network requests table: waterfall items */
 546
 547 .requests-menu-subitem.requests-menu-waterfall {
 548   padding-inline-start: 0;
 549   padding-inline-end: 4px;
 550   /* Background created on a <canvas> in js. */
 551   /* @see devtools/client/netmonitor/netmonitor-view.js */
 552   background-image: -moz-element(#waterfall-background);
 553   background-repeat: repeat-y;
 554   background-position: left center;
 555 }
 556
 557 .requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) {
 558   background-position: right center;
 559 }
 560
 561 .requests-menu-timings {
 562   display: flex;
 563   flex: none;
 564   align-items: center;
 565   transform: scaleX(var(--timings-scale));
 566 }
 567
 568 .requests-menu-timings:-moz-locale-dir(ltr) {
 569   transform-origin: left center;
 570 }
 571
 572 .requests-menu-timings:-moz-locale-dir(rtl) {
 573   transform-origin: right center;
 574 }
 575
 576 .requests-menu-timings-total:-moz-locale-dir(ltr) {
 577   transform-origin: left center;
 578 }
 579
 580 .requests-menu-timings-total:-moz-locale-dir(rtl) {
 581   transform-origin: right center;
 582 }
 583
 584 .requests-menu-timings-total {
 585   display: inline-block;
 586   padding-inline-start: 4px;
 587   font-size: 85%;
 588   font-weight: 600;
 589   white-space: nowrap;
 590   /* This node should not be scaled - apply a reversed transformation */
 591   transform: scaleX(var(--timings-rev-scale));
 592 }
 593
 594 .requests-menu-timings-box {
 595   display: inline-block;
 596   height: 9px;
 597 }
 598
 599 .requests-menu-timings-box.blocked {
 600   background-color: var(--timing-blocked-color);
 601 }
 602
 603 .requests-menu-timings-box.dns {
 604   background-color: var(--timing-dns-color);
 605 }
 606
 607 .requests-menu-timings-box.connect {
 608   background-color: var(--timing-connect-color);
 609 }
 610
 611 .requests-menu-timings-box.send {
 612   background-color: var(--timing-send-color);
 613 }
 614
 615 .requests-menu-timings-box.wait {
 616   background-color: var(--timing-wait-color);
 617 }
 618
 619 .requests-menu-timings-box.receive {
 620   background-color: var(--timing-receive-color);
 621 }
 622
 623 /* SideMenuWidget */
 624
 625 #network-table .side-menu-widget-empty-text,
 626 #network-table .side-menu-widget-container,
 627 #network-table .request-list-empty-notice,
 628 #network-table .request-list-container {
 629   background-color: var(--theme-body-background);
 630 }
 631
 632 #network-table .side-menu-widget-item,
 633 .request-list-item {
 634   display: flex;
 635   border-top-color: transparent;
 636   border-bottom-color: transparent;
 637   padding: 0;
 638 }
 639
 640 .request-list-item.selected {
 641   background-color: var(--theme-selection-background);
 642   color: var(--theme-selection-color);
 643 }
 644
 645 .side-menu-widget-item-contents {
 646   padding: 0px;
 647 }
 648
 649 .side-menu-widget-container {
 650   box-shadow: none !important;
 651 }
 652
 653 .side-menu-widget-item:not(.selected)[odd],
 654 .request-list-item:not(.selected).odd {
 655   background-color: var(--table-zebra-background);
 656 }
 657
 658 .side-menu-widget-item:not(.selected):hover,
 659 .request-list-item:not(.selected):hover {
 660   background-color: var(--theme-selection-background-semitransparent);
 661 }
 662
 663 /* Method Column */
 664
 665 .side-menu-widget-item.selected .requests-menu-method,
 666 .request-list-item.selected .requests-menu-method {
 667   color: var(--theme-selection-color);
 668 }
 669
 670 /* Network request details */
 671
 672 #details-pane-toggle:-moz-locale-dir(ltr),
 673 #details-pane-toggle.pane-collapsed:-moz-locale-dir(rtl) {
 674   list-style-image: var(--theme-pane-collapse-image);
 675 }
 676
 677 #details-pane-toggle.pane-collapsed:-moz-locale-dir(ltr),
 678 #details-pane-toggle:-moz-locale-dir(rtl) {
 679   list-style-image: var(--theme-pane-expand-image);
 680 }
 681
 682 #details-pane-toggle:-moz-locale-dir(ltr)::before,
 683 #details-pane-toggle.pane-collapsed:-moz-locale-dir(rtl)::before {
 684   background-image: var(--theme-pane-collapse-image);
 685 }
 686
 687 #details-pane-toggle.pane-collapsed:-moz-locale-dir(ltr)::before,
 688 #details-pane-toggle:-moz-locale-dir(rtl)::before {
 689   background-image: var(--theme-pane-expand-image);
 690 }
 691
 692 /* Network request details tabpanels */
 693
 694 .tabpanel-content {
 695   background-color: var(--theme-sidebar-background);
 696
 697   color: var(--theme-body-color);
 698 }
 699
 700 #headers-tabpanel {
 701   background-color: var(--theme-toolbar-background);
 702 }
 703
 704 /* Summary tabpanel */
 705
 706 .tabpanel-summary-container {
 707   padding: 1px;
 708 }
 709
 710 .tabpanel-summary-label {
 711   display: inline-block;
 712   padding-inline-start: 4px;
 713   padding-inline-end: 3px;
 714   font-weight: 600;
 715 }
 716
 717 .tabpanel-summary-value {
 718   color: inherit;
 719   padding-inline-start: 3px;
 720 }
 721
 722 /* Headers tabpanel */
 723
 724 #headers-summary-status,
 725 #headers-summary-version {
 726   padding-bottom: 2px;
 727 }
 728
 729 #headers-summary-size {
 730   padding-top: 2px;
 731 }
 732
 733 #headers-summary-resend {
 734   margin-top: -10px;
 735   margin-inline-end: 6px;
 736 }
 737
 738 #toggle-raw-headers {
 739   margin-top: -10px;
 740   margin-inline-end: 6px;
 741 }
 742
 743 .raw-response-textarea {
 744   height: 50vh;
 745 }
 746
 747 /* Response tabpanel */
 748
 749 #response-content-info-header {
 750   margin: 0;
 751   padding: 3px 8px;
 752   background-color: var(--theme-highlight-red);
 753   color: var(--theme-selection-color);
 754 }
 755
 756 #response-content-image-box {
 757   padding-top: 10px;
 758   padding-bottom: 10px;
 759 }
 760
 761 #response-content-image {
 762   background: #FFFFFF;
 763   border: 1px dashed #A09090;
 764   margin-bottom: 10px;
 765 }
 766
 767 /* Preview tabpanel */
 768
 769 #preview-tabpanel {
 770   background: #fff;
 771 }
 772
 773 #response-preview {
 774   display: -moz-box;
 775   -moz-box-flex: 1;
 776 }
 777
 778 /* Timings tabpanel */
 779
 780 #timings-tabpanel .tabpanel-summary-container {
 781   display: flex;
 782 }
 783
 784 #timings-tabpanel .tabpanel-summary-label {
 785   width: 10em;
 786 }
 787
 788 #timings-tabpanel .requests-menu-timings-container {
 789   display: flex;
 790   flex: 1;
 791   align-items: center;
 792 }
 793
 794 #timings-tabpanel .requests-menu-timings-offset {
 795   transition: width 0.2s ease-out;
 796 }
 797
 798 #timings-tabpanel .requests-menu-timings-box {
 799   border: none;
 800   min-width: 1px;
 801   transition: width 0.2s ease-out;
 802 }
 803
 804 #timings-tabpanel .requests-menu-timings-total {
 805   transition: transform 0.2s ease-out;
 806 }
 807
 808 /* Security tabpanel */
 809
 810 .security-info-section {
 811   padding-inline-start: 1em;
 812 }
 813
 814 #security-tabpanel {
 815   overflow: auto;
 816   -moz-user-select: text;
 817 }
 818
 819 .security-warning-icon {
 820   background-image: url("images/alerticon-warning.png");
 821   background-size: 13px 12px;
 822   margin-inline-start: 5px;
 823   vertical-align: top;
 824   width: 13px;
 825   height: 12px;
 826 }
 827
 828 @media (min-resolution: 1.1dppx) {
 829   .security-warning-icon {
 830     background-image: url("images/alerticon-warning@2x.png");
 831   }
 832 }
 833
 834 /* Custom request form */
 835
 836 #custom-pane {
 837   padding: 0.6em 0.5em;
 838 }
 839
 840 .custom-header {
 841   font-size: 1.1em;
 842 }
 843
 844 .custom-section {
 845   margin-top: 0.5em;
 846 }
 847
 848 #custom-method-value {
 849   width: 4.5em;
 850 }
 851
 852 /* Main toolbar */
 853 .requests-menu-filter-button {
 854 /*  -moz-appearance: none;
 855   background: rgba(128,128,128,0.1);
 856   border: none;
 857   border-radius: 2px;
 858   min-width: 0;
 859   padding: 0 5px;
 860   margin: 2px;
 861   color: var(--theme-body-color);*/
 862   margin-top: 0;
 863   margin-bottom: 0;
 864 }
 865
 866 .requests-menu-filter-button:hover {
 867 /*  background: rgba(128,128,128,0.2);*/
 868 }
 869
 870 .requests-menu-filter-button:hover:active {
 871 /*  background-color: var(--theme-selection-background-semitransparent);*/
 872 }
 873
 874 /* Performance analysis buttons */
 875
 876 #requests-menu-network-summary-button {
 877   display: flex;
 878   flex-wrap: nowrap;
 879   align-items: center;
 880   font: inherit;
 881   box-shadow: none;
 882   border-color: transparent;
 883   list-style-image: url("images/profiler-stopwatch-tbutton.svg");
 884   cursor: pointer;
 885   min-width: 0;
 886 }
 887
 888 #requests-menu-network-summary-button > .summary-info-icon {
 889   background-image: url(images/profiler-stopwatch.svg);
 890   filter: var(--icon-filter);
 891   width: 16px;
 892   height: 16px;
 893 }
 894
 895 #requests-menu-network-summary-button > .summary-info-text {
 896   margin-inline-start: 0.5em;
 897 }
 898
 899 #requests-menu-network-summary-button:hover > .summary-info-icon,
 900 #requests-menu-network-summary-button:hover > .summary-info-text {
 901 }
 902
 903 /* Performance analysis view */
 904
 905 #network-statistics-toolbar {
 906   /* Make the toolbar invisible, it only hold the back button */
 907   -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar");
 908   background-color: #000000;
 909   border: none;
 910   margin: 0;
 911   padding: 0;
 912 }
 913
 914 #network-statistics-back-button {
 915   min-width: 4em;
 916   min-height: 100vh;
 917   margin: 0;
 918   padding: 0;
 919   border-radius: 0;
 920   border-top: none;
 921   border-bottom: none;
 922   border-inline-start: none;
 923 }
 924
 925 #network-statistics-view-splitter {
 926 /*  border-color: rgba(0,0,0,0.2);*/
 927   cursor: default;
 928   pointer-events: none;
 929 }
 930
 931 #network-statistics-charts {
 932   min-height: 1px;
 933 }
 934
 935 #network-statistics-charts {
 936   background-color: var(--theme-sidebar-background);
 937 }
 938
 939 #network-statistics-charts .pie-chart-container {
 940   margin-inline-start: 3vw;
 941   margin-inline-end: 1vw;
 942 }
 943
 944 #network-statistics-charts .table-chart-container {
 945   margin-inline-start: 1vw;
 946   margin-inline-end: 3vw;
 947 }
 948
 949 .chart-colored-blob[name=html] {
 950   fill: var(--theme-highlight-bluegrey);
 951   background: var(--theme-highlight-bluegrey);
 952 }
 953
 954 .chart-colored-blob[name=css] {
 955   fill: var(--theme-highlight-blue);
 956   background: var(--theme-highlight-blue);
 957 }
 958
 959 .chart-colored-blob[name=js] {
 960   fill: var(--theme-highlight-lightorange);
 961   background: var(--theme-highlight-lightorange);
 962 }
 963
 964 .chart-colored-blob[name=xhr] {
 965   fill: var(--theme-highlight-orange);
 966   background: var(--theme-highlight-orange);
 967 }
 968
 969 .chart-colored-blob[name=fonts] {
 970   fill: var(--theme-highlight-darkpurple);
 971   background: var(--theme-highlight-darkpurple);
 972 }
 973
 974 .chart-colored-blob[name=images] {
 975   fill: var(--theme-highlight-pink);
 976   background: var(--theme-highlight-pink);
 977 }
 978
 979 .chart-colored-blob[name=media] {
 980   fill: var(--theme-highlight-green);
 981   background: var(--theme-highlight-green);
 982 }
 983
 984 .chart-colored-blob[name=flash] {
 985   fill: var(--theme-highlight-red);
 986   background: var(--theme-highlight-red);
 987 }
 988
 989 .table-chart-row-label[name=cached] {
 990   display: none;
 991 }
 992
 993 .table-chart-row-label[name=count] {
 994   width: 3em;
 995   text-align: end;
 996 }
 997
 998 .table-chart-row-label[name=label] {
 999   width: 7em;
1000 }
1001
1002 .table-chart-row-label[name=size] {
1003   width: 7em;
1004 }
1005
1006 .table-chart-row-label[name=time] {
1007   width: 7em;
1008 }
1009
1010 /* Responsive sidebar */
1011 @media (max-width: 700px) {
1012   #requests-menu-toolbar {
1013     height: 22px;
1014   }
1015
1016   .requests-menu-header-button {
1017     min-height: 22px;
1018     padding-left: 8px;
1019   }
1020
1021   #details-pane {
1022     margin: 0 !important;
1023     /* To prevent all the margin hacks to hide the sidebar. */
1024   }
1025
1026   .requests-menu-status {
1027     max-width: none;
1028     width: 10vw;
1029   }
1030
1031   .requests-menu-status-code {
1032     width: auto;
1033   }
1034
1035   .requests-menu-method,
1036   .requests-menu-method-box {
1037     max-width: none;
1038     width: 12vw;
1039   }
1040
1041   .requests-menu-icon-and-file {
1042     width: 22vw;
1043   }
1044
1045   .requests-menu-security-and-domain {
1046     width: 16vw;
1047   }
1048
1049   .requests-menu-cause,
1050   .requests-menu-type,
1051   .requests-menu-transferred,
1052   .requests-menu-size {
1053     max-width: none;
1054     width: 10vw;
1055   }
1056
1057   .requests-menu-waterfall {
1058     display: none;
1059   }
1060 }
1061
1062 /* Platform overrides (copied in from the old platform specific files) */
1063 :root[platform="win"] .requests-menu-header-button > .button-box {
1064   padding: 0;
1065 }
1066
1067 :root[platform="win"] .requests-menu-timings-division {
1068   padding-top: 1px;
1069   font-size: 90%;
1070 }
1071
1072 :root[platform="linux"] #headers-summary-resend {
1073   padding: 4px;
1074 }
1075
1076 :root[platform="linux"] #toggle-raw-headers {
1077   padding: 4px;
1078 }
1079
1080 /* Responsive sidebar */
1081 @media (max-width: 700px) {
1082   :root[platform="linux"] .requests-menu-header-button {
1083     font-size: 85%;
1084   }
1085 }
1086
1087 /* Overwrite tree-view cell colon and use l10n string instead */
1088 .treeTable .treeLabelCell::after {
1089   content: "";
1090 }
1091
1092 /* Layout additional warning icon in tree value cell  */
1093 .security-info-value {
1094   display: flex;
1095 }
1096
1097 .security-info-value .textbox-input {
1098   text-overflow: ellipsis;
1099   border: none;
1100   background: none;
1101   color: inherit;
1102   width: 100%;
1103   margin-inline-end: 2px;
1104 }
1105
1106 .security-info-value .textbox-input:focus {
1107   outline: 0;
1108   box-shadow: var(--theme-focus-box-shadow-textbox);
1109 }
1110
1111 .treeTable .treeLabel {
1112   font-weight: 600;
1113 }
1114
1115 /* Customize default tree table style to align with devtools theme  */
1116 .theme-light .treeTable .treeLabel,
1117 .theme-light .treeTable .treeRow.hasChildren > .treeLabelCell > .treeLabel:hover {
1118   color: var(--theme-highlight-red);
1119 }
1120
1121 .theme-dark .treeTable .treeLabel,
1122 .theme-dark .treeTable .treeRow.hasChildren > .treeLabelCell > .treeLabel:hover {
1123   color: var(--theme-highlight-purple);
1124 }
1125
1126 .theme-firebug .treeTable .treeLabel {
1127   color: var(--theme-body-color);
1128 }
1129
1130 .treeTable .treeRow.hasChildren > .treeLabelCell > .treeLabel:hover {
1131   cursor: default;
1132   text-decoration: none;
1133 }
1134
1135 /*
1136  * FIXME: normal html block element cannot fill outer XUL element
1137  * This workaround should be removed after sidebar is migrated to react
1138  */
1139 #react-security-tabpanel-hook,
1140 #react-timings-tabpanel-hook {
1141   display: -moz-box;
1142   -moz-box-orient: vertical;
1143   -moz-box-flex: 1;
1144 }