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