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