Source code
Revision control
Copy as Markdown
Other Tools
/* 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
.theme-dark,
.theme-light {
--number-color: var(--theme-highlight-green);
--string-color: var(--theme-highlight-red);
--null-color: var(--theme-comment);
--object-color: var(--theme-highlight-blue);
--caption-color: var(--theme-highlight-blue);
--location-color: var(--theme-comment);
--source-link-color: var(--theme-link-color);
--node-color: var(--theme-highlight-purple);
--reference-color: var(--theme-highlight-blue);
--comment-node-color: var(--theme-comment);
}
/******************************************************************************/
.inline {
display: inline;
white-space: normal;
}
.objectBox-object {
font-weight: bold;
color: var(--object-color);
white-space: pre-wrap;
}
.objectBox-string,
.objectBox-symbol,
.objectBox-text,
.objectBox-textNode,
.objectBox-table {
white-space: pre-wrap;
}
:is(
.objectBox-string,
.objectBox-textNode,
.objectBox > .nodeName,
.objectBox-node .tag-name,
.objectBox-node .attrName
).has-rtl-char {
unicode-bidi: isolate;
}
.objectBox-number,
.objectBox-styleRule,
.objectBox-element,
.objectBox-textNode,
.objectBox-array > .length {
color: var(--number-color);
}
.objectBox-textNode,
.objectBox-string,
.objectBox-symbol {
color: var(--string-color);
}
.objectBox-empty-string {
font-style: italic;
}
.objectBox-string a {
word-break: break-all;
}
.objectBox-string a,
.objectBox-string a:visited {
color: currentColor;
text-decoration: underline;
text-decoration-skip-ink: none;
font-style: italic;
cursor: pointer;
}
/* Visually hide the middle of "cropped" url */
.objectBox-string a .cropped-url-middle {
max-width: 0;
max-height: 0;
display: inline-block;
overflow: hidden;
vertical-align: bottom;
}
.objectBox-string a .cropped-url-end::before {
content: "…";
}
.objectBox-function,
.objectBox-profile {
color: var(--object-color);
}
.objectBox-stackTrace.reps-custom-format,
.objectBox-stackTrace.reps-custom-format > .objectBox-string {
color: var(--error-color);
}
.objectBox-stackTrace-grid {
display: inline-grid;
grid-template-columns: auto auto;
margin-top: 3px;
}
.objectBox-stackTrace-fn {
color: var(--console-output-color);
padding-inline-start: 17px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-inline-end: 5px;
}
.objectBox-stackTrace-location {
color: var(--theme-internal-link-color, currentColor);
direction: rtl;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: end;
}
.objectBox-stackTrace-location:hover {
text-decoration: underline;
}
.objectBox-stackTrace-location {
cursor: pointer;
}
.objectBox-Location,
.location {
color: var(--location-color);
}
.objectBox-null,
.objectBox-undefined,
.objectBox-hint,
.objectBox-nan,
.logRowHint {
color: var(--null-color);
}
.objectBox-sourceLink {
position: absolute;
right: 4px;
top: 2px;
padding-left: 8px;
font-weight: bold;
color: var(--source-link-color);
}
.objectBox-failure {
color: var(--string-color);
border-width: 1px;
border-style: solid;
border-radius: 2px;
font-size: 0.8em;
padding: 0 2px;
}
.objectBox-accessible.clickable,
.objectBox-node.clickable {
cursor: pointer;
}
/* JsonML reps can be nested, though only the top-level rep needs layout
* adjustments to align it with the toggle arrow and fit its width to its
* contents. */
.objectBox-jsonml-wrapper {
display: inline-flex;
flex-direction: column;
width: fit-content;
word-break: break-word;
line-height: normal;
}
.objectBox-jsonml-wrapper[data-expandable="true"] {
cursor: default;
}
.objectBox-jsonml-wrapper .jsonml-header-collapse-button {
margin: 0 4px 2px 0;
padding: 0;
vertical-align: middle;
}
.objectBox-jsonml-wrapper .jsonml-header-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: var(--theme-icon-dimmed-color);
}
.objectBox-jsonml-wrapper .jsonml-header-collapse-button[aria-expanded="true"]::before {
transform: rotate(0deg);
}
/******************************************************************************/
.objectBox-event,
.objectBox-eventLog,
.objectBox-regexp,
.objectBox-object {
color: var(--object-color);
white-space: pre-wrap;
}
.objectBox .Date {
color: var(--string-color);
white-space: pre-wrap;
}
/******************************************************************************/
.objectBox.theme-comment {
color: var(--comment-node-color);
}
.accessible-role,
.tag-name {
color: var(--object-color);
}
.attrName {
color: var(--string-color);
}
.attrEqual,
.objectEqual {
color: var(--comment-node-color);
}
.attrValue,
.attrValue.objectBox-string {
color: var(--node-color);
}
.angleBracket {
color: var(--theme-body-color);
}
/******************************************************************************/
/* Length bubble for arraylikes and maplikes */
.objectLengthBubble {
color: var(--null-color);
}
/******************************************************************************/
.objectLeftBrace,
.objectRightBrace,
.arrayLeftBracket,
.arrayRightBracket {
color: var(--object-color);
}
/******************************************************************************/
/* Cycle reference */
.objectBox-Reference {
font-weight: bold;
color: var(--reference-color);
}
[class*="objectBox"] > .objectTitle {
color: var(--object-color);
}
.caption {
color: var(--caption-color);
}
/******************************************************************************/
/* Themes */
.theme-dark .objectBox-null,
.theme-dark .objectBox-undefined,
.theme-light .objectBox-null,
.theme-light .objectBox-undefined {
font-style: normal;
}
.theme-dark .objectBox-object,
.theme-light .objectBox-object {
font-weight: normal;
white-space: pre-wrap;
}
.theme-dark .caption,
.theme-light .caption {
font-weight: normal;
}
/******************************************************************************/
/* Open DOMNode in inspector or Accessible in accessibility inspector button */
:is(button, [role="button"]).open-accessibility-inspector {
background: url("chrome://devtools/content/shared/components/reps/images/open-a11y.svg")
no-repeat;
}
:is(button, [role="button"]).open-inspector {
background: url("chrome://devtools/content/shared/components/reps/images/open-inspector.svg")
no-repeat;
}
:is(button, [role="button"]).highlight-node {
background: url("chrome://devtools/skin/images/highlight-selector.svg")
no-repeat;
}
:is(button, [role="button"]):is(.open-accessibility-inspector, .open-inspector, .highlight-node) {
display: inline-block;
vertical-align: top;
height: 15px;
width: 15px;
margin: 0 4px;
padding: 0;
border: none;
color: var(--theme-icon-color);
fill: currentColor;
cursor: pointer;
-moz-context-properties: fill;
}
.objectBox-accessible:hover .open-accessibility-inspector,
.objectBox-node:hover .open-inspector,
.objectBox-textNode:hover .open-inspector,
.open-accessibility-inspector:hover,
.highlight-node:hover,
.open-inspector:hover {
color: var(--theme-icon-alternate-hover-color);
}
/******************************************************************************/
/* Jump to definition button */
button.jump-definition {
display: inline-block;
height: 16px;
width: 20px;
margin-left: 0.25em;
vertical-align: middle;
background: center
url("chrome://devtools/content/shared/components/reps/images/jump-definition.svg")
no-repeat;
border-color: transparent;
stroke: var(--theme-icon-color);
-moz-context-properties: stroke;
cursor: pointer;
}
button.jump-definition:hover {
stroke: var(--theme-icon-checked-color);
}
:root[forced-colors-active] button.jump-definition {
border: 1px solid ButtonText;
border-radius: 2px;
background-color: ButtonFace;
}
:root[forced-colors-active] button.jump-definition:hover {
stroke: var(--theme-icon-hover-color);
border-color: var(--theme-icon-hover-color);
}
/* In High Contrast Mode, the button has a solid background, so we only need
to set a different color for the icon when we are not in HCM */
:root:not([forced-colors-active]) .tree-node.focused button.jump-definition {
stroke: currentColor;
}
/******************************************************************************/
/* Invoke getter button */
button.invoke-getter {
mask: url(chrome://devtools/content/shared/components/reps/images/input.svg)
no-repeat;
display: inline-block;
background-color: var(--theme-icon-color);
height: 10px;
vertical-align: middle;
border: none;
}
.invoke-getter:hover {
background-color: var(--theme-icon-checked-color);
}
/******************************************************************************/
/* "more…" ellipsis */
.more-ellipsis {
color: var(--comment-node-color);
}
/* function parameters */
.objectBox-function .param {
color: var(--theme-highlight-red);
}