Commit | Line | Data |
---|---|---|
7d6161c5 RK |
1 | /* vim:set ts=2 sw=2 sts=2 et: */ |
2 | /* This Source Code Form is subject to the terms of the Mozilla Public | |
3 | * License, v. 2.0. If a copy of the MPL was not distributed with this file, | |
4 | * You can obtain one at http://mozilla.org/MPL/2.0/. */ | |
5 | ||
6 | /** | |
7 | * JIT View | |
8 | */ | |
9 | ||
10 | #jit-optimizations-view { | |
11 | width: 350px; | |
12 | min-width: 200px; | |
13 | white-space: nowrap; | |
14 | --jit-tree-row-height: 14; | |
15 | --jit-tree-header-height: 16; | |
16 | } | |
17 | ||
18 | /* Override layout styles applied by minimal-xul.css */ | |
19 | #jit-optimizations-view div { | |
20 | display: block; | |
21 | } | |
22 | #jit-optimizations-view span { | |
23 | display: inline-block; | |
24 | } | |
25 | ||
26 | #jit-optimizations-view > div { | |
27 | /* For elements that need to flex to fill the available space and/or | |
28 | * scroll on overflow, we need to use the old flexbox model, since the | |
29 | * parent nodes are in the XUL namespace. The new flexbox model can't | |
30 | * properly compute dimensions and will ignore `flex: ${number}` properties, | |
31 | * since no other parent node has a flex display. */ | |
32 | display: -moz-box; | |
33 | -moz-box-flex: 1; | |
34 | -moz-box-orient: vertical; | |
35 | } | |
36 | ||
37 | #jit-optimizations-view .optimization-header, | |
38 | #jit-optimizations-view .tree * { | |
39 | /* We can, however, display child nodes as flex to take advantage of | |
40 | * horizontal/vertical inlining. */ | |
41 | display: flex; | |
42 | } | |
43 | ||
44 | #jit-optimizations-view .optimization-header { | |
45 | height: var(--jit-tree-header-height); | |
46 | padding: 2px 5px; | |
47 | background-color: var(--theme-tab-toolbar-background); | |
48 | } | |
49 | ||
50 | #jit-optimizations-view .header-title { | |
51 | font-weight: bold; | |
52 | padding-inline-end: 7px; | |
53 | } | |
54 | ||
55 | #jit-optimizations-view .tree { | |
56 | display: -moz-box; | |
57 | -moz-box-flex: 1; | |
58 | -moz-box-orient: vertical; | |
59 | overflow: auto; | |
60 | background-color: var(--theme-body-background); | |
61 | } | |
62 | ||
63 | #jit-optimizations-view .tree-node { | |
64 | height: var(--jit-tree-row-height); | |
65 | } | |
66 | ||
67 | #jit-optimizations-view .tree-node button { | |
68 | display: none; | |
69 | } | |
70 | ||
71 | #jit-optimizations-view .optimization-outcome.success { | |
72 | color: var(--theme-highlight-green); | |
73 | } | |
74 | #jit-optimizations-view .optimization-outcome.failure { | |
75 | color: var(--theme-highlight-red); | |
76 | } | |
77 | ||
6f751fd1 | 78 | .theme-dark .opt-icon::before { |
7d6161c5 RK |
79 | background-image: url(chrome://devtools/skin/images/webconsole.svg); |
80 | } | |
6f751fd1 RK |
81 | .theme-light .opt-icon::before { |
82 | background-image: url(chrome://devtools/skin/images/webconsole.svg#light-icons); | |
83 | } | |
7d6161c5 RK |
84 | |
85 | .opt-icon::before { | |
86 | display: inline-block; | |
87 | content: ""; | |
88 | background-repeat: no-repeat; | |
89 | background-size: 72px 60px; | |
90 | /* show grey "i" bubble by default */ | |
91 | background-position: -36px -36px; | |
92 | width: 10px; | |
93 | height: 10px; | |
94 | max-height: 12px; | |
95 | } | |
96 | ||
97 | .opt-icon::before { | |
98 | margin: 1px 6px 0 0; | |
99 | } | |
100 | ||
101 | .opt-icon.warning::before { | |
102 | background-position: -24px -24px; | |
103 | } | |
104 | ||
105 | /* Frame Component */ | |
7d6161c5 RK |
106 | .frame-link { |
107 | margin-inline-start: 7px; | |
108 | } |