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   -moz-padding-start: 0;
  63   -moz-padding-end: 0;
  64   border: 0;
  65 }
  66
  67 .requests-menu-header-button:hover {
  68   background-color: #FFCF00;
  69 }
  70
  71 .requests-menu-header-button:hover:active {
  72   background-color: #FF9F00;
  73 }
  74
  75 .requests-menu-header-button:not(:active)[sorted] {
  76   background-color: #008484;
  77 }
  78
  79 .requests-menu-header-button:not(:active)[sorted=ascending] {
  80   background-image: radial-gradient(farthest-side at center top, rgba(0,0,0,.7), rgba(0,0,0,0.3));
  81   background-size: 100% 1px;
  82   background-repeat: no-repeat;
  83 }
  84
  85 .requests-menu-header-button:not(:active)[sorted=descending] {
  86   background-image: radial-gradient(farthest-side at center bottom, rgba(0,0,0,.7), rgba(0,0,0,0.3));
  87   background-size: 100% 1px;
  88   background-repeat: no-repeat;
  89   background-position: bottom;
  90 }
  91
  92 #requests-menu-status-button {
  93   border: none;
  94 }
  95
  96 #requests-menu-status-button > .button-box {
  97   padding: 0;
  98 }
  99
 100 /* Network requests table: specific column dimensions */
 101
 102 .requests-menu-status-and-method {
 103   width: 8em;
 104 }
 105
 106 .requests-menu-status {
 107   width: 10px;
 108   height: 10px;
 109   margin: 0px 2px;
 110 }
 111
 112 .requests-menu-method {
 113   text-align: center;
 114   font-weight: 600;
 115 }
 116
 117 .requests-menu-file {
 118   width: 16em;
 119 }
 120
 121 .requests-menu-domain {
 122   width: 16em;
 123 }
 124
 125 .requests-menu-type {
 126   text-align: center;
 127   width: 4em;
 128 }
 129
 130 .requests-menu-size {
 131   text-align: center;
 132   width: 8em;
 133 }
 134
 135 /* Network requests table: status codes */
 136
 137 .requests-menu-status {
 138   background-color: #A09090;
 139   border-radius: 20px;
 140   border: 1px solid #000000;
 141   transition: background-color 0.5s ease-in-out;
 142 }
 143
 144 .requests-menu-status[code^="1"] {
 145   background-color: #9C9CFF;
 146 }
 147
 148 .requests-menu-status[code^="2"] {
 149   background-color: #008484;
 150 }
 151
 152 .requests-menu-status[code^="3"] {
 153   background-color: #FF9F00;
 154 }
 155
 156 .requests-menu-status[code^="4"] {
 157   background-color: #FF0000;
 158 }
 159
 160 .requests-menu-status[code^="5"] {
 161   background-color: #6000CF;
 162 }
 163
 164 /* Network requests table: waterfall header */
 165
 166 #requests-menu-waterfall-label {
 167   -moz-padding-start: 8px;
 168   -moz-padding-end: 8px;
 169 }
 170
 171 .requests-menu-timings-division {
 172   width: 100px;
 173   padding-top: 1px;
 174   -moz-padding-start: 4px;
 175   -moz-border-start: 1px dotted #000000;
 176   font-size: 90%;
 177   pointer-events: none;
 178 }
 179
 180 .requests-menu-timings-division:not(:first-child) {
 181   -moz-margin-start: -100px !important; /* Don't affect layout. */
 182 }
 183
 184 .requests-menu-timings-division:-moz-locale-dir(ltr) {
 185   transform-origin: left center;
 186 }
 187
 188 .requests-menu-timings-division:-moz-locale-dir(rtl) {
 189   transform-origin: right center;
 190 }
 191
 192 /* Network requests table: waterfall items */
 193
 194 .requests-menu-subitem.requests-menu-waterfall {
 195   -moz-padding-start: 4px;
 196   -moz-padding-end: 4px;
 197   background-repeat: repeat-y; /* Background created on a <canvas> in js. */
 198   margin-top: -1px; /* Compensate borders. */
 199   margin-bottom: -1px;
 200 }
 201
 202 .requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) {
 203   background-position: right center;
 204 }
 205
 206 .requests-menu-timings:-moz-locale-dir(ltr) {
 207    transform-origin: left center;
 208 }
 209
 210 .requests-menu-timings:-moz-locale-dir(rtl) {
 211   transform-origin: right center;
 212 }
 213
 214 .requests-menu-timings-total:-moz-locale-dir(ltr) {
 215   transform-origin: left center;
 216 }
 217
 218 .requests-menu-timings-total:-moz-locale-dir(rtl) {
 219   transform-origin: right center;
 220 }
 221
 222 .requests-menu-timings-total {
 223   -moz-padding-start: 8px;
 224   font-size: 85%;
 225   font-weight: 600;
 226 }
 227
 228 .requests-menu-timings-cap {
 229   width: 4px;
 230   height: 10px;
 231   border: 1px solid #FFCF00;
 232 }
 233
 234 .requests-menu-timings-cap.start {
 235   -moz-border-end: none;
 236 }
 237
 238 .requests-menu-timings-cap.end {
 239   -moz-border-start: none;
 240 }
 241
 242 .requests-menu-timings-cap.start:-moz-locale-dir(ltr) {
 243   border-radius: 4px 0 0 4px;
 244   transform-origin: right center;
 245 }
 246
 247 .requests-menu-timings-cap.start:-moz-locale-dir(rtl) {
 248   -moz-border-start: none;
 249   border-radius: 0 4px 4px 0;
 250   transform-origin: left center;
 251 }
 252
 253 .requests-menu-timings-cap.end:-moz-locale-dir(ltr) {
 254   border-radius: 0 4px 4px 0;
 255   transform-origin: left center;
 256 }
 257
 258 .requests-menu-timings-cap.end:-moz-locale-dir(rtl) {
 259   border-radius: 4px 0 0 4px;
 260   transform-origin: right center;
 261 }
 262
 263 .requests-menu-timings-box {
 264   height: 10px;
 265   border-top: 1px solid #FFCF00;
 266   border-bottom: 1px solid #FFCF00;
 267 }
 268
 269 .requests-menu-timings-box.blocked,
 270 .requests-menu-timings-cap.blocked {
 271   background-color: #FF0000;
 272 }
 273
 274 .requests-menu-timings-box.dns,
 275 .requests-menu-timings-cap.dns {
 276   background-color: #6000CF;
 277 }
 278
 279 .requests-menu-timings-box.connect,
 280 .requests-menu-timings-cap.connect {
 281   background-color: #FF9F00;
 282 }
 283
 284 .requests-menu-timings-box.send,
 285 .requests-menu-timings-cap.send {
 286   background-color: #FFCF00;
 287 }
 288
 289 .requests-menu-timings-box.wait,
 290 .requests-menu-timings-cap.wait {
 291   background-color: #9C9CFF;
 292 }
 293
 294 .requests-menu-timings-box.receive,
 295 .requests-menu-timings-cap.receive {
 296   background-color: #A09090;
 297 }
 298
 299 .side-menu-widget-item:nth-child(even) {
 300   background: rgba(255,159,0,0.1);
 301 }
 302
 303 .side-menu-widget-item-contents {
 304   padding: 0px 4px;
 305 }
 306
 307 /* Network request details */
 308
 309 #details-pane {
 310   background-color: #000000;
 311   max-width: 500px;
 312 }
 313
 314 #details-pane-toggle {
 315   list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
 316   -moz-image-region: rect(0px,16px,16px,0px);
 317 }
 318
 319 #details-pane-toggle[pane-collapsed] {
 320   list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
 321 }
 322
 323 #details-pane-toggle:hover,
 324 #details-pane-toggle:hover:active {
 325   -moz-image-region: rect(0px,32px,16px,16px);
 326 }
 327
 328 /* Network request details tabpanels */
 329
 330 .tabpanel-content {
 331   background-color: #000000;
 332   color: #FF9F00;
 333 }
 334
 335 .tabpanel-summary-container {
 336   padding: 1px;
 337 }
 338
 339 .tabpanel-summary-label {
 340   -moz-padding-start: 4px;
 341   -moz-padding-end: 3px;
 342   font-weight: 600;
 343   color: #9C9CFF;
 344 }
 345
 346 .tabpanel-summary-value {
 347   -moz-padding-start: 3px;
 348   font-family: "Liberation Mono", Consolas, "Courier New", monospace;
 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 /* Response tabpanel */
 363
 364 #response-content-image-box {
 365   padding-top: 10px;
 366   padding-bottom: 10px;
 367 }
 368
 369 #response-content-image {
 370   background: #FFFFFF;
 371   border: 1px dashed #A09090;
 372   margin-bottom: 10px;
 373 }
 374
 375 /* Timings tabpanel */
 376
 377 #timings-tabpanel .tabpanel-summary-label {
 378   width: 10em;
 379 }
 380
 381 #timings-tabpanel .requests-menu-timings-box {
 382   transition: transform 0.2s ease-out;
 383   min-width: 1px;
 384 }
 385
 386 #timings-tabpanel .requests-menu-timings-total {
 387   transition: transform 0.2s ease-out;
 388 }
 389
 390 /* Responsive sidebar */
 391 @media (max-width: 700px) {
 392   #requests-menu-toolbar {
 393     height: 24px;
 394   }
 395
 396   .requests-menu-header-button {
 397     min-height: 23px; /* Remaining 1px comes from border of the button. */
 398   }
 399
 400   #details-pane {
 401     max-width: none;
 402     margin: 0 !important;
 403     /* To prevent all the margin hacks to hide the sidebar. */
 404   }
 405
 406   .requests-menu-status-and-method {
 407     width: 14vw;
 408   }
 409
 410   .requests-menu-file,
 411   .requests-menu-domain {
 412     width: 30vw;
 413     min-width: 10em;
 414   }
 415
 416   .requests-menu-type {
 417     width: 8vw;
 418   }
 419
 420   .requests-menu-size {
 421     width: 16vw;
 422     border-width: 0 !important;
 423     box-shadow: none !important;
 424     /* The "Timeline" header is not visible anymore, and thus the
 425        right border and box-shadow of "Size" column should be hidden. */
 426   }
 427 }
 428
 429 @media (min-width: 701px) {
 430   #network-table[type-overflows] .requests-menu-domain {
 431     border-width: 0 !important;
 432     box-shadow: none !important;
 433     /* The "Type" header is not visible anymore, and thus the
 434        right border and box-shadow of "Domain" column should be hidden. */
 435   }
 436
 437   #network-table[domain-overflows] .requests-menu-file {
 438     border-width: 0 !important;
 439     box-shadow: none !important;
 440     /* The "Domain" header is not visible anymore, and thus the
 441        right border and box-shadow of "File" column should be hidden. */
 442   }
 443 }