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