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