second part of syncing LCARStrek with Firefox 38 windows theme changes
[themes.git] / LCARStrek / browser / devtools / profiler.css
CommitLineData
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
16window {
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}