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