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   background: #000000; /* Toolbars */
 517 }
 518
 519 #network-statistics-charts .pie-chart-container {
 520   -moz-margin-start: 3vw;
 521   -moz-margin-end: 1vw;
 522 }
 523
 524 #network-statistics-charts .table-chart-container {
 525   -moz-margin-start: 1vw;
 526   -moz-margin-end: 3vw;
 527 }
 528
 529 .chart-colored-blob[name=html] {
 530   fill: #A09090; /* Blue-Grey highlight */
 531   background: #A09090;
 532 }
 533
 534 .chart-colored-blob[name=css] {
 535   fill: #9C9CFF; /* Blue highlight */
 536   background: #9C9CFF;
 537 }
 538
 539 .chart-colored-blob[name=js] {
 540   fill: #FFCF00; /* Light Orange highlight */
 541   background: #FFCF00;
 542 }
 543
 544 .chart-colored-blob[name=xhr] {
 545   fill: #FF9F00; /* Orange highlight */
 546   background: #FF9F00;
 547 }
 548
 549 .chart-colored-blob[name=fonts] {
 550   fill: #6000CF; /* Purple highlight */
 551   background: #6000CF;
 552 }
 553
 554 .chart-colored-blob[name=images] {
 555   fill: #E7ADE7; /* Pink highlight */
 556   background: #E7ADE7;
 557 }
 558
 559 .chart-colored-blob[name=media] {
 560   fill: #008484; /* Green highlight */
 561   background: #008484;
 562 }
 563
 564 .chart-colored-blob[name=flash] {
 565   fill: #FF0000; /* Red highlight */
 566   background: #FF0000;
 567 }
 568
 569 .table-chart-row-label[name=cached] {
 570   display: none;
 571 }
 572
 573 .table-chart-row-label[name=count] {
 574   width: 3em;
 575   text-align: end;
 576 }
 577
 578 .table-chart-row-label[name=label] {
 579   width: 7em;
 580 }
 581
 582 .table-chart-row-label[name=size] {
 583   width: 7em;
 584 }
 585
 586 .table-chart-row-label[name=time] {
 587   width: 7em;
 588 }
 589
 590 /* Responsive sidebar */
 591 @media (max-width: 700px) {
 592   #requests-menu-toolbar {
 593     height: 24px;
 594   }
 595
 596   .requests-menu-header-button {
 597     min-height: 24px;
 598   }
 599
 600   .requests-menu-footer-button,
 601   .requests-menu-footer-label {
 602     padding: 0px 1vw;
 603   }
 604
 605   #details-pane {
 606     max-width: none;
 607     margin: 0 !important;
 608     /* To prevent all the margin hacks to hide the sidebar. */
 609   }
 610
 611   .requests-menu-status-and-method {
 612     width: 16vw;
 613   }
 614
 615   .requests-menu-file,
 616   .requests-menu-domain {
 617     width: 30vw;
 618   }
 619
 620   .requests-menu-type {
 621     width: 8vw;
 622   }
 623
 624   .requests-menu-size {
 625     width: 16vw;
 626     border-width: 0 !important;
 627     box-shadow: none !important;
 628     /* The "Timeline" header is not visible anymore, and thus the
 629        right border and box-shadow of "Size" column should be hidden. */
 630   }
 631 }
 632
 633 @media (min-width: 701px) {
 634   #network-table[type-overflows] .requests-menu-domain {
 635     border-width: 0 !important;
 636     box-shadow: none !important;
 637     /* The "Type" header is not visible anymore, and thus the
 638        right border and box-shadow of "Domain" column should be hidden. */
 639   }
 640
 641   #network-table[domain-overflows] .requests-menu-file {
 642     border-width: 0 !important;
 643     box-shadow: none !important;
 644     /* The "Domain" header is not visible anymore, and thus the
 645        right border and box-shadow of "File" column should be hidden. */
 646   }
 647 }
 648
 649 /* === END netmonitor.inc.css === */