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 window {
   7   padding: 0;
   8 }
   9
  10 :root.theme-dark,
  11 :root.theme-light {
  12   --table-splitter-color: #A09090;
  13   --table-zebra-background: rgba(255,159,0,0.1);
  14
  15   --timing-blocked-color: #FF0000;
  16   --timing-dns-color: #E7ADE7; /* pink */
  17   --timing-connect-color: #FF9F00; /* orange */
  18   --timing-send-color: #FFCF00; /* light blue */
  19   --timing-wait-color: #9C9CFF; /* blue grey */
  20   --timing-receive-color: #A09090; /* green */
  21
  22   --sort-ascending-image: url(chrome://devtools/skin/images/sort-arrows.svg#ascending);
  23   --sort-descending-image: url(chrome://devtools/skin/images/sort-arrows.svg#descending);
  24 }
  25
  26 #requests-menu-empty-notice {
  27   margin: 0;
  28   padding: 12px;
  29   font-size: 120%;
  30 }
  31
  32 #notice-perf-message {
  33   margin-top: 2px;
  34 }
  35
  36 #requests-menu-perf-notice-button {
  37   min-width: 30px;
  38   min-height: 26px;
  39   margin: 0;
  40   list-style-image: url("images/profiler-stopwatch.svg");
  41 }
  42
  43 /* Make sure the icon is visible on Linux (to overwrite a rule
  44   in xul.css that hides the icon if there is no label.
  45   See also bug 1278050. */
  46 #requests-menu-perf-notice-button .button-icon {
  47   display: block;
  48 }
  49
  50 #requests-menu-perf-notice-button .button-text {
  51   display: none;
  52 }
  53
  54 #requests-menu-reload-notice-button {
  55   min-height: 26px;
  56   margin: 0;
  57 }
  58
  59 /* Network requests table */
  60
  61 #requests-menu-toolbar {
  62 }
  63
  64 #requests-menu-toolbar > .toolbar-box > .toolbar-startcap,
  65 #requests-menu-toolbar > .toolbar-box > .toolbar-endcap {
  66   display: none;
  67 }
  68
  69 .requests-menu-subitem {
  70   padding: 3px;
  71 }
  72
  73 .requests-menu-header:not(:last-child):-moz-locale-dir(rtl),
  74 .requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) {
  75 }
  76
  77 #requests-menu-status-button,
  78 .requests-menu-header-button {
  79   background-color: transparent;
  80   border-image: linear-gradient(transparent 15%,
  81                                 var(--theme-toolbar-background) 15%,
  82                                 var(--theme-toolbar-background) 85%,
  83                                 transparent 85%) 1 1;
  84   border-style: solid;
  85   border-width: 0;
  86   border-inline-start-width: 1px;
  87   border-radius: 0;
  88   min-width: 1px;
  89   min-height: 24px;
  90   margin: 0;
  91   padding-bottom: 2px;
  92   padding-inline-start: 13px;
  93   padding-top: 2px;
  94   text-align: center;
  95 /*  color: inherit;*/
  96   font-weight: inherit !important;
  97 }
  98
  99 .requests-menu-header:first-child .requests-menu-header-button {
 100   border-width: 0;
 101 }
 102
 103 .requests-menu-header-button:hover {
 104   background-color: var(--theme-hover-background);
 105   color: var(--theme-hover-color);
 106 }
 107
 108 .requests-menu-header-button:hover:active {
 109   background-color: var(--theme-active-background);
 110   color: var(--theme-active-color);
 111 }
 112
 113 .requests-menu-header-button > .button-box > .button-icon,
 114 #requests-menu-waterfall-image {
 115   display: -moz-box;
 116   height: 4px;
 117   margin-inline-end: 6px;
 118   -moz-box-ordinal-group: 2;
 119   width: 7px;
 120 }
 121
 122 .requests-menu-header-button[sorted=ascending] > .button-box > .button-icon,
 123 .requests-menu-header-button[sorted=ascending] #requests-menu-waterfall-image {
 124   list-style-image: var(--sort-ascending-image);
 125 }
 126
 127 .requests-menu-header-button[sorted=descending] > .button-box > .button-icon,
 128 .requests-menu-header-button[sorted=descending] #requests-menu-waterfall-image {
 129   list-style-image: var(--sort-descending-image);
 130 }
 131
 132 .requests-menu-header-button > .button-box > .button-text,
 133 #requests-menu-waterfall-label-wrapper {
 134   -moz-box-flex: 1;
 135 }
 136
 137 .requests-menu-header-button[sorted],
 138 .requests-menu-header-button[sorted]:hover {
 139   background-color: var(--theme-selection-background);
 140   color: var(--theme-selection-color);
 141 }
 142
 143 .requests-menu-header-button[sorted],
 144 .requests-menu-header[active] + .requests-menu-header .requests-menu-header-button {
 145   border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1;
 146 }
 147
 148 #requests-menu-status-button {
 149   border: none;
 150 }
 151
 152 #requests-menu-status-button > .button-box {
 153   padding: 0;
 154 }
 155
 156 /* Network requests table: specific column dimensions */
 157
 158 .requests-menu-status {
 159   max-width: 6em;
 160   text-align: center;
 161   width: 10vw;
 162 }
 163
 164 .requests-menu-method,
 165 .requests-menu-method-box {
 166   max-width: 7em;
 167   text-align: center;
 168   width: 10vw;
 169 }
 170
 171 .requests-menu-icon-and-file {
 172   width: 22vw;
 173 }
 174
 175 .requests-menu-icon {
 176   background: #FFCF00;
 177   width: calc(1em + 4px);
 178   height: calc(1em + 4px);
 179   margin: -4px 0px;
 180   margin-inline-end: 4px;
 181 }
 182
 183 .requests-menu-icon {
 184   outline: 1px solid var(--table-splitter-color);
 185 }
 186
 187 .requests-menu-security-and-domain {
 188   width: 14vw;
 189 }
 190
 191 .requests-security-state-icon {
 192   width: 16px;
 193   height: 16px;
 194   margin-inline-end: 4px;
 195   cursor: pointer;
 196 }
 197
 198 .security-state-insecure {
 199   list-style-image: url("chrome://devtools/skin/images/security-state-insecure.svg");
 200 }
 201
 202 .security-state-secure {
 203   list-style-image: url("chrome://devtools/skin/images/security-state-secure.svg");
 204 }
 205
 206 .security-state-weak {
 207   list-style-image: url("chrome://devtools/skin/images/security-state-weak.svg");
 208 }
 209
 210 .security-state-broken {
 211   list-style-image: url("chrome://devtools/skin/images/security-state-broken.svg");
 212 }
 213
 214 .security-state-local {
 215   list-style-image: url("chrome://devtools/skin/images/security-state-local.svg");
 216 }
 217
 218 .requests-menu-type,
 219 .requests-menu-size {
 220   max-width: 6em;
 221   text-align: center;
 222   width: 8vw;
 223 }
 224
 225 .requests-menu-cause {
 226   max-width: 8em;
 227   width: 8vw;
 228 }
 229
 230 .requests-menu-cause-stack {
 231   background-color: var(--theme-body-color-alt);
 232   color: var(--theme-body-background);
 233   font-size: 8px;
 234   font-weight: bold;
 235   line-height: 10px;
 236   border-radius: 3px;
 237   padding: 0 2px;
 238   margin: 0;
 239   margin-inline-end: 3px;
 240   -moz-user-select: none;
 241 }
 242
 243 .requests-menu-transferred {
 244   max-width: 8em;
 245   text-align: center;
 246   width: 8vw;
 247 }
 248
 249 /* Network requests table: status codes */
 250
 251 .requests-menu-status-code {
 252   margin-inline-start: 3px !important;
 253   width: 3em;
 254   margin-inline-end: -3em !important;
 255 }
 256
 257 .requests-menu-status-icon {
 258   background-color: #A09090;
 259   height: 10px;
 260   width: 10px;
 261   margin-inline-start: 5px;
 262   margin-inline-end: 5px;
 263   border-radius: 20px;
 264   border: 1px solid #000000;
 265   transition: background-color 0.5s ease-in-out;
 266 }
 267
 268 .requests-menu-status-icon:not([code]) {
 269   background-color: var(--theme-content-color2);
 270 }
 271
 272 .requests-menu-status-icon[code="cached"] {
 273   border: 2px solid var(--theme-content-color2);
 274   background-color: transparent;
 275 }
 276
 277 .requests-menu-status-icon[code^="1"] {
 278   background-color: var(--theme-highlight-blue);
 279 }
 280
 281 .requests-menu-status-icon[code^="2"] {
 282   background-color: var(--theme-highlight-green);
 283 }
 284
 285 /* 3xx are triangles */
 286 .requests-menu-status-icon[code^="3"] {
 287   background-color: transparent;
 288   width: 0;
 289   height: 0;
 290   border-left: 5px solid transparent;
 291   border-right: 5px solid transparent;
 292   border-bottom: 10px solid var(--theme-highlight-lightorange);
 293   border-radius: 0;
 294 }
 295
 296 /* 4xx and 5xx are squares - error codes */
 297 .requests-menu-status-icon[code^="4"] {
 298   background-color: var(--theme-highlight-red);
 299   border-radius: 0; /* squares */
 300 }
 301
 302 .requests-menu-status-icon[code^="5"] {
 303   background-color: var(--theme-highlight-pink);
 304   border-radius: 0;
 305   transform: rotate(45deg);
 306 }
 307
 308 /* Network requests table: waterfall header */
 309
 310 .requests-menu-waterfall {
 311   padding-inline-start: 0;
 312 }
 313
 314 #requests-menu-waterfall-label:not(.requests-menu-waterfall-visible) {
 315   padding-inline-start: 13px;
 316 }
 317
 318 .requests-menu-timings-division {
 319   width: 100px;
 320   padding-top: 2px;
 321   padding-inline-start: 4px;
 322   font-size: 75%;
 323   pointer-events: none;
 324   box-sizing: border-box;
 325   text-align: start;
 326 }
 327
 328 .requests-menu-timings-division:first-child {
 329   width: 98px; /* Substract 2px for borders */
 330 }
 331
 332 .requests-menu-timings-division:not(:first-child) {
 333   border-inline-start: 1px dashed;
 334   margin-inline-start: -100px !important; /* Don't affect layout. */
 335 }
 336
 337 .requests-menu-timings-division:-moz-locale-dir(ltr) {
 338   transform-origin: left center;
 339 }
 340
 341 .requests-menu-timings-division:-moz-locale-dir(rtl) {
 342   transform-origin: right center;
 343 }
 344
 345 .requests-menu-timings-division {
 346   border-inline-start-color: var(--theme-body-color) !important;
 347 }
 348
 349 .requests-menu-timings-division[division-scale=second],
 350 .requests-menu-timings-division[division-scale=minute] {
 351   font-weight: 600;
 352 }
 353
 354 /* Network requests table: waterfall items */
 355
 356 .requests-menu-subitem.requests-menu-waterfall {
 357   padding-inline-start: 0px;
 358   padding-inline-end: 4px;
 359   /* Background created on a <canvas> in js. */
 360   /* @see devtools/client/netmonitor/netmonitor-view.js */
 361   background-image: -moz-element(#waterfall-background);
 362   background-repeat: repeat-y;
 363   background-position: -1px center;
 364 }
 365
 366 .requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) {
 367   background-position: right center;
 368 }
 369
 370 .requests-menu-timings:-moz-locale-dir(ltr) {
 371    transform-origin: left center;
 372 }
 373
 374 .requests-menu-timings:-moz-locale-dir(rtl) {
 375   transform-origin: right center;
 376 }
 377
 378 .requests-menu-timings-total:-moz-locale-dir(ltr) {
 379   transform-origin: left center;
 380 }
 381
 382 .requests-menu-timings-total:-moz-locale-dir(rtl) {
 383   transform-origin: right center;
 384 }
 385
 386 .requests-menu-timings-total {
 387   padding-inline-start: 4px;
 388   font-size: 85%;
 389   font-weight: 600;
 390 }
 391
 392 .requests-menu-timings-box {
 393   height: 9px;
 394 }
 395
 396 .requests-menu-timings-box.blocked {
 397   background-color: var(--timing-blocked-color);
 398 }
 399
 400 .requests-menu-timings-box.dns {
 401   background-color: var(--timing-dns-color);
 402 }
 403
 404 .requests-menu-timings-box.connect {
 405   background-color: var(--timing-connect-color);
 406 }
 407
 408 .requests-menu-timings-box.send {
 409   background-color: var(--timing-send-color);
 410 }
 411
 412 .requests-menu-timings-box.wait {
 413   background-color: var(--timing-wait-color);
 414 }
 415
 416 .requests-menu-timings-box.receive {
 417   background-color: var(--timing-receive-color);
 418 }
 419
 420 /* SideMenuWidget */
 421
 422 #network-table .side-menu-widget-empty-text,
 423 #network-table .side-menu-widget-container {
 424   background-color: var(--theme-body-background);
 425 }
 426
 427 #network-table .side-menu-widget-item {
 428   border-top-color: transparent;
 429   border-bottom-color: transparent;
 430 }
 431
 432 .side-menu-widget-item-contents {
 433   padding: 0px;
 434 }
 435
 436 .side-menu-widget-container {
 437   box-shadow: none !important;
 438 }
 439
 440 .side-menu-widget-item:not(.selected)[odd] {
 441   background-color: var(--table-zebra-background);
 442 }
 443
 444 .side-menu-widget-item:not(.selected):hover {
 445   background-color: var(--theme-selection-background-semitransparent);
 446 }
 447
 448 /* Network request details */
 449
 450 #details-pane-toggle {
 451   list-style-image: var(--theme-pane-collapse-image);
 452 }
 453
 454 #details-pane-toggle.pane-collapsed {
 455   list-style-image: var(--theme-pane-expand-image);
 456 }
 457
 458 /* Network request details tabpanels */
 459
 460 .tabpanel-content {
 461   background-color: var(--theme-sidebar-background);
 462 }
 463
 464 .theme-dark .tabpanel-content {
 465   color: var(--theme-body-color);
 466 }
 467
 468 #headers-tabpanel {
 469   background-color: var(--theme-toolbar-background);
 470 }
 471
 472 /* Summary tabpanel */
 473
 474 .tabpanel-summary-container {
 475   padding: 1px;
 476 }
 477
 478 .tabpanel-summary-label {
 479   padding-inline-start: 4px;
 480   padding-inline-end: 3px;
 481   font-weight: 600;
 482 }
 483
 484 .tabpanel-summary-value {
 485   color: inherit;
 486   padding-inline-start: 3px;
 487 }
 488
 489 /* Headers tabpanel */
 490
 491 #headers-summary-status,
 492 #headers-summary-version {
 493   padding-bottom: 2px;
 494 }
 495
 496 #headers-summary-size {
 497   padding-top: 2px;
 498 }
 499
 500 #headers-summary-resend {
 501   margin-top: -10px;
 502   margin-inline-end: 6px;
 503 }
 504
 505 #toggle-raw-headers {
 506   margin-top: -10px;
 507   margin-inline-end: 6px;
 508 }
 509
 510 .raw-response-textarea {
 511   height: 50vh;
 512 }
 513
 514 /* Response tabpanel */
 515
 516 #response-content-info-header {
 517   margin: 0;
 518   padding: 3px 8px;
 519   background-color: var(--theme-highlight-red);
 520   color: var(--theme-selection-color);
 521 }
 522
 523 #response-content-image-box {
 524   padding-top: 10px;
 525   padding-bottom: 10px;
 526 }
 527
 528 #response-content-image {
 529   background: #FFFFFF;
 530   border: 1px dashed #A09090;
 531   margin-bottom: 10px;
 532 }
 533
 534 /* Preview tabpanel */
 535
 536 #preview-tabpanel {
 537   background: #fff;
 538 }
 539
 540 #response-preview {
 541   display: -moz-box;
 542   -moz-box-flex: 1;
 543 }
 544
 545 /* Timings tabpanel */
 546
 547 #timings-tabpanel .tabpanel-summary-label {
 548   width: 10em;
 549 }
 550
 551 #timings-tabpanel .requests-menu-timings-box {
 552   transition: transform 0.2s ease-out;
 553   border: none;
 554   min-width: 1px;
 555 }
 556
 557 #timings-tabpanel .requests-menu-timings-total {
 558   transition: transform 0.2s ease-out;
 559 }
 560
 561 /* Security tabpanel */
 562
 563 .security-info-section {
 564   padding-inline-start: 1em;
 565 }
 566
 567 #security-tabpanel {
 568   overflow: auto;
 569 }
 570
 571 .security-warning-icon {
 572   background-image: url("images/alerticon-warning.png");
 573   background-size: 13px 12px;
 574   margin-inline-start: 5px;
 575   vertical-align: top;
 576   width: 13px;
 577   height: 12px;
 578 }
 579
 580 @media (min-resolution: 1.1dppx) {
 581   .security-warning-icon {
 582     background-image: url("images/alerticon-warning@2x.png");
 583   }
 584 }
 585
 586 /* Custom request form */
 587
 588 #custom-pane {
 589   padding: 0.6em 0.5em;
 590 }
 591
 592 .custom-header {
 593   font-size: 1.1em;
 594 }
 595
 596 .custom-section {
 597   margin-top: 0.5em;
 598 }
 599
 600 #custom-method-value {
 601   width: 4.5em;
 602 }
 603
 604 /* Main toolbar */
 605 .requests-menu-filter-button {
 606 /*  -moz-appearance: none;
 607   background: rgba(128,128,128,0.1);
 608   border: none;
 609   border-radius: 2px;
 610   min-width: 0;
 611   padding: 0 5px;
 612   margin: 2px;
 613   color: var(--theme-body-color);*/
 614   margin-top: 0;
 615   margin-bottom: 0;
 616 }
 617
 618 .requests-menu-filter-button:hover {
 619 /*  background: rgba(128,128,128,0.2);*/
 620 }
 621
 622 .requests-menu-filter-button:hover:active {
 623 /*  background-color: var(--theme-selection-background-semitransparent);*/
 624 }
 625
 626 /* Performance analysis buttons */
 627
 628 #requests-menu-network-summary-button {
 629   box-shadow: none;
 630   border-color: transparent;
 631   list-style-image: url("images/profiler-stopwatch-tbutton.svg");
 632   cursor: pointer;
 633   min-width: 0;
 634 }
 635
 636 /* Performance analysis view */
 637
 638 #network-statistics-toolbar {
 639   /* Make the toolbar invisible, it only hold the back button */
 640   -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar");
 641   background-color: #000000;
 642   border: none;
 643   margin: 0;
 644   padding: 0;
 645 }
 646
 647 #network-statistics-back-button {
 648   min-width: 4em;
 649   min-height: 100vh;
 650   margin: 0;
 651   padding: 0;
 652   border-radius: 0;
 653   border-top: none;
 654   border-bottom: none;
 655   border-inline-start: none;
 656 }
 657
 658 #network-statistics-view-splitter {
 659 /*  border-color: rgba(0,0,0,0.2);*/
 660   cursor: default;
 661   pointer-events: none;
 662 }
 663
 664 #network-statistics-charts {
 665   min-height: 1px;
 666 }
 667
 668 #network-statistics-charts {
 669   background-color: var(--theme-sidebar-background);
 670 }
 671
 672 #network-statistics-charts .pie-chart-container {
 673   margin-inline-start: 3vw;
 674   margin-inline-end: 1vw;
 675 }
 676
 677 #network-statistics-charts .table-chart-container {
 678   margin-inline-start: 1vw;
 679   margin-inline-end: 3vw;
 680 }
 681
 682 .chart-colored-blob[name=html] {
 683   fill: var(--theme-highlight-bluegrey);
 684   background: var(--theme-highlight-bluegrey);
 685 }
 686
 687 .chart-colored-blob[name=css] {
 688   fill: var(--theme-highlight-blue);
 689   background: var(--theme-highlight-blue);
 690 }
 691
 692 .chart-colored-blob[name=js] {
 693   fill: var(--theme-highlight-lightorange);
 694   background: var(--theme-highlight-lightorange);
 695 }
 696
 697 .chart-colored-blob[name=xhr] {
 698   fill: var(--theme-highlight-orange);
 699   background: var(--theme-highlight-orange);
 700 }
 701
 702 .chart-colored-blob[name=fonts] {
 703   fill: var(--theme-highlight-darkpurple);
 704   background: var(--theme-highlight-darkpurple);
 705 }
 706
 707 .chart-colored-blob[name=images] {
 708   fill: var(--theme-highlight-pink);
 709   background: var(--theme-highlight-pink);
 710 }
 711
 712 .chart-colored-blob[name=media] {
 713   fill: var(--theme-highlight-green);
 714   background: var(--theme-highlight-green);
 715 }
 716
 717 .chart-colored-blob[name=flash] {
 718   fill: var(--theme-highlight-red);
 719   background: var(--theme-highlight-red);
 720 }
 721
 722 .table-chart-row-label[name=cached] {
 723   display: none;
 724 }
 725
 726 .table-chart-row-label[name=count] {
 727   width: 3em;
 728   text-align: end;
 729 }
 730
 731 .table-chart-row-label[name=label] {
 732   width: 7em;
 733 }
 734
 735 .table-chart-row-label[name=size] {
 736   width: 7em;
 737 }
 738
 739 .table-chart-row-label[name=time] {
 740   width: 7em;
 741 }
 742
 743 /* Responsive sidebar */
 744 @media (max-width: 700px) {
 745   #requests-menu-toolbar {
 746     height: 22px;
 747   }
 748
 749   .requests-menu-header-button {
 750     min-height: 22px;
 751     padding-left: 8px;
 752   }
 753
 754   #details-pane {
 755     margin: 0 !important;
 756     /* To prevent all the margin hacks to hide the sidebar. */
 757   }
 758
 759   .requests-menu-status {
 760     max-width: none;
 761     width: 12vw;
 762   }
 763
 764   .requests-menu-status-code {
 765     width: auto;
 766   }
 767
 768   .requests-menu-method,
 769   .requests-menu-method-box {
 770     max-width: none;
 771     width: 14vw;
 772   }
 773
 774   .requests-menu-icon-and-file {
 775     width: 22vw;
 776   }
 777
 778   .requests-menu-security-and-domain {
 779     width: 18vw;
 780   }
 781
 782   .requests-menu-type {
 783     width: 10vw;
 784   }
 785
 786   .requests-menu-transferred,
 787   .requests-menu-size {
 788     width: 12vw;
 789   }
 790 }
 791
 792 /* Platform overrides (copied in from the old platform specific files) */
 793 :root[platform="win"] .requests-menu-header-button > .button-box {
 794   padding: 0;
 795 }
 796
 797 :root[platform="win"] .requests-menu-timings-division {
 798   padding-top: 1px;
 799   font-size: 90%;
 800 }
 801
 802 :root[platform="linux"] #headers-summary-resend {
 803   padding: 4px;
 804 }
 805
 806 :root[platform="linux"] #toggle-raw-headers {
 807   padding: 4px;
 808 }
 809
 810 /* Responsive sidebar */
 811 @media (max-width: 700px) {
 812   :root[platform="linux"] .requests-menu-header-button {
 813     font-size: 85%;
 814   }
 815 }