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