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 background-position: -12px -36px;
363 .message[category=console][severity=warn] > .icon::before,
364 .message[category=server][severity=warn] > .icon::before {
365 background-position: -24px -36px;
368 .message[category=console][severity=info] > .icon::before,
369 .message[category=server][severity=info] > .icon::before {
370 background-position: -36px -36px;
373 /* Server Logging Styles */
375 .webconsole-filter-button[category="server"] > .toolbarbutton-menubutton-button:before {
376 background-image: linear-gradient(#006363, #004242);
377 border-color: #008484;
380 .message[category=server] > .indent,
381 .message.server > .indent {
382 border-inline-end: solid #8050B0 6px;
385 /* Input and output styles */
386 .message[category=input] > .indent,
387 .message[category=output] > .indent,
388 .message.command > .indent,
389 .message.result > .indent {
390 border-inline-end: solid #A09090 6px;
393 .message[category=input] > .icon::before,
394 .message.command > .icon::before {
395 background-position: -48px -36px;
398 .message[category=output] > .icon::before,
399 .message.result > .icon::before {
400 background-position: -60px -36px;
404 .jsterm-input-container {
405 background-color: var(--theme-tab-toolbar-background);
406 border-top: 1px solid var(--theme-splitter-color);
410 .jsterm-complete-node {
413 padding-inline-start: 20px;
415 -moz-appearance: none;
416 background-color: transparent;
419 .jsterm-input-node[focused="true"] {
420 background-image: var(--theme-command-line-image-focus);
424 .jsterm-complete-node {
425 color: var(--theme-comment);
429 /* Always allow scrolling on input - it auto expands in js by setting height,
430 but don't want it to get bigger than the window. 24px = toolbar height. */
431 max-height: calc(90vh - 24px);
432 background-image: var(--theme-command-line-image);
433 background-repeat: no-repeat;
434 background-size: 16px 16px;
435 background-position: 4px 50%;
436 color: var(--theme-content-color1);
439 :-moz-any(.jsterm-input-node,
440 .jsterm-complete-node) > .textbox-input-box > .textbox-textarea {
442 /* Set padding for console input on textbox to make sure it is inlcuded in
443 scrollHeight that is used when resizing JSTerminal's input. Note: textbox
444 default style has important already */
445 padding: 4px 0 !important;
448 .inlined-variables-view .message-body {
450 flex-direction: column;
456 .inlined-variables-view iframe {
461 margin-inline-end: 15px;
462 border: 1px solid var(--theme-splitter-color);
466 #webconsole-sidebar > tabs {
471 .devtools-side-splitter ~ #webconsole-sidebar[hidden] {
475 /* Security styles */
477 .message[category=security] > .indent,
478 .message.security > .indent {
479 border-inline-end: solid #FF0000 6px;
482 .webconsole-filter-button[category="security"] > .toolbarbutton-menubutton-button:before {
483 background-color: #FF0000;
484 border-color: #FFCF00;
487 .message[category=security][severity=error] > .icon::before,
488 .message.security.error > .icon::before {
489 background-position: -12px -48px;
492 .message[category=security][severity=warn] > .icon::before,
493 .message.security.warn > .icon::before {
494 background-position: -24px -48px;
499 background-color: #A09090;
505 .navigation-marker .url {
506 padding-inline-end: 9px;
507 text-decoration: none;
508 background: var(--theme-body-background);
516 border: 1px solid var(--theme-splitter-color);
524 /* Force cells to only show one row of contents. Getting normal ellipses
525 behavior has proven impossible so far, so this is better than letting
526 rows get out of vertical alignment when one cell has a lot of content. */
527 .consoletable .table-widget-cell > span {
534 .message[severity=error] .stacktrace {
535 background-color: #000000;
538 .message[open] .stacktrace {
542 .message .theme-twisty {
543 display: inline-block;
544 vertical-align: middle;
549 .cm-s-mozilla a[class] {
551 text-decoration: none;
554 .cm-s-mozilla a[class]:hover,
555 .cm-s-mozilla a[class]:focus {
556 text-decoration: underline;
559 a.learn-more-link.webconsole-learn-more-link {
563 /* Open DOMNode in inspector button */
565 background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0;
567 margin-inline-start: 5px;
571 .elementNode:hover .open-inspector,
572 .open-inspector:hover {
573 filter: url(images/filters.svg#checked-icon-state);
576 .elementNode:hover .open-inspector:active,
577 .open-inspector:active {
578 filter: url(images/filters.svg#checked-icon-state);
581 @media (max-width: 500px) {
582 .message > .timestamp {
585 .hud-console-filter-toolbar .webconsole-filter-button .toolbarbutton-text {
588 .hud-console-filter-toolbar .webconsole-filter-button {
591 .hud-console-filter-toolbar .webconsole-clear-console-button {
594 .webconsole-filter-button > .toolbarbutton-menubutton-button:before {
597 margin-inline-start: 1px;
599 .toolbarbutton-menubutton-dropmarker {
604 @media (max-width: 300px) {
605 .hud-console-filter-toolbar {
606 -moz-box-orient: vertical;
608 .toolbarbutton-text {
612 .devtools-toolbarbutton {
615 .hud-console-filter-toolbar .hud-filter-box,
616 .hud-console-filter-toolbar .devtools-toolbarbutton {
623 * This hardcoded width likely due to a toolkit Windows specific bug.
624 * See http://hg.mozilla.org/mozilla-central/annotate/f38d6df93cad/toolkit/themes/winstripe/global/textbox-aero.css#l7
627 :root[platform="win"] .hud-filter-box {
631 /* NEW CONSOLE STYLES */
633 #output-wrapper > div {
645 .webconsole-output-wrapper {
647 flex-direction: column;
649 -moz-user-focus: normal;
652 .webconsole-filterbar-wrapper {
661 .webconsole-filterbar-primary {
665 .devtools-toolbar.webconsole-filterbar-secondary {
669 .webconsole-filterbar-primary .devtools-plaininput {
673 .webconsole-output.hideTimestamps > .message > .timestamp {
677 .message.startGroup .message-body,
678 .message.startGroupCollapsed .message-body {
679 color: var(--theme-body-color);
683 .webconsole-output-wrapper .message > .icon {
688 .message.error > .icon::before {
689 background-position: -12px -36px;
692 .message.warn > .icon::before {
693 background-position: -24px -36px;
696 .message.info > .icon::before {
697 background-position: -36px -36px;
700 .message.network .method {
701 margin-inline-end: 5px;
704 .webconsole-output-wrapper .message .indent {
705 display: inline-block;
706 border-inline-end: solid 1px var(--theme-splitter-color);
709 .message.startGroup .indent,
710 .message.startGroupCollapsed .indent {
711 border-inline-end-color: transparent;
712 margin-inline-end: 5px;
715 .message.startGroup .icon,
716 .message.startGroupCollapsed .icon {
720 /* console.table() */
723 border-collapse: collapse;
724 --consoletable-border: 1px solid var(--table-splitter-color);
727 .new-consoletable thead,
728 .new-consoletable tbody {
729 background-color: var(--theme-body-background);
732 .new-consoletable th {
733 background-color: var(--theme-selection-background);
734 color: var(--theme-selection-color);
737 font-weight: inherit;
738 border-inline-end: var(--consoletable-border);
739 border-bottom: var(--consoletable-border);
742 .new-consoletable tr:nth-of-type(even) {
743 background-color: var(--table-zebra-background);
746 .new-consoletable td {
749 -moz-user-focus: normal;
750 color: var(--theme-body-color);
751 border-inline-end: var(--consoletable-border);