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