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/. */
5 /* Webconsole specific theme variables */
10 --error-color: #FF0000;
11 --error-background-color: #FF0000;
12 --error-background-text: #000000;
13 --warning-background-color: #FFCF00;
14 --warning-background-text: #000000;
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
30 /* General output styles */
33 -moz-user-focus: normal;
34 -moz-user-input: enabled;
36 text-decoration: underline;
39 /* Workaround for Bug 575675 - FindChildWithRules aRelevantLinkVisited
40 * assertion when loading HTML page with links in XUL iframe */
47 box-sizing: border-box;
51 .message > .timestamp {
53 color: var(--theme-comment);
66 align-self: flex-start;
69 .message > .icon::before {
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;
77 display: inline-block;
80 .message > .message-body-wrapper {
86 .message-body-wrapper .table-widget-body {
90 /* The red bubble that shows the number of times a message is repeated */
92 -moz-user-select: none;
98 background-color: #FF0000;
100 /* font: message-box; */
105 .message-repeats[value="1"] {
114 /* The markup contains extra whitespace to improve formatting of clipboard text.
115 Make sure this whitespace doesn't affect the HTML rendering */
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 */
125 text-overflow: ellipsis;
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 */
135 .stack-trace .frame-link-function-display-name {
139 text-overflow: ellipsis;
147 white-space: pre-wrap;
148 word-wrap: break-word;
151 .message-flex-body > .message-body {
159 -moz-user-select: text;
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) */
166 #output-container.hideTimestamps > .message {
167 padding-inline-start: 0;
168 margin-inline-start: 7px;
169 width: calc(100% - 7px);
172 #output-container.hideTimestamps > .message > .timestamp {
176 #output-container.hideTimestamps > .message > .indent {
177 background-color: var(--theme-body-background);
181 .filtered-by-string {
192 /* WebConsole colored drops */
194 .webconsole-filter-button {
195 -moz-user-focus: normal;
198 .webconsole-filter-button > .toolbarbutton-menubutton-button {
199 -moz-box-orient: horizontal; /* saving vertical space in toolbar */
202 .webconsole-filter-button > .toolbarbutton-menubutton-button:before {
204 display: inline-block;
208 margin-inline-start: 1px;
209 margin-inline-end: 3px;
215 .webconsole-filter-button[category="net"] > .toolbarbutton-menubutton-button:before {
216 background-image: linear-gradient(#BF9B00, #7F6700);
217 border-color: #FFCF00;
221 background-color: var(--theme-contrast-background);
224 .message[severity=error],
226 background-color: var(--error-background-color);
230 color: var(--theme-highlight-orange);
233 .message[severity=error] .console-string {
234 background-color: var(--error-background-text);
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 */
244 .message[category=network] > .indent {
245 border-inline-end: solid var(--theme-body-color-alt) 6px;
248 .message[category=network][severity=error] > .icon::before,
249 .message.network.error > .icon::before {
250 background-position: -12px 0;
253 .message[category=network] > .message-body,
254 .message.network > .message-body {
259 .message[category=network] .method,
260 .message.network .method {
264 .message[category=network]:not(.navigation-marker) .url,
265 .message.network:not(.navigation-marker) .url {
267 /* Make sure the URL is very small initially, let flex change width as needed. */
272 text-overflow: ellipsis;
275 .message[category=network] .status,
276 .message.network .status {
278 margin-inline-start: 6px;
281 .message[category=network].mixed-content .url,
282 .message.network.mixed-content .url {
283 color: var(--theme-highlight-red);
286 .message .learn-more-link {
287 color: var(--theme-highlight-blue);
291 .message[category=network] .xhr,
292 .message.network .xhr {
293 background-color: var(--theme-body-color-alt);
294 color: var(--theme-body-background);
300 margin-inline-start: 3px;
301 margin-inline-end: 1ex;
305 .webconsole-filter-button[category="css"] > .toolbarbutton-menubutton-button:before {
306 background-image: linear-gradient(#7575BF, #4E4E7F);
307 border-color: #9C9CFF;
310 .message[category=cssparser] > .indent,
311 .message.cssparser > .indent {
312 border-inline-end: solid #9C9CFF 6px;
315 .message[category=cssparser][severity=error] > .icon::before,
316 .message.cssparser.error > .icon::before {
317 background-position: -12px -12px;
320 .message[category=cssparser][severity=warn] > .icon::before,
321 .message.cssparser.warn > .icon::before {
322 background-position: -24px -12px;
326 .webconsole-filter-button[category="js"] > .toolbarbutton-menubutton-button:before {
327 background-image: linear-gradient(#BF7700, #7F4F00);
328 border-color: #FF9F00;
331 .message[category=exception] > .indent,
332 .message.exception > .indent {
333 border-inline-end: solid #FF9F00 6px;
336 .message[category=exception][severity=error] > .icon::before,
337 .message.exception.error > .icon::before {
338 background-position: -12px -24px;
341 .message[category=exception][severity=warn] > .icon::before,
342 .message.exception.warn > .icon::before {
343 background-position: -24px -24px;
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;
352 .message[category=console] > .indent,
353 .message.console-api > .indent {
354 border-inline-end: solid #8050B0 6px;
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;
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;
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;
380 /* Server Logging Styles */
382 .webconsole-filter-button[category="server"] > .toolbarbutton-menubutton-button:before {
383 background-image: linear-gradient(#006363, #004242);
384 border-color: #008484;
387 .message[category=server] > .indent,
388 .message.server > .indent {
389 border-inline-end: solid #8050B0 6px;
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;
400 .message[category=input] > .icon::before,
401 .message.command > .icon::before {
402 background-position: -48px -36px;
405 .message[category=output] > .icon::before,
406 .message.result > .icon::before {
407 background-position: -60px -36px;
411 .jsterm-input-container {
412 background-color: var(--theme-tab-toolbar-background);
413 border-top: 1px solid var(--theme-splitter-color);
417 .jsterm-complete-node {
420 padding-inline-start: 20px;
422 -moz-appearance: none;
423 background-color: transparent;
426 .jsterm-input-node[focused="true"] {
427 background-image: var(--theme-command-line-image-focus);
431 .jsterm-complete-node {
432 color: var(--theme-comment);
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);
446 :-moz-any(.jsterm-input-node,
447 .jsterm-complete-node) > .textbox-input-box > .textbox-textarea {
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;
455 .inlined-variables-view .message-body {
457 flex-direction: column;
463 .inlined-variables-view iframe {
468 margin-inline-end: 15px;
469 border: 1px solid var(--theme-splitter-color);
473 #webconsole-sidebar > tabs {
478 .devtools-side-splitter ~ #webconsole-sidebar[hidden] {
482 /* Security styles */
484 .message[category=security] > .indent,
485 .message.security > .indent {
486 border-inline-end: solid #FF0000 6px;
489 .webconsole-filter-button[category="security"] > .toolbarbutton-menubutton-button:before {
490 background-color: #FF0000;
491 border-color: #FFCF00;
494 .message[category=security][severity=error] > .icon::before,
495 .message.security.error > .icon::before {
496 background-position: -12px -48px;
499 .message[category=security][severity=warn] > .icon::before,
500 .message.security.warn > .icon::before {
501 background-position: -24px -48px;
506 background-color: #A09090;
512 .navigation-marker .url {
513 padding-inline-end: 9px;
514 text-decoration: none;
515 background: var(--theme-body-background);
523 border: 1px solid var(--theme-splitter-color);
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 {
541 .message[severity=error] .stacktrace {
542 background-color: #000000;
545 .message[open] .stacktrace,
546 .message.open .stacktrace {
550 .message .theme-twisty {
551 display: inline-block;
552 vertical-align: middle;
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) {
563 .cm-s-mozilla a[class] {
565 text-decoration: none;
568 .cm-s-mozilla a[class]:hover,
569 .cm-s-mozilla a[class]:focus {
570 text-decoration: underline;
573 a.learn-more-link.webconsole-learn-more-link {
577 /* Open DOMNode in inspector button */
579 background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0;
581 margin-inline-start: 5px;
585 .elementNode:hover .open-inspector,
586 .open-inspector:hover {
587 filter: url(images/filters.svg#checked-icon-state);
590 .elementNode:hover .open-inspector:active,
591 .open-inspector:active {
592 filter: url(images/filters.svg#checked-icon-state);
595 @media (max-width: 500px) {
596 .message > .timestamp {
599 .hud-console-filter-toolbar .webconsole-filter-button .toolbarbutton-text {
602 .hud-console-filter-toolbar .webconsole-filter-button {
605 .hud-console-filter-toolbar .webconsole-clear-console-button {
608 .webconsole-filter-button > .toolbarbutton-menubutton-button:before {
611 margin-inline-start: 1px;
613 .toolbarbutton-menubutton-dropmarker {
618 @media (max-width: 300px) {
619 .hud-console-filter-toolbar {
620 -moz-box-orient: vertical;
622 .toolbarbutton-text {
626 .devtools-toolbarbutton {
629 .hud-console-filter-toolbar .hud-filter-box,
630 .hud-console-filter-toolbar .devtools-toolbarbutton {
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
641 :root[platform="win"] .hud-filter-box {
645 /* NEW CONSOLE STYLES */
647 #output-wrapper > div {
659 .webconsole-output-wrapper {
661 flex-direction: column;
663 -moz-user-focus: normal;
666 .webconsole-filterbar-wrapper {
675 .webconsole-filterbar-primary {
679 .devtools-toolbar.webconsole-filterbar-secondary {
683 .webconsole-filterbar-primary .devtools-plaininput {
687 .webconsole-output.hideTimestamps > .message > .timestamp {
691 .message.startGroup .message-body,
692 .message.startGroupCollapsed .message-body {
693 color: var(--theme-body-color);
697 .webconsole-output-wrapper .message > .icon {
702 .message.error > .icon::before {
703 background-position: -12px -36px;
706 .message.warn > .icon::before {
707 background-position: -24px -36px;
710 .message.info > .icon::before {
711 background-position: -36px -36px;
714 .message.network .method {
715 margin-inline-end: 5px;
718 .webconsole-output-wrapper .message .indent {
719 display: inline-block;
720 border-inline-end: solid 1px var(--theme-splitter-color);
723 .message.startGroup .indent,
724 .message.startGroupCollapsed .indent {
725 border-inline-end-color: transparent;
726 margin-inline-end: 5px;
729 .message.startGroup .icon,
730 .message.startGroupCollapsed .icon {
734 /* console.table() */
737 border-collapse: collapse;
738 --consoletable-border: 1px solid var(--table-splitter-color);
741 .new-consoletable thead,
742 .new-consoletable tbody {
743 background-color: var(--theme-body-background);
746 .new-consoletable th {
747 background-color: var(--theme-selection-background);
748 color: var(--theme-selection-color);
751 font-weight: inherit;
752 border-inline-end: var(--consoletable-border);
753 border-bottom: var(--consoletable-border);
756 .new-consoletable tr:nth-of-type(even) {
757 background-color: var(--table-zebra-background);
760 .new-consoletable td {
763 -moz-user-focus: normal;
764 color: var(--theme-body-color);
765 border-inline-end: var(--consoletable-border);