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 --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);
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
27 /* General output styles */
30 -moz-user-focus: normal;
31 -moz-user-input: enabled;
33 text-decoration: underline;
36 /* Workaround for Bug 575675 - FindChildWithRules aRelevantLinkVisited
37 * assertion when loading HTML page with links in XUL iframe */
45 box-sizing: border-box;
49 .message > .timestamp {
51 color: var(--theme-comment);
64 align-self: flex-start;
67 .message > .icon::before {
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;
75 display: inline-block;
78 .message > .message-body-wrapper {
83 .message-body-wrapper .table-widget-body {
87 /* The red bubble that shows the number of times a message is repeated */
89 -moz-user-select: none;
95 background-color: #FF0000;
97 /* font: message-box; */
102 .message-repeats[value="1"] {
109 align-self: flex-start;
110 justify-content: flex-end;
114 text-decoration: none;
118 .message-location:hover,
119 .message-location:focus {
120 text-decoration: underline;
123 .message-location > .frame-link .frame-link-source {
132 white-space: pre-wrap;
133 word-wrap: break-word;
136 .message-flex-body > .message-body {
139 vertical-align: middle;
142 .message-flex-body > .message-location {
149 -moz-user-select: text;
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) */
155 #output-container.hideTimestamps > .message {
156 padding-inline-start: 0;
157 margin-inline-start: 7px;
158 width: calc(100% - 7px);
161 #output-container.hideTimestamps > .message > .timestamp {
165 #output-container.hideTimestamps > .message > .indent {
166 background-color: var(--theme-body-background);
170 .filtered-by-string {
181 /* WebConsole colored drops */
183 .webconsole-filter-button {
184 -moz-user-focus: normal;
187 .webconsole-filter-button > .toolbarbutton-menubutton-button:before {
189 display: inline-block;
199 .webconsole-filter-button[category="net"] > .toolbarbutton-menubutton-button:before {
200 background-image: linear-gradient(#BF9B00, #7F6700);
201 border-color: #FFCF00;
205 background-color: var(--theme-contrast-background);
208 .message[severity=error] {
209 background-color: #FF0000;
213 color: var(--theme-highlight-orange);
216 .message[severity=error] .console-string {
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 */
227 .message[category=network] > .indent {
228 border-inline-end: solid var(--theme-body-color-alt) 6px;
231 .message[category=network][severity=error] > .icon::before {
232 background-position: -12px 0;
235 .message[category=network] > .message-body {
240 .message[category=network] .method {
244 .message[category=network]:not(.navigation-marker) .url {
246 /* Make sure the URL is very small initially, let flex change width as needed. */
251 text-overflow: ellipsis;
254 .message[category=network] .status {
256 margin-inline-start: 6px;
259 .message[category=network].mixed-content .url {
260 color: var(--theme-highlight-red);
263 .message .learn-more-link {
264 color: var(--theme-highlight-blue);
268 .message[category=network] .xhr {
269 background-color: var(--theme-body-color-alt);
270 color: var(--theme-body-background);
276 margin-inline-start: 3px;
277 margin-inline-end: 1ex;
281 .webconsole-filter-button[category="css"] > .toolbarbutton-menubutton-button:before {
282 background-image: linear-gradient(#7575BF, #4E4E7F);
283 border-color: #9C9CFF;
286 .message[category=cssparser] > .indent {
287 border-inline-end: solid #9C9CFF 6px;
290 .message[category=cssparser][severity=error] > .icon::before {
291 background-position: -12px -12px;
294 .message[category=cssparser][severity=warn] > .icon::before {
295 background-position: -24px -12px;
299 .webconsole-filter-button[category="js"] > .toolbarbutton-menubutton-button:before {
300 background-image: linear-gradient(#BF7700, #7F4F00);
301 border-color: #FF9F00;
304 .message[category=exception] > .indent {
305 border-inline-end: solid #FF9F00 6px;
308 .message[category=exception][severity=error] > .icon::before {
309 background-position: -12px -24px;
312 .message[category=exception][severity=warn] > .icon::before {
313 background-position: -24px -24px;
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;
322 .message[category=console] > .indent {
323 border-inline-end: solid #8050B0 6px;
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;
332 .message[category=console][severity=warn] > .icon::before,
333 .message[category=server][severity=warn] > .icon::before {
334 background-position: -24px -36px;
337 .message[category=console][severity=info] > .icon::before,
338 .message[category=server][severity=info] > .icon::before {
339 background-position: -36px -36px;
342 /* Server Logging Styles */
344 .webconsole-filter-button[category="server"] > .toolbarbutton-menubutton-button:before {
345 background-image: linear-gradient(#006363, #004242);
346 border-color: #008484;
349 .message[category=server] > .indent {
350 border-inline-end: solid #8050B0 6px;
353 /* Input and output styles */
354 .message[category=input] > .indent,
355 .message[category=output] > .indent {
356 border-inline-end: solid #A09090 6px;
359 .message[category=input] > .icon::before {
360 background-position: -48px -36px;
363 .message[category=output] > .icon::before {
364 background-position: -60px -36px;
368 .jsterm-input-container {
369 background-color: var(--theme-tab-toolbar-background);
370 border-top: 1px solid var(--theme-splitter-color);
374 .jsterm-complete-node {
377 -moz-appearance: none;
378 background-color: transparent;
381 .jsterm-complete-node {
382 color: var(--theme-comment);
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);
395 @media (min-resolution: 1.1dppx) {
397 background-image: var(--command-line-image-2x);
401 :-moz-any(.jsterm-input-node,
402 .jsterm-complete-node) > .textbox-input-box > .textbox-textarea {
406 .inlined-variables-view .message-body {
408 flex-direction: column;
414 .inlined-variables-view iframe {
419 margin-inline-end: 15px;
420 border: 1px solid var(--theme-splitter-color);
424 #webconsole-sidebar > tabs {
429 .devtools-side-splitter ~ #webconsole-sidebar[hidden] {
433 /* Security styles */
435 .message[category=security] > .indent {
436 border-inline-end: solid #FF0000 6px;
439 .webconsole-filter-button[category="security"] > .toolbarbutton-menubutton-button:before {
440 background-color: #FF0000;
441 border-color: #FFCF00;
444 .message[category=security][severity=error] > .icon::before {
445 background-position: -12px -48px;
448 .message[category=security][severity=warn] > .icon::before {
449 background-position: -24px -48px;
454 background-color: #A09090;
460 .navigation-marker .url {
461 padding-inline-end: 9px;
462 text-decoration: none;
463 background: var(--theme-body-background);
469 padding: 0 1em 0 1.5em;
473 border: 1px solid var(--theme-splitter-color);
481 .message[severity=error] .stacktrace {
482 background-color: #000000;
485 .message[open] .stacktrace {
489 .message .theme-twisty {
490 display: inline-block;
491 vertical-align: middle;
501 .stacktrace .function {
506 .cm-s-mozilla a[class] {
508 text-decoration: none;
511 .cm-s-mozilla a[class]:hover,
512 .cm-s-mozilla a[class]:focus {
513 text-decoration: underline;
516 a.learn-more-link.webconsole-learn-more-link {
520 /* Open DOMNode in inspector button */
522 background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0;
528 .elementNode:hover .open-inspector,
529 .open-inspector:hover {
530 filter: url(images/filters.svg#checked-icon-state);
533 .open-inspector:active {
534 filter: url(images/filters.svg#checked-icon-state);
537 @media (max-width: 500px) {
538 .message > .timestamp {
541 .hud-console-filter-toolbar .webconsole-filter-button .toolbarbutton-text {
544 .hud-console-filter-toolbar .webconsole-filter-button {
547 .hud-console-filter-toolbar .webconsole-clear-console-button {
550 .webconsole-filter-button > .toolbarbutton-menubutton-button:before {
555 .toolbarbutton-menubutton-dropmarker {
560 @media (max-width: 300px) {
561 .hud-console-filter-toolbar {
562 -moz-box-orient: vertical;
564 .toolbarbutton-text {
568 .devtools-toolbarbutton {
571 .hud-console-filter-toolbar .hud-filter-box,
572 .hud-console-filter-toolbar .devtools-toolbarbutton {
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
583 :root[platform="win"] .hud-filter-box {