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