second part of syncing LCARStrek with Firefox 38 windows theme changes
[themes.git] / LCARStrek / browser / devtools / profiler.css
... / ...
CommitLineData
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
5/* === file identical to profiler.inc.css === */
6
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
16window {
17 padding: 0;
18}
19
20/* Reload and waiting notices */
21
22.notice-container {
23 margin-top: -50vh;
24 font-size: 120%;
25 background-color: var(--theme-toolbar-background);
26 color: var(--theme-body-color);
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 {
61 -moz-border-end-color: var(--theme-splitter-color);
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%;
84}
85
86.recording-item-footer {
87 padding-top: 4px;
88 font-size: 90%;
89}
90
91.recording-item-save {
92 text-decoration: underline;
93 cursor: pointer;
94}
95
96.recording-item-duration,
97.recording-item-save {
98 color: var(--theme-body-color-alt);
99}
100
101#recordings-list .selected label {
102 /* Text inside a selected item should not be custom colored. */
103 color: inherit !important;
104}
105
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;
124}
125
126#profile-content tab {
127 color: var(--theme-body-color);
128}
129
130#profile-content tab:not([selected]) {
131 cursor: pointer;
132}
133
134#profile-content tab[covered] {
135 opacity: 0;
136 transform: translateY(100%);
137}
138
139#profile-content tab {
140 -moz-appearance: none;
141 -moz-border-end: 1px solid var(--theme-splitter-color);
142}
143
144#profile-content tab:hover {
145 background-color: var(--theme-hover-background);
146 color: var(--theme-hover-color);
147}
148
149#profile-content tab[selected] {
150 background-color: var(--theme-selection-background);
151 color: var(--theme-selection-color);
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 {
187 border-top: 1px solid var(--theme-splitter-color);
188}
189
190.call-tree-cells-container {
191 /* Hack: force hardware acceleration */
192 transform: translateZ(1px);
193 overflow: auto;
194}
195
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"],
198.call-tree-cells-container[categories-hidden] .call-tree-category {
199 display: none;
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;
231 color: var(--theme-body-color);
232}
233
234.call-tree-header:not(:last-child),
235.call-tree-cell:not(:last-child) {
236 -moz-border-end-width: 1px;
237 -moz-border-end-style: solid;
238}
239
240.call-tree-header,
241.call-tree-cell {
242 -moz-border-end-color: var(--cell-border-color);
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 {
254 background-color: var(--theme-contrastsidebar-background);
255 color: var(--theme-contrastsidebar-color);
256}
257
258.call-tree-item:last-child:not(:focus) {
259 border-bottom: 1px solid var(--cell-border-color);
260}
261
262.call-tree-item:nth-child(2n) {
263 background-color: var(--row-alt-background-color);
264}
265
266.call-tree-item:hover {
267 background-color: var(--row-hover-background-color);
268}
269
270.call-tree-item:focus {
271 background-color: var(--theme-selection-background);
272 color: var(--theme-selection-color);
273}
274
275.call-tree-item:focus label {
276 color: var(--theme-selection-color) !important;
277}
278
279.call-tree-item:focus .call-tree-cell {
280 -moz-border-end-color: var(--focus-cell-border-color);
281}
282
283.call-tree-item:not([origin="content"]) .call-tree-name,
284.call-tree-item:not([origin="content"]) .call-tree-url,
285.call-tree-item:not([origin="content"]) .call-tree-line,
286.call-tree-item:not([origin="content"]) .call-tree-column {
287 /* Style chrome and non-JS nodes differently. */
288 opacity: 0.6;
289}
290
291.call-tree-url {
292 -moz-margin-start: 4px !important;
293 cursor: pointer;
294}
295
296.call-tree-url:hover {
297 text-decoration: underline;
298}
299
300.call-tree-url {
301 color: var(--theme-highlight-blue);
302}
303
304.call-tree-line {
305 color: var(--theme-content-color2);
306}
307
308.call-tree-column {
309 color: var(--theme-highlight-orange);
310 opacity: 0.6;
311}
312
313.call-tree-host {
314 -moz-margin-start: 8px !important;
315 font-size: 90%;
316}
317
318.call-tree-host {
319 color: var(--theme-highlight-pink);
320}
321
322.call-tree-name[value=""],
323.call-tree-url[value=""],
324.call-tree-line[value=""],
325.call-tree-column[value=""],
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");
344}
345
346@media (min-resolution: 2dppx) {
347 .call-tree-zoom {
348 background-image: url("magnifying-glass@2x.png");
349 }
350}
351
352.call-tree-item:hover .call-tree-zoom {
353 transition: opacity 0.3s ease-in;
354 opacity: 1;
355}
356
357.call-tree-item:hover .call-tree-zoom:hover {
358 opacity: 0;
359}
360
361.call-tree-category {
362 transform: scale(0.75);
363 transform-origin: center right;
364}