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