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