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-item:nth-child(even) {
 301   background: rgba(255,159,0,0.1);
 302 }
 303
 304 .side-menu-widget-item-contents {
 305   padding: 0;
 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   font-family: "Liberation Mono", Consolas, "Courier New", monospace;
 350 }
 351
 352 /* Headers tabpanel */
 353
 354 #headers-summary-status,
 355 #headers-summary-version {
 356   padding-bottom: 2px;
 357 }
 358
 359 #headers-summary-size {
 360   padding-top: 2px;
 361 }
 362
 363 #headers-summary-resend {
 364   margin: 0 6px;
 365 /*  min-height: 20px;*/
 366 }
 367
 368 /* Response tabpanel */
 369
 370 #response-content-info-header {
 371   background-color: #A09090;
 372   color: #000000;
 373   margin: 0;
 374   padding: 5px 8px;
 375 }
 376
 377 #response-content-image-box {
 378   padding-top: 10px;
 379   padding-bottom: 10px;
 380 }
 381
 382 #response-content-image {
 383   background: #FFFFFF;
 384   border: 1px dashed #A09090;
 385   margin-bottom: 10px;
 386 }
 387
 388 /* Timings tabpanel */
 389
 390 #timings-tabpanel .tabpanel-summary-label {
 391   width: 10em;
 392 }
 393
 394 #timings-tabpanel .requests-menu-timings-box {
 395   transition: transform 0.2s ease-out;
 396   min-width: 1px;
 397 }
 398
 399 #timings-tabpanel .requests-menu-timings-total {
 400   transition: transform 0.2s ease-out;
 401 }
 402
 403 /* Custom request form */
 404
 405 #custom-pane {
 406   padding: 0.6em 0.5em;
 407 }
 408
 409 .custom-header {
 410   font-size: 1.1em;
 411 }
 412
 413 .custom-section {
 414   margin-top: 0.5em;
 415 }
 416
 417 /* Footer */
 418
 419 #requests-menu-footer {
 420   border-top: 1px solid #9C9CFF;
 421   padding-top: 3px;
 422 }
 423
 424 .requests-menu-footer-button,
 425 .requests-menu-footer-label {
 426   min-width: 1em;
 427   margin: 0;
 428   -moz-margin-end: 3px;
 429   border: none;
 430   padding: 0px 1.5vw;
 431 /*  color: #fff;*/
 432 }
 433
 434 .requests-menu-footer-spacer {
 435   min-width: 2px;
 436 }
 437
 438 .requests-menu-footer-spacer,
 439 .requests-menu-footer-button {
 440 }
 441
 442 .requests-menu-footer-button {
 443 }
 444
 445 .requests-menu-footer-button:hover {
 446 }
 447
 448 .requests-menu-footer-button:hover:active {
 449 }
 450
 451 .requests-menu-footer-button:not(:active)[checked] {
 452 }
 453
 454 .requests-menu-footer-label {
 455   font-weight: 600;
 456 }
 457
 458 /* Responsive sidebar */
 459 @media (max-width: 700px) {
 460   #requests-menu-toolbar {
 461     height: 24px;
 462   }
 463
 464   .requests-menu-header-button {
 465     min-height: 23px; /* Remaining 1px comes from border of the toolbar. */
 466   }
 467
 468   .requests-menu-footer-button,
 469   .requests-menu-footer-label {
 470     padding: 0px 2vw;
 471   }
 472
 473   #details-pane {
 474     max-width: none;
 475     margin: 0 !important;
 476     /* To prevent all the margin hacks to hide the sidebar. */
 477   }
 478
 479   .requests-menu-status-and-method {
 480     width: 16vw;
 481   }
 482
 483   .requests-menu-file,
 484   .requests-menu-domain {
 485     width: 30vw;
 486   }
 487
 488   .requests-menu-type {
 489     width: 8vw;
 490   }
 491
 492   .requests-menu-size {
 493     width: 16vw;
 494     border-width: 0 !important;
 495     box-shadow: none !important;
 496     /* The "Timeline" header is not visible anymore, and thus the
 497        right border and box-shadow of "Size" column should be hidden. */
 498   }
 499 }
 500
 501 @media (min-width: 701px) {
 502   #network-table[type-overflows] .requests-menu-domain {
 503     border-width: 0 !important;
 504     box-shadow: none !important;
 505     /* The "Type" header is not visible anymore, and thus the
 506        right border and box-shadow of "Domain" column should be hidden. */
 507   }
 508
 509   #network-table[domain-overflows] .requests-menu-file {
 510     border-width: 0 !important;
 511     box-shadow: none !important;
 512     /* The "Domain" header is not visible anymore, and thus the
 513        right border and box-shadow of "File" column should be hidden. */
 514   }
 515 }