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