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 /* Webconsole specific theme variables */
   6
   7 .theme-dark,
   8 .theme-light,
   9 .theme-firebug {
  10   --error-color: #FF0000;
  11   --error-background-color: #FF0000;
  12   --error-background-text: #000000;
  13   --warning-background-color: #FFCF00;
  14   --warning-background-text: #000000;
  15 }
  16
  17 window {
  18   padding: 0;
  19 }
  20
  21 /*
  22  * This hardcoded width likely due to a toolkit Windows specific bug.
  23  * See http://hg.mozilla.org/mozilla-central/annotate/f38d6df93cad/toolkit/themes/winstripe/global/textbox-aero.css#l7
  24  */
  25
  26 .hud-filter-box {
  27   width: 200px;
  28 }
  29
  30 /* General output styles */
  31
  32 a {
  33   -moz-user-focus: normal;
  34   -moz-user-input: enabled;
  35   cursor: pointer;
  36   text-decoration: underline;
  37 }
  38
  39 /* Workaround for Bug 575675 - FindChildWithRules aRelevantLinkVisited
  40  * assertion when loading HTML page with links in XUL iframe */
  41 *:visited { }
  42
  43 .message {
  44   display: flex;
  45   padding: 0 7px;
  46   width: 100%;
  47   box-sizing: border-box;
  48 }
  49
  50 .message > .prefix,
  51 .message > .timestamp {
  52   flex: none;
  53   color: var(--theme-comment);
  54   margin: 3px 6px 0 0;
  55 }
  56
  57 .message > .indent {
  58   flex: none;
  59 }
  60
  61 .message > .icon {
  62   flex: none;
  63   margin: 3px 6px 0 0;
  64   padding: 0 4px;
  65   height: 1em;
  66   align-self: flex-start;
  67 }
  68
  69 .message > .icon::before {
  70   content: "";
  71   background-image: url("chrome://devtools/skin/images/webconsole.svg");
  72   background-position: 12px 12px;
  73   background-repeat: no-repeat;
  74   background-size: 72px 60px;
  75   width: 12px;
  76   height: 12px;
  77   display: inline-block;
  78 }
  79
  80 .message > .message-body-wrapper {
  81   flex: auto;
  82   min-width: 0px;
  83   margin: 3px;
  84 }
  85
  86 .message-body-wrapper .table-widget-body {
  87   overflow: visible;
  88 }
  89
  90 /* The red bubble that shows the number of times a message is repeated */
  91 .message-repeats {
  92   -moz-user-select: none;
  93   flex: none;
  94   margin: 2px 6px;
  95   padding: 0 6px;
  96   height: 1.25em;
  97   color: #000000;
  98   background-color: #FF0000;
  99   border-radius: 40px;
 100   /* font: message-box; */
 101   font-size: 0.9em;
 102   font-weight: 600;
 103 }
 104
 105 .message-repeats[value="1"] {
 106   display: none;
 107 }
 108
 109 .message-location {
 110   max-width: 40%;
 111 }
 112
 113 .stack-trace {
 114   /* The markup contains extra whitespace to improve formatting of clipboard text.
 115      Make sure this whitespace doesn't affect the HTML rendering */
 116   white-space: normal;
 117 }
 118
 119 .stack-trace .frame-link-source,
 120 .message-location .frame-link-source {
 121   /* Makes the file name truncated (and ellipsis shown) on the left side */
 122   direction: rtl;
 123   white-space: nowrap;
 124   overflow: hidden;
 125   text-overflow: ellipsis;
 126 }
 127
 128 .stack-trace .frame-link-source-inner,
 129 .message-location .frame-link-source-inner {
 130   /* Enforce LTR direction for the file name - fixes bug 1290056 */
 131   direction: ltr;
 132   unicode-bidi: embed;
 133 }
 134
 135 .stack-trace .frame-link-function-display-name {
 136   max-width: 50%;
 137   white-space: nowrap;
 138   overflow: hidden;
 139   text-overflow: ellipsis;
 140 }
 141
 142 .message-flex-body {
 143   display: flex;
 144 }
 145
 146 .message-body > * {
 147   white-space: pre-wrap;
 148   word-wrap: break-word;
 149 }
 150
 151 .message-flex-body > .message-body {
 152   display: block;
 153   flex: auto;
 154 }
 155
 156 #output-wrapper {
 157   direction: ltr;
 158   overflow: auto;
 159   -moz-user-select: text;
 160   position: relative;
 161 }
 162
 163 /* The width on #output-container is set to a hardcoded px in webconsole.js
 164    since it's way faster than using 100% with -moz-box-flex (see Bug 1237368) */
 165
 166 #output-container.hideTimestamps > .message {
 167   padding-inline-start: 0;
 168   margin-inline-start: 7px;
 169   width: calc(100% - 7px);
 170 }
 171
 172 #output-container.hideTimestamps > .message > .timestamp {
 173   display: none;
 174 }
 175
 176 #output-container.hideTimestamps > .message > .indent {
 177   background-color: var(--theme-body-background);
 178 }
 179
 180 .filtered-by-type,
 181 .filtered-by-string {
 182   display: none;
 183 }
 184
 185 .hidden-message {
 186   display: block;
 187   visibility: hidden;
 188   height: 0;
 189   overflow: hidden;
 190 }
 191
 192 /* WebConsole colored drops */
 193
 194 .webconsole-filter-button {
 195   -moz-user-focus: normal;
 196 }
 197
 198 .webconsole-filter-button > .toolbarbutton-menubutton-button {
 199   -moz-box-orient: horizontal; /* saving vertical space in toolbar */
 200 }
 201
 202 .webconsole-filter-button > .toolbarbutton-menubutton-button:before {
 203   content: "";
 204   display: inline-block;
 205   height: 8px;
 206   width: 8px;
 207   border-radius: 50%;
 208   margin-inline-start: 1px;
 209   margin-inline-end: 3px;
 210   border-width: 1px;
 211   border-style: solid;
 212 }
 213
 214 /* Network styles */
 215 .webconsole-filter-button[category="net"] > .toolbarbutton-menubutton-button:before {
 216   background-image: linear-gradient(#BF9B00, #7F6700);
 217   border-color: #FFCF00;
 218 }
 219
 220 .message:hover {
 221   background-color: var(--theme-contrast-background);
 222 }
 223
 224 .message[severity=error],
 225 .message.error {
 226   background-color: var(--error-background-color);
 227 }
 228
 229 .console-string {
 230   color: var(--theme-highlight-orange);
 231 }
 232
 233 .message[severity=error] .console-string {
 234   background-color: var(--error-background-text);
 235 }
 236
 237 .theme-selected .console-string,
 238 .theme-selected .cm-number,
 239 .theme-selected .cm-variable,
 240 .theme-selected .kind-ArrayLike {
 241   color: #000000 !important; /* Selection Text Color */
 242 }
 243
 244 .message[category=network] > .indent {
 245   border-inline-end: solid var(--theme-body-color-alt) 6px;
 246 }
 247
 248 .message[category=network][severity=error] > .icon::before,
 249 .message.network.error > .icon::before {
 250   background-position: -12px 0;
 251 }
 252
 253 .message[category=network] > .message-body,
 254 .message.network > .message-body {
 255   display: flex;
 256   flex-wrap: wrap;
 257 }
 258
 259 .message[category=network] .method,
 260 .message.network .method {
 261   flex: none;
 262 }
 263
 264 .message[category=network]:not(.navigation-marker) .url,
 265 .message.network:not(.navigation-marker) .url {
 266   flex: 1 1 auto;
 267   /* Make sure the URL is very small initially, let flex change width as needed. */
 268   width: 100px;
 269   min-width: 5em;
 270   white-space: nowrap;
 271   overflow: hidden;
 272   text-overflow: ellipsis;
 273 }
 274
 275 .message[category=network] .status,
 276 .message.network .status {
 277   flex: none;
 278   margin-inline-start: 6px;
 279 }
 280
 281 .message[category=network].mixed-content .url,
 282 .message.network.mixed-content .url {
 283   color: var(--theme-highlight-red);
 284 }
 285
 286 .message .learn-more-link {
 287   color: var(--theme-highlight-blue);
 288   margin: 0 6px;
 289 }
 290
 291 .message[category=network] .xhr,
 292 .message.network .xhr {
 293   background-color: var(--theme-body-color-alt);
 294   color: var(--theme-body-background);
 295   border-radius: 3px;
 296   font-weight: bold;
 297   font-size: 10px;
 298   padding: 2px;
 299   line-height: 10px;
 300   margin-inline-start: 3px;
 301   margin-inline-end: 1ex;
 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 .message.cssparser > .indent {
 312   border-inline-end: solid #9C9CFF 6px;
 313 }
 314
 315 .message[category=cssparser][severity=error] > .icon::before,
 316 .message.cssparser.error > .icon::before {
 317   background-position: -12px -12px;
 318 }
 319
 320 .message[category=cssparser][severity=warn] > .icon::before,
 321 .message.cssparser.warn > .icon::before {
 322   background-position: -24px -12px;
 323 }
 324
 325 /* JS styles */
 326 .webconsole-filter-button[category="js"] > .toolbarbutton-menubutton-button:before {
 327    background-image: linear-gradient(#BF7700, #7F4F00);
 328    border-color: #FF9F00;
 329 }
 330
 331 .message[category=exception] > .indent,
 332 .message.exception > .indent {
 333   border-inline-end: solid #FF9F00 6px;
 334 }
 335
 336 .message[category=exception][severity=error] > .icon::before,
 337 .message.exception.error > .icon::before {
 338   background-position: -12px -24px;
 339 }
 340
 341 .message[category=exception][severity=warn] > .icon::before,
 342 .message.exception.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 .message.console-api > .indent {
 354   border-inline-end: solid #8050B0 6px;
 355 }
 356
 357 .message[category=console][severity=error] > .icon::before,
 358 .message[category=output][severity=error] > .icon::before,
 359 .message[category=server][severity=error] > .icon::before {
 360   background-position: -12px -36px;
 361 }
 362
 363 .message[category=console][severity=warn] > .icon::before,
 364 .message[category=server][severity=warn] > .icon::before {
 365   background-position: -24px -36px;
 366 }
 367
 368 .message[category=console][severity=info] > .icon::before,
 369 .message[category=server][severity=info] > .icon::before {
 370   background-position: -36px -36px;
 371 }
 372
 373 /* Server Logging Styles */
 374
 375 .webconsole-filter-button[category="server"] > .toolbarbutton-menubutton-button:before {
 376   background-image: linear-gradient(#006363, #004242);
 377   border-color: #008484;
 378 }
 379
 380 .message[category=server] > .indent,
 381 .message.server > .indent {
 382   border-inline-end: solid #8050B0 6px;
 383 }
 384
 385 /* Input and output styles */
 386 .message[category=input] > .indent,
 387 .message[category=output] > .indent,
 388 .message.command > .indent,
 389 .message.result > .indent {
 390   border-inline-end: solid #A09090 6px;
 391 }
 392
 393 .message[category=input] > .icon::before,
 394 .message.command > .icon::before {
 395   background-position: -48px -36px;
 396 }
 397
 398 .message[category=output] > .icon::before,
 399 .message.result > .icon::before {
 400   background-position: -60px -36px;
 401 }
 402
 403 /* JSTerm Styles */
 404 .jsterm-input-container {
 405   background-color: var(--theme-tab-toolbar-background);
 406   border-top: 1px solid var(--theme-splitter-color);
 407 }
 408
 409 .jsterm-input-node,
 410 .jsterm-complete-node {
 411   border: none;
 412   padding: 0;
 413   padding-inline-start: 20px;
 414   margin: 0;
 415   -moz-appearance: none;
 416   background-color: transparent;
 417 }
 418
 419 .jsterm-input-node[focused="true"] {
 420   background-image: var(--theme-command-line-image-focus);
 421   box-shadow: none;
 422 }
 423
 424 .jsterm-complete-node {
 425   color: var(--theme-comment);
 426 }
 427
 428 .jsterm-input-node {
 429   /* Always allow scrolling on input - it auto expands in js by setting height,
 430      but don't want it to get bigger than the window. 24px = toolbar height. */
 431   max-height: calc(90vh - 24px);
 432   background-image: var(--theme-command-line-image);
 433   background-repeat: no-repeat;
 434   background-size: 16px 16px;
 435   background-position: 4px 50%;
 436   color: var(--theme-content-color1);
 437 }
 438
 439 :-moz-any(.jsterm-input-node,
 440           .jsterm-complete-node) > .textbox-input-box > .textbox-textarea {
 441   overflow-x: hidden;
 442   /* Set padding for console input on textbox to make sure it is inlcuded in
 443      scrollHeight that is used when resizing JSTerminal's input. Note: textbox
 444      default style has important already */
 445   padding: 4px 0 !important;
 446 }
 447
 448 .inlined-variables-view .message-body {
 449   display: flex;
 450   flex-direction: column;
 451   resize: vertical;
 452   overflow: auto;
 453   min-height: 200px;
 454 }
 455
 456 .inlined-variables-view iframe {
 457   display: block;
 458   flex: 1;
 459   margin-top: 5px;
 460   margin-bottom: 15px;
 461   margin-inline-end: 15px;
 462   border: 1px solid var(--theme-splitter-color);
 463   border-radius: 3px;
 464 }
 465
 466 #webconsole-sidebar > tabs {
 467   height: 0;
 468   border: none;
 469 }
 470
 471 .devtools-side-splitter ~ #webconsole-sidebar[hidden] {
 472   display: none;
 473 }
 474
 475 /* Security styles */
 476
 477 .message[category=security] > .indent,
 478 .message.security > .indent {
 479   border-inline-end: solid #FF0000 6px;
 480 }
 481
 482 .webconsole-filter-button[category="security"] > .toolbarbutton-menubutton-button:before {
 483   background-color: #FF0000;
 484   border-color: #FFCF00;
 485 }
 486
 487 .message[category=security][severity=error] > .icon::before,
 488 .message.security.error > .icon::before {
 489   background-position: -12px -48px;
 490 }
 491
 492 .message[category=security][severity=warn] > .icon::before,
 493 .message.security.warn > .icon::before {
 494   background-position: -24px -48px;
 495 }
 496
 497 .navigation-marker {
 498   color: #000000;
 499   background-color: #A09090;
 500   margin-top: 6px;
 501   margin-bottom: 6px;
 502   font-size: 0.9em;
 503 }
 504
 505 .navigation-marker .url {
 506   padding-inline-end: 9px;
 507   text-decoration: none;
 508   background: var(--theme-body-background);
 509 }
 510
 511 .stacktrace {
 512   display: none;
 513   padding: 5px 10px;
 514   margin: 5px 0 0 0;
 515   overflow-y: auto;
 516   border: 1px solid var(--theme-splitter-color);
 517   border-radius: 3px;
 518 }
 519
 520 .consoletable {
 521   margin: 5px 0 0 0;
 522 }
 523
 524 /* Force cells to only show one row of contents.  Getting normal ellipses
 525    behavior has proven impossible so far, so this is better than letting
 526    rows get out of vertical alignment when one cell has a lot of content. */
 527 .consoletable .table-widget-cell > span {
 528   overflow: hidden;
 529   display: flex;
 530   height: 1.25em;
 531   line-height: 1.25em;
 532 }
 533
 534 .message[severity=error] .stacktrace {
 535   background-color: #000000;
 536 }
 537
 538 .message[open] .stacktrace {
 539   display: block;
 540 }
 541
 542 .message .theme-twisty {
 543   display: inline-block;
 544   vertical-align: middle;
 545   margin: 3px 0 0 0;
 546   flex-shrink: 0;
 547 }
 548
 549 .cm-s-mozilla a[class] {
 550   font-style: italic;
 551   text-decoration: none;
 552 }
 553
 554 .cm-s-mozilla a[class]:hover,
 555 .cm-s-mozilla a[class]:focus {
 556   text-decoration: underline;
 557 }
 558
 559 a.learn-more-link.webconsole-learn-more-link {
 560   font-style: normal;
 561 }
 562
 563 /* Open DOMNode in inspector button */
 564 .open-inspector {
 565   background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0;
 566   padding-left: 16px;
 567   margin-inline-start: 5px;
 568   cursor: pointer;
 569 }
 570
 571 .elementNode:hover .open-inspector,
 572 .open-inspector:hover {
 573   filter: url(images/filters.svg#checked-icon-state);
 574 }
 575
 576 .elementNode:hover .open-inspector:active,
 577 .open-inspector:active {
 578   filter: url(images/filters.svg#checked-icon-state);
 579 }
 580
 581 @media (max-width: 500px) {
 582   .message > .timestamp {
 583     display: none;
 584   }
 585   .hud-console-filter-toolbar .webconsole-filter-button .toolbarbutton-text {
 586     display: none;
 587   }
 588   .hud-console-filter-toolbar .webconsole-filter-button {
 589     min-width: 40px;
 590   }
 591   .hud-console-filter-toolbar .webconsole-clear-console-button {
 592     min-width: 25px;
 593   }
 594   .webconsole-filter-button > .toolbarbutton-menubutton-button:before {
 595     width: 12px;
 596     height: 12px;
 597     margin-inline-start: 1px;
 598   }
 599   .toolbarbutton-menubutton-dropmarker {
 600     margin: 0px;
 601   }
 602 }
 603
 604 @media (max-width: 300px) {
 605   .hud-console-filter-toolbar {
 606     -moz-box-orient: vertical;
 607   }
 608   .toolbarbutton-text {
 609     display: -moz-box;
 610   }
 611   /*
 612   .devtools-toolbarbutton {
 613     margin-top: 3px;
 614   }
 615   .hud-console-filter-toolbar .hud-filter-box,
 616   .hud-console-filter-toolbar .devtools-toolbarbutton {
 617     margin-top: 5px;
 618   }
 619   */
 620 }
 621
 622 /*
 623  * This hardcoded width likely due to a toolkit Windows specific bug.
 624  * See http://hg.mozilla.org/mozilla-central/annotate/f38d6df93cad/toolkit/themes/winstripe/global/textbox-aero.css#l7
 625  */
 626
 627 :root[platform="win"] .hud-filter-box {
 628   width: 200px;
 629 }
 630
 631 /* NEW CONSOLE STYLES */
 632
 633 #output-wrapper > div {
 634   position: absolute;
 635   top: 0;
 636   bottom: 0;
 637   left: 0;
 638   right: 0;
 639 }
 640
 641 #output-container {
 642   height: 100%;
 643 }
 644
 645 .webconsole-output-wrapper {
 646   display: flex;
 647   flex-direction: column;
 648   height: 100%;
 649   -moz-user-focus: normal;
 650 }
 651
 652 .webconsole-filterbar-wrapper {
 653   flex-grow: 0;
 654 }
 655
 656 .webconsole-output {
 657   flex: 1;
 658   overflow: auto;
 659 }
 660
 661 .webconsole-filterbar-primary {
 662   display: flex;
 663 }
 664
 665 .devtools-toolbar.webconsole-filterbar-secondary {
 666   height: initial;
 667 }
 668
 669 .webconsole-filterbar-primary .devtools-plaininput {
 670   flex: 1 1 100%;
 671 }
 672
 673 .webconsole-output.hideTimestamps > .message > .timestamp {
 674   display: none;
 675 }
 676
 677 .message.startGroup .message-body,
 678 .message.startGroupCollapsed .message-body {
 679   color: var(--theme-body-color);
 680   font-weight: bold;
 681 }
 682
 683 .webconsole-output-wrapper .message > .icon {
 684   margin: 3px 0 0 0;
 685   padding: 0 0 0 6px;
 686 }
 687
 688 .message.error > .icon::before {
 689   background-position: -12px -36px;
 690 }
 691
 692 .message.warn > .icon::before {
 693   background-position: -24px -36px;
 694 }
 695
 696 .message.info > .icon::before {
 697   background-position: -36px -36px;
 698 }
 699
 700 .message.network .method {
 701   margin-inline-end: 5px;
 702 }
 703
 704 .webconsole-output-wrapper .message .indent {
 705   display: inline-block;
 706   border-inline-end: solid 1px var(--theme-splitter-color);
 707 }
 708
 709 .message.startGroup .indent,
 710 .message.startGroupCollapsed .indent {
 711   border-inline-end-color: transparent;
 712   margin-inline-end: 5px;
 713 }
 714
 715 .message.startGroup .icon,
 716 .message.startGroupCollapsed .icon {
 717   display: none;
 718 }
 719
 720 /* console.table() */
 721 .new-consoletable {
 722   width: 100%;
 723   border-collapse: collapse;
 724   --consoletable-border: 1px solid var(--table-splitter-color);
 725 }
 726
 727 .new-consoletable thead,
 728 .new-consoletable tbody {
 729   background-color: var(--theme-body-background);
 730 }
 731
 732 .new-consoletable th {
 733   background-color: var(--theme-selection-background);
 734   color: var(--theme-selection-color);
 735   margin: 0;
 736   padding: 5px 0 0;
 737   font-weight: inherit;
 738   border-inline-end: var(--consoletable-border);
 739   border-bottom: var(--consoletable-border);
 740 }
 741
 742 .new-consoletable tr:nth-of-type(even) {
 743   background-color: var(--table-zebra-background);
 744 }
 745
 746 .new-consoletable td {
 747   padding: 3px 4px;
 748   min-width: 100px;
 749   -moz-user-focus: normal;
 750   color: var(--theme-body-color);
 751   border-inline-end: var(--consoletable-border);
 752   height: 1.25em;
 753   line-height: 1.25em;
 754 }