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