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