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