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 */
17 * This hardcoded width likely due to a toolkit Windows specific bug.
18 * See http://hg.mozilla.org/mozilla-central/annotate/f38d6df93cad/toolkit/themes/winstripe/global/textbox-aero.css#l7
25 /* General output styles */
28 -moz-user-focus: normal;
29 -moz-user-input: enabled;
31 text-decoration: underline;
34 /* Workaround for Bug 575675 - FindChildWithRules aRelevantLinkVisited
35 * assertion when loading HTML page with links in XUL iframe */
42 box-sizing: border-box;
46 .message > .timestamp {
48 color: var(--theme-comment);
61 align-self: flex-start;
64 .message > .icon::before {
66 background-image: url("chrome://devtools/skin/images/webconsole.svg");
67 background-position: 12px 12px;
68 background-repeat: no-repeat;
69 background-size: 72px 60px;
72 display: inline-block;
75 .message > .message-body-wrapper {
81 .message-body-wrapper .table-widget-body {
85 /* The red bubble that shows the number of times a message is repeated */
87 -moz-user-select: none;
93 background-color: #FF0000;
95 /* font: message-box; */
100 .message-repeats[value="1"] {
108 .stack-trace .frame-link-source,
109 .message-location .frame-link-source {
113 text-overflow: ellipsis;
116 .stack-trace .frame-link-function-display-name {
120 text-overflow: ellipsis;
128 white-space: pre-wrap;
129 word-wrap: break-word;
132 .message-flex-body > .message-body {
139 -moz-user-select: text;
142 /* The width on #output-container is set to a hardcoded px in webconsole.js
143 since it's way faster than using 100% with -moz-box-flex (see Bug 1237368) */
145 #output-container.hideTimestamps > .message {
146 padding-inline-start: 0;
147 margin-inline-start: 7px;
148 width: calc(100% - 7px);
151 #output-container.hideTimestamps > .message > .timestamp {
155 #output-container.hideTimestamps > .message > .indent {
156 background-color: var(--theme-body-background);
160 .filtered-by-string {
171 /* WebConsole colored drops */
173 .webconsole-filter-button {
174 -moz-user-focus: normal;
177 .webconsole-filter-button > .toolbarbutton-menubutton-button:before {
179 display: inline-block;
183 margin-inline-start: 5px;
189 .webconsole-filter-button[category="net"] > .toolbarbutton-menubutton-button:before {
190 background-image: linear-gradient(#BF9B00, #7F6700);
191 border-color: #FFCF00;
195 background-color: var(--theme-contrast-background);
198 .message[severity=error] {
199 background-color: #FF0000;
203 color: var(--theme-highlight-orange);
206 .message[severity=error] .console-string {
210 .theme-selected .console-string,
211 .theme-selected .cm-number,
212 .theme-selected .cm-variable,
213 .theme-selected .kind-ArrayLike {
214 color: #000000 !important; /* Selection Text Color */
217 .message[category=network] > .indent {
218 border-inline-end: solid var(--theme-body-color-alt) 6px;
221 .message[category=network][severity=error] > .icon::before {
222 background-position: -12px 0;
225 .message[category=network] > .message-body {
230 .message[category=network] .method {
234 .message[category=network]:not(.navigation-marker) .url {
236 /* Make sure the URL is very small initially, let flex change width as needed. */
241 text-overflow: ellipsis;
244 .message[category=network] .status {
246 margin-inline-start: 6px;
249 .message[category=network].mixed-content .url {
250 color: var(--theme-highlight-red);
253 .message .learn-more-link {
254 color: var(--theme-highlight-blue);
258 .message[category=network] .xhr {
259 background-color: var(--theme-body-color-alt);
260 color: var(--theme-body-background);
266 margin-inline-start: 3px;
267 margin-inline-end: 1ex;
271 .webconsole-filter-button[category="css"] > .toolbarbutton-menubutton-button:before {
272 background-image: linear-gradient(#7575BF, #4E4E7F);
273 border-color: #9C9CFF;
276 .message[category=cssparser] > .indent {
277 border-inline-end: solid #9C9CFF 6px;
280 .message[category=cssparser][severity=error] > .icon::before {
281 background-position: -12px -12px;
284 .message[category=cssparser][severity=warn] > .icon::before {
285 background-position: -24px -12px;
289 .webconsole-filter-button[category="js"] > .toolbarbutton-menubutton-button:before {
290 background-image: linear-gradient(#BF7700, #7F4F00);
291 border-color: #FF9F00;
294 .message[category=exception] > .indent {
295 border-inline-end: solid #FF9F00 6px;
298 .message[category=exception][severity=error] > .icon::before {
299 background-position: -12px -24px;
302 .message[category=exception][severity=warn] > .icon::before {
303 background-position: -24px -24px;
306 /* Web Developer styles */
307 .webconsole-filter-button[category="logging"] > .toolbarbutton-menubutton-button:before {
308 background-image: linear-gradient(#5F3B83, #3F2756);
309 border-color: #8050B0;
312 .message[category=console] > .indent {
313 border-inline-end: solid #8050B0 6px;
316 .message[category=console][severity=error] > .icon::before,
317 .message[category=output][severity=error] > .icon::before,
318 .message[category=server][severity=error] > .icon::before {
319 background-position: -12px -36px;
322 .message[category=console][severity=warn] > .icon::before,
323 .message[category=server][severity=warn] > .icon::before {
324 background-position: -24px -36px;
327 .message[category=console][severity=info] > .icon::before,
328 .message[category=server][severity=info] > .icon::before {
329 background-position: -36px -36px;
332 /* Server Logging Styles */
334 .webconsole-filter-button[category="server"] > .toolbarbutton-menubutton-button:before {
335 background-image: linear-gradient(#006363, #004242);
336 border-color: #008484;
339 .message[category=server] > .indent {
340 border-inline-end: solid #8050B0 6px;
343 /* Input and output styles */
344 .message[category=input] > .indent,
345 .message[category=output] > .indent {
346 border-inline-end: solid #A09090 6px;
349 .message[category=input] > .icon::before {
350 background-position: -48px -36px;
353 .message[category=output] > .icon::before {
354 background-position: -60px -36px;
358 .jsterm-input-container {
359 background-color: var(--theme-tab-toolbar-background);
360 border-top: 1px solid var(--theme-splitter-color);
364 .jsterm-complete-node {
367 padding-inline-start: 20px;
369 -moz-appearance: none;
370 background-color: transparent;
373 .jsterm-input-node[focused="true"] {
374 background-image: var(--theme-command-line-image-focus);
378 .jsterm-complete-node {
379 color: var(--theme-comment);
383 /* Always allow scrolling on input - it auto expands in js by setting height,
384 but don't want it to get bigger than the window. 24px = toolbar height. */
385 max-height: calc(90vh - 24px);
386 background-image: var(--theme-command-line-image);
387 background-repeat: no-repeat;
388 background-size: 16px 16px;
389 background-position: 4px 50%;
390 color: var(--theme-content-color1);
393 :-moz-any(.jsterm-input-node,
394 .jsterm-complete-node) > .textbox-input-box > .textbox-textarea {
396 /* Set padding for console input on textbox to make sure it is inlcuded in
397 scrollHeight that is used when resizing JSTerminal's input. Note: textbox
398 default style has important already */
399 padding: 4px 0 !important;
402 .inlined-variables-view .message-body {
404 flex-direction: column;
410 .inlined-variables-view iframe {
415 margin-inline-end: 15px;
416 border: 1px solid var(--theme-splitter-color);
420 #webconsole-sidebar > tabs {
425 .devtools-side-splitter ~ #webconsole-sidebar[hidden] {
429 /* Security styles */
431 .message[category=security] > .indent {
432 border-inline-end: solid #FF0000 6px;
435 .webconsole-filter-button[category="security"] > .toolbarbutton-menubutton-button:before {
436 background-color: #FF0000;
437 border-color: #FFCF00;
440 .message[category=security][severity=error] > .icon::before {
441 background-position: -12px -48px;
444 .message[category=security][severity=warn] > .icon::before {
445 background-position: -24px -48px;
450 background-color: #A09090;
456 .navigation-marker .url {
457 padding-inline-end: 9px;
458 text-decoration: none;
459 background: var(--theme-body-background);
467 border: 1px solid var(--theme-splitter-color);
475 .message[severity=error] .stacktrace {
476 background-color: #000000;
479 .message[open] .stacktrace {
483 .message .theme-twisty {
484 display: inline-block;
485 vertical-align: middle;
490 .cm-s-mozilla a[class] {
492 text-decoration: none;
495 .cm-s-mozilla a[class]:hover,
496 .cm-s-mozilla a[class]:focus {
497 text-decoration: underline;
500 a.learn-more-link.webconsole-learn-more-link {
504 /* Open DOMNode in inspector button */
506 background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0;
508 margin-inline-start: 5px;
512 .elementNode:hover .open-inspector,
513 .open-inspector:hover {
514 filter: url(images/filters.svg#checked-icon-state);
517 .open-inspector:active {
518 filter: url(images/filters.svg#checked-icon-state);
521 @media (max-width: 500px) {
522 .message > .timestamp {
525 .hud-console-filter-toolbar .webconsole-filter-button .toolbarbutton-text {
528 .hud-console-filter-toolbar .webconsole-filter-button {
531 .hud-console-filter-toolbar .webconsole-clear-console-button {
534 .webconsole-filter-button > .toolbarbutton-menubutton-button:before {
537 margin-inline-start: 1px;
539 .toolbarbutton-menubutton-dropmarker {
544 @media (max-width: 300px) {
545 .hud-console-filter-toolbar {
546 -moz-box-orient: vertical;
548 .toolbarbutton-text {
552 .devtools-toolbarbutton {
555 .hud-console-filter-toolbar .hud-filter-box,
556 .hud-console-filter-toolbar .devtools-toolbarbutton {
563 * This hardcoded width likely due to a toolkit Windows specific bug.
564 * See http://hg.mozilla.org/mozilla-central/annotate/f38d6df93cad/toolkit/themes/winstripe/global/textbox-aero.css#l7
567 :root[platform="win"] .hud-filter-box {