|
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 .treeViewContainer { |
|
6 -moz-user-select: none; |
|
7 user-select: none; |
|
8 cursor: default; |
|
9 line-height: 16px; |
|
10 height: 100%; |
|
11 outline: none; /* override the browser's focus styling */ |
|
12 position: relative; |
|
13 } |
|
14 |
|
15 .treeHeader { |
|
16 position: absolute; |
|
17 top: 0; |
|
18 right: 0; |
|
19 left: 0; |
|
20 height: 16px; |
|
21 margin: 0; |
|
22 padding: 0; |
|
23 } |
|
24 |
|
25 .treeColumnHeader { |
|
26 position: absolute; |
|
27 display: block; |
|
28 background: linear-gradient(#FFF 45%, #EEE 60%); |
|
29 margin: 0; |
|
30 padding: 0; |
|
31 top: 0; |
|
32 height: 15px; |
|
33 line-height: 15px; |
|
34 border: 0 solid #CCC; |
|
35 border-bottom-width: 1px; |
|
36 text-indent: 5px; |
|
37 } |
|
38 |
|
39 .treeColumnHeader:not(:last-child) { |
|
40 border-right-width: 1px; |
|
41 } |
|
42 |
|
43 .treeColumnHeader0 { |
|
44 left: 0; |
|
45 width: 86px; |
|
46 } |
|
47 |
|
48 .treeColumnHeader1 { |
|
49 left: 99px; |
|
50 width: 35px; |
|
51 } |
|
52 |
|
53 .treeColumnHeader0, |
|
54 .treeColumnHeader1 { |
|
55 text-align: right; |
|
56 padding-right: 12px; |
|
57 } |
|
58 |
|
59 .treeColumnHeader2 { |
|
60 left: 147px; |
|
61 right: 0; |
|
62 } |
|
63 |
|
64 .treeViewVerticalScrollbox { |
|
65 position: absolute; |
|
66 top: 16px; |
|
67 left: 0; |
|
68 right: 0; |
|
69 bottom: 0; |
|
70 overflow-y: scroll; |
|
71 overflow-x: hidden; |
|
72 } |
|
73 |
|
74 .treeViewNode, |
|
75 .treeViewHorizontalScrollbox { |
|
76 display: block; |
|
77 margin: 0; |
|
78 padding: 0; |
|
79 } |
|
80 |
|
81 .treeViewNode { |
|
82 min-width: -moz-min-content; |
|
83 white-space: nowrap; |
|
84 } |
|
85 |
|
86 .treeViewHorizontalScrollbox { |
|
87 padding-left: 150px; |
|
88 overflow: hidden; |
|
89 } |
|
90 |
|
91 .treeViewVerticalScrollbox, |
|
92 .treeViewHorizontalScrollbox { |
|
93 background: linear-gradient(white, white 50%, #F0F5FF 50%, #F0F5FF); |
|
94 background-size: 100px 32px; |
|
95 } |
|
96 |
|
97 .leftColumnBackground { |
|
98 background: linear-gradient(left, transparent, transparent 98px, #CCC 98px, #CCC 99px, transparent 99px), |
|
99 linear-gradient(white, white 50%, #F0F5FF 50%, #F0F5FF); |
|
100 background-size: auto, 100px 32px; |
|
101 position: absolute; |
|
102 top: 0; |
|
103 left: 0; |
|
104 width: 146px; |
|
105 min-height: 100%; |
|
106 border-right: 1px solid #CCC; |
|
107 } |
|
108 |
|
109 .sampleCount, |
|
110 .samplePercentage, |
|
111 .selfSampleCount { |
|
112 position: absolute; |
|
113 text-align: right; |
|
114 } |
|
115 |
|
116 .sampleCount { |
|
117 left: 2px; |
|
118 width: 50px; |
|
119 } |
|
120 |
|
121 .samplePercentage { |
|
122 left: 55px; |
|
123 width: 40px; |
|
124 } |
|
125 |
|
126 .selfSampleCount { |
|
127 left: 98px; |
|
128 width: 45px; |
|
129 padding-right: 2px; |
|
130 border: solid #CCC; |
|
131 border-width: 0 1px; |
|
132 } |
|
133 |
|
134 .libraryName { |
|
135 margin-left: 10px; |
|
136 color: #999; |
|
137 } |
|
138 |
|
139 .treeViewNode > .treeViewNodeList { |
|
140 margin-left: 1em; |
|
141 } |
|
142 |
|
143 .treeViewNode.collapsed > .treeViewNodeList { |
|
144 display: none; |
|
145 } |
|
146 |
|
147 .treeLine { |
|
148 /* extend the selection background almost infinitely to the left */ |
|
149 margin-left: -10000px; |
|
150 padding-left: 10000px; |
|
151 } |
|
152 |
|
153 .treeLine.selected { |
|
154 color: black; |
|
155 background-color: -moz-dialog; |
|
156 } |
|
157 |
|
158 .treeLine.selected > .sampleCount { |
|
159 background-color: inherit; |
|
160 margin-left: -2px; |
|
161 padding-left: 2px; |
|
162 padding-right: 95px; |
|
163 margin-right: -95px; |
|
164 } |
|
165 |
|
166 .treeViewContainer:focus .treeLine.selected { |
|
167 color: highlighttext; |
|
168 background-color: highlight; |
|
169 } |
|
170 |
|
171 .treeViewContainer:focus .treeLine.selected > .libraryName { |
|
172 color: #CCC; |
|
173 } |
|
174 |
|
175 .expandCollapseButton, |
|
176 .focusCallstackButton { |
|
177 background: none 0 0 no-repeat transparent; |
|
178 margin: 0; |
|
179 padding: 0; |
|
180 border: 0; |
|
181 width: 16px; |
|
182 height: 16px; |
|
183 overflow: hidden; |
|
184 vertical-align: top; |
|
185 color: transparent; |
|
186 font-size: 0; |
|
187 } |
|
188 |
|
189 .expandCollapseButton { |
|
190 background-image: url(../images/treetwisty.svg); |
|
191 } |
|
192 |
|
193 .focusCallstackButton { |
|
194 background-image: url(../images/circlearrow.svg); |
|
195 margin-left: 5px; |
|
196 visibility: hidden; |
|
197 } |
|
198 |
|
199 .expandCollapseButton:active:hover, |
|
200 .focusCallstackButton:active:hover { |
|
201 background-position: -16px 0; |
|
202 } |
|
203 |
|
204 .treeViewNode.collapsed > .treeLine > .expandCollapseButton { |
|
205 background-position: 0 -16px; |
|
206 } |
|
207 |
|
208 .treeViewNode.collapsed > .treeLine > .expandCollapseButton:active:hover { |
|
209 background-position: -16px -16px; |
|
210 } |
|
211 |
|
212 .treeViewContainer:focus .treeLine.selected > .expandCollapseButton, |
|
213 .treeViewContainer:focus .treeLine.selected > .focusCallstackButton { |
|
214 background-position: -32px 0; |
|
215 } |
|
216 |
|
217 .treeViewContainer:focus .treeViewNode.collapsed > .treeLine.selected > .expandCollapseButton { |
|
218 background-position: -32px -16px; |
|
219 } |
|
220 |
|
221 .treeViewContainer:focus .treeLine.selected > .expandCollapseButton:active:hover, |
|
222 .treeViewContainer:focus .treeLine.selected > .focusCallstackButton:active:hover { |
|
223 background-position: -48px 0; |
|
224 } |
|
225 |
|
226 .treeViewContainer:focus .treeViewNode.collapsed > .treeLine.selected > .expandCollapseButton:active:hover { |
|
227 background-position: -48px -16px; |
|
228 } |
|
229 |
|
230 .treeViewNode.leaf > * > .expandCollapseButton { |
|
231 visibility: hidden; |
|
232 } |
|
233 |
|
234 .treeLine:hover > .focusCallstackButton { |
|
235 visibility: visible; |
|
236 } |