mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-22 01:35:35 +00:00
e2178a02fc
In the 0.16.0 bundle, we removed most of the ObjectInspector CSS custom properties because they were being slow. This means that some of the styles we overrided in the console weren't overriden anymore. This patch fixes that so we get to the same style we have prior to the new bundle. MozReview-Commit-ID: JP35pkX6PHZ --HG-- extra : rebase_source : 194c90856730348e6b7ce6f9bbff52d9ae6c8151
1256 lines
31 KiB
CSS
1256 lines
31 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/. */
|
|
|
|
/* Webconsole specific theme variables */
|
|
.theme-light,
|
|
.theme-firebug {
|
|
--error-color: #FF0000;
|
|
--error-background-color: #FFEBEB;
|
|
--warning-background-color: #FFFFC8;
|
|
}
|
|
|
|
/* 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 { }
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.message {
|
|
display: flex;
|
|
padding: 0 7px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.message > .prefix,
|
|
.message > .timestamp {
|
|
flex: none;
|
|
color: var(--theme-comment);
|
|
margin: 3px 6px 0 0;
|
|
}
|
|
|
|
.message > .indent {
|
|
flex: none;
|
|
}
|
|
|
|
.message > .icon {
|
|
flex: none;
|
|
margin: 3px 6px 0 0;
|
|
padding: 0 4px;
|
|
height: 1em;
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.theme-firebug .message > .icon {
|
|
margin: 0;
|
|
margin-inline-end: 6px;
|
|
}
|
|
|
|
.theme-firebug .message[severity="error"],
|
|
.theme-light .message.error,
|
|
.theme-firebug .message.error {
|
|
color: var(--error-color);
|
|
background-color: var(--error-background-color);
|
|
}
|
|
|
|
.theme-firebug .message[severity="warn"],
|
|
.theme-light .message.warn,
|
|
.theme-firebug .message.warn {
|
|
background-color: var(--warning-background-color);
|
|
}
|
|
|
|
.message > .icon::before {
|
|
content: "";
|
|
background-image: url(chrome://devtools/skin/images/webconsole.svg);
|
|
background-position: 12px 12px;
|
|
background-repeat: no-repeat;
|
|
background-size: 72px 60px;
|
|
width: 12px;
|
|
height: 12px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.theme-light .message > .icon::before {
|
|
background-image: url(chrome://devtools/skin/images/webconsole.svg#light-icons);
|
|
}
|
|
|
|
.message > .message-body-wrapper {
|
|
flex: auto;
|
|
min-width: 0px;
|
|
margin: 3px;
|
|
}
|
|
|
|
.message-body-wrapper .table-widget-body {
|
|
overflow: visible;
|
|
}
|
|
|
|
/* The red bubble that shows the number of times a message is repeated */
|
|
.message-repeats {
|
|
-moz-user-select: none;
|
|
flex: none;
|
|
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 {
|
|
max-width: 40%;
|
|
}
|
|
|
|
.stack-trace {
|
|
/* The markup contains extra whitespace to improve formatting of clipboard text.
|
|
Make sure this whitespace doesn't affect the HTML rendering */
|
|
white-space: normal;
|
|
}
|
|
|
|
.stack-trace .frame-link-source,
|
|
.message-location .frame-link-source {
|
|
/* Makes the file name truncated (and ellipsis shown) on the left side */
|
|
direction: rtl;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.stack-trace .frame-link-source-inner,
|
|
.message-location .frame-link-source-inner {
|
|
/* Enforce LTR direction for the file name - fixes bug 1290056 */
|
|
direction: ltr;
|
|
unicode-bidi: embed;
|
|
}
|
|
|
|
.stack-trace .frame-link-function-display-name {
|
|
max-width: 50%;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.message-flex-body {
|
|
display: flex;
|
|
}
|
|
|
|
.message-body {
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.message-flex-body > .message-body {
|
|
display: block;
|
|
flex: auto;
|
|
}
|
|
|
|
#output-wrapper {
|
|
direction: ltr;
|
|
overflow: auto;
|
|
-moz-user-select: text;
|
|
position: relative;
|
|
}
|
|
|
|
/* The width on #output-container is set to a hardcoded px in webconsole.js
|
|
since it's way faster than using 100% with -moz-box-flex (see Bug 1237368) */
|
|
|
|
#output-container.hideTimestamps > .message {
|
|
padding-inline-start: 0;
|
|
margin-inline-start: 7px;
|
|
width: calc(100% - 7px);
|
|
}
|
|
|
|
#output-container.hideTimestamps > .message > .timestamp {
|
|
display: none;
|
|
}
|
|
|
|
#output-container.hideTimestamps > .message > .indent {
|
|
background-color: var(--theme-body-background);
|
|
}
|
|
|
|
.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 > .toolbarbutton-menubutton-button:before {
|
|
content: "";
|
|
display: inline-block;
|
|
height: 8px;
|
|
width: 8px;
|
|
border-radius: 50%;
|
|
margin-inline-start: 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;
|
|
}
|
|
|
|
.theme-dark .message[severity=error],
|
|
.theme-dark .message.error {
|
|
background-color: rgba(235, 83, 104, 0.17);
|
|
}
|
|
|
|
.console-string {
|
|
color: var(--theme-highlight-lightorange);
|
|
}
|
|
|
|
.theme-selected .console-string,
|
|
.theme-selected .cm-number,
|
|
.theme-selected .cm-variable,
|
|
.theme-selected .kind-ArrayLike {
|
|
color: #f5f7fa !important; /* Selection Text Color */
|
|
}
|
|
|
|
.message[category=network] > .indent {
|
|
border-inline-end: solid var(--theme-body-color-alt) 6px;
|
|
}
|
|
|
|
.message[category=network][severity=error] > .icon::before,
|
|
.message.network.error > .icon::before {
|
|
background-position: -12px 0;
|
|
}
|
|
|
|
.message[category=network] > .message-body,
|
|
.message.network > .message-body {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.message[category=network] .method,
|
|
.message.network .method {
|
|
flex: none;
|
|
}
|
|
|
|
.message[category=network]:not(.navigation-marker) .url,
|
|
.message.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,
|
|
.message.network .status {
|
|
flex: none;
|
|
margin-inline-start: 6px;
|
|
}
|
|
|
|
.message[category=network].mixed-content .url,
|
|
.message.network.mixed-content .url {
|
|
color: var(--theme-highlight-red);
|
|
}
|
|
|
|
.message .learn-more-link {
|
|
color: var(--theme-highlight-blue);
|
|
margin: 0 6px;
|
|
}
|
|
|
|
.message[category=network] .xhr,
|
|
.message.network .xhr {
|
|
background-color: var(--theme-body-color-alt);
|
|
color: var(--theme-body-background);
|
|
border-radius: 3px;
|
|
font-weight: bold;
|
|
font-size: 10px;
|
|
padding: 2px;
|
|
line-height: 10px;
|
|
margin-inline-start: 3px;
|
|
margin-inline-end: 1ex;
|
|
}
|
|
|
|
/* CSS styles */
|
|
.webconsole-filter-button[category="css"] > .toolbarbutton-menubutton-button:before {
|
|
background-image: linear-gradient(#2DC3F3, #00B6F0);
|
|
border-color: #1BA2CC;
|
|
}
|
|
|
|
.message[category=cssparser] > .indent,
|
|
.message.cssparser > .indent {
|
|
border-inline-end: solid #00b6f0 6px;
|
|
}
|
|
|
|
.message[category=cssparser][severity=error] > .icon::before,
|
|
.message.cssparser.error > .icon::before {
|
|
background-position: -12px -12px;
|
|
}
|
|
|
|
.message[category=cssparser][severity=warn] > .icon::before,
|
|
.message.cssparser.warn > .icon::before {
|
|
background-position: -24px -12px;
|
|
}
|
|
|
|
/* JS styles */
|
|
.webconsole-filter-button[category="js"] > .toolbarbutton-menubutton-button:before {
|
|
background-image: linear-gradient(#FCB142, #FB9500);
|
|
border-color: #E98A00;
|
|
}
|
|
|
|
.message[category=exception] > .indent,
|
|
.message.exception > .indent {
|
|
border-inline-end: solid #fb9500 6px;
|
|
}
|
|
|
|
.message[category=exception][severity=error] > .icon::before,
|
|
.message.exception.error > .icon::before {
|
|
background-position: -12px -24px;
|
|
}
|
|
|
|
.message[category=exception][severity=warn] > .icon::before,
|
|
.message.exception.warn > .icon::before {
|
|
background-position: -24px -24px;
|
|
}
|
|
|
|
/* Web Developer styles */
|
|
.webconsole-filter-button[category="logging"] > .toolbarbutton-menubutton-button:before {
|
|
background-image: linear-gradient(#B9B9B9, #AAAAAA);
|
|
border-color: #929292;
|
|
}
|
|
|
|
.message[category=console] > .indent,
|
|
.message.console-api > .indent {
|
|
border-inline-end: solid #cbcbcb 6px;
|
|
}
|
|
|
|
.message[category=console][severity=error] > .icon::before,
|
|
.message[category=output][severity=error] > .icon::before,
|
|
.message[category=server][severity=error] > .icon::before {
|
|
background-position: -12px -36px;
|
|
}
|
|
|
|
.message[category=console][severity=warn] > .icon::before,
|
|
.message[category=server][severity=warn] > .icon::before {
|
|
background-position: -24px -36px;
|
|
}
|
|
|
|
.message[category=console][severity=info] > .icon::before,
|
|
.message[category=server][severity=info] > .icon::before {
|
|
background-position: -36px -36px;
|
|
}
|
|
|
|
/* Server Logging Styles */
|
|
|
|
.webconsole-filter-button[category="server"] > .toolbarbutton-menubutton-button:before {
|
|
background-image: linear-gradient(rgb(144, 176, 144), rgb(99, 151, 99));
|
|
border-color: rgb(76, 143, 76);
|
|
}
|
|
|
|
.message[category=server] > .indent,
|
|
.message.server > .indent {
|
|
border-inline-end: solid #90B090 6px;
|
|
}
|
|
|
|
/* Input and output styles */
|
|
.message[category=input] > .indent,
|
|
.message[category=output] > .indent,
|
|
.message.command > .indent,
|
|
.message.result > .indent {
|
|
border-inline-end: solid #808080 6px;
|
|
}
|
|
|
|
.message[category=input] > .icon::before,
|
|
.message.command > .icon::before {
|
|
background-position: -48px -36px;
|
|
}
|
|
|
|
.message[category=output] > .icon::before,
|
|
.message.result > .icon::before {
|
|
background-position: -60px -36px;
|
|
}
|
|
|
|
/* JSTerm Styles */
|
|
|
|
html #jsterm-wrapper,
|
|
html .jsterm-stack-node,
|
|
html .jsterm-input-node-html,
|
|
html #webconsole-notificationbox {
|
|
flex: 0;
|
|
width: 100vw;
|
|
}
|
|
|
|
.jsterm-input-container {
|
|
background-color: var(--theme-tab-toolbar-background);
|
|
border-top: 1px solid var(--theme-splitter-color);
|
|
}
|
|
|
|
.jsterm-input-node {
|
|
/* Always allow scrolling on input - it auto expands in js by setting height,
|
|
but don't want it to get bigger than the window. 24px = toolbar height. */
|
|
max-height: calc(90vh - 24px);
|
|
background-image: var(--theme-command-line-image);
|
|
background-repeat: no-repeat;
|
|
background-size: 16px 16px;
|
|
background-position: 4px 50%;
|
|
color: var(--theme-content-color1);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.jsterm-complete-node {
|
|
color: var(--theme-comment);
|
|
}
|
|
|
|
.theme-light .jsterm-input-container {
|
|
/* For light theme use a white background for the input - it looks better
|
|
than off-white */
|
|
background-color: #fff;
|
|
border-top-color: #e0e0e0;
|
|
}
|
|
|
|
.theme-firebug .jsterm-input-container {
|
|
border-top: 1px solid #ccc;
|
|
}
|
|
|
|
/* styles for the new HTML frontend */
|
|
|
|
html .jsterm-stack-node {
|
|
position: relative;
|
|
}
|
|
|
|
textarea.jsterm-input-node,
|
|
textarea.jsterm-complete-node {
|
|
width: 100%;
|
|
border: none;
|
|
margin: 0;
|
|
background-color: transparent;
|
|
resize: none;
|
|
font-size: inherit;
|
|
line-height: 16px;
|
|
overflow-x: hidden;
|
|
/* Set padding for console input on textarea to make sure it is included in
|
|
scrollHeight that is used when resizing JSTerminal's input. */
|
|
padding: 4px 0;
|
|
padding-inline-start: 20px;
|
|
}
|
|
|
|
textarea.jsterm-complete-node {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
textarea.jsterm-input-node:focus {
|
|
background-image: var(--theme-command-line-image-focus);
|
|
box-shadow: none;
|
|
}
|
|
|
|
|
|
/* styles for the old frontend, which can be removed in Bug 1381834 */
|
|
|
|
textbox.jsterm-input-node,
|
|
textbox.jsterm-complete-node {
|
|
border: none;
|
|
padding: 0;
|
|
padding-inline-start: 20px;
|
|
margin: 0;
|
|
-moz-appearance: none;
|
|
background-color: transparent;
|
|
}
|
|
|
|
:-moz-any(textbox.jsterm-input-node,
|
|
textbox.jsterm-complete-node) > .textbox-input-box > .textbox-textarea {
|
|
overflow-x: hidden;
|
|
/* Set padding for console input on textbox to make sure it is included in
|
|
scrollHeight that is used when resizing JSTerminal's input. Note: textbox
|
|
default style has important already */
|
|
padding: 4px 0 !important;
|
|
}
|
|
|
|
textbox.jsterm-input-node[focused="true"] {
|
|
background-image: var(--theme-command-line-image-focus);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.inlined-variables-view .message-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
resize: vertical;
|
|
overflow: auto;
|
|
min-height: 200px;
|
|
}
|
|
.inlined-variables-view iframe {
|
|
display: block;
|
|
flex: 1;
|
|
margin-top: 5px;
|
|
margin-bottom: 15px;
|
|
margin-inline-end: 15px;
|
|
border: 1px solid var(--theme-splitter-color);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
#webconsole-sidebar > tabs {
|
|
height: 0;
|
|
border: none;
|
|
}
|
|
|
|
/* Firebug theme has the tabs visible. */
|
|
.theme-firebug #webconsole-sidebar > tabs {
|
|
height: 28px;
|
|
}
|
|
|
|
.devtools-side-splitter ~ #webconsole-sidebar[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
/* Security styles */
|
|
|
|
.message[category=security] > .indent,
|
|
.message.security > .indent {
|
|
border-inline-end: 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::before,
|
|
.message.security.error > .icon::before {
|
|
background-position: -12px -48px;
|
|
}
|
|
|
|
.message[category=security][severity=warn] > .icon::before,
|
|
.message.security.warn > .icon::before {
|
|
background-position: -24px -48px;
|
|
}
|
|
|
|
.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 {
|
|
padding-inline-end: 9px;
|
|
text-decoration: none;
|
|
background: var(--theme-body-background);
|
|
}
|
|
|
|
.theme-light .navigation-marker .url {
|
|
background: #fff;
|
|
}
|
|
|
|
.stacktrace {
|
|
display: none;
|
|
padding: 5px 10px;
|
|
margin: 5px 0 0 0;
|
|
overflow-y: auto;
|
|
border: 1px solid var(--theme-splitter-color);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.consoletable {
|
|
margin: 5px 0 0 0;
|
|
}
|
|
|
|
/* Force cells to only show one row of contents. Getting normal ellipses
|
|
behavior has proven impossible so far, so this is better than letting
|
|
rows get out of vertical alignment when one cell has a lot of content. */
|
|
.consoletable .table-widget-cell > span {
|
|
overflow: hidden;
|
|
display: flex;
|
|
height: 1.25em;
|
|
line-height: 1.25em;
|
|
}
|
|
|
|
.theme-light .message[severity=error] .stacktrace,
|
|
.theme-light .message.error .stacktrace {
|
|
background-color: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.theme-dark .message[severity=error] .stacktrace,
|
|
.theme-dark .message.error .stacktrace {
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.message[open] .stacktrace,
|
|
.message.open .stacktrace {
|
|
display: block;
|
|
}
|
|
|
|
.message .theme-twisty {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin: 3px 0 0 0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/*Do not mirror the twisty because container force to ltr */
|
|
.message .theme-twisty:dir(rtl),
|
|
.message .theme-twisty:-moz-locale-dir(rtl) {
|
|
transform: none;
|
|
}
|
|
|
|
.cm-s-mozilla a[class] {
|
|
font-style: italic;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.cm-s-mozilla a[class]:hover,
|
|
.cm-s-mozilla a[class]:focus {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
a.learn-more-link.webconsole-learn-more-link {
|
|
font-style: normal;
|
|
}
|
|
|
|
/* Open DOMNode in inspector button */
|
|
.open-inspector {
|
|
background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0;
|
|
padding-left: 16px;
|
|
margin-left: 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.elementNode:hover .open-inspector,
|
|
.open-inspector:hover {
|
|
filter: var(--theme-icon-checked-filter);
|
|
}
|
|
|
|
.elementNode:hover .open-inspector:active,
|
|
.open-inspector:active {
|
|
filter: var(--theme-icon-checked-filter) brightness(0.9);
|
|
}
|
|
|
|
/* Old console frontend filters */
|
|
.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
|
|
-moz-appearance: none;
|
|
color: inherit;
|
|
border-width: 0;
|
|
-moz-box-orient: horizontal;
|
|
padding: 0;
|
|
}
|
|
|
|
.devtools-toolbarbutton[type=menu-button] {
|
|
padding: 0 1px;
|
|
-moz-box-align: stretch;
|
|
--toolbarbutton-checked-color: var(--theme-body-color);
|
|
--toolbarbutton-checked-background: var(--theme-selection-background-hover);
|
|
}
|
|
|
|
.devtools-toolbarbutton > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
|
|
margin-inline-end: 4px;
|
|
}
|
|
|
|
.devtools-menulist > .menulist-dropmarker {
|
|
-moz-appearance: none;
|
|
display: -moz-box;
|
|
list-style-image: url("chrome://devtools/skin/images/dropmarker.svg");
|
|
-moz-box-align: center;
|
|
min-width: 16px;
|
|
}
|
|
|
|
.devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
|
|
.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
|
|
-moz-appearance: none !important;
|
|
list-style-image: url("chrome://devtools/skin/images/dropmarker.svg");
|
|
-moz-box-align: center;
|
|
padding: 0 3px;
|
|
}
|
|
|
|
@media (max-width: 500px) {
|
|
.message > .timestamp {
|
|
display: none;
|
|
}
|
|
.hud-console-filter-toolbar .webconsole-filter-button .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: 12px;
|
|
height: 12px;
|
|
margin-inline-start: 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;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* This hardcoded width likely due to a toolkit Windows specific bug.
|
|
* See https://hg.mozilla.org/mozilla-central/annotate/f38d6df93cad/toolkit/themes/winstripe/global/textbox-aero.css#l7
|
|
*/
|
|
|
|
:root[platform="win"] .hud-filter-box {
|
|
width: 200px;
|
|
}
|
|
|
|
/* Firebug theme support for console.table() */
|
|
|
|
.theme-firebug .consoletable .theme-body {
|
|
width: 100%;
|
|
border-top: 1px solid #D7D7D7;
|
|
border-bottom: 2px solid #D7D7D7;
|
|
border-left: 1px solid #D7D7D7;
|
|
border-right: 1px solid #D7D7D7;
|
|
}
|
|
|
|
|
|
/* NEW CONSOLE STYLES */
|
|
|
|
#output-container {
|
|
height: 100%;
|
|
}
|
|
|
|
.webconsole-output-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
-moz-user-focus: normal;
|
|
color: var(--console-output-color);
|
|
--console-output-indent-width: 1rem;
|
|
--console-output-indent-border-color: var(--theme-selection-background);
|
|
--icon-top-margin: 3px;
|
|
--object-inspector-hover-background: transparent;
|
|
--attachment-margin-block-end: 3px;
|
|
--primary-toolbar-height: 29px;
|
|
--close-button-image: url(chrome://devtools/skin/images/close.svg);
|
|
}
|
|
|
|
/* Webconsole specific theme variables */
|
|
.theme-light .webconsole-output-wrapper,
|
|
.theme-firebug .webconsole-output-wrapper {
|
|
--error-color: var(--red-70);
|
|
--error-background-color: #FDF2F5;
|
|
--warning-color: var(--yellow-80);
|
|
--warning-background-color: #FFFBD5;
|
|
--console-output-color: var(--grey-90);
|
|
--attachment-border-color: var(--theme-content-color1);
|
|
--repeat-bubble-background-color: var(--theme-highlight-blue);
|
|
}
|
|
|
|
.theme-dark .webconsole-output-wrapper {
|
|
--error-color: #FF9494;
|
|
--error-background-color: #442923;
|
|
--warning-color: #FCE19F;
|
|
--warning-background-color: #44391F;
|
|
--console-output-color: white;
|
|
--attachment-border-color: var(--theme-body-color);
|
|
--repeat-bubble-background-color: var(--blue-60);
|
|
}
|
|
|
|
/*
|
|
This element contains the different toolbars in the console
|
|
- primary, containing the clear messages button and the text search input.
|
|
It can expand as much as it need.
|
|
- filtered messages, containing the "X items hidden by filters" and the reset filters button.
|
|
It should be on the same row than the primary bar if it fits there, or on its own 100% row if it is wrapped.
|
|
- secondary, containing the filter buttons (Error, Warning, …).
|
|
It should be on its own 100% row.
|
|
|
|
Basically here's what we can have :
|
|
|
|
-----------------------------------------------------------------------------------------------------------
|
|
| Clear button - Open filter bar button - Filter Input | X items hidden by filters - Reset Filters button |
|
|
-----------------------------------------------------------------------------------------------------------
|
|
| Error - Warning - Log - Info - Debug - CSS - Network - XHR |
|
|
-----------------------------------------------------------------------------------------------------------
|
|
|
|
or
|
|
|
|
------------------------------------------------------------------------------------
|
|
| Clear button - Open filter bar button - Filter Input |
|
|
------------------------------------------------------------------------------------
|
|
| X items hidden by filters - Reset Filters button |
|
|
------------------------------------------------------------------------------------
|
|
| Error - Warning - Log - Info - Debug - CSS - Network - XHR |
|
|
------------------------------------------------------------------------------------
|
|
*/
|
|
.webconsole-filteringbar-wrapper {
|
|
display: flex;
|
|
grid-row: 1 / 2;
|
|
/* Wrap so the "Hidden messages" bar can go to its own row if needed */
|
|
flex-wrap: wrap;
|
|
--primary-toolbar-height: 29px;
|
|
}
|
|
|
|
.webconsole-filterbar-primary {
|
|
display: flex;
|
|
/* We want the toolbar (which contain the text search input) to fit
|
|
the content, we don't allow to shrink/overlap it */
|
|
flex: 100 0 -moz-fit-content;
|
|
align-items: center;
|
|
min-height: var(--primary-toolbar-height);
|
|
}
|
|
|
|
.devtools-toolbar.webconsole-filterbar-secondary {
|
|
display: flex;
|
|
width: 100%;
|
|
align-items: center;
|
|
-moz-user-select: none;
|
|
}
|
|
|
|
.webconsole-filterbar-primary .devtools-plaininput {
|
|
flex: 1 1 100%;
|
|
}
|
|
|
|
.webconsole-filterbar-primary .filter-checkbox {
|
|
flex-shrink: 0;
|
|
margin: 0 3px;
|
|
display: flex;
|
|
align-items: center;
|
|
-moz-user-select: none;
|
|
}
|
|
|
|
.webconsole-filterbar-secondary .devtools-separator {
|
|
margin: 0 5px;
|
|
}
|
|
|
|
.webconsole-filterbar-filtered-messages {
|
|
/* Needed so the bar takes the whole horizontal space when it is wrapped */
|
|
flex-grow: 1;
|
|
justify-content: flex-end;
|
|
color: var(--theme-comment);
|
|
text-align: end;
|
|
align-items: center;
|
|
min-height: var(--primary-toolbar-height);
|
|
line-height: var(--primary-toolbar-height);
|
|
}
|
|
|
|
.webconsole-filterbar-filtered-messages .filter-message-text {
|
|
font-style: italic;
|
|
-moz-user-select: none;
|
|
}
|
|
|
|
.webconsole-filterbar-filtered-messages .reset-filters-button {
|
|
margin-inline-start: 0.5em;
|
|
}
|
|
|
|
.webconsole-output {
|
|
flex: 1;
|
|
overflow: auto;
|
|
}
|
|
|
|
.webconsole-output-wrapper .message {
|
|
--border-size: 3px;
|
|
border-inline-start: var(--border-size) solid transparent;
|
|
}
|
|
|
|
.webconsole-output-wrapper .message:hover {
|
|
border-inline-start-color: var(--theme-highlight-blue);
|
|
}
|
|
|
|
.webconsole-output-wrapper .message.warn.warn {
|
|
background-color: var(--warning-background-color);
|
|
}
|
|
|
|
.webconsole-output-wrapper .message.error .message-body {
|
|
color: var(--error-color);
|
|
}
|
|
|
|
.webconsole-output-wrapper .message.warn .message-body {
|
|
color: var(--warning-color);
|
|
}
|
|
|
|
/* Special casing String reps so they are legible */
|
|
.webconsole-output-wrapper .message .message-body > .objectBox-string {
|
|
color: currentColor;
|
|
}
|
|
|
|
/* Special casing dark-theme error and warning ObjectInspector colors */
|
|
.theme-dark .webconsole-output-wrapper .message.error .tree.object-inspector .object-label,
|
|
.theme-dark .webconsole-output-wrapper .message.error .tree.object-inspector .object-label *,
|
|
.theme-dark .webconsole-output-wrapper .message.warn .tree.object-inspector .object-label,
|
|
.theme-dark .webconsole-output-wrapper .message.warn .tree.object-inspector .object-label *,
|
|
.theme-dark .webconsole-output-wrapper .message.error .objectLeftBrace,
|
|
.theme-dark .webconsole-output-wrapper .message.error .objectRightBrace,
|
|
.theme-dark .webconsole-output-wrapper .message.error .arrayLeftBracket,
|
|
.theme-dark .webconsole-output-wrapper .message.error .arrayRightBracket,
|
|
.theme-dark .webconsole-output-wrapper .message.warn .objectLeftBrace,
|
|
.theme-dark .webconsole-output-wrapper .message.warn .objectRightBrace,
|
|
.theme-dark .webconsole-output-wrapper .message.warn .arrayLeftBracket,
|
|
.theme-dark .webconsole-output-wrapper .message.warn .arrayRightBracket {
|
|
color: var(--theme-body-color);
|
|
}
|
|
.theme-dark .webconsole-output-wrapper .message.error .tree.object-inspector,
|
|
.theme-dark .webconsole-output-wrapper .message.warn .tree.object-inspector {
|
|
--tree-indent-border-color: var(--theme-body-color);
|
|
}
|
|
|
|
.webconsole-output-wrapper .message-flex-body > .message-body {
|
|
display: inline-block;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.webconsole-output-wrapper .message-body > * {
|
|
flex-shrink: 0;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.message.startGroup .message-body > .objectBox-string,
|
|
.message.startGroupCollapsed .message-body > .objectBox-string {
|
|
color: var(--theme-body-color);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.webconsole-output-wrapper .message > .icon {
|
|
margin: var(--icon-top-margin) 0 0 0;
|
|
padding: 0 0 0 6px;
|
|
}
|
|
|
|
.webconsole-output-wrapper .message.error > .icon::before {
|
|
/* Red warning icon */
|
|
background-position: -24px -48px;
|
|
}
|
|
|
|
.webconsole-output-wrapper .message.warn > .icon::before {
|
|
/* Yellow warning icon */
|
|
background-position: -24px -24px;
|
|
}
|
|
|
|
.webconsole-output-wrapper .message .theme-twisty {
|
|
margin: calc(var(--icon-top-margin) - 1px) 0 0 0;
|
|
}
|
|
|
|
.message.error > .icon::before {
|
|
background-position: -12px -36px;
|
|
}
|
|
|
|
.message.warn > .icon::before {
|
|
background-position: -24px -36px;
|
|
}
|
|
|
|
.message.info > .icon::before {
|
|
background-position: -36px -36px;
|
|
}
|
|
|
|
/* The bubble that shows the number of times a message is repeated */
|
|
.webconsole-output-wrapper .message-repeats {
|
|
background-color: var(--repeat-bubble-background-color);
|
|
font-weight: normal;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
/* Network Messages */
|
|
|
|
.webconsole-output-wrapper .message.network .method {
|
|
margin-inline-end: 5px;
|
|
}
|
|
|
|
.webconsole-output-wrapper .message.network .xhr {
|
|
background-color: var(--theme-comment);
|
|
color: white;
|
|
border-radius: 2px;
|
|
font-weight: normal;
|
|
line-height: inherit;
|
|
}
|
|
|
|
.webconsole-output-wrapper .message.network:not(.navigation-marker) .url {
|
|
color: var(--theme-comment);
|
|
font-style: inherit;
|
|
}
|
|
|
|
.webconsole-output-wrapper .message.network .status {
|
|
color: var(--theme-highlight-blue);
|
|
font-style: inherit;
|
|
}
|
|
|
|
.webconsole-output-wrapper .message.network .status .status-info .status-code {
|
|
padding: 0 2px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.webconsole-output-wrapper .message.network .status .status-info .status-code:not([data-code^="3"]) {
|
|
color: var(--theme-body-background);
|
|
}
|
|
|
|
|
|
.network.message .network-info {
|
|
display: none;
|
|
margin-top: 8px;
|
|
border: solid 1px var(--theme-splitter-color);
|
|
}
|
|
|
|
.network.message.open .network-info {
|
|
display: block;
|
|
}
|
|
|
|
.network.message .network-info .panels {
|
|
max-height: 250px;
|
|
min-height: 100px;
|
|
}
|
|
|
|
/* Hide 'Edit And Resend' button since the feature isn't
|
|
supported in the Console panel. */
|
|
.network.message #headers-panel .edit-and-resend-button {
|
|
display: none;
|
|
}
|
|
|
|
.network .message-flex-body > .message-body {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* Output Wrapper */
|
|
|
|
.webconsole-output-wrapper .message .indent {
|
|
display: inline-block;
|
|
border-inline-end: solid 1px var(--console-output-indent-border-color);
|
|
}
|
|
.webconsole-output-wrapper .message .indent[data-indent="0"] {
|
|
border-inline-end: none;
|
|
}
|
|
|
|
.message.startGroup .indent,
|
|
.message.startGroupCollapsed .indent {
|
|
border-inline-end-color: transparent;
|
|
margin-inline-end: 5px;
|
|
}
|
|
|
|
.message.startGroup .icon,
|
|
.message.startGroupCollapsed .icon {
|
|
display: none;
|
|
}
|
|
|
|
/*
|
|
* Open DOMNode in inspector button. Style need to be reset in the new
|
|
* console since its style is already defined in reps.css .
|
|
*/
|
|
.webconsole-output-wrapper .open-inspector {
|
|
background: unset;
|
|
padding-left: unset;
|
|
margin-left: unset;
|
|
cursor: unset;
|
|
}
|
|
|
|
/* Stacktraces */
|
|
.webconsole-output-wrapper .stacktrace {
|
|
border: 1px solid var(--attachment-border-color);
|
|
border-radius: 2px;
|
|
margin-block-end: var(--attachment-margin-block-end);
|
|
}
|
|
|
|
.theme-dark .webconsole-output-wrapper .message.error .stacktrace,
|
|
.theme-light .webconsole-output-wrapper .message.error .stacktrace {
|
|
/* Removing specificity from the old console */
|
|
background-color: inherit;
|
|
}
|
|
|
|
/* console.table() */
|
|
.new-consoletable {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
--consoletable-border: var(--theme-splitter-color);
|
|
margin-block-end: var(--attachment-margin-block-end);
|
|
color: var(--theme-body-color);
|
|
}
|
|
|
|
.new-consoletable thead {
|
|
border: 1px solid var(--consoletable-border);
|
|
}
|
|
|
|
.new-consoletable tbody {
|
|
background-color: var(--theme-body-background);
|
|
border: 1px solid var(--consoletable-border);
|
|
border-block-start-width: 0;
|
|
}
|
|
|
|
.new-consoletable th {
|
|
background-color: var(--theme-toolbar-background);
|
|
color: var(--theme-body-color);
|
|
margin: 0;
|
|
padding: 5px 0 0;
|
|
font-weight: inherit;
|
|
}
|
|
|
|
.new-consoletable th:not(:last-of-type) {
|
|
border-inline-end: 1px solid var(--consoletable-border);
|
|
}
|
|
|
|
.new-consoletable tr:nth-of-type(even) {
|
|
background-color: var(--table-zebra-background);
|
|
}
|
|
|
|
.new-consoletable td {
|
|
padding: 3px 4px;
|
|
min-width: 100px;
|
|
-moz-user-focus: normal;
|
|
color: var(--theme-body-color);
|
|
height: 1.25em;
|
|
line-height: 1.25em;
|
|
/* Objects are expandable in cells, and if one gets tall,
|
|
* we still want other columns to stick to the top.
|
|
*/
|
|
vertical-align: top;
|
|
}
|
|
|
|
.new-consoletable tr td:not(:last-of-type) {
|
|
border-inline-end: 1px solid var(--consoletable-border);
|
|
}
|
|
/* Layout */
|
|
|
|
.webconsole-output {
|
|
flex: 1;
|
|
direction: ltr;
|
|
overflow: auto;
|
|
-moz-user-select: text;
|
|
position: relative;
|
|
grid-row: 2 / 3;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
overflow: hidden;
|
|
}
|
|
|
|
#app-wrapper {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
body #output-container {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.webconsole-output-wrapper {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
grid-template-rows: auto 1fr;
|
|
height: 100%;
|
|
width: 100vw;
|
|
}
|
|
|
|
/* Object Inspector */
|
|
.webconsole-output-wrapper .object-inspector.tree {
|
|
display: inline-block;
|
|
}
|
|
|
|
.webconsole-output-wrapper .object-inspector.tree .tree-indent {
|
|
border-inline-start-color: var(--console-output-indent-border-color);
|
|
}
|
|
|
|
.webconsole-output-wrapper .object-inspector.tree .tree-node:hover:not(.focused) {
|
|
background-color: var(--object-inspector-hover-background);
|
|
}
|
|
|
|
/*
|
|
* Make the arrow the same color and approximately the same size of the twisty icon.
|
|
* Should be properly fixed in https://bugzilla.mozilla.org/show_bug.cgi?id=1307937.
|
|
*/
|
|
.webconsole-output-wrapper .object-inspector.tree .tree-node .arrow svg {
|
|
width: 8px;
|
|
fill: #AFA8AB;
|
|
margin-inline-start: 1px;
|
|
}
|
|
|
|
.theme-dark .webconsole-output-wrapper .object-inspector.tree .tree-node .arrow svg {
|
|
fill: #7F7E81;
|
|
}
|
|
|
|
/* Sidebar */
|
|
.sidebar {
|
|
display: flex;
|
|
grid-row: 1 / -1;
|
|
grid-column: -1 / -2;
|
|
background-color: var(--theme-sidebar-background);
|
|
}
|
|
|
|
.split-box.vert.sidebar {
|
|
/* Set to prevent the sidebar from extending past the right edge of the page */
|
|
width: unset;
|
|
}
|
|
|
|
.sidebar-wrapper {
|
|
display: grid;
|
|
grid-template-rows: auto 1fr;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.webconsole-sidebar-toolbar {
|
|
grid-row: 1 / 2;
|
|
min-height: var(--primary-toolbar-height);
|
|
display: flex;
|
|
justify-content: end;
|
|
}
|
|
|
|
.sidebar-contents {
|
|
grid-row: 2 / 3;
|
|
overflow: scroll;
|
|
}
|
|
|
|
.webconsole-sidebar-toolbar .sidebar-close-button {
|
|
padding: 4px 0;
|
|
margin: 0;
|
|
margin-inline-end: -3px;
|
|
}
|
|
|
|
.sidebar-close-button::before {
|
|
background-image: var(--close-button-image);
|
|
}
|
|
|
|
.sidebar-contents .object-inspector {
|
|
min-width: 100%;
|
|
} |