1 /* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
6 --min-container-width: 300px;
7 --pseudo-class-text-color: var
(--yellow-75
);
10 --pseudo-class-text-color: var
(--yellow-50
);
15 box-sizing: border-box
;
18 /* Make sure to hide scroll bars for the parent window */
23 /* The main Inspector panel container. */
24 .inspector-responsive-container {
29 /* The main panel layout. This area consists of a toolbar, markup view
30 and breadcrumbs bar. */
31 #inspector-main-content {
32 /* Subtract 1 pixel from the panel height. It's puzzling why this
33 is needed, but if not presented the entire Inspector panel
34 content jumps 1 pixel up when the Toolbox is opened. */
35 height: calc
(100% - 1px);
36 /* This min-width avoids a visual glitch when moving the splitter quickly to the left.
37 See bug 1307408 comment #12. */
40 flex-direction: column
;
43 /* Inspector Panel Splitter */
45 #inspector-splitter-box {
51 /* Minimum dimensions for the Inspector splitter areas. */
52 #inspector-splitter-box .uncontrolled
,
53 #inspector-splitter-box .controlled
{
59 /* Set a minimum width of 200px for tab content to avoid breaking the layout when resizing
60 the sidebar tab to small width. If a specific panel supports smaller width, this should
61 be overridden on a panel-by-panel basis */
66 #inspector-splitter-box .controlled
.pane-collapsed
{
70 #inspector-splitter-box .sidebar-toggle::before
{
71 background-image: url
("chrome://devtools/skin/images/close-3-pane.svg");
75 #inspector-splitter-box .sidebar-toggle
.pane-collapsed::before
{
76 background-image: url
("chrome://devtools/skin/images/open-3-pane.svg");
79 /* Flip the icon horizontally when in RTL mode */
80 #inspector-splitter-box .sidebar-toggle:dir
(rtl
) {
81 transform: scaleX
(-1);
84 #inspector-searchlabel-container {
88 #inspector-searchlabel-container[hidden
] {
92 #inspector-searchlabel {
96 /* Add element toolbar button */
97 #inspector-element-add-button::before
{
98 background-image: url
("chrome://devtools/skin/images/add.svg");
99 background-position: center
;
100 background-size: 14px;
101 -moz-user-focus: normal
;
104 /* Eyedropper toolbar button */
106 #inspector-eyedropper-toggle {
107 /* Required to display tooltip when eyedropper is disabled in non-HTML documents */
108 pointer-events: auto
;
111 #inspector-eyedropper-toggle::before
{
112 background-image: url
(images
/command-eyedropper
.svg
);
113 background-position: center
;
114 background-size: 14px;
117 #inspector-breadcrumbs-toolbar {
119 border-bottom-width: 0px;
120 border-top-width: 1px;
121 border-top-color: var
(--theme-splitter-color
);
122 /* Bug 1262668 - Use the same background as the body so the breadcrumbs toolbar doesn't
123 get mistaken as a splitter */
124 background-color: var
(--theme-body-background
);
129 #inspector-breadcrumbs-toolbar,
130 #inspector-breadcrumbs-toolbar * {
131 box-sizing: border-box
;
135 #inspector-breadcrumbs {
137 outline-offset: -2px;
138 /* Break out of the XUL flexbox, so the splitter can still shrink the
139 markup view even if the contents of the breadcrumbs are wider than
148 #inspector-breadcrumbs .scrollbutton-up
,
149 #inspector-breadcrumbs .scrollbutton-down
{
155 #inspector-breadcrumbs .html-arrowscrollbox-inner
{
161 #inspector-breadcrumbs .breadcrumbs-widget-item
{
166 #inspector-rules-container,
167 #inspector-sidebar-container {
173 #inspector-rules-sidebar,
182 /* Override `-moz-user-focus:ignore;` from toolkit/content/xul.css */
183 .inspector-tabpanel > * {
184 -moz-user-focus: normal
;
199 #markup-box > iframe
{
204 /* Extension Sidebar */
205 .inspector-tabpanel.extension-sidebar {
210 /* Used for both the computed view and the rule view, to truncate extremely
211 long base64 URLs and other unexpectedly long text properties. */
212 .propertyvalue-long-text {
213 /* Force inline-block to be able to set a max-width. */
214 display: inline-block
;
215 /* Arbitrary max-width, this should allow the value to be inlined with the
216 property name in very wide containers */
220 text-overflow: ellipsis
;
221 /* Introducing display: inline-block; shifts the vertical alignment, force to
222 align it to the parent's text */
223 vertical-align: text-top
;
224 /* Force the long text to be rendered on a single line. */