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 /* Network requests table */
  11
  12 #body {
  13   background-color: #000000;
  14 }
  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 {
  33   text-align: center;
  34 }
  35
  36 .requests-menu-header:first-child {
  37   -moz-padding-start: 4px;
  38   -moz-margin-start: 4px;
  39 }
  40
  41 .requests-menu-subitem {
  42   padding: 4px;
  43 }
  44
  45 .requests-menu-header:not(:last-child),
  46 .requests-menu-subitem:not(:last-child) {
  47   -moz-border-end: 1px solid #9C9CFF;
  48 }
  49
  50 .requests-menu-header-button,
  51 #requests-menu-status-button {
  52   background-color: transparent;
  53   border-radius: 0;
  54   min-width: 10px;
  55   margin: 0;
  56   transition: background-color 0.1s ease-in-out;
  57 }
  58
  59 .requests-menu-header-button > .button-box,
  60 #requests-menu-status-button > .button-box {
  61   border-radius: 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   border-radius: 20px;
 137   border: 1px solid #000000;
 138   transition: background-color 0.5s ease-in-out;
 139 }
 140
 141 .requests-menu-status[code^="1"] {
 142   background-color: #9C9CFF;
 143 }
 144
 145 .requests-menu-status[code^="2"] {
 146   background-color: #008484;
 147 }
 148
 149 .requests-menu-status[code^="3"] {
 150   background-color: #FF9F00;
 151 }
 152
 153 .requests-menu-status[code^="4"] {
 154   background-color: #FF0000;
 155 }
 156
 157 .requests-menu-status[code^="5"] {
 158   background-color: #6000CF;
 159 }
 160
 161 /* Network requests table: waterfall header */
 162
 163 #requests-menu-waterfall-label {
 164   -moz-padding-start: 8px;
 165   -moz-padding-end: 8px;
 166 }
 167
 168 .requests-menu-timings-division {
 169   width: 100px;
 170   padding-top: 1px;
 171   -moz-padding-start: 4px;
 172   -moz-border-start: 1px dotted #000000;
 173   font-size: 90%;
 174   pointer-events: none;
 175 }
 176
 177 .requests-menu-timings-division:not(:first-child) {
 178   -moz-margin-start: -100px !important; /* Don't affect layout. */
 179 }
 180
 181 .requests-menu-timings-division:-moz-locale-dir(ltr) {
 182   transform-origin: left center;
 183 }
 184
 185 .requests-menu-timings-division:-moz-locale-dir(rtl) {
 186   transform-origin: right center;
 187 }
 188
 189 /* Network requests table: waterfall items */
 190
 191 .requests-menu-subitem.requests-menu-waterfall {
 192   -moz-padding-start: 4px;
 193   -moz-padding-end: 4px;
 194   background-repeat: repeat-y; /* Background created on a <canvas> in js. */
 195   margin-top: -1px; /* Compensate borders. */
 196   margin-bottom: -1px;
 197 }
 198
 199 .requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) {
 200   background-position: right center;
 201 }
 202
 203 .requests-menu-timings:-moz-locale-dir(ltr) {
 204    transform-origin: left center;
 205 }
 206
 207 .requests-menu-timings:-moz-locale-dir(rtl) {
 208   transform-origin: right center;
 209 }
 210
 211 .requests-menu-timings-total:-moz-locale-dir(ltr) {
 212   transform-origin: left center;
 213 }
 214
 215 .requests-menu-timings-total:-moz-locale-dir(rtl) {
 216   transform-origin: right center;
 217 }
 218
 219 .requests-menu-timings-total {
 220   -moz-padding-start: 8px;
 221   font-size: 85%;
 222   font-weight: 600;
 223 }
 224
 225 .requests-menu-timings-cap {
 226   width: 4px;
 227   height: 10px;
 228   border: 1px solid #FFCF00;
 229 }
 230
 231 .requests-menu-timings-cap.start {
 232   -moz-border-end: none;
 233 }
 234
 235 .requests-menu-timings-cap.end {
 236   -moz-border-start: none;
 237 }
 238
 239 .requests-menu-timings-cap.start:-moz-locale-dir(ltr) {
 240   border-radius: 4px 0 0 4px;
 241   transform-origin: right center;
 242 }
 243
 244 .requests-menu-timings-cap.start:-moz-locale-dir(rtl) {
 245   -moz-border-start: none;
 246   border-radius: 0 4px 4px 0;
 247   transform-origin: left center;
 248 }
 249
 250 .requests-menu-timings-cap.end:-moz-locale-dir(ltr) {
 251   border-radius: 0 4px 4px 0;
 252   transform-origin: left center;
 253 }
 254
 255 .requests-menu-timings-cap.end:-moz-locale-dir(rtl) {
 256   border-radius: 4px 0 0 4px;
 257   transform-origin: right center;
 258 }
 259
 260 .requests-menu-timings-box {
 261   height: 10px;
 262   border-top: 1px solid #FFCF00;
 263   border-bottom: 1px solid #FFCF00;
 264 }
 265
 266 .requests-menu-timings-box.blocked,
 267 .requests-menu-timings-cap.blocked {
 268   background-color: #FF0000;
 269 }
 270
 271 .requests-menu-timings-box.dns,
 272 .requests-menu-timings-cap.dns {
 273   background-color: #6000CF;
 274 }
 275
 276 .requests-menu-timings-box.connect,
 277 .requests-menu-timings-cap.connect {
 278   background-color: #FF9F00;
 279 }
 280
 281 .requests-menu-timings-box.send,
 282 .requests-menu-timings-cap.send {
 283   background-color: #FFCF00;
 284 }
 285
 286 .requests-menu-timings-box.wait,
 287 .requests-menu-timings-cap.wait {
 288   background-color: #9C9CFF;
 289 }
 290
 291 .requests-menu-timings-box.receive,
 292 .requests-menu-timings-cap.receive {
 293   background-color: #A09090;
 294 }
 295
 296 .side-menu-widget-item:nth-child(even) {
 297   background: rgba(255,159,0,0.1);
 298 }
 299
 300 .side-menu-widget-item-contents {
 301   padding: 0px 4px;
 302 }
 303
 304 /* Network request details */
 305
 306 #details-pane {
 307   background-color: #000000;
 308   max-width: 500px;
 309 }
 310
 311 #details-pane-toggle {
 312   list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
 313   -moz-image-region: rect(0px,16px,16px,0px);
 314 }
 315
 316 #details-pane-toggle[pane-collapsed] {
 317   list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
 318 }
 319
 320 #details-pane-toggle:hover,
 321 #details-pane-toggle:hover:active {
 322   -moz-image-region: rect(0px,32px,16px,16px);
 323 }
 324
 325 /* Network request details tabpanels */
 326
 327 .tabpanel-content {
 328   background-color: #000000;
 329   color: #FF9F00;
 330 }
 331
 332 .tabpanel-summary-container {
 333   padding: 1px;
 334 }
 335
 336 .tabpanel-summary-label {
 337   -moz-padding-start: 4px;
 338   -moz-padding-end: 3px;
 339   font-weight: 600;
 340   color: #9C9CFF;
 341 }
 342
 343 .tabpanel-summary-value {
 344   -moz-padding-start: 3px;
 345   font-family: "Liberation Mono", Consolas, "Courier New", monospace;
 346 }
 347
 348 /* Headers tabpanel */
 349
 350 #headers-summary-status,
 351 #headers-summary-version {
 352   padding-bottom: 2px;
 353 }
 354
 355 #headers-summary-size {
 356   padding-top: 2px;
 357 }
 358
 359 /* Response tabpanel */
 360
 361 #response-content-image-box {
 362   padding-top: 10px;
 363   padding-bottom: 10px;
 364 }
 365
 366 #response-content-image {
 367   background: #FFFFFF;
 368   border: 1px dashed #A09090;
 369   margin-bottom: 10px;
 370 }
 371
 372 /* Timings tabpanel */
 373
 374 #timings-tabpanel .tabpanel-summary-label {
 375   width: 10em;
 376 }
 377
 378 #timings-tabpanel .requests-menu-timings-box {
 379   transition: transform 0.2s ease-out;
 380   min-width: 1px;
 381 }
 382
 383 #timings-tabpanel .requests-menu-timings-total {
 384   transition: transform 0.2s ease-out;
 385 }
 386
 387 /* Responsive sidebar */
 388 @media (max-width: 700px) {
 389   #requests-menu-toolbar {
 390     height: 24px;
 391   }
 392
 393   .requests-menu-header-button {
 394     min-height: 23px; /* Remaining 1px comes from border of the button. */
 395   }
 396
 397   #details-pane {
 398     max-width: none;
 399     margin: 0 !important;
 400     /* To prevent all the margin hacks to hide the sidebar. */
 401   }
 402
 403   .requests-menu-status-and-method {
 404     width: 14vw;
 405   }
 406
 407   .requests-menu-file,
 408   .requests-menu-domain {
 409     width: 30vw;
 410     min-width: 10em;
 411   }
 412
 413   .requests-menu-type {
 414     width: 8vw;
 415   }
 416
 417   .requests-menu-size {
 418     width: 16vw;
 419     border-width: 0 !important;
 420     box-shadow: none !important;
 421     /* The "Timeline" header is not visible anymore, and thus the
 422        right border and box-shadow of "Size" column should be hidden. */
 423   }
 424 }
 425
 426 @media (min-width: 701px) {
 427   #network-table[type-overflows] .requests-menu-domain {
 428     border-width: 0 !important;
 429     box-shadow: none !important;
 430     /* The "Type" header is not visible anymore, and thus the
 431        right border and box-shadow of "Domain" column should be hidden. */
 432   }
 433
 434   #network-table[domain-overflows] .requests-menu-file {
 435     border-width: 0 !important;
 436     box-shadow: none !important;
 437     /* The "Domain" header is not visible anymore, and thus the
 438        right border and box-shadow of "File" column should be hidden. */
 439   }
 440 }