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 | ||
78 | .opt-icon::before { | |
79 | background-image: url(chrome://devtools/skin/images/webconsole.svg); | |
80 | } | |
81 | ||
82 | .opt-icon::before { | |
83 | display: inline-block; | |
84 | content: ""; | |
85 | background-repeat: no-repeat; | |
86 | background-size: 72px 60px; | |
87 | /* show grey "i" bubble by default */ | |
88 | background-position: -36px -36px; | |
89 | width: 10px; | |
90 | height: 10px; | |
91 | max-height: 12px; | |
92 | } | |
93 | ||
94 | .opt-icon::before { | |
95 | margin: 1px 6px 0 0; | |
96 | } | |
97 | ||
98 | .opt-icon.warning::before { | |
99 | background-position: -24px -24px; | |
100 | } | |
101 | ||
102 | /* Frame Component */ | |
103 | .focused .frame-link-filename, | |
104 | .focused .frame-link-column, | |
105 | .focused .frame-link-line, | |
106 | .focused .frame-link-host, | |
107 | .focused .frame-link-colon { | |
108 | color: var(--theme-selection-color); | |
109 | } | |
110 | ||
111 | .frame-link { | |
112 | margin-inline-start: 7px; | |
113 | } | |
114 | ||
115 | .frame-link-filename { | |
116 | color: var(--theme-highlight-blue); | |
117 | cursor: pointer; | |
118 | } | |
119 | ||
120 | .frame-link-filename:hover { | |
121 | text-decoration: underline; | |
122 | } | |
123 | ||
124 | .frame-link-column, | |
125 | .frame-link-line, | |
126 | .frame-link-colon { | |
127 | color: var(--theme-highlight-orange); | |
128 | } | |
129 | ||
130 | .frame-link-host { | |
131 | margin-inline-start: 5px; | |
132 | font-size: 90%; | |
133 | color: var(--theme-content-color2); | |
134 | } | |
135 | ||
136 | .frame-link-function-display-name { | |
137 | margin-inline-end: 5px; | |
138 | } |