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