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/. */
10 * This hardcoded width likely due to a toolkit Windows specific bug.
11 * See http://hg.mozilla.org/mozilla-central/annotate/f38d6df93cad/toolkit/themes/winstripe/global/textbox-aero.css#l7
18 /* === BEGIN webconsole.inc.css === */
20 /* General output styles */
23 -moz-user-focus: normal;
24 -moz-user-input: enabled;
26 text-decoration: underline;
29 /* Workaround for Bug 575675 - FindChildWithRules aRelevantLinkVisited
30 * assertion when loading HTML page with links in XUL iframe */
38 box-sizing: border-box;
41 .message > .timestamp {
52 background: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 0, 1, 0, 0) no-repeat;
53 background-position: center;
59 align-self: flex-start;
62 .message > .message-body-wrapper {
67 /* The red bubble that shows the number of times a message is repeated */
69 -moz-user-select: none;
75 background-color: #FF0000;
77 /* font: message-box; */
82 .message-repeats[value="1"] {
89 align-self: flex-start;
90 justify-content: flex-end;
94 text-decoration: none;
98 .message-location:hover,
99 .message-location:focus {
100 text-decoration: underline;
103 .message-location > .filename {
104 text-overflow: ellipsis;
110 .message-location > .line-number {
114 .hud-msg-node[selected="true"] > .webconsole-timestamp,
115 .hud-msg-node[selected="true"] > .webconsole-location {
124 white-space: pre-wrap;
125 word-wrap: break-word;
128 .message-flex-body > .message-body {
131 vertical-align: middle;
134 .message-flex-body > .message-location {
138 .jsterm-input-container {
139 border-top-width: 1px;
140 border-top-style: solid;
149 -moz-user-select: text;
152 flex-direction: column;
153 align-items: flex-start;
156 #output-container.hideTimestamps > .message {
157 -moz-padding-start: 0;
158 -moz-margin-start: 7px;
159 width: calc(100% - 7px);
162 #output-container.hideTimestamps > .message > .timestamp {
166 #output-container.hideTimestamps > .message > .indent {
167 background-color: #000000; /* .theme-body */
171 .filtered-by-string {
182 /* WebConsole colored drops */
184 .webconsole-filter-button {
185 -moz-user-focus: normal;
188 .webconsole-filter-button[checked] {
189 /* color: white !important; */
192 .webconsole-filter-button > .toolbarbutton-menubutton-button:before {
194 display: inline-block;
203 .webconsole-filter-button menuitem {
204 -moz-image-region: auto;
213 .webconsole-filter-button[category="net"] > .toolbarbutton-menubutton-button:before {
214 background-image: linear-gradient(#BF9B00, #7F6700);
215 border-color: #FFCF00;
218 .message[severity=error] {
219 background-color: #FF0000;
226 .message[category=network] > .indent {
227 -moz-border-end: solid #FF0000 6px;
230 .message[category=network][severity=error] > .icon {
231 background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 0, 16, 8, 8);
234 .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 -moz-margin-start: 6px;
257 .message[category=network].mixed-content .url {
261 .message .learn-more-link {
267 .webconsole-filter-button[category="css"] > .toolbarbutton-menubutton-button:before {
268 background-image: linear-gradient(#7575BF, #4E4E7F);
269 border-color: #9C9CFF;
272 .message[category=cssparser] > .indent {
273 -moz-border-end: solid #9C9CFF 6px;
276 .message[category=cssparser][severity=error] > .icon {
277 background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 8, 16, 16, 8);
280 .message[category=cssparser][severity=warn] > .icon {
281 background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 8, 24, 16, 16);
285 .webconsole-filter-button[category="js"] > .toolbarbutton-menubutton-button:before {
286 background-image: linear-gradient(#BF7700, #7F4F00);
287 border-color: #FF9F00;
290 .message[category=exception] > .indent {
291 -moz-border-end: solid #FF9F00 6px;
294 .message[category=exception][severity=error] > .icon {
295 background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 16, 16, 24, 8);
298 .message[category=exception][severity=warn] > .icon {
299 background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 16, 24, 24, 16);
302 /* Web Developer styles */
303 .webconsole-filter-button[category="logging"] > .toolbarbutton-menubutton-button:before {
304 background-image: linear-gradient(#5F3B83, #3F2756);
305 border-color: #8050B0;
308 .message[category=console] > .indent {
309 -moz-border-end: solid #8050B0 6px;
312 .message[category=console][severity=error] > .icon,
313 .message[category=output][severity=error] > .icon {
314 background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 24, 16, 32, 8);
317 .message[category=console][severity=warn] > .icon {
318 background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 24, 24, 32, 16);
321 .message[category=console][severity=info] > .icon {
322 background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 24, 32, 32, 24);
325 /* Input and output styles */
326 .message[category=input] > .indent,
327 .message[category=output] > .indent {
328 -moz-border-end: solid #A09090 6px;
331 .message[category=input] > .icon {
332 background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 24, 40, 32, 32);
335 .message[category=output] > .icon {
336 background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 24, 48, 32, 40);
342 .jsterm-complete-node {
343 -moz-padding-start: 16px;
345 background-color: transparent;
349 background: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16) no-repeat;
352 :-moz-any(.jsterm-input-node,
353 .jsterm-complete-node) > .textbox-input-box > .textbox-textarea {
357 .inlined-variables-view .message-body {
359 flex-direction: column;
362 .inlined-variables-view iframe {
367 -moz-margin-end: 15px;
368 border: 1px solid #9C9CFF;
372 #webconsole-sidebar > tabs {
377 .devtools-side-splitter ~ #webconsole-sidebar[hidden] {
381 /* Security styles */
383 .message[category=security] > .indent {
384 -moz-border-end: solid #FF0000 6px;
387 .webconsole-filter-button[category="security"] > .toolbarbutton-menubutton-button:before {
388 background-color: #FF0000;
389 border-color: #FFCF00;
392 .message[category=security][severity=error] > .icon {
393 background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 32, 16, 40, 8);
396 .message[category=security][severity=warn] > .icon {
397 background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 32, 24, 40, 16);
402 background-color: #A09090;
408 .navigation-marker .url {
409 -moz-padding-end: 9px;
410 text-decoration: none;
416 padding: 0 1em 0 1.5em;
420 border: 1px solid #A09090;
424 .message[severity=error] .stacktrace {
425 background-color: #000000;
428 .message[open] .stacktrace {
432 .message .theme-twisty {
433 display: inline-block;
434 vertical-align: middle;
443 .stacktrace .function {
448 .cm-s-mozilla a[class] {
450 text-decoration: none;
453 .cm-s-mozilla a[class]:hover,
454 .cm-s-mozilla a[class]:focus {
455 text-decoration: underline;
458 /* Open DOMNode in inspector button */
460 background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0;
466 .elementNode:hover .open-inspector,
467 .open-inspector:hover {
468 background-position: -32px 0;
471 .open-inspector:active {
472 background-position: -16px 0;
475 /* Replace these values with CSS variables as available */
476 .theme-dark .jsterm-input-container {
477 background-color: #000000; /* tabToolbarBackgroundColor */
478 border-color: #9C9CFF; /* mainBackgroundColor */
481 .theme-dark .jsterm-input-node {
482 color: #E7ADE7; /* textColor */
485 .theme-dark .jsterm-complete-node {
486 color: #A09090; /* commentColor */
489 .theme-dark .navigation-marker .url {
490 background: #000000; /* mainBackgroundColor */
493 .theme-dark .inlined-variables-view iframe {
494 border-color: #A09090;
497 .theme-dark .stacktrace {
498 border-color: #A09090;
501 .theme-light .jsterm-input-container {
502 background-color: #000000; /* tabToolbarBackgroundColor */
503 border-color: #9C9CFF; /* mainBackgroundColor */
506 .theme-light .jsterm-input-node {
507 color: #E7ADE7; /* textColor */
510 .theme-light .jsterm-complete-node {
511 color: #A09090; /* commentColor */
514 .theme-light .navigation-marker .url {
515 background: #000000; /* mainBackgroundColor */
518 .theme-light .inlined-variables-view iframe {
519 border-color: #A09090;
522 .theme-dark .stacktrace {
523 border-color: #A09090;
526 @media (max-width: 500px) {
527 .message > .timestamp {
530 .toolbarbutton-text {
533 .hud-console-filter-toolbar .webconsole-filter-button {
536 .hud-console-filter-toolbar .webconsole-clear-console-button {
539 .webconsole-filter-button > .toolbarbutton-menubutton-button:before {
544 .toolbarbutton-menubutton-dropmarker {
549 @media (max-width: 300px) {
550 .hud-console-filter-toolbar {
551 -moz-box-orient: vertical;
553 .toolbarbutton-text {
556 .devtools-toolbarbutton {
559 .hud-console-filter-toolbar .hud-filter-box,
560 .hud-console-filter-toolbar .devtools-toolbarbutton {
565 /* === END webconsole.inc.css === */