browser/themes/shared/devtools/canvasdebugger.inc.css@6474c204b198
browser/themes/shared/devtools/canvasdebugger.inc.css
Wed, 31 Dec 2014 06:09:35 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:09:35 +0100
- changeset 0
- 6474c204b198
- permissions
- -rw-r--r--
Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.
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 file,
3 * You can obtain one at http://mozilla.org/MPL/2.0/. */
5 %filter substitution
6 %define darkCheckerboardBackground #000
7 %define lightCheckerboardBackground #fff
8 %define checkerboardCell rgba(128,128,128,0.2)
9 %define checkerboardPattern linear-gradient(45deg, @checkerboardCell@ 25%, transparent 25%, transparent 75%, @checkerboardCell@ 75%, @checkerboardCell@), linear-gradient(45deg, @checkerboardCell@ 25%, transparent 25%, transparent 75%, @checkerboardCell@ 75%, @checkerboardCell@)
10 %define gutterWidth 3em
11 %define gutterPaddingStart 22px
13 /* Reload and waiting notices */
15 .notice-container {
16 margin-top: -50vh;
17 font-size: 120%;
18 }
20 .theme-dark .notice-container {
21 background: url(background-noise-toolbar.png), #343c45; /* Toolbars */
22 color: #f5f7fa; /* Light foreground text */
23 }
25 .theme-light .notice-container {
26 background: url(background-noise-toolbar.png), #f0f1f2; /* Toolbars */
27 color: #585959; /* Grey foreground text */
28 }
30 #reload-notice > button {
31 min-height: 2em;
32 }
34 #empty-notice > button {
35 min-width: 30px;
36 min-height: 28px;
37 margin: 0;
38 list-style-image: url(profiler-stopwatch.png);
39 -moz-image-region: rect(0px,16px,16px,0px);
40 }
42 #empty-notice > button .button-text {
43 display: none;
44 }
46 .theme-dark #import-notice {
47 font-size: 250%;
48 color: rgba(255,255,255,0.2);
49 }
51 .theme-light #import-notice {
52 font-size: 250%;
53 color: rgba(0,0,0,0.2);
54 }
56 /* Snapshots pane */
58 #snapshots-pane > tabs {
59 -moz-border-end: 1px solid;
60 }
62 #snapshots-pane .devtools-toolbar {
63 -moz-border-end: 1px solid;
64 }
66 .theme-dark #snapshots-pane > tabs,
67 .theme-dark #snapshots-pane .devtools-toolbar {
68 -moz-border-end-color: black; /* Match the splitter color. */
69 }
71 .theme-light #snapshots-pane > tabs,
72 .theme-light #snapshots-pane .devtools-toolbar {
73 -moz-border-end-color: #aaa; /* Match the splitter color. */
74 }
76 #record-snapshot {
77 list-style-image: url("chrome://browser/skin/devtools/profiler-stopwatch.png");
78 -moz-image-region: rect(0px,16px,16px,0px);
79 }
81 #record-snapshot[checked] {
82 -moz-image-region: rect(0px,32px,16px,16px);
83 }
85 /* Snapshots items */
87 .snapshot-item-thumbnail {
88 image-rendering: -moz-crisp-edges;
89 background-image: @checkerboardPattern@;
90 background-size: 12px 12px, 12px 12px;
91 background-position: 0px 0px, 6px 6px;
92 background-repeat: repeat, repeat;
93 }
95 .snapshot-item-thumbnail[flipped=true] {
96 transform: scaleY(-1);
97 }
99 .theme-dark .snapshot-item-thumbnail {
100 background-color: @darkCheckerboardBackground@;
101 }
103 .theme-light .snapshot-item-thumbnail {
104 background-color: @lightCheckerboardBackground@;
105 }
107 .snapshot-item-details {
108 -moz-padding-start: 6px;
109 }
111 .snapshot-item-calls {
112 padding-top: 4px;
113 font-size: 80%;
114 }
116 .snapshot-item-save {
117 padding-bottom: 2px;
118 font-size: 90%;
119 }
121 .theme-dark .snapshot-item-calls,
122 .theme-dark .snapshot-item-save {
123 color: #b6babf; /* Foreground (Text) - Grey */
124 }
126 .theme-light .snapshot-item-calls,
127 .theme-light .snapshot-item-save {
128 color: #585959; /* Foreground (Text) - Grey */
129 }
131 .snapshot-item-save {
132 text-decoration: underline;
133 cursor: pointer;
134 }
136 .snapshot-item-save[disabled=true] {
137 text-decoration: none;
138 pointer-events: none;
139 }
141 .snapshot-item-footer[saving]::before {
142 display: inline-block;
143 content: "";
144 background: url("chrome://global/skin/icons/loading_16.png") center no-repeat;
145 width: 16px;
146 height: 16px;
147 margin-top: -2px;
148 -moz-margin-end: 4px;
149 }
151 #snapshots-list .selected label {
152 /* Text inside a selected item should not be custom colored. */
153 color: inherit !important;
154 }
156 /* Debugging pane controls */
158 #resume {
159 list-style-image: url(debugger-play.png);
160 -moz-image-region: rect(0px,32px,16px,16px);
161 }
163 #step-over {
164 list-style-image: url(debugger-step-over.png);
165 }
167 #step-in {
168 list-style-image: url(debugger-step-in.png);
169 }
171 #step-out {
172 list-style-image: url(debugger-step-out.png);
173 }
175 #debugging-controls > toolbarbutton {
176 transition: opacity 0.15s ease-in-out;
177 }
179 #debugging-controls > toolbarbutton[disabled=true] {
180 opacity: 0.5;
181 }
183 #calls-slider {
184 -moz-padding-end: 24px;
185 }
187 #calls-slider .scale-slider {
188 margin: 0;
189 }
191 #debugging-toolbar-sizer-button {
192 /* This button's only purpose in life is to make the
193 container .devtools-toolbar have the right height. */
194 visibility: hidden;
195 min-width: 1px;
196 }
198 /* Calls list pane */
200 #calls-list .side-menu-widget-container {
201 background: transparent;
202 }
204 #calls-list .side-menu-widget-item {
205 padding: 0;
206 }
208 /* Calls list items */
210 .theme-dark #calls-list .side-menu-widget-item {
211 border-color: #111;
212 border-bottom-color: transparent;
213 }
215 .theme-light #calls-list .side-menu-widget-item {
216 border-color: #eee;
217 border-bottom-color: transparent;
218 }
220 .theme-dark .call-item-view:hover {
221 background-color: rgba(255,255,255,.025);
222 }
224 .theme-light .call-item-view:hover {
225 background-color: rgba(0,0,0,.025);
226 }
228 .theme-dark .call-item-view[draw-call] {
229 background-color: rgba(112,191,83,0.15);
230 }
232 .theme-light .call-item-view[draw-call] {
233 background-color: rgba(44,187,15,0.1);
234 }
236 .theme-dark .call-item-view[interesting-call] {
237 background-color: rgba(223,128,255,0.15);
238 }
240 .theme-light .call-item-view[interesting-call] {
241 background-color: rgba(184,46,229,0.1);
242 }
244 .call-item-gutter {
245 width: calc(@gutterWidth@ + @gutterPaddingStart@);
246 -moz-padding-start: @gutterPaddingStart@;
247 -moz-padding-end: 4px;
248 padding-top: 2px;
249 padding-bottom: 2px;
250 -moz-border-end: 1px solid;
251 -moz-margin-end: 6px;
252 }
254 .selected .call-item-gutter {
255 background-image: url("editor-debug-location.png");
256 background-repeat: no-repeat;
257 background-position: 6px center;
258 background-size: 12px;
259 }
261 .theme-dark .call-item-gutter {
262 background-color: #181d20;
263 color: #5f7387;
264 border-color: #000;
265 }
267 .theme-light .call-item-gutter {
268 background-color: #f7f7f7;
269 color: #667380;
270 border-color: #aaa;
271 }
273 .call-item-index {
274 text-align: end;
275 }
277 .theme-dark .call-item-context {
278 color: #eb5368; /* Highlight Orange */
279 }
281 .theme-light .call-item-context {
282 color: #f13c00; /* Highlight Orange */
283 }
285 .theme-dark .call-item-name {
286 color: #46afe3; /* Highlight Blue */
287 }
289 .theme-light .call-item-name {
290 color: #0088cc; /* Highlight Blue */
291 }
293 .call-item-location {
294 -moz-padding-start: 2px;
295 -moz-padding-end: 6px;
296 text-align: end;
297 cursor: pointer;
298 }
300 .theme-dark .call-item-location:hover {
301 color: #0088cc; /* Highlight Blue */
302 }
304 .theme-light .call-item-location:hover {
305 color: #46afe3; /* Highlight Blue */
306 }
308 .call-item-view:hover .call-item-location,
309 .call-item-view[expanded] .call-item-location {
310 text-decoration: underline;
311 }
313 .theme-dark .call-item-location {
314 border-color: #111;
315 color: #5e88b0; /* Highlight Blue-Grey */
316 }
318 .theme-light .call-item-location {
319 border-color: #eee;
320 color: #5f88b0; /* Highlight Blue-Grey */
321 }
323 .call-item-stack {
324 -moz-padding-start: calc(@gutterWidth@ + @gutterPaddingStart@);
325 padding-bottom: 10px;
326 }
328 .theme-dark .call-item-stack {
329 background: rgba(0,0,0,0.9);
330 }
332 .theme-light .call-item-stack {
333 background: rgba(255,255,255,0.9);
334 }
336 .call-item-stack-fn {
337 padding-top: 2px;
338 padding-bottom: 2px;
339 }
341 .call-item-stack-fn-location {
342 -moz-padding-start: 2px;
343 -moz-padding-end: 6px;
344 text-align: end;
345 cursor: pointer;
346 text-decoration: underline;
347 }
349 .theme-dark .call-item-stack-fn-name {
350 color: #a9bacb; /* Content (Text) - Light */
351 }
353 .theme-light .call-item-stack-fn-name {
354 color: #667380; /* Content (Text) - Dark Grey */
355 }
357 .theme-dark .call-item-stack-fn-location {
358 color: #5e88b0; /* Highlight Blue-Grey */
359 }
361 .theme-light .call-item-stack-fn-location {
362 color: #5e88b0; /* Highlight Blue-Grey */
363 }
365 .theme-dark .call-item-stack-fn-location:hover {
366 color: #0088cc; /* Highlight Blue */
367 }
369 .theme-light .call-item-stack-fn-location:hover {
370 color: #46afe3; /* Highlight Blue */
371 }
373 #calls-list .selected .call-item-contents > label:not(.call-item-gutter) {
374 /* Text inside a selected item should not be custom colored. */
375 color: inherit !important;
376 }
378 /* Rendering preview */
380 #screenshot-container {
381 background-image: @checkerboardPattern@;
382 background-size: 30px 30px, 30px 30px;
383 background-position: 0px 0px, 15px 15px;
384 background-repeat: repeat, repeat;
385 }
387 .theme-dark #screenshot-container {
388 background-color: @darkCheckerboardBackground@;
389 }
391 .theme-light #screenshot-container {
392 background-color: @lightCheckerboardBackground@;
393 }
395 @media (min-width: 701px) {
396 #screenshot-container {
397 width: 30vw;
398 max-width: 50vw;
399 min-width: 100px;
400 }
401 }
403 @media (max-width: 700px) {
404 #screenshot-container {
405 height: 40vh;
406 max-height: 70vh;
407 min-height: 100px;
408 }
409 }
411 #screenshot-image {
412 background-image: -moz-element(#screenshot-rendering);
413 background-size: contain;
414 background-position: center, center;
415 background-repeat: no-repeat;
416 }
418 #screenshot-image[flipped=true] {
419 transform: scaleY(-1);
420 }
422 #screenshot-dimensions {
423 padding-top: 4px;
424 padding-bottom: 4px;
425 text-align: center;
426 }
428 .theme-dark #screenshot-dimensions {
429 background-color: rgba(0,0,0,0.4);
430 }
432 .theme-light #screenshot-dimensions {
433 background-color: rgba(255,255,255,0.8);
434 }
436 /* Snapshot filmstrip */
438 #snapshot-filmstrip {
439 overflow: hidden;
440 }
442 .theme-dark #snapshot-filmstrip {
443 border-top: 1px solid #000;
444 background-image: url(background-noise-toolbar.png);
445 color: #f5f7fa; /* Light foreground text */
446 }
448 .theme-light #snapshot-filmstrip {
449 border-top: 1px solid #aaa;
450 background-image: url(background-noise-toolbar.png);
451 color: #585959; /* Grey foreground text */
452 }
454 .filmstrip-thumbnail {
455 image-rendering: -moz-crisp-edges;
456 background-image: @checkerboardPattern@;
457 background-size: 12px 12px, 12px 12px;
458 background-position: 0px -1px, 6px 5px;
459 background-repeat: repeat, repeat;
460 background-origin: content-box;
461 cursor: pointer;
462 padding-top: 1px;
463 padding-bottom: 1px;
464 transition: opacity 0.1s ease-in-out;
465 }
467 .filmstrip-thumbnail[flipped=true] {
468 transform: scaleY(-1);
469 }
471 .theme-dark .filmstrip-thumbnail {
472 background-color: @darkCheckerboardBackground@;
473 }
475 .theme-light .filmstrip-thumbnail {
476 background-color: @lightCheckerboardBackground@;
477 }
479 .theme-dark .filmstrip-thumbnail {
480 -moz-border-end: 1px solid #000;
481 }
483 .theme-light .filmstrip-thumbnail {
484 -moz-border-end: 1px solid #aaa;
485 }
487 .theme-dark #snapshot-filmstrip > .filmstrip-thumbnail:hover,
488 .theme-dark #snapshot-filmstrip:not(:hover) > .filmstrip-thumbnail[highlighted] {
489 border: 1px solid #46afe3; /* Highlight Blue */
490 margin: 0 0 0 -1px;
491 padding: 0;
492 opacity: 0.66;
493 }
495 .theme-light #snapshot-filmstrip > .filmstrip-thumbnail:hover,
496 .theme-light #snapshot-filmstrip:not(:hover) > .filmstrip-thumbnail[highlighted] {
497 border: 1px solid #0088cc; /* Highlight Blue */
498 margin: 0 0 0 -1px;
499 padding: 0;
500 opacity: 0.66;
501 }
