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