1059 lines
30 KiB
CSS
1059 lines
30 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 */
|
|
:root {
|
|
/* Minimum height of a message (excluding borders) */
|
|
--console-row-height: 20px;
|
|
/* We need a unitless line-height to render formatted messages correctly.
|
|
* Target line-height computed value is 14px, for a 11px font-size. */
|
|
--console-output-line-height: calc(14 / 11);
|
|
--console-output-vertical-padding: 3px;
|
|
/* Additional vertical padding used on the JSTerm and EagerEvaluation
|
|
* containers. Set to 0 to make the messages and input seamless. */
|
|
--console-input-extra-padding: 2px;
|
|
/* Width of the left gutter where icons appear */
|
|
--console-inline-start-gutter: 32px;
|
|
/* Icons perfectly centered in the left gutter "feel" closer to the window
|
|
* edge than to message text. This value pushes them slightly to the right. */
|
|
--console-icon-horizontal-offset: 1px;
|
|
--console-warning-background: var(--theme-warning-background);
|
|
--console-warning-border: var(--theme-warning-border);
|
|
--console-warning-color: var(--theme-warning-color);
|
|
}
|
|
|
|
.theme-dark {
|
|
--console-input-background: var(--theme-tab-toolbar-background);
|
|
--console-message-background: var(--theme-body-background);
|
|
--console-message-border: var(--theme-splitter-color);
|
|
--console-message-color: var(--theme-text-color-strong);
|
|
--console-error-background: hsl(345, 23%, 24%);
|
|
--console-error-border: hsl(345, 30%, 35%);
|
|
--console-error-color: var(--red-20);
|
|
--console-navigation-color: var(--theme-highlight-blue);
|
|
--console-navigation-border: var(--blue-60);
|
|
--console-indent-border-color: var(--theme-highlight-blue);
|
|
--console-repeat-bubble-background: var(--blue-60);
|
|
|
|
/* TODO in bug 1549195: colors used in shared components (e.g. Reps) should
|
|
be renamed and/or moved to variables.css so they work everywhere */
|
|
--error-color: var(--red-20);
|
|
--console-output-color: white;
|
|
}
|
|
|
|
.theme-light {
|
|
--console-input-background: var(--theme-body-background);
|
|
--console-message-background: var(--theme-body-background);
|
|
--console-message-border: #f2f2f4; /* between Grey 10 and Grey 20 */
|
|
--console-message-color: var(--theme-text-color-strong);
|
|
--console-error-background: hsl(344, 73%, 97%);
|
|
--console-error-border: rgba(215, 0, 34, 0.12); /* Red 60 + opacity */
|
|
--console-error-color: var(--red-70);
|
|
--console-navigation-color: var(--theme-highlight-blue);
|
|
--console-navigation-border: var(--blue-30);
|
|
--console-indent-border-color: var(--theme-highlight-blue);
|
|
--console-repeat-bubble-background: var(--theme-highlight-blue);
|
|
|
|
/* TODO in bug 1549195: colors used in shared components (e.g. Reps) should
|
|
be renamed and/or moved to variables.css so they work everywhere */
|
|
--error-color: var(--red-70);
|
|
--console-output-color: var(--grey-90);
|
|
}
|
|
|
|
/* General output styles */
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/*
|
|
* Stack messages on the z axis so that we can make their borders overlap
|
|
* and show color borders on top:
|
|
*
|
|
* ----------------- <-- Red
|
|
* Error message
|
|
* ----------------- <-- Red
|
|
* Normal message
|
|
* ----------------- <-- Grey
|
|
*
|
|
* and:
|
|
*
|
|
* ----------------- <-- Grey
|
|
* Normal message
|
|
* ----------------- <-- Red
|
|
* Error message
|
|
* ----------------- <-- Red
|
|
*
|
|
* The exact stacking order is:
|
|
*
|
|
* - z-index: 3 = Navigation
|
|
* - z-index: 2 = Errors and warnings
|
|
* - z-index: 1 = Other (console.log, console.info, requests, etc.)
|
|
*/
|
|
.message {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
width: 100%;
|
|
/* Make the top border cover the previous message's bottom border */
|
|
margin-top: -1px;
|
|
/* Min height is the target row height plus borders */
|
|
min-height: calc(var(--console-row-height) + 2px);
|
|
border-top: 1px solid var(--console-message-border);
|
|
border-bottom: 1px solid var(--console-message-border);
|
|
/* Avoid vertical padding, so that we can draw full-height items (e.g. indent guides).
|
|
* Use vertical margins of --console-output-vertical-padding on children instead. */
|
|
padding-block: 0;
|
|
/* Layout of the 32px-wide left gutter:
|
|
* | 4px message padding | 24px icon container | 4px icon margin |
|
|
* Note: on hover we show a 3px pseudo-border on top of the left padding. */
|
|
padding-inline-start: 4px;
|
|
padding-inline-end: 8px;
|
|
font-size: var(--theme-code-font-size);
|
|
line-height: var(--console-output-line-height);
|
|
color: var(--console-message-color);
|
|
background-color: var(--console-message-background);
|
|
}
|
|
|
|
@media (min-width: 1000px) {
|
|
.message {
|
|
padding-inline-end: 12px;
|
|
}
|
|
}
|
|
|
|
/* Always hide the border of the first message, but keep its spacing */
|
|
.message:first-child {
|
|
border-top-color: transparent !important;
|
|
}
|
|
|
|
/* We already paint a top border on jsterm-input-container (and we need to keep
|
|
* it when scrolling console content), so remove the last item's border. (NOTE:
|
|
* the last element is actually the second-to-last element when the output is
|
|
* scrolled all the way down, because we include an empty buffer div which
|
|
* grows to simulate the height of unrendered content.) */
|
|
.webconsole-app:not(.jsterm-editor) .message:nth-last-child(2) {
|
|
border-bottom-width: 0;
|
|
/* Adjust the min-height since we now only have a single border. */
|
|
min-height: calc(var(--console-row-height) + 1px);
|
|
}
|
|
|
|
/*
|
|
* By default, prevent any element in message to overflow.
|
|
* We exclude network messages as it may cause issues in the network detail panel.
|
|
* This makes console reflows faster (See Bug 1487457).
|
|
*/
|
|
.message:not(.network) * {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.message.disabled {
|
|
z-index: 2;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.message.error {
|
|
z-index: 2;
|
|
color: var(--console-error-color);
|
|
border-color: var(--console-error-border);
|
|
background-color: var(--console-error-background);
|
|
}
|
|
|
|
.message.warn {
|
|
z-index: 2;
|
|
color: var(--console-warning-color);
|
|
border-color: var(--console-warning-border);
|
|
background-color: var(--console-warning-background);
|
|
}
|
|
|
|
.message.navigationMarker {
|
|
z-index: 3;
|
|
color: var(--console-navigation-color);
|
|
border-color: var(--console-navigation-border);
|
|
}
|
|
|
|
.message.startGroup,
|
|
.message.startGroupCollapsed {
|
|
--console-indent-border-color: transparent;
|
|
}
|
|
|
|
/* Hide border between a command and its result */
|
|
.message.command + .result.log {
|
|
border-top-width: 0;
|
|
}
|
|
|
|
.message > .prefix,
|
|
.message > .timestamp {
|
|
flex: none;
|
|
color: var(--theme-comment);
|
|
margin: var(--console-output-vertical-padding) 4px;
|
|
}
|
|
|
|
/* Use a container query as the inline-size of the output might vary when the console is in editor mode */
|
|
@container console-output (width < 500px) {
|
|
/*
|
|
* When we export messages, we mount the app as a sibling of the #app-wrapper element,
|
|
* in a 0-width section which would cause the timestamp to be hidden, so only hide
|
|
* the timestamp in the "visible" element.
|
|
*/
|
|
#app-wrapper .message > .timestamp {
|
|
display: none;
|
|
}
|
|
|
|
/**
|
|
* This element might have:
|
|
* - the message body
|
|
* - the repeat bubble
|
|
* - the location
|
|
*
|
|
* What we want here is to display the location one its own line, at the bottom of the
|
|
* element:
|
|
* +----------------------------+
|
|
* | Message body | [repeat] |
|
|
* +----------------------------+
|
|
* | location |
|
|
* +----------------------------+
|
|
*/
|
|
.message:not(.message-did-catch) .message-flex-body:not(.error-note) {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
row-gap: 8px;
|
|
}
|
|
|
|
.message-flex-body .message-location {
|
|
max-width: 100%;
|
|
grid-column: 1 / -1;
|
|
grid-row: 2;
|
|
justify-self: end;
|
|
}
|
|
}
|
|
|
|
.message > .indent {
|
|
flex: none;
|
|
display: inline-block;
|
|
/* Display indent borders above the message's top and bottom border.
|
|
* This avoids interrupted indent lines (looking like dashes). */
|
|
margin-block: -1px;
|
|
margin-inline-start: 12px;
|
|
border-inline-end: solid 1px var(--console-indent-border-color);
|
|
}
|
|
|
|
.message > .indent.warning-indent {
|
|
border-inline-end-color: var(--console-warning-color);
|
|
/* Align the border of the message in warning groups with the toggle icon */
|
|
margin-inline-start: 15px;
|
|
}
|
|
|
|
/* Center first level indent within the left gutter */
|
|
.message[data-indent="1"]:not(.startGroup, .startGroupCollapsed) > .indent,
|
|
.warning-indent {
|
|
margin-inline-start: calc(1px + var(--console-icon-horizontal-offset));
|
|
margin-inline-end: calc(11px - var(--console-icon-horizontal-offset));
|
|
}
|
|
|
|
.message > .icon {
|
|
flex: none;
|
|
align-self: flex-start;
|
|
/* Width and height must be a multiples of 2px to avoid blurry images.
|
|
* Height should match the text's line-height for optimal vertical alignment */
|
|
width: 14px;
|
|
height: 14px;
|
|
margin: var(--console-output-vertical-padding) 4px;
|
|
background-image: none;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 12px;
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
}
|
|
|
|
/* Icon on unindented row should be centered within the left gutter */
|
|
.message[data-indent="0"] + .icon {
|
|
width: 24px;
|
|
margin-inline-start: var(--console-icon-horizontal-offset);
|
|
margin-inline-end: calc(4px - var(--console-icon-horizontal-offset));
|
|
}
|
|
|
|
.message.command > .icon {
|
|
color: var(--theme-icon-color);
|
|
background-image: url(chrome://devtools/skin/images/webconsole/input.svg);
|
|
}
|
|
|
|
.message.result > .icon {
|
|
color: var(--theme-icon-dimmed-color);
|
|
background-image: url(chrome://devtools/skin/images/webconsole/return.svg);
|
|
}
|
|
|
|
.message:is(.info, .disabled) > .icon {
|
|
color: var(--theme-icon-color);
|
|
background-image: url(resource://devtools-shared-images/info-small.svg);
|
|
}
|
|
|
|
.message.error > .icon {
|
|
color: var(--theme-icon-error-color);
|
|
background-image: url(resource://devtools-shared-images/error-small.svg);
|
|
}
|
|
|
|
.message.warn > .icon {
|
|
color: var(--theme-icon-warning-color);
|
|
background-image: url(resource://devtools-shared-images/alert-small.svg);
|
|
}
|
|
|
|
.message.navigationMarker > .icon {
|
|
color: var(--console-navigation-color);
|
|
background-image: url(chrome://devtools/skin/images/webconsole/navigation.svg);
|
|
}
|
|
|
|
.message > .icon.logpoint {
|
|
background-image: url(chrome://devtools/content/debugger/images/webconsole-logpoint.svg);
|
|
-moz-context-properties: fill, stroke;
|
|
fill: var(--theme-graphs-purple);
|
|
stroke: var(--theme-graphs-purple);
|
|
}
|
|
|
|
.message > .icon.logtrace {
|
|
background-image: url(chrome://devtools/content/debugger/images/trace.svg);
|
|
-moz-context-properties: fill, stroke;
|
|
fill: var(--theme-icon-checked-color);
|
|
}
|
|
|
|
.message.network-message-blocked > .icon {
|
|
color: var(--theme-icon-error-color);
|
|
background-image: url(chrome://devtools/skin/images/blocked.svg);
|
|
}
|
|
|
|
.message > .message-body-wrapper {
|
|
flex: auto;
|
|
min-width: 0px;
|
|
margin: var(--console-output-vertical-padding) 0;
|
|
}
|
|
|
|
.message-body-wrapper .elements-label {
|
|
color: var(--location-color);
|
|
margin: calc(var(--console-output-vertical-padding) * 2) 0;
|
|
}
|
|
|
|
/* The bubble that shows the number of times a message is repeated */
|
|
.message-repeats,
|
|
.warning-group-badge {
|
|
display: inline-block;
|
|
flex-shrink: 0;
|
|
margin: 2px 5px 0 5px;
|
|
padding: 0 6px;
|
|
height: 1.25em;
|
|
border-radius: 40px;
|
|
font: message-box;
|
|
font-size: 0.8em;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.message-repeats {
|
|
color: white;
|
|
background-color: var(--console-repeat-bubble-background);
|
|
}
|
|
|
|
.warning-group-badge {
|
|
color: var(--console-warning-background);
|
|
background-color: var(--console-warning-color);
|
|
}
|
|
|
|
.message-location {
|
|
max-width: 40%;
|
|
flex-shrink: 0;
|
|
color: var(--frame-link-source);
|
|
margin-left: 1ch;
|
|
/* Makes the file name truncated (and ellipsis shown) on the left side */
|
|
direction: rtl;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
text-align: end;
|
|
}
|
|
|
|
.message-location:empty {
|
|
display: none;
|
|
}
|
|
|
|
.message-location .frame-link-source {
|
|
font-style: normal !important;
|
|
/* Enforce LTR direction for the file name - fixes bug 1290056 */
|
|
direction: ltr;
|
|
unicode-bidi: embed;
|
|
}
|
|
|
|
.message-location .frame-link-source:visited {
|
|
color: currentColor;
|
|
}
|
|
|
|
.message-location .frame-link-source:focus-visible {
|
|
/*
|
|
* The link overflow is hidden, which causes the regular outline to not be displayed.
|
|
* Setting a negative offset displays it "inside" the element so it's visible.
|
|
*/
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
.message-flex-body {
|
|
display: flex;
|
|
}
|
|
|
|
.message-body {
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.message-flex-body > .message-body {
|
|
display: block;
|
|
flex: 1;
|
|
}
|
|
|
|
/* Network styles */
|
|
.webconsole-app .message.network.network-message-blocked .method,
|
|
.webconsole-app .message.network.network-message-blocked .message-flex-body .message-body .url,
|
|
.webconsole-app .message.network.network-message-blocked .status {
|
|
color: var(--timing-blocked-color);
|
|
}
|
|
|
|
.webconsole-app .message.network .method {
|
|
flex: none;
|
|
margin-inline-end: 1ch;
|
|
}
|
|
|
|
.webconsole-app .message.network .xhr {
|
|
background-color: var(--theme-comment);
|
|
color: white;
|
|
border-radius: 2px;
|
|
font-size: 10px;
|
|
padding: 1px 2px;
|
|
margin-inline-start: 0;
|
|
margin-inline-end: 1ex;
|
|
}
|
|
|
|
.webconsole-app .message.network .message-flex-body .message-body .url {
|
|
color: var(--theme-comment);
|
|
font-style: inherit;
|
|
}
|
|
|
|
.webconsole-app .message.network .status {
|
|
color: var(--theme-highlight-blue);
|
|
font-style: inherit;
|
|
}
|
|
|
|
.webconsole-app .message.network .network-monitor .empty-notice {
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* For 4XX and 5XX requests, display the text in the "error" color */
|
|
.webconsole-app .message.network.error .message-flex-body .message-body .url,
|
|
.webconsole-app .message.network.error .message-flex-body .message-body .status {
|
|
color: currentColor;
|
|
}
|
|
|
|
.network.message .network-info {
|
|
display: none;
|
|
margin-block: 6px 2px;
|
|
border: solid 1px var(--theme-splitter-color);
|
|
}
|
|
|
|
.network.message.open .network-info {
|
|
display: block;
|
|
}
|
|
|
|
:root:dir(rtl) .network.message.open .network-info {
|
|
direction: rtl;
|
|
}
|
|
|
|
.network.message .network-info .panels {
|
|
min-height: 250px;
|
|
}
|
|
/* Response panel needs an absolute height size as the
|
|
* sizing of its content depends on it, it also needs override
|
|
* the inline height set on the panels */
|
|
.network.message .network-info #response-panel {
|
|
height: 250px !important;
|
|
}
|
|
|
|
.network.message .network-info .accordion-item:last-child .accordion-content {
|
|
position: static;
|
|
}
|
|
|
|
.network .message-flex-body > .message-body {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
}
|
|
|
|
.message.network > .message-body {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.message.network .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;
|
|
cursor: default;
|
|
}
|
|
|
|
.message.network .message-body .status {
|
|
flex: none;
|
|
margin-left: 1ch;
|
|
cursor: default;
|
|
}
|
|
|
|
.message.network.mixed-content .url {
|
|
color: var(--theme-highlight-red);
|
|
cursor: default;
|
|
}
|
|
|
|
.message .learn-more-link {
|
|
user-select: none;
|
|
color: var(--theme-link-color);
|
|
margin: 0 1ch;
|
|
}
|
|
|
|
/* Hide the headers panel toolbar buttons in the console */
|
|
.message.network .headers-panel-container :is(#block-button, #edit-resend-button, .devtools-separator) {
|
|
display: none;
|
|
}
|
|
|
|
/* Override the `postion:absolute` set on the `.panel-container`, this is only needed in the
|
|
netmonitor to enable the use of top, right, bottom etc to support content scrolling.
|
|
See https://searchfox.org/mozilla-central/rev/7bafa9b9c2156018ec1d410194f9bf4b5b23e77f
|
|
/devtools/client/netmonitor/src/assets/styles/HeadersPanel.css#17-24.
|
|
The webconsole does not need that as the `.webconsole-output` is already scrollable */
|
|
.message.network .headers-panel-container .panel-container {
|
|
position: static;
|
|
}
|
|
|
|
/* JSTerm Styles */
|
|
html #webconsole-notificationbox {
|
|
flex: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.webconsole-output:empty ~ .notificationbox .notification {
|
|
border-top-width: 0;
|
|
border-bottom-width: 1px;
|
|
}
|
|
|
|
.jsterm-input-container {
|
|
position: relative;
|
|
max-width: 100%;
|
|
background-color: var(--console-input-background);
|
|
font-family: var(--monospace-font-family);
|
|
font-size: var(--theme-code-font-size);
|
|
line-height: var(--console-output-line-height);
|
|
}
|
|
|
|
/* CodeMirror-powered JsTerm */
|
|
.jsterm-input-container > .CodeMirror {
|
|
/* aim for a 32px left space (a descendent has 4px padding) */
|
|
padding-inline-start: calc(var(--console-inline-start-gutter) - 4px);
|
|
/* Create a new stacking context */
|
|
position: relative;
|
|
z-index: 0; /* Keep below column resizers */
|
|
/* input icon */
|
|
background-image: url(chrome://devtools/skin/images/webconsole/input.svg);
|
|
background-position-x: calc(10px + var(--console-icon-horizontal-offset));
|
|
background-position-y: 4px;
|
|
background-repeat: no-repeat;
|
|
background-size: 12px 12px;
|
|
-moz-context-properties: fill;
|
|
fill: var(--theme-icon-dimmed-color);
|
|
}
|
|
|
|
.jsterm-input-container > .CodeMirror-focused {
|
|
fill: var(--theme-icon-checked-color);
|
|
}
|
|
|
|
.jsterm-input-container .CodeMirror-lines {
|
|
padding-block: var(--console-output-vertical-padding);
|
|
}
|
|
|
|
.webconsole-app .cm-auto-complete-shadow-text::after {
|
|
content: attr(data-completion);
|
|
color: var(--theme-comment);
|
|
/* This is important for the completion text not to move while the user is typing */
|
|
/* See Bugs 1491776 & 1558248 */
|
|
position: absolute;
|
|
}
|
|
|
|
.jsterm-input-container .CodeMirror-hscrollbar {
|
|
/* We never want to see the horizontal scrollbar */
|
|
display: none !important;
|
|
}
|
|
|
|
.stacktrace {
|
|
display: none;
|
|
overflow-y: auto;
|
|
margin-block-start: 5px;
|
|
margin-block-end: var(--attachment-margin-block-end);
|
|
padding-inline-start: 16px;
|
|
}
|
|
|
|
.message.open .stacktrace:not(:empty) {
|
|
display: block;
|
|
}
|
|
|
|
.objectBox-stackTrace .frames {
|
|
padding-inline-start: 16px;
|
|
}
|
|
|
|
.cm-s-mozilla a[class] {
|
|
font-style: italic;
|
|
text-decoration: underline;
|
|
text-decoration-skip-ink: none;
|
|
}
|
|
|
|
a.learn-more-link.webconsole-learn-more-link {
|
|
font-style: normal;
|
|
}
|
|
|
|
/*
|
|
This element contains the different toolbars in the console
|
|
- primary, containing the clear messages button and the text search input, and a
|
|
checkbox (Persist logs or Show Content Messages).
|
|
It can expand as much as it needs.
|
|
- close button, close the split console panel. This button will always be displayed on
|
|
righ-top of the toolbar.
|
|
- secondary, containing the filter buttons (Error, Warning, …). It's placed inside the
|
|
primary toolbar if there's enought space.
|
|
|
|
We have 2 different layout:
|
|
|
|
Narrow:
|
|
|
|
--------------------------------------------------------------
|
|
| 🗑 - Filter Input | ✕ |
|
|
--------------------------------------------------------------
|
|
| Error - Warning - Log - Info - Debug - CSS - Network - XHR |
|
|
--------------------------------------------------------------
|
|
|
|
And wide:
|
|
|
|
--------------------------------------------------------------------------------------
|
|
| 🗑 - Filter Input | Error - Warning - Log - Info - Debug - CSS - Network - XHR | ✕ |
|
|
--------------------------------------------------------------------------------------
|
|
*/
|
|
.webconsole-filteringbar-wrapper {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
--primary-toolbar-height: 29px;
|
|
}
|
|
|
|
.webconsole-filteringbar-wrapper .devtools-toolbar {
|
|
background-color: var(--theme-body-background);
|
|
}
|
|
|
|
.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;
|
|
align-items: center;
|
|
align-self: stretch;
|
|
user-select: none;
|
|
grid-column: 1 / -1;
|
|
min-height: var(--primary-toolbar-height);
|
|
}
|
|
|
|
.devtools-toolbar.webconsole-filterbar-secondary .devtools-separator {
|
|
margin-inline: 5px;
|
|
}
|
|
|
|
.webconsole-filterbar-primary .devtools-togglebutton {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.split-console-close-button-wrapper {
|
|
min-height: var(--primary-toolbar-height);
|
|
/* We will need to display the close button in the right-top always. */
|
|
grid-column: -1 / -2;
|
|
grid-row: 1 / 2;
|
|
padding-inline-end: 0;
|
|
}
|
|
|
|
/* On OSX the cursor turns into a window-resizing cursor at the edges of the
|
|
* window, so bring the end of the close button in. */
|
|
:root[platform="mac"] .split-console-close-button-wrapper,
|
|
:root[platform="mac"] .webconsole-sidebar-toolbar {
|
|
padding-inline-end: 2px;
|
|
}
|
|
|
|
#split-console-close-button {
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
#split-console-close-button::before {
|
|
background-image: url(chrome://devtools/skin/images/close.svg);
|
|
}
|
|
|
|
.webconsole-filterbar-primary .devtools-searchbox {
|
|
align-self: stretch;
|
|
/* Prevent the filter height from devtools-searchbox */
|
|
height: unset;
|
|
flex: 1 1 100%;
|
|
margin-inline-start: 1px;
|
|
/* It's important to keep this in px as it's used in JS to control the display mode
|
|
* of the filter toolbar. */
|
|
min-width: 150px;
|
|
}
|
|
|
|
.webconsole-filterbar-primary .filter-checkbox {
|
|
flex-shrink: 0;
|
|
margin: 0 3px;
|
|
display: flex;
|
|
align-items: center;
|
|
user-select: none;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
@media (max-width: 965px) {
|
|
/* This media query will make filtered message element to be displayed in new
|
|
line. This width is based on greek localized size since it is longer than
|
|
other localized strings. */
|
|
.webconsole-filterbar-filtered-messages {
|
|
grid-row: 2 / 3;
|
|
grid-column: 1 / -1;
|
|
justify-self: stretch;
|
|
}
|
|
}
|
|
|
|
.webconsole-filterbar-filtered-messages .filter-message-text {
|
|
font-style: italic;
|
|
user-select: none;
|
|
}
|
|
|
|
.webconsole-filterbar-filtered-messages .reset-filters-button {
|
|
margin-inline-start: 0.5em;
|
|
}
|
|
|
|
/* Special casing String reps, and warning/error string colors
|
|
* so they are legible */
|
|
.message .message-body > .objectBox-string,
|
|
.message.error .objectBox-string,
|
|
.message.warn .objectBox-string {
|
|
color: inherit;
|
|
}
|
|
|
|
/* Special casing dark-theme error and warning ObjectInspector colors */
|
|
.theme-dark .message.error .tree.object-inspector .object-label,
|
|
.theme-dark .message.error .tree.object-inspector .object-label *,
|
|
.theme-dark .message.warn .tree.object-inspector .object-label,
|
|
.theme-dark .message.warn .tree.object-inspector .object-label *,
|
|
.theme-dark .message.error .objectLeftBrace,
|
|
.theme-dark .message.error .objectRightBrace,
|
|
.theme-dark .message.error .arrayLeftBracket,
|
|
.theme-dark .message.error .arrayRightBracket,
|
|
.theme-dark .message.warn .objectLeftBrace,
|
|
.theme-dark .message.warn .objectRightBrace,
|
|
.theme-dark .message.warn .arrayLeftBracket,
|
|
.theme-dark .message.warn .arrayRightBracket {
|
|
color: var(--theme-body-color);
|
|
}
|
|
.theme-dark .message.error .tree.object-inspector,
|
|
.theme-dark .message.warn .tree.object-inspector {
|
|
--console-indent-border-color: var(--theme-body-color);
|
|
}
|
|
|
|
.webconsole-app .message-flex-body > .message-body {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.webconsole-app .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;
|
|
}
|
|
|
|
/* Prefix text that can be set by ConsoleAPI option */
|
|
.webconsole-app .console-message-prefix {
|
|
color: var(--theme-comment);
|
|
}
|
|
|
|
/* Styles for JavaScript Tracer messages */
|
|
.webconsole-app :is(
|
|
.jstracer-dom-event,
|
|
.jstracer-dom-mutation,
|
|
.jstracer-implementation
|
|
) {
|
|
padding-inline: 4px;
|
|
margin-inline: 2px;
|
|
}
|
|
.webconsole-app .jstracer-dom-event {
|
|
background-color: var(--toolbarbutton-checked-background);
|
|
color: var(--toolbarbutton-checked-color);
|
|
}
|
|
.webconsole-app .jstracer-dom-mutation {
|
|
background-color: var(--toolbarbutton-checked-background);
|
|
color: var(--toolbarbutton-checked-color);
|
|
margin-inline-end: 4px;
|
|
}
|
|
.webconsole-app .jstracer-implementation {
|
|
background-color: var(--theme-toolbarbutton-checked-hover-background);
|
|
color: var(--theme-toolbarbutton-checked-hover-color);
|
|
}
|
|
.webconsole-app .jstracer-display-name {
|
|
color: var(--theme-highlight-blue);
|
|
margin-inline: 2px;
|
|
}
|
|
|
|
.webconsole-app .jstracer-io {
|
|
color: var(--theme-comment);
|
|
}
|
|
|
|
.webconsole-app .jstracer-exit-frame-reason {
|
|
color: var(--theme-highlight-red);
|
|
}
|
|
|
|
/* console.table() */
|
|
.message .consoletable-wrapper {
|
|
--consoletable-border: var(--theme-splitter-color);
|
|
|
|
max-height: 250px;
|
|
overflow: auto;
|
|
position: relative;
|
|
border-width: 1px 0 0 1px;
|
|
padding: 0;
|
|
margin-block-end: var(--attachment-margin-block-end);
|
|
border: 1px solid var(--consoletable-border);
|
|
}
|
|
|
|
.message .consoletable {
|
|
width: 100%;
|
|
margin: 0;
|
|
color: var(--theme-body-color);
|
|
border-spacing: 0;
|
|
}
|
|
|
|
.consoletable :is(th, td) {
|
|
border: 0 solid var(--consoletable-border);
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.consoletable :is(th, td) + :is(th, td) {
|
|
border-inline-start-width: 1px;
|
|
}
|
|
|
|
.consoletable th {
|
|
position: sticky;
|
|
top: 0;
|
|
background-color: var(--theme-toolbar-background);
|
|
color: var(--theme-body-color);
|
|
border-block-end-width: 1px;
|
|
margin: 0;
|
|
padding: 5px 4px;
|
|
font-weight: inherit;
|
|
}
|
|
|
|
.consoletable td {
|
|
background-color: var(--theme-body-background);
|
|
color: var(--theme-body-color);
|
|
padding: 3px 4px;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
|
|
.consoletable tr:nth-child(even) td {
|
|
background-color: var(--table-zebra-background);
|
|
}
|
|
|
|
/* Simple Table */
|
|
.message .simple-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
--simpletable-border: var(--theme-splitter-color);
|
|
margin-block-end: var(--attachment-margin-block-end);
|
|
color: var(--theme-body-color);
|
|
text-align: left;
|
|
max-height: 250px;
|
|
overflow-y: auto;
|
|
border: 1px solid var(--simpletable-border);
|
|
table-layout: fixed;
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.simple-table-header {
|
|
background-color: var(--theme-toolbar-background);
|
|
text-overflow: ellipsis;
|
|
border-bottom: 1px solid var(--simpletable-border);
|
|
}
|
|
|
|
.simple-table-header > th {
|
|
padding: 5px 4px;
|
|
font-weight: inherit;
|
|
}
|
|
|
|
.simple-table-header > th:nth-child(odd) {
|
|
width: 10%;
|
|
}
|
|
|
|
.simple-table td {
|
|
padding: 3px 4px;
|
|
text-overflow: ellipsis;
|
|
border-left: 1px solid var(--simpletable-border);
|
|
}
|
|
|
|
.simple-table td:nth-child(2n) span {
|
|
color: var(--theme-body-color);
|
|
}
|
|
|
|
.simple-table tr:nth-child(even) {
|
|
background-color: var(--table-zebra-background);
|
|
}
|
|
|
|
/* Object Inspector */
|
|
.webconsole-app .object-inspector.tree {
|
|
display: inline-block;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.webconsole-app .object-inspector.tree .tree-indent {
|
|
border-inline-start-color: var(--console-indent-border-color);
|
|
}
|
|
|
|
.webconsole-app .object-inspector.tree .tree-node:hover:not(.focused) {
|
|
background-color: var(--object-inspector-hover-background);
|
|
}
|
|
|
|
/*
|
|
* Make console.group, exception and XHR message's arrow look the same as the arrow
|
|
* used in the ObjectInspector (same background-image, width, transition).
|
|
* Properties were copied from devtools/client/shared/components/reps/reps.css.
|
|
*/
|
|
.collapse-button {
|
|
flex: none;
|
|
align-self: flex-start;
|
|
margin-block-start: calc(var(--console-output-vertical-padding) - 1px);
|
|
margin-inline-start: -4px;
|
|
padding: 3px;
|
|
border: none;
|
|
color: var(--theme-icon-dimmed-color);
|
|
background: transparent;
|
|
}
|
|
|
|
.collapse-button::before {
|
|
content: "";
|
|
display: block;
|
|
width: 10px;
|
|
height: 10px;
|
|
background: url("chrome://devtools/skin/images/arrow.svg") no-repeat center;
|
|
background-size: 10px;
|
|
transform: rotate(-90deg);
|
|
transition: transform 125ms ease;
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
}
|
|
|
|
/* Align console.group messages with the border they create for their "children" messages */
|
|
.indent ~ .collapse-button {
|
|
margin-inline-start: 3px;
|
|
}
|
|
|
|
.collapse-button[aria-expanded="true"]::before {
|
|
transform: rotate(0);
|
|
}
|
|
|
|
.collapse-button::-moz-focus-inner {
|
|
border: none;
|
|
}
|
|
|
|
/* Hide the icon, so that we can use the collapse-button in its place */
|
|
.message.network:not(:where(.network-message-blocked, .disabled)) > .icon,
|
|
.message.startGroup > .icon,
|
|
.message.startGroupCollapsed > .icon {
|
|
display: none;
|
|
}
|
|
|
|
/* Center the collapse button in the left gutter (first-level only) */
|
|
.message.network > .collapse-button,
|
|
.message:is(.startGroup,.startGroupCollapsed)[data-indent="0"] > .collapse-button {
|
|
width: 24px;
|
|
margin-inline-start: var(--console-icon-horizontal-offset);
|
|
margin-inline-end: calc(4px - var(--console-icon-horizontal-offset));
|
|
}
|
|
|
|
/* Use a bigger arrow that is visually similar to other icons (10px) */
|
|
.message.network > .collapse-button::before,
|
|
.message:is(.startGroup,.startGroupCollapsed)[data-indent="0"] > .collapse-button::before {
|
|
width: 100%;
|
|
background-image: url("chrome://devtools/skin/images/arrow-big.svg");
|
|
fill: var(--theme-icon-dimmed-color);
|
|
}
|
|
|
|
/* Apply a style similar to collapse-button for the object tree arrows */
|
|
.webconsole-app .tree .arrow,
|
|
.webconsole-app .object-inspector .tree-node .arrow {
|
|
width: 10px;
|
|
height: 10px;
|
|
background: url("chrome://devtools/skin/images/arrow.svg") no-repeat center;
|
|
background-size: 10px;
|
|
transform: rotate(-90deg);
|
|
/* Needed for alignment */
|
|
margin-top: -1px;
|
|
-moz-context-properties: fill;
|
|
fill: var(--theme-icon-dimmed-color);
|
|
}
|
|
|
|
/* In RTL the tree arrows should usually point to the left, but in
|
|
this context it should point to the right.
|
|
This overrides the rule from other stylesheets that does the opposite. */
|
|
.webconsole-app .tree .arrow:dir(rtl),
|
|
.webconsole-app .object-inspector .tree-node .arrow:dir(rtl) {
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
.webconsole-app .tree .arrow.expanded,
|
|
.webconsole-app .object-inspector .tree-node .arrow.expanded {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
.webconsole-app .tree.focused .arrow,
|
|
.webconsole-app .object-inspector .tree-node.focused .arrow {
|
|
fill: currentColor;
|
|
}
|
|
|
|
/** Utils **/
|
|
.clipboard-only {
|
|
position: absolute;
|
|
left: -9999px;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.lazy-message-list-top,
|
|
.lazy-message-list-bottom {
|
|
overflow-anchor: none;
|
|
pointer-events: none;
|
|
user-select: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
border: none;
|
|
}
|