michael@0: /* This Source Code Form is subject to the terms of the Mozilla Public
michael@0:  * License, v. 2.0. If a copy of the MPL was not distributed with this
michael@0:  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
michael@0: 
michael@0: /* General output styles */
michael@0: 
michael@0: a {
michael@0:   -moz-user-focus: normal;
michael@0:   -moz-user-input: enabled;
michael@0:   cursor: pointer;
michael@0:   text-decoration: underline;
michael@0: }
michael@0: 
michael@0: /* Workaround for Bug 575675 - FindChildWithRules aRelevantLinkVisited
michael@0:  * assertion when loading HTML page with links in XUL iframe */
michael@0: *:visited { }
michael@0: 
michael@0: .message {
michael@0:   display: flex;
michael@0:   flex: 0 0 auto;
michael@0:   padding: 0 7px;
michael@0:   width: 100%;
michael@0:   box-sizing: border-box;
michael@0: }
michael@0: 
michael@0: .message > .timestamp {
michael@0:   flex: 0 0 auto;
michael@0:   color: GrayText;
michael@0:   margin: 4px 6px 0 0;
michael@0: }
michael@0: 
michael@0: .message > .indent {
michael@0:   flex: 0 0 auto;
michael@0: }
michael@0: 
michael@0: .message > .icon {
michael@0:   background: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 0, 1, 0, 0) no-repeat;
michael@0:   background-position: center;
michael@0:   flex: 0 0 auto;
michael@0:   margin: 3px 6px 0 0;
michael@0:   padding: 0 4px;
michael@0:   width: 8px;
michael@0:   height: 1em;
michael@0:   align-self: flex-start;
michael@0: }
michael@0: 
michael@0: .message > .message-body-wrapper {
michael@0:   flex: 1 1 100%;
michael@0:   margin: 3px;
michael@0: }
michael@0: 
michael@0: /* The red bubble that shows the number of times a message is repeated */
michael@0: .message-repeats {
michael@0:   -moz-user-select: none;
michael@0:   flex: 0 0 auto;
michael@0:   margin: 2px 6px;
michael@0:   padding: 0 6px;
michael@0:   height: 1.25em;
michael@0:   color: white;
michael@0:   background-color: red;
michael@0:   border-radius: 40px;
michael@0:   font: message-box;
michael@0:   font-size: 0.9em;
michael@0:   font-weight: 600;
michael@0: }
michael@0: 
michael@0: .message-repeats[value="1"] {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: .message-location {
michael@0:   display: flex;
michael@0:   flex: 0 0 auto;
michael@0:   align-self: flex-start;
michael@0:   justify-content: flex-end;
michael@0:   width: 10em;
michael@0:   margin-top: 3px;
michael@0:   color: -moz-nativehyperlinktext;
michael@0:   text-decoration: none;
michael@0:   white-space: nowrap;
michael@0: }
michael@0: 
michael@0: .message-location:hover,
michael@0: .message-location:focus {
michael@0:   text-decoration: underline;
michael@0: }
michael@0: 
michael@0: .message-location > .filename {
michael@0:   text-overflow: ellipsis;
michael@0:   text-align: end;
michael@0:   overflow: hidden;
michael@0: }
michael@0: 
michael@0: .message-location > .line-number {
michael@0:   flex: 0 0 auto;
michael@0: }
michael@0: 
michael@0: .message-flex-body {
michael@0:   display: flex;
michael@0: }
michael@0: 
michael@0: .message-body {
michael@0:   white-space: pre-wrap;
michael@0:   word-wrap: break-word;
michael@0: }
michael@0: 
michael@0: .message-flex-body > .message-body {
michael@0:   display: block;
michael@0:   flex: 1 1 auto;
michael@0:   vertical-align: middle;
michael@0: }
michael@0: 
michael@0: .message-flex-body > .message-location {
michael@0:   margin-top: 0;
michael@0: }
michael@0: 
michael@0: .jsterm-input-container {
michael@0:   border-top-width: 1px;
michael@0:   border-top-style: solid;
michael@0: }
michael@0: 
michael@0: #output-wrapper {
michael@0:   direction: ltr;
michael@0:   overflow: auto;
michael@0: }
michael@0: 
michael@0: #output-container {
michael@0:   -moz-user-select: text;
michael@0:   -moz-box-flex: 1;
michael@0:   display: flex;
michael@0:   flex-direction: column;
michael@0:   align-items: flex-start;
michael@0: }
michael@0: 
michael@0: #output-container.hideTimestamps > .message {
michael@0:   -moz-padding-start: 0;
michael@0:   -moz-margin-start: 7px;
michael@0:   width: calc(100% - 7px);
michael@0: }
michael@0: 
michael@0: #output-container.hideTimestamps > .message > .timestamp {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: .theme-dark #output-container.hideTimestamps > .message > .indent {
michael@0:   background-color: #14171a; /* .theme-body */
michael@0: }
michael@0: 
michael@0: .theme-light #output-container.hideTimestamps > .message > .indent {
michael@0:   background-color: #fcfcfc; /* .theme-body */
michael@0: }
michael@0: 
michael@0: .filtered-by-type,
michael@0: .filtered-by-string {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: .hidden-message {
michael@0:   display: block;
michael@0:   visibility: hidden;
michael@0:   height: 0;
michael@0:   overflow: hidden;
michael@0: }
michael@0: 
michael@0: /* WebConsole colored drops */
michael@0: 
michael@0: .webconsole-filter-button {
michael@0:   -moz-user-focus: normal;
michael@0: }
michael@0: 
michael@0: .webconsole-filter-button[checked] {
michael@0:   color: white !important;
michael@0: }
michael@0: 
michael@0: .webconsole-filter-button > .toolbarbutton-menubutton-button:before {
michael@0:   content: "";
michael@0:   display: inline-block;
michael@0:   height: 8px;
michael@0:   width: 8px;
michael@0:   border-radius: 50%;
michael@0:   margin-left: 5px;
michael@0:   border-width: 1px;
michael@0:   border-style: solid;
michael@0: }
michael@0: 
michael@0: /* Network styles */
michael@0: .webconsole-filter-button[category="net"] > .toolbarbutton-menubutton-button:before {
michael@0:   background-image: linear-gradient(#444444, #000000);
michael@0:   border-color: #777;
michael@0: }
michael@0: 
michael@0: .theme-light .message[severity=error] {
michael@0:   background-color: rgba(255, 150, 150, 0.3);
michael@0: }
michael@0: 
michael@0: .theme-dark .message[severity=error] {
michael@0:   background-color: rgba(235, 83, 104, 0.17);
michael@0: }
michael@0: 
michael@0: .theme-dark .console-string {
michael@0:   color: #d99b28;
michael@0: }
michael@0: 
michael@0: .theme-light .console-string {
michael@0:   color: hsl(24,85%,39%);
michael@0: }
michael@0: 
michael@0: .message[category=network] > .indent {
michael@0:   -moz-border-end: solid #000 6px;
michael@0: }
michael@0: 
michael@0: .message[category=network][severity=error] > .icon {
michael@0:   background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 0, 16, 8, 8);
michael@0: }
michael@0: 
michael@0: .message[category=network] > .message-body {
michael@0:   display: flex;
michael@0: }
michael@0: 
michael@0: .message[category=network] .method {
michael@0:   flex: 0 0 auto;
michael@0: }
michael@0: 
michael@0: .message[category=network]:not(.navigation-marker) .url {
michael@0:   flex: 1 1 auto;
michael@0:   /* Make sure the URL is very small initially, let flex change width as needed. */
michael@0:   width: 100px;
michael@0:   min-width: 5em;
michael@0:   white-space: nowrap;
michael@0:   overflow: hidden;
michael@0:   text-overflow: ellipsis;
michael@0: }
michael@0: 
michael@0: .message[category=network] .status {
michael@0:   flex: 0 0 auto;
michael@0:   -moz-margin-start: 6px;
michael@0: }
michael@0: 
michael@0: .message[category=network].mixed-content .url {
michael@0:   color: #FF0000;
michael@0: }
michael@0: 
michael@0: .message .learn-more-link {
michael@0:   color: -moz-nativehyperlinktext;
michael@0:   margin: 0 6px;
michael@0: }
michael@0: 
michael@0: /* CSS styles */
michael@0: .webconsole-filter-button[category="css"] > .toolbarbutton-menubutton-button:before {
michael@0:   background-image: linear-gradient(#2DC3F3, #00B6F0);
michael@0:   border-color: #1BA2CC;
michael@0: }
michael@0: 
michael@0: .message[category=cssparser] > .indent {
michael@0:   -moz-border-end: solid #00b6f0 6px;
michael@0: }
michael@0: 
michael@0: .message[category=cssparser][severity=error] > .icon {
michael@0:   background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 8, 16, 16, 8);
michael@0: }
michael@0: 
michael@0: .message[category=cssparser][severity=warn] > .icon {
michael@0:   background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 8, 24, 16, 16);
michael@0: }
michael@0: 
michael@0: /* JS styles */
michael@0: .webconsole-filter-button[category="js"] > .toolbarbutton-menubutton-button:before {
michael@0:   background-image: linear-gradient(#FCB142, #FB9500);
michael@0:   border-color: #E98A00;
michael@0: }
michael@0: 
michael@0: .message[category=exception] > .indent {
michael@0:   -moz-border-end: solid #fb9500 6px;
michael@0: }
michael@0: 
michael@0: .message[category=exception][severity=error] > .icon {
michael@0:   background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 16, 16, 24, 8);
michael@0: }
michael@0: 
michael@0: .message[category=exception][severity=warn] > .icon {
michael@0:   background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 16, 24, 24, 16);
michael@0: }
michael@0: 
michael@0: /* Web Developer styles */
michael@0: .webconsole-filter-button[category="logging"] > .toolbarbutton-menubutton-button:before {
michael@0:   background-image: linear-gradient(#B9B9B9, #AAAAAA);
michael@0:   border-color: #929292;
michael@0: }
michael@0: 
michael@0: .message[category=console] > .indent {
michael@0:   -moz-border-end: solid #cbcbcb 6px;
michael@0: }
michael@0: 
michael@0: .message[category=console][severity=error] > .icon,
michael@0: .message[category=output][severity=error] > .icon {
michael@0:   background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 24, 16, 32, 8);
michael@0: }
michael@0: 
michael@0: .message[category=console][severity=warn] > .icon {
michael@0:   background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 24, 24, 32, 16);
michael@0: }
michael@0: 
michael@0: .message[category=console][severity=info] > .icon {
michael@0:   background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 24, 32, 32, 24);
michael@0: }
michael@0: 
michael@0: /* Input and output styles */
michael@0: .message[category=input] > .indent,
michael@0: .message[category=output] > .indent {
michael@0:   -moz-border-end: solid #808080 6px;
michael@0: }
michael@0: 
michael@0: .message[category=input] > .icon {
michael@0:   background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 24, 40, 32, 32);
michael@0: }
michael@0: 
michael@0: .message[category=output] > .icon {
michael@0:   background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 24, 48, 32, 40);
michael@0: }
michael@0: 
michael@0: /* JSTerm Styles */
michael@0: .jsterm-input-node,
michael@0: .jsterm-complete-node {
michael@0:   border: none;
michael@0:   padding: 0 0 0 16px;
michael@0:   -moz-appearance: none;
michael@0:   background-color: transparent;
michael@0: }
michael@0: 
michael@0: .jsterm-input-node {
michael@0:   background: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16) no-repeat;
michael@0: }
michael@0: 
michael@0: :-moz-any(.jsterm-input-node,
michael@0:           .jsterm-complete-node) > .textbox-input-box > .textbox-textarea {
michael@0:   overflow-x: hidden;
michael@0: }
michael@0: 
michael@0: .inlined-variables-view .message-body {
michael@0:   display: flex;
michael@0:   flex-direction: column;
michael@0: }
michael@0: .inlined-variables-view iframe {
michael@0:   display: block;
michael@0:   flex: 1;
michael@0:   margin-top: 5px;
michael@0:   margin-bottom: 15px;
michael@0:   -moz-margin-end: 15px;
michael@0:   border: 1px solid rgba(128, 128, 128, .5);
michael@0:   border-radius: 3px;
michael@0: }
michael@0: 
michael@0: #webconsole-sidebar > tabs {
michael@0:   height: 0;
michael@0:   border: none;
michael@0: }
michael@0: 
michael@0: .devtools-side-splitter ~ #webconsole-sidebar[hidden] {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: /* Security styles */
michael@0: 
michael@0: .message[category=security] > .indent {
michael@0:   -moz-border-end: solid red 6px;
michael@0: }
michael@0: 
michael@0: .webconsole-filter-button[category="security"] > .toolbarbutton-menubutton-button:before {
michael@0:   background-image: linear-gradient(#FF3030, #FF7D7D);
michael@0:   border-color: #D12C2C;
michael@0: }
michael@0: 
michael@0: .message[category=security][severity=error] > .icon {
michael@0:   background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 32, 16, 40, 8);
michael@0: }
michael@0: 
michael@0: .message[category=security][severity=warn] > .icon {
michael@0:   background-image: -moz-image-rect(url(chrome://browser/skin/devtools/webconsole.png), 32, 24, 40, 16);
michael@0: }
michael@0: 
michael@0: .navigation-marker {
michael@0:   color: #aaa;
michael@0:   background: linear-gradient(#aaa, #aaa) no-repeat left 50%;
michael@0:   background-size: 100% 2px;
michael@0:   margin-top: 6px;
michael@0:   margin-bottom: 6px;
michael@0:   font-size: 0.9em;
michael@0: }
michael@0: 
michael@0: .navigation-marker .url {
michael@0:   -moz-padding-end: 9px;
michael@0:   text-decoration: none;
michael@0: }
michael@0: 
michael@0: .stacktrace {
michael@0:   display: none;
michael@0:   list-style: none;
michael@0:   padding: 0 1em 0 1.5em;
michael@0:   margin: 5px 0 0 0;
michael@0:   max-height: 10em;
michael@0:   overflow-y: auto;
michael@0:   border: 1px solid rgb(200,200,200);
michael@0:   border-radius: 3px;
michael@0: }
michael@0: 
michael@0: .theme-light .message[severity=error] .stacktrace {
michael@0:   background-color: rgba(255, 255, 255, 0.5);
michael@0: }
michael@0: 
michael@0: .theme-dark .message[severity=error] .stacktrace {
michael@0:   background-color: rgba(0, 0, 0, 0.5);
michael@0: }
michael@0: 
michael@0: .message[open] .stacktrace {
michael@0:   display: block;
michael@0: }
michael@0: 
michael@0: .message .theme-twisty {
michael@0:   display: inline-block;
michael@0:   vertical-align: middle;
michael@0:   margin: 0 3px 0 0;
michael@0: }
michael@0: 
michael@0: .stacktrace li {
michael@0:   display: flex;
michael@0:   margin: 0;
michael@0: }
michael@0: 
michael@0: .stacktrace .function {
michael@0:   display: block;
michael@0:   flex: 1 1 auto;
michael@0: }
michael@0: 
michael@0: .cm-s-mozilla a[class] {
michael@0:   font-style: italic;
michael@0:   text-decoration: none;
michael@0: }
michael@0: 
michael@0: .cm-s-mozilla a[class]:hover,
michael@0: .cm-s-mozilla a[class]:focus {
michael@0:   text-decoration: underline;
michael@0: }
michael@0: 
michael@0: /* Open DOMNode in inspector button */
michael@0: .open-inspector {
michael@0:   background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0;
michael@0:   padding-left: 16px;
michael@0:   margin-left: 5px;
michael@0:   cursor: pointer;
michael@0: }
michael@0: 
michael@0: .elementNode:hover .open-inspector,
michael@0: .open-inspector:hover {
michael@0:   background-position: -32px 0;
michael@0: }
michael@0: 
michael@0: .open-inspector:active {
michael@0:   background-position: -16px 0;
michael@0: }
michael@0: 
michael@0: /* Replace these values with CSS variables as available */
michael@0: .theme-dark .jsterm-input-container {
michael@0:   background-color: #252c33; /* tabToolbarBackgroundColor */
michael@0:   border-color: #14171a; /* mainBackgroundColor */
michael@0: }
michael@0: 
michael@0: .theme-dark .jsterm-input-node {
michael@0:   color: #a9bacb; /* textColor */
michael@0: }
michael@0: 
michael@0: .theme-dark .jsterm-complete-node {
michael@0:   color: #5c6773; /* commentColor */
michael@0: }
michael@0: 
michael@0: .theme-dark .navigation-marker .url {
michael@0:   background: #14171a; /* mainBackgroundColor */
michael@0: }
michael@0: 
michael@0: .theme-dark .inlined-variables-view iframe {
michael@0:   border-color: #333;
michael@0: }
michael@0: 
michael@0: .theme-dark .stacktrace {
michael@0:   border-color: #333;
michael@0: }
michael@0: 
michael@0: .theme-light .jsterm-input-container {
michael@0:   background-color: #fff; /* mainBackgroundColor */
michael@0:   border-color: ThreeDShadow;
michael@0: }
michael@0: 
michael@0: .theme-light .jsterm-input-node {
michael@0:   color: black; /* textColor */
michael@0: }
michael@0: 
michael@0: .theme-light .jsterm-complete-node {
michael@0:   color: hsl(90,2%,46%); /* commentColor */
michael@0: }
michael@0: 
michael@0: .theme-light .navigation-marker .url {
michael@0:   background: #fff; /* mainBackgroundColor */
michael@0: }
michael@0: 
michael@0: .theme-light .inlined-variables-view iframe {
michael@0:   border-color: #ccc;
michael@0: }
michael@0: 
michael@0: .theme-light .stacktrace {
michael@0:   border-color: #ccc;
michael@0: }
michael@0: 
michael@0: @media (max-width: 500px) {
michael@0:   .message > .timestamp {
michael@0:     display: none;
michael@0:   }
michael@0:   .toolbarbutton-text {
michael@0:     display: none;
michael@0:   }
michael@0:   .hud-console-filter-toolbar .webconsole-filter-button {
michael@0:     min-width: 40px;
michael@0:   }
michael@0:   .hud-console-filter-toolbar .webconsole-clear-console-button {
michael@0:     min-width: 25px;
michael@0:   }
michael@0:   .webconsole-filter-button > .toolbarbutton-menubutton-button:before {
michael@0:     width: 16px;
michael@0:     height: 16px;
michael@0:     margin-left: 1px;
michael@0:   }
michael@0:   .toolbarbutton-menubutton-dropmarker {
michael@0:     margin: 0px;
michael@0:   }
michael@0: }
michael@0: 
michael@0: @media (max-width: 300px) {
michael@0:   .hud-console-filter-toolbar {
michael@0:     -moz-box-orient: vertical;
michael@0:   }
michael@0:   .toolbarbutton-text {
michael@0:     display: -moz-box;
michael@0:   }
michael@0:   .devtools-toolbarbutton {
michael@0:     margin-top: 3px;
michael@0:   }
michael@0:   .hud-console-filter-toolbar .hud-filter-box,
michael@0:   .hud-console-filter-toolbar .devtools-toolbarbutton {
michael@0:     margin-top: 5px;
michael@0:   }
michael@0: }