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