Commit | Line | Data |
---|---|---|
eec397be RK |
1 | /* -*- Mode: javascript; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */ |
2 | /* vim: set ft=javascript ts=2 et sw=2 tw=80: */ | |
9099c61d RK |
3 | /* This Source Code Form is subject to the terms of the Mozilla Public |
4 | * License, v. 2.0. If a copy of the MPL was not distributed with this | |
5 | * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ | |
eec397be RK |
6 | |
7 | window { | |
8 | padding: 0; | |
9 | } | |
10 | ||
11 | #body { | |
12 | /* background: #000000; */ | |
13 | } | |
14 | ||
eec397be RK |
15 | /** |
16 | * Debugger content | |
17 | */ | |
18 | ||
19 | #dbg-content { | |
37953ab4 | 20 | padding: 0; |
eec397be RK |
21 | } |
22 | ||
eec397be RK |
23 | .devtools-side-splitter { |
24 | border: none; | |
25 | } | |
26 | ||
37953ab4 RK |
27 | #scripts { |
28 | max-width: 350px; | |
29 | } | |
30 | ||
eec397be RK |
31 | /** |
32 | * Lists and headers | |
33 | */ | |
34 | ||
35 | .list-item { | |
36 | padding: 2px; | |
eec397be RK |
37 | } |
38 | ||
39 | .list-item.selected { | |
40 | background: #008484; | |
41 | color: #FFCF00; | |
42 | } | |
43 | ||
44 | .list-item.empty { | |
45 | color: #8050B0; | |
46 | } | |
47 | ||
48 | /** | |
49 | * Stack frames | |
50 | */ | |
51 | ||
52 | #stackframes { | |
53 | /* background-color: white; */ | |
54 | } | |
55 | ||
56 | .dbg-stackframe { | |
57 | -moz-padding-start: 4px; | |
58 | -moz-padding-end: 4px; | |
59 | } | |
60 | ||
61 | .dbg-stackframe-name { | |
37953ab4 | 62 | -moz-padding-end: 4px; |
eec397be RK |
63 | font-weight: 600; |
64 | } | |
65 | ||
66 | /** | |
37953ab4 | 67 | * Properties view |
eec397be RK |
68 | */ |
69 | ||
70 | #variables { | |
71 | /* background-color: white; */ | |
72 | } | |
73 | ||
74 | /** | |
37953ab4 | 75 | * Property element details container |
eec397be RK |
76 | */ |
77 | ||
78 | .details { | |
79 | -moz-margin-start: 10px; | |
80 | } | |
81 | ||
82 | /** | |
83 | * Scope element | |
84 | */ | |
85 | ||
86 | .scope > .title { | |
eec397be RK |
87 | background: #E7ADE7; |
88 | border-radius: 5px; | |
89 | color: #000000; | |
90 | } | |
91 | ||
37953ab4 RK |
92 | .scope > .title > .arrow { |
93 | margin-top: -2px; | |
94 | } | |
95 | ||
eec397be RK |
96 | .scope > .title > .name { |
97 | padding-top: 2px; | |
eec397be RK |
98 | } |
99 | ||
100 | .scope > .details { | |
101 | -moz-margin-start: 2px; | |
102 | -moz-margin-end: 2px; | |
103 | } | |
104 | ||
105 | /** | |
106 | * Variable element | |
107 | */ | |
108 | ||
109 | .variable { | |
110 | -moz-margin-start: 1px; | |
111 | -moz-margin-end: 1px; | |
85cfb236 | 112 | margin-top: 2px; |
eec397be | 113 | border-bottom: 1px dotted #008484; |
85cfb236 RK |
114 | -moz-transition: background 1s ease-in-out; |
115 | background: #000000; | |
116 | } | |
117 | ||
118 | .variable[changed] { | |
119 | -moz-transition-duration: 0.4s; | |
120 | background: #FFCF00; | |
121 | } | |
122 | ||
123 | .variable[added] { | |
124 | -moz-transition-duration: 0.4s; | |
125 | background: #008484; | |
126 | } | |
127 | ||
128 | .variable > .title > .arrow { | |
129 | margin-top: -2px; | |
eec397be RK |
130 | } |
131 | ||
132 | .variable > .title > .name { | |
eec397be RK |
133 | color: #FF9F00; |
134 | font-weight: 600; | |
135 | } | |
136 | ||
137 | /** | |
138 | * Property element | |
139 | */ | |
140 | ||
85cfb236 RK |
141 | .property > .title > .arrow { |
142 | margin-top: -2px; | |
eec397be RK |
143 | } |
144 | ||
85cfb236 RK |
145 | .property > .title > .key { |
146 | color: #E7ADE7; | |
eec397be RK |
147 | } |
148 | ||
149 | /** | |
37953ab4 RK |
150 | * Non enumerable, configurable and writable variables and properties. |
151 | */ | |
152 | ||
153 | .property[proto] > .title > .key, | |
154 | .variable[non-enumerable] > .title > .name, | |
155 | .property[non-enumerable] > .title > .key { | |
156 | opacity: 0.5; | |
157 | } | |
158 | ||
159 | .variable[non-configurable] > .title > .name, | |
160 | .property[non-configurable] > .title > .key { | |
161 | border-bottom: 1px dashed #9C9CFF; | |
162 | } | |
163 | ||
164 | .variable[non-writable] > .title > .name, | |
165 | .property[non-writable] > .title > .key { | |
166 | border-bottom: 1px dashed #FF0000; | |
167 | } | |
168 | ||
169 | .variable[non-writable] > .title:after, | |
170 | .property[non-writable] > .title:after { | |
171 | content: " "; | |
172 | display: inline-block; | |
173 | width: 16px; | |
174 | height: 16px; | |
175 | background: url("chrome://browser/skin/identity-icons-https.png") no-repeat; | |
176 | opacity: 0.5; | |
177 | } | |
178 | ||
179 | /** | |
180 | * Property values colors | |
eec397be RK |
181 | */ |
182 | ||
183 | .token-undefined { | |
184 | -moz-padding-start: 6px; | |
185 | color: #8050B0; | |
186 | } | |
187 | ||
188 | .token-null { | |
189 | -moz-padding-start: 6px; | |
190 | color: #008484; | |
191 | } | |
192 | ||
193 | .token-boolean { | |
194 | -moz-padding-start: 6px; | |
195 | color: #FFCF00; | |
196 | } | |
197 | ||
198 | .token-number { | |
199 | -moz-padding-start: 6px; | |
200 | color: #E7ADE7; | |
201 | } | |
202 | ||
203 | .token-string { | |
204 | -moz-padding-start: 6px; | |
205 | color: #9C9CFF; | |
206 | } | |
207 | ||
208 | .token-other { | |
209 | -moz-padding-start: 6px; | |
210 | color: #FF9F00; | |
211 | } | |
212 | ||
213 | /** | |
214 | * Expand/collapse arrow | |
215 | */ | |
216 | ||
217 | .arrow { | |
218 | width: 9px; | |
219 | height: 9px; | |
220 | -moz-margin-start: 5px; | |
221 | -moz-margin-end: 5px; | |
85cfb236 | 222 | margin-top: -2px; |
eec397be RK |
223 | background: url("chrome://global/skin/tree/twisty-closed.gif") center center no-repeat; |
224 | } | |
225 | ||
226 | .arrow[open] { | |
227 | background-image: url("chrome://global/skin/tree/twisty-open.gif"); | |
228 | } | |
229 | ||
230 | .scope > .title > .arrow { | |
231 | background-image: url("chrome://global/skin/tree/twisty-closed-selected.gif"); | |
232 | } | |
233 | ||
234 | .scope > .title > .arrow[open] { | |
235 | background-image: url("chrome://global/skin/tree/twisty-open-selected.gif"); | |
236 | } | |
237 | ||
238 | /** | |
239 | * Animations | |
240 | */ | |
241 | ||
37953ab4 | 242 | .details[open][animated] { |
eec397be RK |
243 | -moz-animation-duration: 0.25s; |
244 | -moz-animation-name: showblock; | |
245 | } | |
246 | ||
247 | @-moz-keyframes showblock { | |
248 | from { | |
249 | opacity: 0; | |
250 | -moz-transform-origin: top; | |
251 | -moz-transform: scaleY(0); | |
252 | } | |
253 | ||
254 | to { | |
255 | opacity: 1; | |
256 | -moz-transform-origin: top; | |
257 | -moz-transform: scaleY(1); | |
258 | } | |
259 | } | |
260 | ||
5322a392 RK |
261 | /** |
262 | * Toolbar Controls | |
263 | */ | |
264 | ||
265 | #resume { | |
37953ab4 | 266 | list-style-image: url("chrome://browser/skin/devtools/debugger-play.png"); |
5322a392 RK |
267 | -moz-image-region: rect(0px, 16px, 16px, 0px); |
268 | } | |
269 | ||
270 | #resume[checked=true], | |
271 | #resume:hover { | |
272 | -moz-image-region: rect(0px, 32px, 16px, 16px); | |
273 | } | |
274 | ||
275 | #step-over { | |
276 | list-style-image: url("chrome://browser/skin/devtools/debugger-step-over.png"); | |
277 | -moz-image-region: rect(0px, 16px, 16px, 0px); | |
278 | } | |
279 | #step-over:hover { | |
280 | -moz-image-region: rect(0px, 32px, 16px, 16px); | |
281 | } | |
282 | ||
283 | #step-in { | |
284 | list-style-image: url("chrome://browser/skin/devtools/debugger-step-in.png"); | |
285 | -moz-image-region: rect(0px, 16px, 16px, 0px); | |
286 | } | |
287 | #step-in:hover { | |
288 | -moz-image-region: rect(0px, 32px, 16px, 16px); | |
289 | } | |
290 | ||
291 | #step-out { | |
292 | list-style-image: url("chrome://browser/skin/devtools/debugger-step-out.png"); | |
293 | -moz-image-region: rect(0px, 16px, 16px, 0px); | |
294 | } | |
295 | #step-out:hover { | |
296 | -moz-image-region: rect(0px, 32px, 16px, 16px); | |
297 | } | |
298 | ||
299 | #debugger-controls > toolbarbutton { | |
300 | } | |
301 | ||
302 | #debugger-controls > toolbarbutton:last-of-type { | |
303 | } | |
304 | ||
305 | #debugger-controls { | |
306 | } |