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 .message.console-api.error > .icon::before,
 361 .message.output.error > .icon::before,
 362 .message.server.error > .icon::before {
 363   background-position: -12px -36px;
 364 }
 365
 366 .message[category=console][severity=warn] > .icon::before,
 367 .message[category=server][severity=warn] > .icon::before,
 368 .message.console-api.warn > .icon::before,
 369 .message.server.warn > .icon::before {
 370   background-position: -24px -36px;
 371 }
 372
 373 .message[category=console][severity=info] > .icon::before,
 374 .message[category=server][severity=info] > .icon::before,
 375 .message.console-api.info > .icon::before,
 376 .message.server.info > .icon::before {
 377   background-position: -36px -36px;
 378 }
 379
 380 /* Server Logging Styles */
 381
 382 .webconsole-filter-button[category="server"] > .toolbarbutton-menubutton-button:before {
 383   background-image: linear-gradient(#006363, #004242);
 384   border-color: #008484;
 385 }
 386
 387 .message[category=server] > .indent,
 388 .message.server > .indent {
 389   border-inline-end: solid #8050B0 6px;
 390 }
 391
 392 /* Input and output styles */
 393 .message[category=input] > .indent,
 394 .message[category=output] > .indent,
 395 .message.command > .indent,
 396 .message.result > .indent {
 397   border-inline-end: solid #A09090 6px;
 398 }
 399
 400 .message[category=input] > .icon::before,
 401 .message.command > .icon::before {
 402   background-position: -48px -36px;
 403 }
 404
 405 .message[category=output] > .icon::before,
 406 .message.result > .icon::before {
 407   background-position: -60px -36px;
 408 }
 409
 410 /* JSTerm Styles */
 411 .jsterm-input-container {
 412   background-color: var(--theme-tab-toolbar-background);
 413   border-top: 1px solid var(--theme-splitter-color);
 414 }
 415
 416 .jsterm-input-node,
 417 .jsterm-complete-node {
 418   border: none;
 419   padding: 0;
 420   padding-inline-start: 20px;
 421   margin: 0;
 422   -moz-appearance: none;
 423   background-color: transparent;
 424 }
 425
 426 .jsterm-input-node[focused="true"] {
 427   background-image: var(--theme-command-line-image-focus);
 428   box-shadow: none;
 429 }
 430
 431 .jsterm-complete-node {
 432   color: var(--theme-comment);
 433 }
 434
 435 .jsterm-input-node {
 436   /* Always allow scrolling on input - it auto expands in js by setting height,
 437      but don't want it to get bigger than the window. 24px = toolbar height. */
 438   max-height: calc(90vh - 24px);
 439   background-image: var(--theme-command-line-image);
 440   background-repeat: no-repeat;
 441   background-size: 16px 16px;
 442   background-position: 4px 50%;
 443   color: var(--theme-content-color1);
 444 }
 445
 446 :-moz-any(.jsterm-input-node,
 447           .jsterm-complete-node) > .textbox-input-box > .textbox-textarea {
 448   overflow-x: hidden;
 449   /* Set padding for console input on textbox to make sure it is inlcuded in
 450      scrollHeight that is used when resizing JSTerminal's input. Note: textbox
 451      default style has important already */
 452   padding: 4px 0 !important;
 453 }
 454
 455 .inlined-variables-view .message-body {
 456   display: flex;
 457   flex-direction: column;
 458   resize: vertical;
 459   overflow: auto;
 460   min-height: 200px;
 461 }
 462
 463 .inlined-variables-view iframe {
 464   display: block;
 465   flex: 1;
 466   margin-top: 5px;
 467   margin-bottom: 15px;
 468   margin-inline-end: 15px;
 469   border: 1px solid var(--theme-splitter-color);
 470   border-radius: 3px;
 471 }
 472
 473 #webconsole-sidebar > tabs {
 474   height: 0;
 475   border: none;
 476 }
 477
 478 .devtools-side-splitter ~ #webconsole-sidebar[hidden] {
 479   display: none;
 480 }
 481
 482 /* Security styles */
 483
 484 .message[category=security] > .indent,
 485 .message.security > .indent {
 486   border-inline-end: solid #FF0000 6px;
 487 }
 488
 489 .webconsole-filter-button[category="security"] > .toolbarbutton-menubutton-button:before {
 490   background-color: #FF0000;
 491   border-color: #FFCF00;
 492 }
 493
 494 .message[category=security][severity=error] > .icon::before,
 495 .message.security.error > .icon::before {
 496   background-position: -12px -48px;
 497 }
 498
 499 .message[category=security][severity=warn] > .icon::before,
 500 .message.security.warn > .icon::before {
 501   background-position: -24px -48px;
 502 }
 503
 504 .navigation-marker {
 505   color: #000000;
 506   background-color: #A09090;
 507   margin-top: 6px;
 508   margin-bottom: 6px;
 509   font-size: 0.9em;
 510 }
 511
 512 .navigation-marker .url {
 513   padding-inline-end: 9px;
 514   text-decoration: none;
 515   background: var(--theme-body-background);
 516 }
 517
 518 .stacktrace {
 519   display: none;
 520   padding: 5px 10px;
 521   margin: 5px 0 0 0;
 522   overflow-y: auto;
 523   border: 1px solid var(--theme-splitter-color);
 524   border-radius: 3px;
 525 }
 526
 527 .consoletable {
 528   margin: 5px 0 0 0;
 529 }
 530
 531 /* Force cells to only show one row of contents.  Getting normal ellipses
 532    behavior has proven impossible so far, so this is better than letting
 533    rows get out of vertical alignment when one cell has a lot of content. */
 534 .consoletable .table-widget-cell > span {
 535   overflow: hidden;
 536   display: flex;
 537   height: 1.25em;
 538   line-height: 1.25em;
 539 }
 540
 541 .message[severity=error] .stacktrace {
 542   background-color: #000000;
 543 }
 544
 545 .message[open] .stacktrace,
 546 .message.open .stacktrace {
 547   display: block;
 548 }
 549
 550 .message .theme-twisty {
 551   display: inline-block;
 552   vertical-align: middle;
 553   margin: 3px 0 0 0;
 554   flex-shrink: 0;
 555 }
 556
 557 /*Do not mirror the twisty because container force to ltr */
 558 .message .theme-twisty:dir(rtl),
 559 .message .theme-twisty:-moz-locale-dir(rtl) {
 560   transform: none;
 561 }
 562
 563 .cm-s-mozilla a[class] {
 564   font-style: italic;
 565   text-decoration: none;
 566 }
 567
 568 .cm-s-mozilla a[class]:hover,
 569 .cm-s-mozilla a[class]:focus {
 570   text-decoration: underline;
 571 }
 572
 573 a.learn-more-link.webconsole-learn-more-link {
 574   font-style: normal;
 575 }
 576
 577 /* Open DOMNode in inspector button */
 578 .open-inspector {
 579   background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0;
 580   padding-left: 16px;
 581   margin-inline-start: 5px;
 582   cursor: pointer;
 583 }
 584
 585 .elementNode:hover .open-inspector,
 586 .open-inspector:hover {
 587   filter: url(images/filters.svg#checked-icon-state);
 588 }
 589
 590 .elementNode:hover .open-inspector:active,
 591 .open-inspector:active {
 592   filter: url(images/filters.svg#checked-icon-state);
 593 }
 594
 595 @media (max-width: 500px) {
 596   .message > .timestamp {
 597     display: none;
 598   }
 599   .hud-console-filter-toolbar .webconsole-filter-button .toolbarbutton-text {
 600     display: none;
 601   }
 602   .hud-console-filter-toolbar .webconsole-filter-button {
 603     min-width: 40px;
 604   }
 605   .hud-console-filter-toolbar .webconsole-clear-console-button {
 606     min-width: 25px;
 607   }
 608   .webconsole-filter-button > .toolbarbutton-menubutton-button:before {
 609     width: 12px;
 610     height: 12px;
 611     margin-inline-start: 1px;
 612   }
 613   .toolbarbutton-menubutton-dropmarker {
 614     margin: 0px;
 615   }
 616 }
 617
 618 @media (max-width: 300px) {
 619   .hud-console-filter-toolbar {
 620     -moz-box-orient: vertical;
 621   }
 622   .toolbarbutton-text {
 623     display: -moz-box;
 624   }
 625   /*
 626   .devtools-toolbarbutton {
 627     margin-top: 3px;
 628   }
 629   .hud-console-filter-toolbar .hud-filter-box,
 630   .hud-console-filter-toolbar .devtools-toolbarbutton {
 631     margin-top: 5px;
 632   }
 633   */
 634 }
 635
 636 /*
 637  * This hardcoded width likely due to a toolkit Windows specific bug.
 638  * See http://hg.mozilla.org/mozilla-central/annotate/f38d6df93cad/toolkit/themes/winstripe/global/textbox-aero.css#l7
 639  */
 640
 641 :root[platform="win"] .hud-filter-box {
 642   width: 200px;
 643 }
 644
 645 /* NEW CONSOLE STYLES */
 646
 647 #output-wrapper > div {
 648   position: absolute;
 649   top: 0;
 650   bottom: 0;
 651   left: 0;
 652   right: 0;
 653 }
 654
 655 #output-container {
 656   height: 100%;
 657 }
 658
 659 .webconsole-output-wrapper {
 660   display: flex;
 661   flex-direction: column;
 662   height: 100%;
 663   -moz-user-focus: normal;
 664 }
 665
 666 .webconsole-filterbar-wrapper {
 667   flex-grow: 0;
 668 }
 669
 670 .webconsole-output {
 671   flex: 1;
 672   overflow: auto;
 673 }
 674
 675 .webconsole-filterbar-primary {
 676   display: flex;
 677 }
 678
 679 .devtools-toolbar.webconsole-filterbar-secondary {
 680   height: initial;
 681 }
 682
 683 .webconsole-filterbar-primary .devtools-plaininput {
 684   flex: 1 1 100%;
 685 }
 686
 687 .webconsole-output.hideTimestamps > .message > .timestamp {
 688   display: none;
 689 }
 690
 691 .message.startGroup .message-body,
 692 .message.startGroupCollapsed .message-body {
 693   color: var(--theme-body-color);
 694   font-weight: bold;
 695 }
 696
 697 .webconsole-output-wrapper .message > .icon {
 698   margin: 3px 0 0 0;
 699   padding: 0 0 0 6px;
 700 }
 701
 702 .message.error > .icon::before {
 703   background-position: -12px -36px;
 704 }
 705
 706 .message.warn > .icon::before {
 707   background-position: -24px -36px;
 708 }
 709
 710 .message.info > .icon::before {
 711   background-position: -36px -36px;
 712 }
 713
 714 .message.network .method {
 715   margin-inline-end: 5px;
 716 }
 717
 718 .webconsole-output-wrapper .message .indent {
 719   display: inline-block;
 720   border-inline-end: solid 1px var(--theme-splitter-color);
 721 }
 722
 723 .message.startGroup .indent,
 724 .message.startGroupCollapsed .indent {
 725   border-inline-end-color: transparent;
 726   margin-inline-end: 5px;
 727 }
 728
 729 .message.startGroup .icon,
 730 .message.startGroupCollapsed .icon {
 731   display: none;
 732 }
 733
 734 /* console.table() */
 735 .new-consoletable {
 736   width: 100%;
 737   border-collapse: collapse;
 738   --consoletable-border: 1px solid var(--table-splitter-color);
 739 }
 740
 741 .new-consoletable thead,
 742 .new-consoletable tbody {
 743   background-color: var(--theme-body-background);
 744 }
 745
 746 .new-consoletable th {
 747   background-color: var(--theme-selection-background);
 748   color: var(--theme-selection-color);
 749   margin: 0;
 750   padding: 5px 0 0;
 751   font-weight: inherit;
 752   border-inline-end: var(--consoletable-border);
 753   border-bottom: var(--consoletable-border);
 754 }
 755
 756 .new-consoletable tr:nth-of-type(even) {
 757   background-color: var(--table-zebra-background);
 758 }
 759
 760 .new-consoletable td {
 761   padding: 3px 4px;
 762   min-width: 100px;
 763   -moz-user-focus: normal;
 764   color: var(--theme-body-color);
 765   border-inline-end: var(--consoletable-border);
 766   height: 1.25em;
 767   line-height: 1.25em;
 768 }