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