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; | |
98 | } | |
99 | ||
6f751fd1 RK |
100 | /* Make sure the text is vertically centered in Inspector's |
101 | search box. This can be removed when the search box is | |
102 | switched to HTML. | |
103 | See also: https://bugzilla.mozilla.org/show_bug.cgi?id=1265759 */ | |
104 | #inspector-searchbox { | |
105 | line-height: 19px; | |
106 | } | |
107 | ||
60156ae2 RK |
108 | #inspector-search { |
109 | flex: unset; | |
110 | } | |
111 | ||
112 | /* Eyedropper toolbar button */ | |
113 | ||
114 | #inspector-eyedropper-toggle { | |
115 | /* Required to display tooltip when eyedropper is disabled in non-HTML documents */ | |
116 | pointer-events: auto; | |
117 | } | |
118 | ||
119 | #inspector-eyedropper-toggle::before { | |
120 | background-image: var(--eyedropper-image); | |
121 | } | |
122 | ||
123 | #inspector-sidebar-toggle-box { | |
124 | line-height: initial; | |
125 | } | |
126 | ||
dc9d5d64 RK |
127 | #inspector-breadcrumbs-toolbar { |
128 | padding: 0px; | |
129 | border-bottom-width: 0px; | |
60156ae2 RK |
130 | /* border-top-width: 1px; |
131 | border-top-color: var(--breadcrumbs-border-color);*/ | |
6f751fd1 RK |
132 | /* Bug 1262668 - Use the same background as the body so the breadcrumbs toolbar doesn't |
133 | get mistaken as a splitter */ | |
60156ae2 RK |
134 | background-color: var(--theme-alternate-toolbar-background); |
135 | background-image: none; | |
136 | background-size: auto; | |
6f751fd1 RK |
137 | display: block; |
138 | position: relative; | |
dc9d5d64 RK |
139 | } |
140 | ||
60156ae2 RK |
141 | /* Remove LCARS startcap and endcap */ |
142 | div#inspector-breadcrumbs-toolbar::before, | |
143 | div#inspector-breadcrumbs-toolbar::after { | |
144 | display: none; | |
145 | } | |
146 | ||
6f751fd1 RK |
147 | #inspector-breadcrumbs-toolbar, |
148 | #inspector-breadcrumbs-toolbar * { | |
149 | box-sizing: border-box; | |
1e9e1791 RK |
150 | } |
151 | ||
6f751fd1 RK |
152 | #inspector-breadcrumbs { |
153 | display: flex; | |
60156ae2 | 154 | |
6f751fd1 RK |
155 | /* Break out of the XUL flexbox, so the splitter can still shrink the |
156 | markup view even if the contents of the breadcrumbs are wider than | |
157 | the new width. */ | |
1e9e1791 RK |
158 | position: absolute; |
159 | top: 0; | |
1e9e1791 | 160 | left: 0; |
6f751fd1 | 161 | bottom: 0; |
1e9e1791 RK |
162 | right: 0; |
163 | } | |
164 | ||
6f751fd1 RK |
165 | #inspector-breadcrumbs .scrollbutton-up, |
166 | #inspector-breadcrumbs .scrollbutton-down { | |
167 | flex: 0; | |
dc9d5d64 RK |
168 | display: flex; |
169 | align-items: center; | |
dc9d5d64 RK |
170 | } |
171 | ||
6f751fd1 RK |
172 | #inspector-breadcrumbs .html-arrowscrollbox-inner { |
173 | flex: 1; | |
174 | display: flex; | |
dc9d5d64 | 175 | overflow: hidden; |
dc9d5d64 RK |
176 | } |
177 | ||
6f751fd1 RK |
178 | #inspector-breadcrumbs .breadcrumbs-widget-item { |
179 | white-space: nowrap; | |
180 | flex-shrink: 0; | |
60156ae2 | 181 | font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; |
dc9d5d64 RK |
182 | } |
183 | ||
60156ae2 RK |
184 | #inspector-sidebar-container { |
185 | overflow: hidden; | |
186 | position: relative; | |
187 | height: 100%; | |
dc9d5d64 RK |
188 | } |
189 | ||
60156ae2 RK |
190 | #inspector-sidebar { |
191 | position: absolute; | |
192 | top: 0; | |
193 | bottom: 0; | |
194 | left: 0; | |
195 | right: 0; | |
dc9d5d64 RK |
196 | } |
197 | ||
60156ae2 RK |
198 | /* Override `-moz-user-focus:ignore;` from toolkit/content/minimal-xul.css */ |
199 | .inspector-tabpanel > * { | |
6f751fd1 | 200 | -moz-user-focus: normal; |
dc9d5d64 RK |
201 | } |
202 | ||
6f751fd1 | 203 | /* "no results" warning message displayed in the ruleview and in the computed view */ |
dc9d5d64 | 204 | |
6f751fd1 RK |
205 | #ruleview-no-results, |
206 | #computedview-no-results { | |
207 | color: var(--theme-body-color-inactive); | |
208 | text-align: center; | |
209 | margin: 5px; | |
dc9d5d64 | 210 | } |
60156ae2 RK |
211 | |
212 | /* Markup Box */ | |
213 | ||
214 | iframe { | |
215 | border: 0; | |
216 | } | |
217 | ||
218 | #markup-box { | |
219 | width: 100%; | |
220 | flex: 1; | |
221 | min-height: 0; | |
222 | } | |
223 | ||
224 | #markup-box > iframe { | |
225 | height: 100%; | |
226 | width: 100%; | |
227 | } |