1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
|
/* 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/. */
:root {
--min-container-width: 300px;
--pseudo-class-text-color: var(--yellow-75);
&.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.
See bug 1307408 comment #12. */
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;
}
#inspector-searchlabel-container[hidden] {
display: none;
}
#inspector-searchlabel {
padding: 0 3px;
}
/* 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: 0px;
border-bottom-width: 0px;
border-top-width: 1px;
border-top-color: var(--theme-splitter-color);
/* Bug 1262668 - Use the same background as the body so the breadcrumbs toolbar doesn't
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;
}
/* 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;
}
|
