Commit | Line | Data |
---|---|---|
dc9d5d64 RK |
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/. */ | |
4 | ||
c877146a RK |
5 | @import url(variables.css); /* No idea why this is needed but we get error messages without it */ |
6 | ||
1e9e1791 RK |
7 | :root { |
8 | --eyedropper-image: url(images/command-eyedropper.svg); | |
9 | } | |
10 | ||
85b6b932 RK |
11 | window { |
12 | padding: 0; | |
13 | } | |
14 | ||
60156ae2 | 15 | :root { |
6f751fd1 RK |
16 | --breadcrumbs-border-color: #9C9CFF; |
17 | } | |
18 | ||
60156ae2 RK |
19 | * { |
20 | box-sizing: border-box; | |
21 | } | |
22 | ||
23 | /* Make sure to hide scroll bars for the parent window */ | |
24 | window { | |
25 | overflow: hidden; | |
26 | } | |
27 | ||
28 | /* The main Inspector panel container. */ | |
29 | .inspector-responsive-container { | |
30 | height: 100vh; | |
31 | } | |
32 | ||
33 | /* The main panel layout. This area consists of a toolbar, markup view | |
34 | and breadcrumbs bar. */ | |
35 | #inspector-main-content { | |
36 | /* Subtract 1 pixel from the panel height. It's puzzling why this | |
37 | is needed, but if not presented the entire Inspector panel | |
38 | content jumps 1 pixel up when the Toolbox is opened. */ | |
39 | height: calc(100% - 1px); | |
40 | /* This min-width avoids a visual glitch when moving the splitter quickly to the left. | |
41 | See bug 1307408 comment #12. */ | |
42 | min-width: 125px; | |
43 | display: flex; | |
44 | flex-direction: column; | |
45 | flex: 1 1 auto; | |
46 | } | |
47 | ||
48 | /* Inspector Panel Splitter */ | |
49 | ||
50 | #inspector-splitter-box { | |
51 | height: 100vh; | |
52 | width: 100vw; | |
53 | position: fixed; | |
54 | } | |
55 | ||
56 | /* Minimum dimensions for the Inspector splitter areas. */ | |
57 | #inspector-splitter-box .uncontrolled, | |
58 | #inspector-splitter-box .controlled { | |
59 | min-height: 50px; | |
60 | min-width: 50px; | |
61 | overflow-x: hidden; | |
62 | } | |
63 | ||
64 | /* Set a minimum width of 200px for tab content to avoid breaking the layout when resizing | |
65 | the sidebar tab to small width. If a specific panel supports smaller width, this should | |
66 | be overridden on a panel-by-panel basis */ | |
67 | .inspector-tabpanel { | |
68 | min-width: 200px; | |
69 | } | |
70 | ||
71 | #inspector-splitter-box .controlled.pane-collapsed { | |
72 | visibility: collapse; | |
73 | } | |
74 | ||
1e9e1791 RK |
75 | /* Use flex layout for the Inspector toolbar. For now, it's done |
76 | specifically for the Inspector toolbar since general rule applied | |
60156ae2 | 77 | on .devtools-toolbar breaks breadcrumbs and also toolbars in other |
1e9e1791 RK |
78 | panels (e.g. webconsole, debugger), these are not ready for HTML |
79 | layout yet. */ | |
6f751fd1 | 80 | #inspector-toolbar.devtools-toolbar { |
1e9e1791 | 81 | display: flex; |
1e9e1791 RK |
82 | } |
83 | ||
6f751fd1 | 84 | #inspector-toolbar.devtools-toolbar .devtools-toolbar-spacer { |
1e9e1791 RK |
85 | flex-grow: 1; |
86 | display: inline-block; | |
87 | } | |
88 | ||
60156ae2 RK |
89 | /* Add element toolbar button */ |
90 | #inspector-element-add-button::before { | |
91 | background-image: url("chrome://devtools/skin/images/add.svg"); | |
92 | list-style-image: url("chrome://devtools/skin/images/add.svg"); | |
93 | -moz-user-focus: normal; | |
94 | } | |
95 | ||
dc9d5d64 RK |
96 | #inspector-searchlabel { |
97 | overflow: hidden; | |
ec6b35d8 RK |
98 | margin-inline-end: 2px; |
99 | } | |
100 | ||
101 | #inspector-search { | |
102 | flex: unset; | |
103 | } | |
104 | ||
105 | /* TODO: bug 1265759: should apply to .devtools-searchinput once all searchbox | |
106 | is converted to html*/ | |
107 | #inspector-searchbox { | |
108 | width: 100%; | |
dc9d5d64 RK |
109 | } |
110 | ||
6f751fd1 RK |
111 | /* Make sure the text is vertically centered in Inspector's |
112 | search box. This can be removed when the search box is | |
113 | switched to HTML. | |
114 | See also: https://bugzilla.mozilla.org/show_bug.cgi?id=1265759 */ | |
115 | #inspector-searchbox { | |
116 | line-height: 19px; | |
117 | } | |
118 | ||
60156ae2 RK |
119 | /* Eyedropper toolbar button */ |
120 | ||
121 | #inspector-eyedropper-toggle { | |
122 | /* Required to display tooltip when eyedropper is disabled in non-HTML documents */ | |
123 | pointer-events: auto; | |
124 | } | |
125 | ||
126 | #inspector-eyedropper-toggle::before { | |
127 | background-image: var(--eyedropper-image); | |
128 | } | |
129 | ||
130 | #inspector-sidebar-toggle-box { | |
131 | line-height: initial; | |
132 | } | |
133 | ||
dc9d5d64 RK |
134 | #inspector-breadcrumbs-toolbar { |
135 | padding: 0px; | |
136 | border-bottom-width: 0px; | |
60156ae2 RK |
137 | /* border-top-width: 1px; |
138 | border-top-color: var(--breadcrumbs-border-color);*/ | |
6f751fd1 RK |
139 | /* Bug 1262668 - Use the same background as the body so the breadcrumbs toolbar doesn't |
140 | get mistaken as a splitter */ | |
60156ae2 RK |
141 | background-color: var(--theme-alternate-toolbar-background); |
142 | background-image: none; | |
143 | background-size: auto; | |
6f751fd1 RK |
144 | display: block; |
145 | position: relative; | |
dc9d5d64 RK |
146 | } |
147 | ||
60156ae2 RK |
148 | /* Remove LCARS startcap and endcap */ |
149 | div#inspector-breadcrumbs-toolbar::before, | |
150 | div#inspector-breadcrumbs-toolbar::after { | |
151 | display: none; | |
152 | } | |
153 | ||
6f751fd1 RK |
154 | #inspector-breadcrumbs-toolbar, |
155 | #inspector-breadcrumbs-toolbar * { | |
156 | box-sizing: border-box; | |
1e9e1791 RK |
157 | } |
158 | ||
6f751fd1 RK |
159 | #inspector-breadcrumbs { |
160 | display: flex; | |
60156ae2 | 161 | |
6f751fd1 RK |
162 | /* Break out of the XUL flexbox, so the splitter can still shrink the |
163 | markup view even if the contents of the breadcrumbs are wider than | |
164 | the new width. */ | |
1e9e1791 RK |
165 | position: absolute; |
166 | top: 0; | |
1e9e1791 | 167 | left: 0; |
6f751fd1 | 168 | bottom: 0; |
1e9e1791 RK |
169 | right: 0; |
170 | } | |
171 | ||
6f751fd1 RK |
172 | #inspector-breadcrumbs .scrollbutton-up, |
173 | #inspector-breadcrumbs .scrollbutton-down { | |
174 | flex: 0; | |
dc9d5d64 RK |
175 | display: flex; |
176 | align-items: center; | |
dc9d5d64 RK |
177 | } |
178 | ||
6f751fd1 RK |
179 | #inspector-breadcrumbs .html-arrowscrollbox-inner { |
180 | flex: 1; | |
181 | display: flex; | |
dc9d5d64 | 182 | overflow: hidden; |
dc9d5d64 RK |
183 | } |
184 | ||
6f751fd1 RK |
185 | #inspector-breadcrumbs .breadcrumbs-widget-item { |
186 | white-space: nowrap; | |
187 | flex-shrink: 0; | |
60156ae2 | 188 | font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; |
dc9d5d64 RK |
189 | } |
190 | ||
60156ae2 RK |
191 | #inspector-sidebar-container { |
192 | overflow: hidden; | |
193 | position: relative; | |
194 | height: 100%; | |
dc9d5d64 RK |
195 | } |
196 | ||
60156ae2 RK |
197 | #inspector-sidebar { |
198 | position: absolute; | |
199 | top: 0; | |
200 | bottom: 0; | |
201 | left: 0; | |
202 | right: 0; | |
dc9d5d64 RK |
203 | } |
204 | ||
60156ae2 RK |
205 | /* Override `-moz-user-focus:ignore;` from toolkit/content/minimal-xul.css */ |
206 | .inspector-tabpanel > * { | |
6f751fd1 | 207 | -moz-user-focus: normal; |
dc9d5d64 RK |
208 | } |
209 | ||
6f751fd1 | 210 | /* "no results" warning message displayed in the ruleview and in the computed view */ |
dc9d5d64 | 211 | |
6f751fd1 RK |
212 | #ruleview-no-results, |
213 | #computedview-no-results { | |
214 | color: var(--theme-body-color-inactive); | |
215 | text-align: center; | |
216 | margin: 5px; | |
dc9d5d64 | 217 | } |
60156ae2 RK |
218 | |
219 | /* Markup Box */ | |
220 | ||
221 | iframe { | |
222 | border: 0; | |
223 | } | |
224 | ||
225 | #markup-box { | |
226 | width: 100%; | |
227 | flex: 1; | |
228 | min-height: 0; | |
229 | } | |
230 | ||
231 | #markup-box > iframe { | |
232 | height: 100%; | |
233 | width: 100%; | |
234 | } |