Commit | Line | Data |
---|---|---|
cc7e70eb 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 | ||
e7c8bab1 RK |
5 | /* === file identical to profiler.inc.css === */ |
6 | ||
8c6555e2 RK |
7 | /* CSS Variables specific to this panel that aren't defined by the themes */ |
8 | .theme-dark, | |
9 | .theme-light { | |
10 | --cell-border-color: #9C9CFF; | |
11 | --focus-cell-border-color: #9C9CFF; | |
12 | --row-alt-background-color: #402800; | |
13 | --row-hover-background-color: #795900; | |
14 | } | |
15 | ||
cc7e70eb RK |
16 | window { |
17 | padding: 0; | |
18 | } | |
19 | ||
d4d77dc0 RK |
20 | /* Reload and waiting notices */ |
21 | ||
22 | .notice-container { | |
23 | margin-top: -50vh; | |
24 | font-size: 120%; | |
de5e780d RK |
25 | background-color: var(--theme-toolbar-background); |
26 | color: var(--theme-body-color); | |
d4d77dc0 RK |
27 | } |
28 | ||
29 | #empty-notice button, | |
30 | #recording-notice button { | |
31 | min-width: 30px; | |
32 | min-height: 28px; | |
33 | margin: 0; | |
34 | list-style-image: url("profiler-stopwatch.svg"); | |
35 | } | |
36 | ||
37 | #empty-notice button[checked], | |
38 | #recording-notice button[checked] { | |
39 | list-style-image: url("profiler-stopwatch-checked.svg"); | |
40 | } | |
41 | ||
42 | #empty-notice button .button-text, | |
43 | #recording-notice button .button-text { | |
44 | display: none; | |
45 | } | |
46 | ||
47 | #loading-notice { | |
48 | font-size: 250%; | |
49 | color: #9C9CFF; | |
50 | } | |
51 | ||
52 | /* Recordings pane */ | |
53 | ||
54 | #recordings-pane > tabs, | |
55 | #recordings-pane .devtools-toolbar { | |
56 | -moz-border-end-width: 1px; | |
57 | } | |
58 | ||
59 | #recordings-pane > tabs, | |
60 | #recordings-pane .devtools-toolbar { | |
de5e780d | 61 | -moz-border-end-color: var(--theme-splitter-color); |
d4d77dc0 RK |
62 | } |
63 | ||
64 | #record-button { | |
65 | list-style-image: url("profiler-stopwatch.svg"); | |
66 | } | |
67 | ||
68 | #record-button[checked] { | |
69 | list-style-image: url("profiler-stopwatch-checked.svg"); | |
70 | } | |
71 | ||
72 | #record-button[locked] { | |
73 | pointer-events: none; | |
74 | } | |
75 | ||
76 | /* Recording items */ | |
77 | ||
78 | .recording-item { | |
79 | padding: 4px; | |
80 | } | |
81 | ||
82 | .recording-item-title { | |
83 | font-size: 110%; | |
e7c8bab1 RK |
84 | } |
85 | ||
d4d77dc0 RK |
86 | .recording-item-footer { |
87 | padding-top: 4px; | |
88 | font-size: 90%; | |
cc7e70eb RK |
89 | } |
90 | ||
d4d77dc0 RK |
91 | .recording-item-save { |
92 | text-decoration: underline; | |
93 | cursor: pointer; | |
94 | } | |
95 | ||
96 | .recording-item-duration, | |
97 | .recording-item-save { | |
de5e780d | 98 | color: var(--theme-body-color-alt); |
e7c8bab1 RK |
99 | } |
100 | ||
d4d77dc0 RK |
101 | #recordings-list .selected label { |
102 | /* Text inside a selected item should not be custom colored. */ | |
103 | color: inherit !important; | |
e7c8bab1 RK |
104 | } |
105 | ||
d4d77dc0 RK |
106 | /* Profile pane */ |
107 | ||
108 | #profile-content tabs { | |
109 | -moz-box-align: stretch; | |
110 | height: 24px; | |
111 | font: inherit; | |
112 | } | |
113 | ||
114 | #profile-content tab { | |
115 | -moz-box-flex: 0; | |
116 | background-color: transparent; | |
117 | border: none; | |
118 | border-radius: 0; | |
119 | padding: 0; | |
120 | text-shadow: none; | |
121 | transition-duration: 0.25s; | |
122 | transition-timing-function: ease-in-out; | |
123 | transition-property: opacity, transform; | |
45dc7657 RK |
124 | } |
125 | ||
de5e780d RK |
126 | #profile-content tab { |
127 | color: var(--theme-body-color); | |
e7c8bab1 RK |
128 | } |
129 | ||
d4d77dc0 | 130 | #profile-content tab:not([selected]) { |
e7c8bab1 | 131 | cursor: pointer; |
cc7e70eb RK |
132 | } |
133 | ||
d4d77dc0 RK |
134 | #profile-content tab[covered] { |
135 | opacity: 0; | |
136 | transform: translateY(100%); | |
137 | } | |
138 | ||
139 | #profile-content tab { | |
140 | -moz-appearance: none; | |
de5e780d | 141 | -moz-border-end: 1px solid var(--theme-splitter-color); |
d4d77dc0 RK |
142 | } |
143 | ||
144 | #profile-content tab:hover { | |
de5e780d RK |
145 | background-color: var(--theme-hover-background); |
146 | color: var(--theme-hover-color); | |
d4d77dc0 RK |
147 | } |
148 | ||
149 | #profile-content tab[selected] { | |
de5e780d RK |
150 | background-color: var(--theme-selection-background); |
151 | color: var(--theme-selection-color); | |
d4d77dc0 RK |
152 | } |
153 | ||
154 | #profile-content tabpanel { | |
155 | -moz-box-orient: vertical; | |
156 | transform: translateZ(1px); /* Make sure the tabpanel appears above the tab */ | |
157 | } | |
158 | ||
159 | #profile-newtab-button { | |
160 | -moz-appearance: none; | |
161 | background-color: transparent; | |
162 | background-position: 4px 2px; | |
163 | background-size: 54px 20px; | |
164 | min-width: 26px; | |
165 | margin: 0; | |
166 | border: none; | |
167 | cursor: pointer; | |
168 | } | |
169 | ||
170 | #profile-newtab-button { | |
171 | background-color: #C09070; | |
172 | } | |
173 | ||
174 | #profile-newtab-button { | |
175 | background-image: url("newtab.png"); | |
176 | } | |
177 | ||
178 | @media (min-resolution: 2dppx) { | |
179 | #profile-newtab-button { | |
180 | background-image: url("newtab@2x.png"); | |
181 | } | |
182 | } | |
183 | ||
184 | /* Profile call tree */ | |
185 | ||
186 | .call-tree-headers-container { | |
de5e780d | 187 | border-top: 1px solid var(--theme-splitter-color); |
e7c8bab1 RK |
188 | } |
189 | ||
d4d77dc0 RK |
190 | .call-tree-cells-container { |
191 | /* Hack: force hardware acceleration */ | |
192 | transform: translateZ(1px); | |
193 | overflow: auto; | |
194 | } | |
195 | ||
196 | .call-tree-cells-container[categories-hidden] .call-tree-category { | |
e7c8bab1 | 197 | display: none; |
d4d77dc0 RK |
198 | } |
199 | ||
200 | .call-tree-header[type="duration"], | |
201 | .call-tree-cell[type="duration"], | |
202 | .call-tree-header[type="self-duration"], | |
203 | .call-tree-cell[type="self-duration"] { | |
204 | width: 9em; | |
205 | } | |
206 | ||
207 | .call-tree-header[type="percentage"], | |
208 | .call-tree-cell[type="percentage"], | |
209 | .call-tree-header[type="self-percentage"], | |
210 | .call-tree-cell[type="self-percentage"] { | |
211 | width: 6em; | |
212 | } | |
213 | ||
214 | .call-tree-header[type="samples"], | |
215 | .call-tree-cell[type="samples"] { | |
216 | width: 5em; | |
217 | } | |
218 | ||
219 | .call-tree-header[type="function"], | |
220 | .call-tree-cell[type="function"] { | |
221 | -moz-box-flex: 1; | |
222 | } | |
223 | ||
224 | .call-tree-header, | |
225 | .call-tree-cell { | |
226 | -moz-box-align: center; | |
227 | overflow: hidden; | |
228 | padding: 1px 4px; | |
de5e780d | 229 | color: var(--theme-body-color); |
d4d77dc0 RK |
230 | } |
231 | ||
232 | .call-tree-header:not(:last-child), | |
233 | .call-tree-cell:not(:last-child) { | |
8c6555e2 RK |
234 | -moz-border-end-width: 1px; |
235 | -moz-border-end-style: solid; | |
d4d77dc0 RK |
236 | } |
237 | ||
238 | .call-tree-header, | |
239 | .call-tree-cell { | |
8c6555e2 | 240 | -moz-border-end-color: var(--cell-border-color); |
d4d77dc0 RK |
241 | } |
242 | ||
243 | .call-tree-header:not(:last-child) { | |
244 | text-align: center; | |
245 | } | |
246 | ||
247 | .call-tree-cell:not(:last-child) { | |
248 | text-align: end; | |
249 | } | |
250 | ||
251 | .call-tree-header { | |
de5e780d RK |
252 | background-color: var(--theme-contrastsidebar-background); |
253 | color: var(--theme-contrastsidebar-color); | |
d4d77dc0 RK |
254 | } |
255 | ||
256 | .call-tree-item:last-child:not(:focus) { | |
8c6555e2 | 257 | border-bottom: 1px solid var(--cell-border-color); |
d4d77dc0 RK |
258 | } |
259 | ||
260 | .call-tree-item:nth-child(2n) { | |
8c6555e2 | 261 | background-color: var(--row-alt-background-color); |
d4d77dc0 RK |
262 | } |
263 | ||
264 | .call-tree-item:hover { | |
8c6555e2 | 265 | background-color: var(--row-hover-background-color); |
d4d77dc0 RK |
266 | } |
267 | ||
268 | .call-tree-item:focus { | |
de5e780d RK |
269 | background-color: var(--theme-selection-background); |
270 | color: var(--theme-selection-color); | |
d4d77dc0 RK |
271 | } |
272 | ||
273 | .call-tree-item:focus label { | |
de5e780d | 274 | color: var(--theme-selection-color) !important; |
d4d77dc0 RK |
275 | } |
276 | ||
277 | .call-tree-item:focus .call-tree-cell { | |
8c6555e2 | 278 | -moz-border-end-color: var(--focus-cell-border-color); |
d4d77dc0 RK |
279 | } |
280 | ||
281 | .call-tree-item:not([origin="content"]) .call-tree-name, | |
282 | .call-tree-item:not([origin="content"]) .call-tree-url, | |
d533ec21 RK |
283 | .call-tree-item:not([origin="content"]) .call-tree-line, |
284 | .call-tree-item:not([origin="content"]) .call-tree-column { | |
d4d77dc0 RK |
285 | /* Style chrome and non-JS nodes differently. */ |
286 | opacity: 0.6; | |
287 | } | |
288 | ||
289 | .call-tree-url { | |
290 | -moz-margin-start: 4px !important; | |
cc7e70eb RK |
291 | cursor: pointer; |
292 | } | |
293 | ||
d4d77dc0 RK |
294 | .call-tree-url:hover { |
295 | text-decoration: underline; | |
296 | } | |
297 | ||
298 | .call-tree-url { | |
de5e780d | 299 | color: var(--theme-highlight-blue); |
d4d77dc0 RK |
300 | } |
301 | ||
302 | .call-tree-line { | |
de5e780d | 303 | color: var(--theme-content-color2); |
d4d77dc0 RK |
304 | } |
305 | ||
d533ec21 RK |
306 | .call-tree-column { |
307 | color: var(--theme-highlight-orange); | |
308 | opacity: 0.6; | |
309 | } | |
310 | ||
d4d77dc0 RK |
311 | .call-tree-host { |
312 | -moz-margin-start: 8px !important; | |
313 | font-size: 90%; | |
314 | } | |
315 | ||
316 | .call-tree-host { | |
de5e780d | 317 | color: var(--theme-highlight-pink); |
d4d77dc0 RK |
318 | } |
319 | ||
d533ec21 | 320 | .call-tree-name[value=""], |
d4d77dc0 RK |
321 | .call-tree-url[value=""], |
322 | .call-tree-line[value=""], | |
d533ec21 | 323 | .call-tree-column[value=""], |
d4d77dc0 RK |
324 | .call-tree-host[value=""] { |
325 | display: none; | |
326 | } | |
327 | ||
328 | .call-tree-zoom { | |
329 | -moz-appearance: none; | |
330 | background-color: transparent; | |
331 | background-position: center; | |
332 | background-repeat: no-repeat; | |
333 | background-size: 11px; | |
334 | min-width: 11px; | |
335 | -moz-margin-start: 8px !important; | |
336 | cursor: zoom-in; | |
337 | opacity: 0; | |
338 | } | |
339 | ||
340 | .call-tree-zoom { | |
341 | background-image: url("magnifying-glass.png"); | |
e7c8bab1 RK |
342 | } |
343 | ||
d4d77dc0 RK |
344 | @media (min-resolution: 2dppx) { |
345 | .call-tree-zoom { | |
346 | background-image: url("magnifying-glass@2x.png"); | |
347 | } | |
e7c8bab1 RK |
348 | } |
349 | ||
d4d77dc0 RK |
350 | .call-tree-item:hover .call-tree-zoom { |
351 | transition: opacity 0.3s ease-in; | |
352 | opacity: 1; | |
e7c8bab1 RK |
353 | } |
354 | ||
d4d77dc0 RK |
355 | .call-tree-item:hover .call-tree-zoom:hover { |
356 | opacity: 0; | |
624ebb51 RK |
357 | } |
358 | ||
d4d77dc0 RK |
359 | .call-tree-category { |
360 | transform: scale(0.75); | |
361 | transform-origin: center right; | |
624ebb51 | 362 | } |