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