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