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