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/. */
5 /* Animation-inspector specific theme variables */
10 --even-animation-timeline-background-color: rgba(160,144,144,0.03);
11 --command-pick-image: url(chrome://devtools/skin/images/command-pick.svg);
12 --pause-image: url(chrome://devtools/skin/images/debugger-pause.png);
13 --pause-image-2x: url(chrome://devtools/skin/images/debugger-pause@2x.png);
14 --rewind-image: url(chrome://devtools/skin/images/rewind.png);
15 --rewind-image-2x: url(chrome://devtools/skin/images/rewind@2x.png);
16 --play-image: url(chrome://devtools/skin/images/debugger-play.png);
17 --play-image-2x: url(chrome://devtools/skin/images/debugger-play@2x.png);
21 /* How high should toolbars be */
22 --toolbar-height: 20px;
23 /* How wide should the sidebar be (should be wide enough to contain long
24 property names like 'border-bottom-right-radius' without ellipsis) */
25 --timeline-sidebar-width: 200px;
26 /* How high should animations displayed in the timeline be */
27 --timeline-animation-height: 20px;
28 /* The size of a keyframe marker in the keyframes diagram */
29 --keyframes-marker-size: 10px;
30 /* The color of the time graduation borders. This should match the the color
31 devtools/client/animationinspector/utils.js */
32 --time-graduation-border-color: rgba(160, 144, 144, .5);
36 --timeline-border-color: var(--theme-body-color);
37 --timeline-background-color: var(--theme-splitter-color);
40 .animation.cssanimation {
41 --timeline-border-color: var(--theme-highlight-lightorange);
42 --timeline-background-color: var(--theme-contrast-background);
45 .animation.csstransition {
46 --timeline-border-color: var(--theme-highlight-bluegrey);
47 --timeline-background-color: var(--theme-highlight-blue);
50 .animation.scriptanimation {
51 --timeline-border-color: var(--theme-highlight-green);
52 --timeline-background-color: var(--theme-graphs-green);
63 flex-direction: column;
66 color: var(--theme-content-color3);
69 /* The top toolbar, containing the toggle-all button. And the timeline toolbar,
70 containing playback control buttons, shown only when there are animations
71 displayed in the timeline */
75 border-bottom: 1px solid var(--theme-splitter-color);
79 justify-content: flex-end;
80 height: var(--toolbar-height);
85 justify-content: flex-start;
88 [timeline] #global-toolbar {
92 [timeline] #timeline-toolbar {
96 /* The main animations container */
99 height: calc(100% - var(--toolbar-height));
107 /* The error message, shown when an invalid/unanimated element is selected */
115 /* The error message is hidden by default */
119 [empty] #error-message {
123 /* Element picker, toggle-all buttons, timeline pause button, ... */
126 #timeline-toolbar > * {
127 min-height: var(--toolbar-height);
128 border-color: var(--theme-splitter-color);
129 border-width: 0 0 0 1px;
131 justify-content: center;
135 #global-toolbar .label,
136 #timeline-toolbar .label {
141 #global-toolbar .devtools-button,
142 #timeline-toolbar .devtools-button {
147 #timeline-toolbar .devtools-button,
148 #timeline-toolbar .label {
149 border-width: 0 1px 0 0;
152 #element-picker::before {
153 background-image: var(--command-pick-image);
156 .pause-button::before {
157 background-image: var(--pause-image);
160 #rewind-timeline::before {
161 background-image: var(--rewind-image);
164 .pause-button.paused::before {
165 background-image: var(--play-image);
168 @media (min-resolution: 1.1dppx) {
169 .pause-button::before {
170 background-image: var(--pause-image-2x);
173 .pause-button.paused::before {
174 background-image: var(--play-image-2x);
177 #rewind-timeline::before {
178 background-image: var(--rewind-image-2x);
182 #timeline-rate select.devtools-button {
183 -moz-appearance: none;
185 font-family: inherit;
186 color: var(--theme-body-color);
193 background-image: url("chrome://devtools/skin/images/dropmarker.svg");
194 background-repeat: no-repeat;
195 background-position: calc(100% - 4px) center;
204 /* Animation timeline component */
206 .animation-timeline {
210 /* The timeline gets its background-image from a canvas element created in
211 /devtools/client/animationinspector/utils.js drawGraphElementBackground
212 thanks to document.mozSetImageElement("time-graduations", canvas)
213 This is done so that the background can be built dynamically from script */
214 background-image: -moz-element(#time-graduations);
215 background-repeat: repeat-y;
216 /* Make the background be 100% of the timeline area so that it resizes with
217 it and subtract the width of the sidebar and the buffer at the right of the
219 background-size: calc(100% - var(--timeline-sidebar-width) - var(--keyframes-marker-size)) 100%;
220 background-position: var(--timeline-sidebar-width) 0;
222 flex-direction: column;
225 /* Useful for positioning animations or keyframes in the timeline */
226 .animation-timeline .track-container {
229 left: var(--timeline-sidebar-width);
230 /* Leave the width of a marker right of a track so the 100% markers can be
232 right: var(--keyframes-marker-size);
233 height: var(--timeline-animation-height);
236 .animation-timeline .scrubber-wrapper {
238 pointer-events: none;
242 .animation-timeline .scrubber {
246 border-right: 1px solid #FF0000;
247 box-sizing: border-box;
250 .animation-timeline .scrubber::before {
256 border-top: 5px solid #FF0000;
257 border-left: 5px solid transparent;
258 border-right: 5px solid transparent;
261 /* The scrubber handle is a transparent element displayed on top of the scrubber
262 line that allows users to drag it */
263 .animation-timeline .scrubber .scrubber-handle {
267 /* Make it thick enough for easy dragging */
274 .animation-timeline .time-header {
275 min-height: var(--toolbar-height);
277 -moz-user-select: none;
280 .animation-timeline .time-header .time-tick {
285 .animation-timeline .animations {
290 /* Leave some space for the header */
291 margin-top: var(--timeline-animation-height);
293 list-style-type: none;
294 border-top: 1px solid var(--time-graduation-border-color);
297 /* Animation block widgets */
299 .animation-timeline .animation {
301 height: var(--timeline-animation-height);
305 /* We want animations' background colors to alternate, but each animation has
306 a sibling (hidden by default) that contains the animated properties and
307 keyframes, so we need to alternate every 4 elements. */
308 .animation-timeline .animation:nth-child(4n+1) {
309 background-color: var(--even-animation-timeline-background-color);
312 .animation-timeline .animation .target {
313 width: var(--timeline-sidebar-width);
320 .animation-timeline .animation-target {
321 background-color: transparent;
324 .animation-timeline .animation .time-block {
328 /* Animation iterations */
330 .animation-timeline .animation .iterations {
333 box-sizing: border-box;
335 /* Iterations of the animation are displayed with a repeating linear-gradient
336 which size is dynamically changed from JS. The gradient only draws 1px
337 borders between each iteration. These borders must have the same color as
338 the border of this element */
340 linear-gradient(to left,
341 var(--timeline-border-color) 0,
342 var(--timeline-border-color) 1px,
345 border: 1px solid var(--timeline-border-color);
346 /* Border-right is already handled by the gradient */
347 border-width: 1px 0 1px 1px;
349 /* The background color is set independently */
350 background-color: var(--timeline-background-color);
353 .animation-timeline .animation .iterations.infinite::before,
354 .animation-timeline .animation .iterations.infinite::after {
361 border-right: 4px solid var(--theme-body-background);
362 border-top: 4px solid transparent;
363 border-bottom: 4px solid transparent;
366 .animation-timeline .animation .iterations.infinite::after {
371 .animation-timeline .animation .name {
373 color: var(--theme-selection-color);
378 box-sizing: border-box;
379 --fast-track-icon-width: 12px;
383 .animation-timeline .animation .name div {
384 /* Flex items don't support text-overflow, so a child div is used */
387 text-overflow: ellipsis;
390 .animation-timeline .fast-track .name div {
391 width: calc(100% - var(--fast-track-icon-width));
394 .animation-timeline .fast-track .name::after {
395 /* Animations running on the compositor have the fast-track background image*/
402 width: var(--fast-track-icon-width);
405 background-image: url("images/animation-fast-track.svg");
406 background-repeat: no-repeat;
407 background-position: center;
410 .animation-timeline .animation .delay,
411 .animation-timeline .animation .end-delay {
414 border: 1px solid var(--timeline-border-color);
415 box-sizing: border-box;
418 .animation-timeline .animation .delay {
419 border-width: 1px 0 1px 1px;
420 background-image: repeating-linear-gradient(45deg,
423 var(--theme-selection-color) 1px,
424 var(--theme-selection-color) 4px);
425 background-color: var(--timeline-border-color);
428 .animation-timeline .animation .end-delay {
429 border-width: 1px 1px 1px 0;
430 background-image: repeating-linear-gradient(
434 var(--timeline-border-color) 3px,
435 var(--timeline-border-color) 4px);
438 .animation-timeline .animation .delay.negative,
439 .animation-timeline .animation .end-delay.negative {
440 /* Negative delays are displayed on top of the animation, so they need a
441 right border. Whereas normal delays are displayed just before the
442 animation, so there's already the animation's left border that serves as
447 /* Animation target node gutter, contains a preview of the dom node */
450 background-color: var(--theme-toolbar-background);
452 box-sizing: border-box;
454 text-overflow: ellipsis;
459 .animation-target .attribute-name {
463 .animation-target .node-highlighter {
464 background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0;
470 .animation-target .node-highlighter:hover {
471 filter: url(images/filters.svg#checked-icon-state);
474 .animation-target .node-highlighter:active,
475 .animation-target .node-highlighter.selected {
476 filter: url(images/filters.svg#checked-icon-state);
479 /* Inline keyframes info in the timeline */
481 .animation-timeline .animated-properties:not(.selected) {
485 .animation-timeline .animated-properties {
486 background-color: var(--theme-selection-background-semitransparent);
489 .animation-timeline .animated-properties ul {
492 list-style-type: none;
495 .animation-timeline .animated-properties .property {
496 height: var(--timeline-animation-height);
500 .animation-timeline .animated-properties .property:nth-child(2n) {
501 background-color: var(--even-animation-timeline-background-color);
504 .animation-timeline .animated-properties .name {
505 width: var(--timeline-sidebar-width);
506 padding-right: var(--keyframes-marker-size);
507 box-sizing: border-box;
509 color: var(--theme-body-color-alt);
512 justify-content: flex-end;
516 .animation-timeline .animated-properties .name div {
518 text-overflow: ellipsis;
521 .animation-timeline .animated-properties .frames {
522 /* The frames list is absolutely positioned and the left and width properties
523 are dynamically set from javascript to match the animation's startTime and
528 /* Using flexbox to vertically center the frames */
533 /* Keyframes diagram, displayed below the timeline, inside the animation-details
537 /* Actual keyframe markers are positioned absolutely within this container and
538 their position is relative to its size (we know the offset of each frame
545 .keyframes.cssanimation {
546 background-color: var(--theme-contrast-background);
549 .keyframes.csstransition {
550 background-color: var(--theme-highlight-blue);
553 .keyframes.scriptanimation {
554 background-color: var(--theme-graphs-green);
562 background-color: inherit;
566 .keyframes .frame::before {
570 translateX(calc(var(--keyframes-marker-size) * -.5))
571 /* The extra pixel on the Y axis is so that markers are centered on the
572 horizontal line in the keyframes diagram. */
573 translateY(calc(var(--keyframes-marker-size) * -.5 + 1px));
574 width: var(--keyframes-marker-size);
575 height: var(--keyframes-marker-size);
577 background-color: inherit;