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