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