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 {
110 /* Makes the file name truncated (and ellipsis shown) on the left side */
114 text-overflow: ellipsis;
117 .stack-trace .frame-link-source-inner,
118 .message-location .frame-link-source-inner {
119 /* Enforce LTR direction for the file name - fixes bug 1290056 */
124 .stack-trace .frame-link-function-display-name {
128 text-overflow: ellipsis;
136 white-space: pre-wrap;
137 word-wrap: break-word;
140 .message-flex-body > .message-body {
147 -moz-user-select: text;
150 /* The width on #output-container is set to a hardcoded px in webconsole.js
151 since it's way faster than using 100% with -moz-box-flex (see Bug 1237368) */
153 #output-container.hideTimestamps > .message {
154 padding-inline-start: 0;
155 margin-inline-start: 7px;
156 width: calc(100% - 7px);
159 #output-container.hideTimestamps > .message > .timestamp {
163 #output-container.hideTimestamps > .message > .indent {
164 background-color: var(--theme-body-background);
168 .filtered-by-string {
179 /* WebConsole colored drops */
181 .webconsole-filter-button {
182 -moz-user-focus: normal;
185 .webconsole-filter-button > .toolbarbutton-menubutton-button:before {
187 display: inline-block;
191 margin-inline-start: 5px;
197 .webconsole-filter-button[category="net"] > .toolbarbutton-menubutton-button:before {
198 background-image: linear-gradient(#BF9B00, #7F6700);
199 border-color: #FFCF00;
203 background-color: var(--theme-contrast-background);
206 .message[severity=error] {
207 background-color: #FF0000;
211 color: var(--theme-highlight-orange);
214 .message[severity=error] .console-string {
218 .theme-selected .console-string,
219 .theme-selected .cm-number,
220 .theme-selected .cm-variable,
221 .theme-selected .kind-ArrayLike {
222 color: #000000 !important; /* Selection Text Color */
225 .message[category=network] > .indent {
226 border-inline-end: solid var(--theme-body-color-alt) 6px;
229 .message[category=network][severity=error] > .icon::before {
230 background-position: -12px 0;
233 .message[category=network] > .message-body {
238 .message[category=network] .method {
242 .message[category=network]:not(.navigation-marker) .url {
244 /* Make sure the URL is very small initially, let flex change width as needed. */
249 text-overflow: ellipsis;
252 .message[category=network] .status {
254 margin-inline-start: 6px;
257 .message[category=network].mixed-content .url {
258 color: var(--theme-highlight-red);
261 .message .learn-more-link {
262 color: var(--theme-highlight-blue);
266 .message[category=network] .xhr {
267 background-color: var(--theme-body-color-alt);
268 color: var(--theme-body-background);
274 margin-inline-start: 3px;
275 margin-inline-end: 1ex;
279 .webconsole-filter-button[category="css"] > .toolbarbutton-menubutton-button:before {
280 background-image: linear-gradient(#7575BF, #4E4E7F);
281 border-color: #9C9CFF;
284 .message[category=cssparser] > .indent {
285 border-inline-end: solid #9C9CFF 6px;
288 .message[category=cssparser][severity=error] > .icon::before {
289 background-position: -12px -12px;
292 .message[category=cssparser][severity=warn] > .icon::before {
293 background-position: -24px -12px;
297 .webconsole-filter-button[category="js"] > .toolbarbutton-menubutton-button:before {
298 background-image: linear-gradient(#BF7700, #7F4F00);
299 border-color: #FF9F00;
302 .message[category=exception] > .indent {
303 border-inline-end: solid #FF9F00 6px;
306 .message[category=exception][severity=error] > .icon::before {
307 background-position: -12px -24px;
310 .message[category=exception][severity=warn] > .icon::before {
311 background-position: -24px -24px;
314 /* Web Developer styles */
315 .webconsole-filter-button[category="logging"] > .toolbarbutton-menubutton-button:before {
316 background-image: linear-gradient(#5F3B83, #3F2756);
317 border-color: #8050B0;
320 .message[category=console] > .indent {
321 border-inline-end: solid #8050B0 6px;
324 .message[category=console][severity=error] > .icon::before,
325 .message[category=output][severity=error] > .icon::before,
326 .message[category=server][severity=error] > .icon::before {
327 background-position: -12px -36px;
330 .message[category=console][severity=warn] > .icon::before,
331 .message[category=server][severity=warn] > .icon::before {
332 background-position: -24px -36px;
335 .message[category=console][severity=info] > .icon::before,
336 .message[category=server][severity=info] > .icon::before {
337 background-position: -36px -36px;
340 /* Server Logging Styles */
342 .webconsole-filter-button[category="server"] > .toolbarbutton-menubutton-button:before {
343 background-image: linear-gradient(#006363, #004242);
344 border-color: #008484;
347 .message[category=server] > .indent {
348 border-inline-end: solid #8050B0 6px;
351 /* Input and output styles */
352 .message[category=input] > .indent,
353 .message[category=output] > .indent {
354 border-inline-end: solid #A09090 6px;
357 .message[category=input] > .icon::before {
358 background-position: -48px -36px;
361 .message[category=output] > .icon::before {
362 background-position: -60px -36px;
366 .jsterm-input-container {
367 background-color: var(--theme-tab-toolbar-background);
368 border-top: 1px solid var(--theme-splitter-color);
372 .jsterm-complete-node {
375 padding-inline-start: 20px;
377 -moz-appearance: none;
378 background-color: transparent;
381 .jsterm-input-node[focused="true"] {
382 background-image: var(--theme-command-line-image-focus);
386 .jsterm-complete-node {
387 color: var(--theme-comment);
391 /* Always allow scrolling on input - it auto expands in js by setting height,
392 but don't want it to get bigger than the window. 24px = toolbar height. */
393 max-height: calc(90vh - 24px);
394 background-image: var(--theme-command-line-image);
395 background-repeat: no-repeat;
396 background-size: 16px 16px;
397 background-position: 4px 50%;
398 color: var(--theme-content-color1);
401 :-moz-any(.jsterm-input-node,
402 .jsterm-complete-node) > .textbox-input-box > .textbox-textarea {
404 /* Set padding for console input on textbox to make sure it is inlcuded in
405 scrollHeight that is used when resizing JSTerminal's input. Note: textbox
406 default style has important already */
407 padding: 4px 0 !important;
410 .inlined-variables-view .message-body {
412 flex-direction: column;
418 .inlined-variables-view iframe {
423 margin-inline-end: 15px;
424 border: 1px solid var(--theme-splitter-color);
428 #webconsole-sidebar > tabs {
433 .devtools-side-splitter ~ #webconsole-sidebar[hidden] {
437 /* Security styles */
439 .message[category=security] > .indent {
440 border-inline-end: solid #FF0000 6px;
443 .webconsole-filter-button[category="security"] > .toolbarbutton-menubutton-button:before {
444 background-color: #FF0000;
445 border-color: #FFCF00;
448 .message[category=security][severity=error] > .icon::before {
449 background-position: -12px -48px;
452 .message[category=security][severity=warn] > .icon::before {
453 background-position: -24px -48px;
458 background-color: #A09090;
464 .navigation-marker .url {
465 padding-inline-end: 9px;
466 text-decoration: none;
467 background: var(--theme-body-background);
475 border: 1px solid var(--theme-splitter-color);
483 /* Force cells to only show one row of contents. Getting normal ellipses
484 behavior has proven impossible so far, so this is better than letting
485 rows get out of vertical alignment when one cell has a lot of content. */
486 .consoletable .table-widget-cell > span {
493 .message[severity=error] .stacktrace {
494 background-color: #000000;
497 .message[open] .stacktrace {
501 .message .theme-twisty {
502 display: inline-block;
503 vertical-align: middle;
508 .cm-s-mozilla a[class] {
510 text-decoration: none;
513 .cm-s-mozilla a[class]:hover,
514 .cm-s-mozilla a[class]:focus {
515 text-decoration: underline;
518 a.learn-more-link.webconsole-learn-more-link {
522 /* Open DOMNode in inspector button */
524 background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0;
526 margin-inline-start: 5px;
530 .elementNode:hover .open-inspector,
531 .open-inspector:hover {
532 filter: url(images/filters.svg#checked-icon-state);
535 .open-inspector:active {
536 filter: url(images/filters.svg#checked-icon-state);
539 @media (max-width: 500px) {
540 .message > .timestamp {
543 .hud-console-filter-toolbar .webconsole-filter-button .toolbarbutton-text {
546 .hud-console-filter-toolbar .webconsole-filter-button {
549 .hud-console-filter-toolbar .webconsole-clear-console-button {
552 .webconsole-filter-button > .toolbarbutton-menubutton-button:before {
555 margin-inline-start: 1px;
557 .toolbarbutton-menubutton-dropmarker {
562 @media (max-width: 300px) {
563 .hud-console-filter-toolbar {
564 -moz-box-orient: vertical;
566 .toolbarbutton-text {
570 .devtools-toolbarbutton {
573 .hud-console-filter-toolbar .hud-filter-box,
574 .hud-console-filter-toolbar .devtools-toolbarbutton {
581 * This hardcoded width likely due to a toolkit Windows specific bug.
582 * See http://hg.mozilla.org/mozilla-central/annotate/f38d6df93cad/toolkit/themes/winstripe/global/textbox-aero.css#l7
585 :root[platform="win"] .hud-filter-box {