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