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