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