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 | ||
d533ec21 RK |
196 | .call-tree-cells-container[allocations-hidden] .call-tree-cell[type="allocations"], |
197 | .call-tree-cells-container[allocations-hidden] .call-tree-cell[type="self-allocations"], | |
d4d77dc0 | 198 | .call-tree-cells-container[categories-hidden] .call-tree-category { |
e7c8bab1 | 199 | display: none; |
d4d77dc0 RK |
200 | } |
201 | ||
202 | .call-tree-header[type="duration"], | |
203 | .call-tree-cell[type="duration"], | |
204 | .call-tree-header[type="self-duration"], | |
205 | .call-tree-cell[type="self-duration"] { | |
206 | width: 9em; | |
207 | } | |
208 | ||
209 | .call-tree-header[type="percentage"], | |
210 | .call-tree-cell[type="percentage"], | |
211 | .call-tree-header[type="self-percentage"], | |
212 | .call-tree-cell[type="self-percentage"] { | |
213 | width: 6em; | |
214 | } | |
215 | ||
216 | .call-tree-header[type="samples"], | |
217 | .call-tree-cell[type="samples"] { | |
218 | width: 5em; | |
219 | } | |
220 | ||
221 | .call-tree-header[type="function"], | |
222 | .call-tree-cell[type="function"] { | |
223 | -moz-box-flex: 1; | |
224 | } | |
225 | ||
226 | .call-tree-header, | |
227 | .call-tree-cell { | |
228 | -moz-box-align: center; | |
229 | overflow: hidden; | |
230 | padding: 1px 4px; | |
de5e780d | 231 | color: var(--theme-body-color); |
d4d77dc0 RK |
232 | } |
233 | ||
234 | .call-tree-header:not(:last-child), | |
235 | .call-tree-cell:not(:last-child) { | |
8c6555e2 RK |
236 | -moz-border-end-width: 1px; |
237 | -moz-border-end-style: solid; | |
d4d77dc0 RK |
238 | } |
239 | ||
240 | .call-tree-header, | |
241 | .call-tree-cell { | |
8c6555e2 | 242 | -moz-border-end-color: var(--cell-border-color); |
d4d77dc0 RK |
243 | } |
244 | ||
245 | .call-tree-header:not(:last-child) { | |
246 | text-align: center; | |
247 | } | |
248 | ||
249 | .call-tree-cell:not(:last-child) { | |
250 | text-align: end; | |
251 | } | |
252 | ||
253 | .call-tree-header { | |
de5e780d RK |
254 | background-color: var(--theme-contrastsidebar-background); |
255 | color: var(--theme-contrastsidebar-color); | |
d4d77dc0 RK |
256 | } |
257 | ||
258 | .call-tree-item:last-child:not(:focus) { | |
8c6555e2 | 259 | border-bottom: 1px solid var(--cell-border-color); |
d4d77dc0 RK |
260 | } |
261 | ||
262 | .call-tree-item:nth-child(2n) { | |
8c6555e2 | 263 | background-color: var(--row-alt-background-color); |
d4d77dc0 RK |
264 | } |
265 | ||
266 | .call-tree-item:hover { | |
8c6555e2 | 267 | background-color: var(--row-hover-background-color); |
d4d77dc0 RK |
268 | } |
269 | ||
270 | .call-tree-item:focus { | |
de5e780d RK |
271 | background-color: var(--theme-selection-background); |
272 | color: var(--theme-selection-color); | |
d4d77dc0 RK |
273 | } |
274 | ||
275 | .call-tree-item:focus label { | |
de5e780d | 276 | color: var(--theme-selection-color) !important; |
d4d77dc0 RK |
277 | } |
278 | ||
279 | .call-tree-item:focus .call-tree-cell { | |
8c6555e2 | 280 | -moz-border-end-color: var(--focus-cell-border-color); |
d4d77dc0 RK |
281 | } |
282 | ||
283 | .call-tree-item:not([origin="content"]) .call-tree-name, | |
284 | .call-tree-item:not([origin="content"]) .call-tree-url, | |
d533ec21 RK |
285 | .call-tree-item:not([origin="content"]) .call-tree-line, |
286 | .call-tree-item:not([origin="content"]) .call-tree-column { | |
d4d77dc0 RK |
287 | /* Style chrome and non-JS nodes differently. */ |
288 | opacity: 0.6; | |
289 | } | |
290 | ||
291 | .call-tree-url { | |
292 | -moz-margin-start: 4px !important; | |
cc7e70eb RK |
293 | cursor: pointer; |
294 | } | |
295 | ||
d4d77dc0 RK |
296 | .call-tree-url:hover { |
297 | text-decoration: underline; | |
298 | } | |
299 | ||
300 | .call-tree-url { | |
de5e780d | 301 | color: var(--theme-highlight-blue); |
d4d77dc0 RK |
302 | } |
303 | ||
304 | .call-tree-line { | |
de5e780d | 305 | color: var(--theme-content-color2); |
d4d77dc0 RK |
306 | } |
307 | ||
d533ec21 RK |
308 | .call-tree-column { |
309 | color: var(--theme-highlight-orange); | |
310 | opacity: 0.6; | |
311 | } | |
312 | ||
d4d77dc0 RK |
313 | .call-tree-host { |
314 | -moz-margin-start: 8px !important; | |
315 | font-size: 90%; | |
316 | } | |
317 | ||
318 | .call-tree-host { | |
de5e780d | 319 | color: var(--theme-highlight-pink); |
d4d77dc0 RK |
320 | } |
321 | ||
d533ec21 | 322 | .call-tree-name[value=""], |
d4d77dc0 RK |
323 | .call-tree-url[value=""], |
324 | .call-tree-line[value=""], | |
d533ec21 | 325 | .call-tree-column[value=""], |
d4d77dc0 RK |
326 | .call-tree-host[value=""] { |
327 | display: none; | |
328 | } | |
329 | ||
330 | .call-tree-zoom { | |
331 | -moz-appearance: none; | |
332 | background-color: transparent; | |
333 | background-position: center; | |
334 | background-repeat: no-repeat; | |
335 | background-size: 11px; | |
336 | min-width: 11px; | |
337 | -moz-margin-start: 8px !important; | |
338 | cursor: zoom-in; | |
339 | opacity: 0; | |
340 | } | |
341 | ||
342 | .call-tree-zoom { | |
343 | background-image: url("magnifying-glass.png"); | |
e7c8bab1 RK |
344 | } |
345 | ||
d4d77dc0 RK |
346 | @media (min-resolution: 2dppx) { |
347 | .call-tree-zoom { | |
348 | background-image: url("magnifying-glass@2x.png"); | |
349 | } | |
e7c8bab1 RK |
350 | } |
351 | ||
d4d77dc0 RK |
352 | .call-tree-item:hover .call-tree-zoom { |
353 | transition: opacity 0.3s ease-in; | |
354 | opacity: 1; | |
e7c8bab1 RK |
355 | } |
356 | ||
d4d77dc0 RK |
357 | .call-tree-item:hover .call-tree-zoom:hover { |
358 | opacity: 0; | |
624ebb51 RK |
359 | } |
360 | ||
d4d77dc0 RK |
361 | .call-tree-category { |
362 | transform: scale(0.75); | |
363 | transform-origin: center right; | |
624ebb51 | 364 | } |