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
:root {
--min-container-width: 300px;
--pseudo-class-text-color: var(--yellow-75);
--invalid-at-computed-value-time-fill-color: var(--theme-highlight-red);
&.theme-dark {
--pseudo-class-text-color: var(--yellow-50);
}
}
* {
box-sizing: border-box;
}
/* Make sure to hide scroll bars for the parent window */
window {
overflow: hidden;
}
/* The main Inspector panel container. */
.inspector-responsive-container {
height: 100vh;
overflow: hidden;
}
/* The main panel layout. This area consists of a toolbar, markup view
and breadcrumbs bar. */
#inspector-main-content {
/* Subtract 1 pixel from the panel height. It's puzzling why this
is needed, but if not presented the entire Inspector panel
content jumps 1 pixel up when the Toolbox is opened. */
height: calc(100% - 1px);
/* This min-width avoids a visual glitch when moving the splitter quickly to the left.
min-width: 125px;
display: flex;
flex-direction: column;
}
/* Inspector Panel Splitter */
#inspector-splitter-box {
height: 100vh;
width: 100vw;
position: fixed;
}
/* Minimum dimensions for the Inspector splitter areas. */
#inspector-splitter-box .uncontrolled,
#inspector-splitter-box .controlled {
min-height: 50px;
min-width: 50px;
overflow-x: hidden;
}
/* Set a minimum width of 200px for tab content to avoid breaking the layout when resizing
the sidebar tab to small width. If a specific panel supports smaller width, this should
be overridden on a panel-by-panel basis */
.inspector-tabpanel {
min-width: 200px;
}
#inspector-splitter-box .controlled.pane-collapsed {
visibility: collapse;
}
#inspector-splitter-box .sidebar-toggle::before {
background-image: url("chrome://devtools/skin/images/close-3-pane.svg");
transform: unset;
}
#inspector-splitter-box .sidebar-toggle.pane-collapsed::before {
background-image: url("chrome://devtools/skin/images/open-3-pane.svg");
}
/* Flip the icon horizontally when in RTL mode */
#inspector-splitter-box .sidebar-toggle:dir(rtl) {
transform: scaleX(-1);
}
#inspector-searchlabel-container {
display: flex;
flex-direction: row;
align-items: center;
}
#inspector-searchlabel-container[hidden] {
display: none;
}
#inspector-searchnavigation-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
#inspector-searchnavigation-container[hidden] {
display: none;
}
#inspector-searchnavigation-container .inspector-searchnavigation-buttons::before {
background-size: 16px;
margin-inline: 0;
}
#inspector-searchnavigation-button-prev::before {
background-image: url("chrome://devtools/content/debugger/images/arrow-up.svg");
}
#inspector-searchnavigation-button-next::before {
background-image: url("chrome://devtools/content/debugger/images/arrow-down.svg");
}
#inspector-searchlabel {
padding: 0 3px;
font-variant-numeric: tabular-nums;
white-space: nowrap;
user-select: none;
color: var(--theme-text-color-alt);
}
#inspector-search {
container: search-container / inline-size;
}
@container search-container (inline-size < 200px) {
#inspector-searchlabel {
display: none;
}
}
/* Add element toolbar button */
#inspector-element-add-button::before {
background-image: url("chrome://devtools/skin/images/add.svg");
background-position: center;
background-size: 14px;
-moz-user-focus: normal;
}
/* Eyedropper toolbar button */
#inspector-eyedropper-toggle {
/* Required to display tooltip when eyedropper is disabled in non-HTML documents */
pointer-events: auto;
}
#inspector-eyedropper-toggle::before {
background-image: url(images/command-eyedropper.svg);
background-position: center;
background-size: 14px;
}
#inspector-breadcrumbs-toolbar {
padding: 0;
border-bottom-width: 0;
border-top-width: 1px;
border-top-color: var(--theme-splitter-color);
get mistaken as a splitter */
background-color: var(--theme-body-background);
display: block;
position: relative;
}
#inspector-breadcrumbs-toolbar,
#inspector-breadcrumbs-toolbar * {
box-sizing: border-box;
direction: ltr;
}
#inspector-breadcrumbs {
display: flex;
outline-offset: -2px;
/* Break out of the XUL flexbox, so the splitter can still shrink the
markup view even if the contents of the breadcrumbs are wider than
the new width. */
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#inspector-breadcrumbs .scrollbutton-up,
#inspector-breadcrumbs .scrollbutton-down {
flex: 0;
display: flex;
align-items: center;
}
#inspector-breadcrumbs .html-arrowscrollbox-inner {
flex: 1;
display: flex;
overflow: hidden;
}
#inspector-breadcrumbs .breadcrumbs-widget-item {
white-space: nowrap;
flex-shrink: 0;
}
#inspector-rules-container,
#inspector-sidebar-container {
overflow: hidden;
position: relative;
height: 100%;
}
#inspector-rules-sidebar,
#inspector-sidebar {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
/* Override `-moz-user-focus:ignore;` from toolkit/content/xul.css */
.inspector-tabpanel > * {
-moz-user-focus: normal;
}
/* Markup Box */
iframe {
border: 0;
}
#markup-box {
width: 100%;
flex: 1;
min-height: 0;
}
#markup-box > iframe {
height: 100%;
width: 100%;
}
/* Extension Sidebar */
.inspector-tabpanel.extension-sidebar {
height: 100%;
overflow-y: auto;
iframe.inspector-extension-sidebar-page {
display: block;
}
}
/* Used for both the computed view and the rule view, to truncate extremely
long base64 URLs and other unexpectedly long text properties. */
.propertyvalue-long-text {
/* Force inline-block to be able to set a max-width. */
display: inline-block;
/* Arbitrary max-width, this should allow the value to be inlined with the
property name in very wide containers */
max-width: 80%;
/* Add ellipsis. */
overflow: hidden;
text-overflow: ellipsis;
/* Introducing display: inline-block; shifts the vertical alignment, force to
align it to the parent's text */
vertical-align: text-top;
/* Force the long text to be rendered on a single line. */
white-space: nowrap;
}
/* Used for both the computed view and the rule view, to style element that we put
at the same place as selectors but who aren't technically selectors, e.g. element
style attribute and pres-hint styles */
.alternative-selector {
font-style: italic;
}