LCARStrek/browser/devtools/webconsole.css

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 window {
   6   padding: 0;
   7 }
   8
   9 /*
  10  * This hardcoded width likely due to a toolkit Windows specific bug.
  11  * See http://hg.mozilla.org/mozilla-central/annotate/f38d6df93cad/toolkit/themes/winstripe/global/textbox-aero.css#l7
  12  */
  13
  14 .hud-filter-box {
  15   width: 200px;
  16 }
  17
  18 /* === BEGIN webconsole.inc.css === */
  19
  20 /* General output styles */
  21
  22 a {
  23   -moz-user-focus: normal;
  24   -moz-user-input: enabled;
  25   cursor: pointer;
  26   text-decoration: underline;
  27 }
  28
  29 /* Workaround for Bug 575675 - FindChildWithRules aRelevantLinkVisited
  30  * assertion when loading HTML page with links in XUL iframe */
  31 *:visited { }
  32
  33 .message {
  34   display: flex;
  35   flex: 0 0 auto;
  36   padding: 0 7px;
  37   width: 100%;
  38   box-sizing: border-box;
  39 }
  40
  41 .message > .timestamp {
  42   flex: 0 0 auto;
  43   color: #8050B0;
  44   margin: 4px 6px 0 0;
  45 }
  46
  47 .message > .indent {
  48   flex: 0 0 auto;
  49 }
  50
  51 .message > .icon {
  52   background: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 0, 1, 0, 0) no-repeat;
  53   background-position: center;
  54   flex: 0 0 auto;
  55   margin: 3px 6px 0 0;
  56   padding: 0 4px;
  57   width: 8px;
  58   height: 1em;
  59   align-self: flex-start;
  60 }
  61
  62 .message > .message-body-wrapper {
  63   flex: 1 1 100%;
  64   margin: 3px;
  65 }
  66
  67 /* The red bubble that shows the number of times a message is repeated */
  68 .message-repeats {
  69   -moz-user-select: none;
  70   flex: 0 0 auto;
  71   margin: 2px 6px;
  72   padding: 0 6px;
  73   height: 1.25em;
  74   color: #000000;
  75   background-color: #FF0000;
  76   border-radius: 40px;
  77   /* font: message-box; */
  78   font-size: 0.9em;
  79   font-weight: 600;
  80 }
  81
  82 .message-repeats[value="1"] {
  83   display: none;
  84 }
  85
  86 .message-location {
  87   display: flex;
  88   flex: 0 0 auto;
  89   align-self: flex-start;
  90   justify-content: flex-end;
  91   width: 10em;
  92   margin-top: 3px;
  93   color: #3333FF;
  94   text-decoration: none;
  95   white-space: nowrap;
  96 }
  97
  98 .message-location:hover,
  99 .message-location:focus {
 100   text-decoration: underline;
 101 }
 102
 103 .message-location > .filename {
 104   text-overflow: ellipsis;
 105   text-align: end;
 106   overflow: hidden;
 107   white-space: nowrap;
 108 }
 109
 110 .message-location > .line-number {
 111   flex: 0 0 auto;
 112 }
 113
 114 .hud-msg-node[selected="true"] > .webconsole-timestamp,
 115 .hud-msg-node[selected="true"] > .webconsole-location {
 116   color: inherit;
 117 }
 118
 119 .message-flex-body {
 120   display: flex;
 121 }
 122
 123 .message-body {
 124   white-space: pre-wrap;
 125   word-wrap: break-word;
 126 }
 127
 128 .message-flex-body > .message-body {
 129   display: block;
 130   flex: 1 1 auto;
 131   vertical-align: middle;
 132 }
 133
 134 .message-flex-body > .message-location {
 135   margin-top: 0;
 136 }
 137
 138 .jsterm-input-container {
 139   border-top-width: 1px;
 140   border-top-style: solid;
 141 }
 142
 143 #output-wrapper {
 144   direction: ltr;
 145   overflow: auto;
 146 }
 147
 148 #output-container {
 149   -moz-user-select: text;
 150   -moz-box-flex: 1;
 151   display: flex;
 152   flex-direction: column;
 153   align-items: flex-start;
 154 }
 155
 156 #output-container.hideTimestamps > .message {
 157   -moz-padding-start: 0;
 158   -moz-margin-start: 7px;
 159   width: calc(100% - 7px);
 160 }
 161
 162 #output-container.hideTimestamps > .message > .timestamp {
 163   display: none;
 164 }
 165
 166 #output-container.hideTimestamps > .message > .indent {
 167   background-color: #000000; /* .theme-body */
 168 }
 169
 170 .filtered-by-type,
 171 .filtered-by-string {
 172   display: none;
 173 }
 174
 175 .hidden-message {
 176   display: block;
 177   visibility: hidden;
 178   height: 0;
 179   overflow: hidden;
 180 }
 181
 182 /* WebConsole colored drops */
 183
 184 .webconsole-filter-button {
 185   -moz-user-focus: normal;
 186 }
 187
 188 .webconsole-filter-button[checked] {
 189   /* color: white !important; */
 190 }
 191
 192 .webconsole-filter-button > .toolbarbutton-menubutton-button:before {
 193   content: "";
 194   display: inline-block;
 195   height: 8px;
 196   width: 8px;
 197   border-radius: 50%;
 198   margin-left: 5px;
 199   border-width: 1px;
 200   border-style: solid;
 201 }
 202
 203 .webconsole-filter-button menuitem {
 204   -moz-image-region: auto;
 205 }
 206
 207 .hud-filter-box {
 208   margin-top: 0;
 209   margin-bottom: 0;
 210 }
 211
 212 /* Network styles */
 213 .webconsole-filter-button[category="net"] > .toolbarbutton-menubutton-button:before {
 214   background-image: linear-gradient(#BF9B00, #7F6700);
 215   border-color: #FFCF00;
 216 }
 217
 218 .message[severity=error] {
 219   background-color: #FF0000;
 220 }
 221
 222 .console-string {
 223   color: #FF0000;
 224 }
 225
 226 .message[category=network] > .indent {
 227   -moz-border-end: solid #FF0000 6px;
 228 }
 229
 230 .message[category=network][severity=error] > .icon {
 231   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 0, 16, 8, 8);
 232 }
 233
 234 .message[category=network] > .message-body {
 235   display: flex;
 236 }
 237
 238 .message[category=network] .method {
 239   flex: 0 0 auto;
 240 }
 241
 242 .message[category=network]:not(.navigation-marker) .url {
 243   flex: 1 1 auto;
 244   /* Make sure the URL is very small initially, let flex change width as needed. */
 245   width: 100px;
 246   min-width: 5em;
 247   white-space: nowrap;
 248   overflow: hidden;
 249   text-overflow: ellipsis;
 250 }
 251
 252 .message[category=network] .status {
 253   flex: 0 0 auto;
 254   -moz-margin-start: 6px;
 255 }
 256
 257 .message[category=network].mixed-content .url {
 258   color: #FF0000;
 259 }
 260
 261 .message .learn-more-link {
 262   color: #3333FF;
 263   margin: 0 6px;
 264 }
 265
 266 /* CSS styles */
 267 .webconsole-filter-button[category="css"] > .toolbarbutton-menubutton-button:before {
 268   background-image: linear-gradient(#7575BF, #4E4E7F);
 269   border-color: #9C9CFF;
 270 }
 271
 272 .message[category=cssparser] > .indent {
 273   -moz-border-end: solid #9C9CFF 6px;
 274 }
 275
 276 .message[category=cssparser][severity=error] > .icon {
 277   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 8, 16, 16, 8);
 278 }
 279
 280 .message[category=cssparser][severity=warn] > .icon {
 281   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 8, 24, 16, 16);
 282 }
 283
 284 /* JS styles */
 285 .webconsole-filter-button[category="js"] > .toolbarbutton-menubutton-button:before {
 286    background-image: linear-gradient(#BF7700, #7F4F00);
 287    border-color: #FF9F00;
 288 }
 289
 290 .message[category=exception] > .indent {
 291   -moz-border-end: solid #FF9F00 6px;
 292 }
 293
 294 .message[category=exception][severity=error] > .icon {
 295   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 16, 16, 24, 8);
 296 }
 297
 298 .message[category=exception][severity=warn] > .icon {
 299   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 16, 24, 24, 16);
 300 }
 301
 302 /* Web Developer styles */
 303 .webconsole-filter-button[category="logging"] > .toolbarbutton-menubutton-button:before {
 304    background-image: linear-gradient(#5F3B83, #3F2756);
 305    border-color: #8050B0;
 306 }
 307
 308 .message[category=console] > .indent {
 309   -moz-border-end: solid #8050B0 6px;
 310 }
 311
 312 .message[category=console][severity=error] > .icon,
 313 .message[category=output][severity=error] > .icon {
 314   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 24, 16, 32, 8);
 315 }
 316
 317 .message[category=console][severity=warn] > .icon {
 318   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 24, 24, 32, 16);
 319 }
 320
 321 .message[category=console][severity=info] > .icon {
 322   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 24, 32, 32, 24);
 323 }
 324
 325 /* Input and output styles */
 326 .message[category=input] > .indent,
 327 .message[category=output] > .indent {
 328   -moz-border-end: solid #A09090 6px;
 329 }
 330
 331 .message[category=input] > .icon {
 332   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 24, 40, 32, 32);
 333 }
 334
 335 .message[category=output] > .icon {
 336   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 24, 48, 32, 40);
 337 }
 338
 339 /* JSTerm Styles */
 340
 341 .jsterm-input-node,
 342 .jsterm-complete-node {
 343   -moz-padding-start: 16px;
 344   margin: 3px 0 0 0;
 345   background-color: transparent;
 346 }
 347
 348 .jsterm-input-node {
 349   background: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16) no-repeat;
 350 }
 351
 352 :-moz-any(.jsterm-input-node,
 353           .jsterm-complete-node) > .textbox-input-box > .textbox-textarea {
 354   overflow-x: hidden;
 355 }
 356
 357 .inlined-variables-view .message-body {
 358   display: flex;
 359   flex-direction: column;
 360 }
 361
 362 .inlined-variables-view iframe {
 363  display: block;
 364   flex: 1;
 365   margin-top: 5px;
 366   margin-bottom: 15px;
 367   -moz-margin-end: 15px;
 368   border: 1px solid #9C9CFF;
 369   border-radius: 4px;
 370 }
 371
 372 #webconsole-sidebar > tabs {
 373   height: 0;
 374   border: none;
 375 }
 376
 377 .devtools-side-splitter ~ #webconsole-sidebar[hidden] {
 378   display: none;
 379 }
 380
 381 /* Security styles */
 382
 383 .message[category=security] > .indent {
 384   -moz-border-end: solid #FF0000 6px;
 385 }
 386
 387 .webconsole-filter-button[category="security"] > .toolbarbutton-menubutton-button:before {
 388   background-color: #FF0000;
 389   border-color: #FFCF00;
 390 }
 391
 392 .message[category=security][severity=error] > .icon {
 393   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 32, 16, 40, 8);
 394 }
 395
 396 .message[category=security][severity=warn] > .icon {
 397   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 32, 24, 40, 16);
 398 }
 399
 400 .navigation-marker {
 401   color: #000000;
 402   background-color: #A09090;
 403   margin-top: 6px;
 404   margin-bottom: 6px;
 405   font-size: 0.9em;
 406 }
 407
 408 .navigation-marker .url {
 409   -moz-padding-end: 9px;
 410   text-decoration: none;
 411 }
 412
 413 .stacktrace {
 414   display: none;
 415   list-style: none;
 416   padding: 0 1em 0 1.5em;
 417   margin: 5px 0 0 0;
 418   max-height: 10em;
 419   overflow-y: auto;
 420   border: 1px solid #A09090;
 421   border-radius: 3px;
 422 }
 423
 424 .message[severity=error] .stacktrace {
 425   background-color: #000000;
 426 }
 427
 428 .message[open] .stacktrace {
 429   display: block;
 430 }
 431
 432 .message .theme-twisty {
 433   display: inline-block;
 434   vertical-align: middle;
 435   margin: 0 3px 0 0;
 436 }
 437
 438 .stacktrace li {
 439   display: flex;
 440   margin: 0;
 441 }
 442
 443 .stacktrace .function {
 444   display: block;
 445   flex: 1 1 auto;
 446 }
 447
 448 .cm-s-mozilla a[class] {
 449   font-style: italic;
 450   text-decoration: none;
 451 }
 452
 453 .cm-s-mozilla a[class]:hover,
 454 .cm-s-mozilla a[class]:focus {
 455   text-decoration: underline;
 456 }
 457
 458 /* Open DOMNode in inspector button */
 459 .open-inspector {
 460   background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0;
 461   padding-left: 16px;
 462   margin-left: 5px;
 463   cursor: pointer;
 464 }
 465
 466 .elementNode:hover .open-inspector,
 467 .open-inspector:hover {
 468   background-position: -32px 0;
 469 }
 470
 471 .open-inspector:active {
 472   background-position: -16px 0;
 473 }
 474
 475 /* Replace these values with CSS variables as available */
 476 .theme-dark .jsterm-input-container {
 477   background-color: #000000; /* tabToolbarBackgroundColor */
 478   border-color: #9C9CFF; /* mainBackgroundColor */
 479 }
 480
 481 .theme-dark .jsterm-input-node {
 482   color: #E7ADE7; /* textColor */
 483 }
 484
 485 .theme-dark .jsterm-complete-node {
 486   color: #A09090; /* commentColor */
 487 }
 488
 489 .theme-dark .navigation-marker .url {
 490   background: #000000; /* mainBackgroundColor */
 491 }
 492
 493 .theme-dark .inlined-variables-view iframe {
 494   border-color: #A09090;
 495 }
 496
 497 .theme-dark .stacktrace {
 498   border-color: #A09090;
 499 }
 500
 501 .theme-light .jsterm-input-container {
 502   background-color: #000000; /* tabToolbarBackgroundColor */
 503   border-color: #9C9CFF; /* mainBackgroundColor */
 504 }
 505
 506 .theme-light .jsterm-input-node {
 507   color: #E7ADE7; /* textColor */
 508 }
 509
 510 .theme-light .jsterm-complete-node {
 511   color: #A09090; /* commentColor */
 512 }
 513
 514 .theme-light .navigation-marker .url {
 515   background: #000000; /* mainBackgroundColor */
 516 }
 517
 518 .theme-light .inlined-variables-view iframe {
 519   border-color: #A09090;
 520 }
 521
 522 .theme-dark .stacktrace {
 523   border-color: #A09090;
 524 }
 525
 526 @media (max-width: 500px) {
 527   .message > .timestamp {
 528     display: none;
 529   }
 530   .toolbarbutton-text {
 531     display: none;
 532   }
 533   .hud-console-filter-toolbar .webconsole-filter-button {
 534     min-width: 40px;
 535   }
 536   .hud-console-filter-toolbar .webconsole-clear-console-button {
 537     min-width: 25px;
 538   }
 539   .webconsole-filter-button > .toolbarbutton-menubutton-button:before {
 540     width: 16px;
 541     height: 16px;
 542     margin-left: 1px;
 543   }
 544   .toolbarbutton-menubutton-dropmarker {
 545     margin: 0px;
 546   }
 547 }
 548
 549 @media (max-width: 300px) {
 550   .hud-console-filter-toolbar {
 551     -moz-box-orient: vertical;
 552   }
 553   .toolbarbutton-text {
 554     display: -moz-box;
 555   }
 556   .devtools-toolbarbutton {
 557     margin-top: 3px;
 558   }
 559   .hud-console-filter-toolbar .hud-filter-box,
 560   .hud-console-filter-toolbar .devtools-toolbarbutton {
 561     margin-top: 5px;
 562   }
 563 }
 564
 565 /* === END webconsole.inc.css === */