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