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 }
  11
  12 window {
  13   padding: 0;
  14 }
  15
  16 /*
  17  * This hardcoded width likely due to a toolkit Windows specific bug.
  18  * See http://hg.mozilla.org/mozilla-central/annotate/f38d6df93cad/toolkit/themes/winstripe/global/textbox-aero.css#l7
  19  */
  20
  21 .hud-filter-box {
  22   width: 200px;
  23 }
  24
  25 /* General output styles */
  26
  27 a {
  28   -moz-user-focus: normal;
  29   -moz-user-input: enabled;
  30   cursor: pointer;
  31   text-decoration: underline;
  32 }
  33
  34 /* Workaround for Bug 575675 - FindChildWithRules aRelevantLinkVisited
  35  * assertion when loading HTML page with links in XUL iframe */
  36 *:visited { }
  37
  38 .message {
  39   display: flex;
  40   padding: 0 7px;
  41   width: 100%;
  42   box-sizing: border-box;
  43 }
  44
  45 .message > .prefix,
  46 .message > .timestamp {
  47   flex: none;
  48   color: var(--theme-comment);
  49   margin: 3px 6px 0 0;
  50 }
  51
  52 .message > .indent {
  53   flex: none;
  54 }
  55
  56 .message > .icon {
  57   flex: none;
  58   margin: 3px 6px 0 0;
  59   padding: 0 4px;
  60   height: 1em;
  61   align-self: flex-start;
  62 }
  63
  64 .message > .icon::before {
  65   content: "";
  66   background-image: url("chrome://devtools/skin/images/webconsole.svg");
  67   background-position: 12px 12px;
  68   background-repeat: no-repeat;
  69   background-size: 72px 60px;
  70   width: 12px;
  71   height: 12px;
  72   display: inline-block;
  73 }
  74
  75 .message > .message-body-wrapper {
  76   flex: auto;
  77   min-width: 0px;
  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   max-width: 40%;
 106 }
 107
 108 .stack-trace .frame-link-source,
 109 .message-location .frame-link-source {
 110   /* Makes the file name truncated (and ellipsis shown) on the left side */
 111   direction: rtl;
 112   white-space: nowrap;
 113   overflow: hidden;
 114   text-overflow: ellipsis;
 115 }
 116
 117 .stack-trace .frame-link-source-inner,
 118 .message-location .frame-link-source-inner {
 119   /* Enforce LTR direction for the file name - fixes bug 1290056 */
 120   direction: ltr;
 121   unicode-bidi: embed;
 122 }
 123
 124 .stack-trace .frame-link-function-display-name {
 125   max-width: 50%;
 126   white-space: nowrap;
 127   overflow: hidden;
 128   text-overflow: ellipsis;
 129 }
 130
 131 .message-flex-body {
 132   display: flex;
 133 }
 134
 135 .message-body > * {
 136   white-space: pre-wrap;
 137   word-wrap: break-word;
 138 }
 139
 140 .message-flex-body > .message-body {
 141   flex: auto;
 142 }
 143
 144 #output-wrapper {
 145   direction: ltr;
 146   overflow: auto;
 147   -moz-user-select: text;
 148 }
 149
 150 /* The width on #output-container is set to a hardcoded px in webconsole.js
 151    since it's way faster than using 100% with -moz-box-flex (see Bug 1237368) */
 152
 153 #output-container.hideTimestamps > .message {
 154   padding-inline-start: 0;
 155   margin-inline-start: 7px;
 156   width: calc(100% - 7px);
 157 }
 158
 159 #output-container.hideTimestamps > .message > .timestamp {
 160   display: none;
 161 }
 162
 163 #output-container.hideTimestamps > .message > .indent {
 164   background-color: var(--theme-body-background);
 165 }
 166
 167 .filtered-by-type,
 168 .filtered-by-string {
 169   display: none;
 170 }
 171
 172 .hidden-message {
 173   display: block;
 174   visibility: hidden;
 175   height: 0;
 176   overflow: hidden;
 177 }
 178
 179 /* WebConsole colored drops */
 180
 181 .webconsole-filter-button {
 182   -moz-user-focus: normal;
 183 }
 184
 185 .webconsole-filter-button > .toolbarbutton-menubutton-button:before {
 186   content: "";
 187   display: inline-block;
 188   height: 8px;
 189   width: 8px;
 190   border-radius: 50%;
 191   margin-inline-start: 5px;
 192   border-width: 1px;
 193   border-style: solid;
 194 }
 195
 196 /* Network styles */
 197 .webconsole-filter-button[category="net"] > .toolbarbutton-menubutton-button:before {
 198   background-image: linear-gradient(#BF9B00, #7F6700);
 199   border-color: #FFCF00;
 200 }
 201
 202 .message:hover {
 203   background-color: var(--theme-contrast-background);
 204 }
 205
 206 .message[severity=error] {
 207   background-color: #FF0000;
 208 }
 209
 210 .console-string {
 211   color: var(--theme-highlight-orange);
 212 }
 213
 214 .message[severity=error] .console-string {
 215   color: #000000;
 216 }
 217
 218 .theme-selected .console-string,
 219 .theme-selected .cm-number,
 220 .theme-selected .cm-variable,
 221 .theme-selected .kind-ArrayLike {
 222   color: #000000 !important; /* Selection Text Color */
 223 }
 224
 225 .message[category=network] > .indent {
 226   border-inline-end: solid var(--theme-body-color-alt) 6px;
 227 }
 228
 229 .message[category=network][severity=error] > .icon::before {
 230   background-position: -12px 0;
 231 }
 232
 233 .message[category=network] > .message-body {
 234   display: flex;
 235   flex-wrap: wrap;
 236 }
 237
 238 .message[category=network] .method {
 239   flex: none;
 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: none;
 254   margin-inline-start: 6px;
 255 }
 256
 257 .message[category=network].mixed-content .url {
 258   color: var(--theme-highlight-red);
 259 }
 260
 261 .message .learn-more-link {
 262   color: var(--theme-highlight-blue);
 263   margin: 0 6px;
 264 }
 265
 266 .message[category=network] .xhr {
 267   background-color: var(--theme-body-color-alt);
 268   color: var(--theme-body-background);
 269   border-radius: 3px;
 270   font-weight: bold;
 271   font-size: 10px;
 272   padding: 2px;
 273   line-height: 10px;
 274   margin-inline-start: 3px;
 275   margin-inline-end: 1ex;
 276 }
 277
 278 /* CSS styles */
 279 .webconsole-filter-button[category="css"] > .toolbarbutton-menubutton-button:before {
 280   background-image: linear-gradient(#7575BF, #4E4E7F);
 281   border-color: #9C9CFF;
 282 }
 283
 284 .message[category=cssparser] > .indent {
 285   border-inline-end: solid #9C9CFF 6px;
 286 }
 287
 288 .message[category=cssparser][severity=error] > .icon::before {
 289   background-position: -12px -12px;
 290 }
 291
 292 .message[category=cssparser][severity=warn] > .icon::before {
 293   background-position: -24px -12px;
 294 }
 295
 296 /* JS styles */
 297 .webconsole-filter-button[category="js"] > .toolbarbutton-menubutton-button:before {
 298    background-image: linear-gradient(#BF7700, #7F4F00);
 299    border-color: #FF9F00;
 300 }
 301
 302 .message[category=exception] > .indent {
 303   border-inline-end: solid #FF9F00 6px;
 304 }
 305
 306 .message[category=exception][severity=error] > .icon::before {
 307   background-position: -12px -24px;
 308 }
 309
 310 .message[category=exception][severity=warn] > .icon::before {
 311   background-position: -24px -24px;
 312 }
 313
 314 /* Web Developer styles */
 315 .webconsole-filter-button[category="logging"] > .toolbarbutton-menubutton-button:before {
 316    background-image: linear-gradient(#5F3B83, #3F2756);
 317    border-color: #8050B0;
 318 }
 319
 320 .message[category=console] > .indent {
 321   border-inline-end: solid #8050B0 6px;
 322 }
 323
 324 .message[category=console][severity=error] > .icon::before,
 325 .message[category=output][severity=error] > .icon::before,
 326 .message[category=server][severity=error] > .icon::before {
 327   background-position: -12px -36px;
 328 }
 329
 330 .message[category=console][severity=warn] > .icon::before,
 331 .message[category=server][severity=warn] > .icon::before {
 332   background-position: -24px -36px;
 333 }
 334
 335 .message[category=console][severity=info] > .icon::before,
 336 .message[category=server][severity=info] > .icon::before {
 337   background-position: -36px -36px;
 338 }
 339
 340 /* Server Logging Styles */
 341
 342 .webconsole-filter-button[category="server"] > .toolbarbutton-menubutton-button:before {
 343   background-image: linear-gradient(#006363, #004242);
 344   border-color: #008484;
 345 }
 346
 347 .message[category=server] > .indent {
 348   border-inline-end: solid #8050B0 6px;
 349 }
 350
 351 /* Input and output styles */
 352 .message[category=input] > .indent,
 353 .message[category=output] > .indent {
 354   border-inline-end: solid #A09090 6px;
 355 }
 356
 357 .message[category=input] > .icon::before {
 358   background-position: -48px -36px;
 359 }
 360
 361 .message[category=output] > .icon::before {
 362   background-position: -60px -36px;
 363 }
 364
 365 /* JSTerm Styles */
 366 .jsterm-input-container {
 367   background-color: var(--theme-tab-toolbar-background);
 368   border-top: 1px solid var(--theme-splitter-color);
 369 }
 370
 371 .jsterm-input-node,
 372 .jsterm-complete-node {
 373   border: none;
 374   padding: 0;
 375   padding-inline-start: 20px;
 376   margin: 0;
 377   -moz-appearance: none;
 378   background-color: transparent;
 379 }
 380
 381 .jsterm-input-node[focused="true"] {
 382   background-image: var(--theme-command-line-image-focus);
 383   box-shadow: none;
 384 }
 385
 386 .jsterm-complete-node {
 387   color: var(--theme-comment);
 388 }
 389
 390 .jsterm-input-node {
 391   /* Always allow scrolling on input - it auto expands in js by setting height,
 392      but don't want it to get bigger than the window. 24px = toolbar height. */
 393   max-height: calc(90vh - 24px);
 394   background-image: var(--theme-command-line-image);
 395   background-repeat: no-repeat;
 396   background-size: 16px 16px;
 397   background-position: 4px 50%;
 398   color: var(--theme-content-color1);
 399 }
 400
 401 :-moz-any(.jsterm-input-node,
 402           .jsterm-complete-node) > .textbox-input-box > .textbox-textarea {
 403   overflow-x: hidden;
 404   /* Set padding for console input on textbox to make sure it is inlcuded in
 405      scrollHeight that is used when resizing JSTerminal's input. Note: textbox
 406      default style has important already */
 407   padding: 4px 0 !important;
 408 }
 409
 410 .inlined-variables-view .message-body {
 411   display: flex;
 412   flex-direction: column;
 413   resize: vertical;
 414   overflow: auto;
 415   min-height: 200px;
 416 }
 417
 418 .inlined-variables-view iframe {
 419   display: block;
 420   flex: 1;
 421   margin-top: 5px;
 422   margin-bottom: 15px;
 423   margin-inline-end: 15px;
 424   border: 1px solid var(--theme-splitter-color);
 425   border-radius: 3px;
 426 }
 427
 428 #webconsole-sidebar > tabs {
 429   height: 0;
 430   border: none;
 431 }
 432
 433 .devtools-side-splitter ~ #webconsole-sidebar[hidden] {
 434   display: none;
 435 }
 436
 437 /* Security styles */
 438
 439 .message[category=security] > .indent {
 440   border-inline-end: solid #FF0000 6px;
 441 }
 442
 443 .webconsole-filter-button[category="security"] > .toolbarbutton-menubutton-button:before {
 444   background-color: #FF0000;
 445   border-color: #FFCF00;
 446 }
 447
 448 .message[category=security][severity=error] > .icon::before {
 449   background-position: -12px -48px;
 450 }
 451
 452 .message[category=security][severity=warn] > .icon::before {
 453   background-position: -24px -48px;
 454 }
 455
 456 .navigation-marker {
 457   color: #000000;
 458   background-color: #A09090;
 459   margin-top: 6px;
 460   margin-bottom: 6px;
 461   font-size: 0.9em;
 462 }
 463
 464 .navigation-marker .url {
 465   padding-inline-end: 9px;
 466   text-decoration: none;
 467   background: var(--theme-body-background);
 468 }
 469
 470 .stacktrace {
 471   display: none;
 472   padding: 5px 10px;
 473   margin: 5px 0 0 0;
 474   overflow-y: auto;
 475   border: 1px solid var(--theme-splitter-color);
 476   border-radius: 3px;
 477 }
 478
 479 .consoletable {
 480   margin: 5px 0 0 0;
 481 }
 482
 483 /* Force cells to only show one row of contents.  Getting normal ellipses
 484    behavior has proven impossible so far, so this is better than letting
 485    rows get out of vertical alignment when one cell has a lot of content. */
 486 .consoletable .table-widget-cell > span {
 487   overflow: hidden;
 488   display: flex;
 489   height: 1.25em;
 490   line-height: 1.25em;
 491 }
 492
 493 .message[severity=error] .stacktrace {
 494   background-color: #000000;
 495 }
 496
 497 .message[open] .stacktrace {
 498   display: block;
 499 }
 500
 501 .message .theme-twisty {
 502   display: inline-block;
 503   vertical-align: middle;
 504   margin: 3px 0 0 0;
 505   flex-shrink: 0;
 506 }
 507
 508 .cm-s-mozilla a[class] {
 509   font-style: italic;
 510   text-decoration: none;
 511 }
 512
 513 .cm-s-mozilla a[class]:hover,
 514 .cm-s-mozilla a[class]:focus {
 515   text-decoration: underline;
 516 }
 517
 518 a.learn-more-link.webconsole-learn-more-link {
 519   font-style: normal;
 520 }
 521
 522 /* Open DOMNode in inspector button */
 523 .open-inspector {
 524   background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0;
 525   padding-left: 16px;
 526   margin-inline-start: 5px;
 527   cursor: pointer;
 528 }
 529
 530 .elementNode:hover .open-inspector,
 531 .open-inspector:hover {
 532   filter: url(images/filters.svg#checked-icon-state);
 533 }
 534
 535 .open-inspector:active {
 536   filter: url(images/filters.svg#checked-icon-state);
 537 }
 538
 539 @media (max-width: 500px) {
 540   .message > .timestamp {
 541     display: none;
 542   }
 543   .hud-console-filter-toolbar .webconsole-filter-button .toolbarbutton-text {
 544     display: none;
 545   }
 546   .hud-console-filter-toolbar .webconsole-filter-button {
 547     min-width: 40px;
 548   }
 549   .hud-console-filter-toolbar .webconsole-clear-console-button {
 550     min-width: 25px;
 551   }
 552   .webconsole-filter-button > .toolbarbutton-menubutton-button:before {
 553     width: 12px;
 554     height: 12px;
 555     margin-inline-start: 1px;
 556   }
 557   .toolbarbutton-menubutton-dropmarker {
 558     margin: 0px;
 559   }
 560 }
 561
 562 @media (max-width: 300px) {
 563   .hud-console-filter-toolbar {
 564     -moz-box-orient: vertical;
 565   }
 566   .toolbarbutton-text {
 567     display: -moz-box;
 568   }
 569   /*
 570   .devtools-toolbarbutton {
 571     margin-top: 3px;
 572   }
 573   .hud-console-filter-toolbar .hud-filter-box,
 574   .hud-console-filter-toolbar .devtools-toolbarbutton {
 575     margin-top: 5px;
 576   }
 577   */
 578 }
 579
 580 /*
 581  * This hardcoded width likely due to a toolkit Windows specific bug.
 582  * See http://hg.mozilla.org/mozilla-central/annotate/f38d6df93cad/toolkit/themes/winstripe/global/textbox-aero.css#l7
 583  */
 584
 585 :root[platform="win"] .hud-filter-box {
 586   width: 200px;
 587 }