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/pause.svg);
13 --rewind-image: url(chrome://devtools/skin/images/rewind.svg);
14 --play-image: url(chrome://devtools/skin/images/play.svg);
18 /* How high should toolbars be */
19 --toolbar-height: 20px;
20 /* How wide should the sidebar be (should be wide enough to contain long
21 property names like 'border-bottom-right-radius' without ellipsis) */
22 --timeline-sidebar-width: 200px;
23 /* How high should animations displayed in the timeline be */
24 --timeline-animation-height: 20px;
25 /* The size of a keyframe marker in the keyframes diagram */
26 --keyframes-marker-size: 10px;
27 /* The color of the time graduation borders */
28 --time-graduation-border-color: rgba(160, 144, 144, .5);
32 --timeline-border-color: var(--theme-body-color);
33 --timeline-background-color: var(--theme-splitter-color);
36 .animation.cssanimation {
37 --timeline-border-color: var(--theme-highlight-lightorange);
38 --timeline-background-color: var(--theme-contrast-background);
41 .animation.csstransition {
42 --timeline-border-color: var(--theme-highlight-bluegrey);
43 --timeline-background-color: var(--theme-highlight-blue);
46 .animation.scriptanimation {
47 --timeline-border-color: var(--theme-highlight-green);
48 --timeline-background-color: var(--theme-graphs-green);
59 flex-direction: column;
62 color: var(--theme-content-color3);
65 /* The top toolbar, containing the toggle-all button. And the timeline toolbar,
66 containing playback control buttons, shown only when there are animations
67 displayed in the timeline */
71 border-bottom: 1px solid var(--theme-splitter-color);
75 justify-content: flex-end;
76 height: var(--toolbar-height);
81 justify-content: flex-start;
84 [timeline] #global-toolbar {
88 [timeline] #timeline-toolbar {
92 /* The main animations container */
94 #sidebar-panel-animationinspector {
100 height: calc(100% - var(--toolbar-height));
109 /* The error message, shown when an invalid/unanimated element is selected */
117 /* The error message is hidden by default */
121 [empty] #error-message {
125 /* Element picker, toggle-all buttons, timeline pause button, ... */
128 #timeline-toolbar > * {
129 min-height: var(--toolbar-height);
130 border-color: var(--theme-splitter-color);
131 border-width: 0 0 0 1px;
133 justify-content: center;
137 #global-toolbar .label,
138 #timeline-toolbar .label {
143 #global-toolbar .devtools-button,
144 #timeline-toolbar .devtools-button {
149 #timeline-toolbar .devtools-button,
150 #timeline-toolbar .label {
151 border-width: 0 1px 0 0;
158 #element-picker::before {
159 background-image: var(--command-pick-image);
162 .pause-button::before {
163 background-image: var(--pause-image);
166 #rewind-timeline::before {
167 background-image: var(--rewind-image);
170 .pause-button.paused::before {
171 background-image: var(--play-image);
174 #timeline-rate select.devtools-button {
175 -moz-appearance: none;
177 font-family: inherit;
178 color: var(--theme-body-color);
185 background-image: url("chrome://devtools/skin/images/dropmarker.svg");
186 background-repeat: no-repeat;
187 background-position: calc(100% - 4px) center;
196 /* Animation timeline component */
198 .animation-timeline {
201 flex-direction: column;
204 /* Useful for positioning animations or keyframes in the timeline */
205 .animation-timeline .track-container {
208 left: var(--timeline-sidebar-width);
209 /* Leave the width of a marker right of a track so the 100% markers can be
211 right: var(--keyframes-marker-size);
212 height: var(--timeline-animation-height);
215 .animation-timeline .scrubber-wrapper {
217 left: var(--timeline-sidebar-width);
218 /* Leave the width of a marker right of a track so the 100% markers can be
220 right: var(--keyframes-marker-size);
224 .animation-timeline .scrubber {
226 pointer-events: none;
228 /* Make the scrubber as tall as the viewport minus the toolbar height and the
229 header-wrapper's borders */
230 height: calc(100vh - var(--toolbar-height) - 1px);
233 border-right: 1px solid #FF0000;
234 box-sizing: border-box;
237 /* The scrubber handle is a transparent element displayed on top of the scrubber
238 line that allows users to drag it */
239 .animation-timeline .scrubber .scrubber-handle {
242 /* Make it thick enough for easy dragging */
249 .animation-timeline .scrubber .scrubber-handle::before {
254 border-top: 5px solid red;
255 border-left: 5px solid transparent;
256 border-right: 5px solid transparent;
259 .animation-timeline .time-header {
260 min-height: var(--timeline-animation-height);
262 -moz-user-select: none;
265 .animation-timeline .time-header .header-item {
269 border-left: 0.5px solid var(--time-graduation-border-color);
272 .animation-timeline .header-wrapper {
275 background-color: var(--theme-body-background);
276 border-bottom: 1px solid var(--time-graduation-border-color);
278 height: var(--timeline-animation-height);
282 .animation-timeline .time-body {
286 .animation-timeline .time-header .time-tick {
287 -moz-user-select: none;
290 /* When scroll bar is shown, make it covers entire time-body */
292 /* When scroll bar is hidden, make it as tall as the viewport minus the
293 timeline animation height and the header-wrapper's borders */
294 min-height: calc(100vh - var(--timeline-animation-height) - 1px);
295 border-left: 0.5px solid var(--time-graduation-border-color);
298 .animation-timeline .animations {
302 list-style-type: none;
306 /* Animation block widgets */
308 .animation-timeline .animation {
310 height: var(--timeline-animation-height);
314 /* We want animations' background colors to alternate, but each animation has
315 a sibling (hidden by default) that contains the animated properties and
316 keyframes, so we need to alternate every 4 elements. */
317 .animation-timeline .animation:nth-child(4n+1) {
318 background-color: var(--even-animation-timeline-background-color);
321 .animation-timeline .animation .target {
322 width: var(--timeline-sidebar-width);
329 .animation-timeline .animation-target {
330 background-color: transparent;
333 .animation-timeline .animation .time-block {
337 /* Animation iterations */
339 .animation-timeline .animation .iterations {
342 box-sizing: border-box;
344 /* Iterations of the animation are displayed with a repeating linear-gradient
345 which size is dynamically changed from JS. The gradient only draws 1px
346 borders between each iteration. These borders must have the same color as
347 the border of this element */
349 linear-gradient(to left,
350 var(--timeline-border-color) 0,
351 var(--timeline-border-color) 1px,
354 border: 1px solid var(--timeline-border-color);
355 /* Border-right is already handled by the gradient */
356 border-width: 1px 0 1px 1px;
358 /* The background color is set independently */
359 background-color: var(--timeline-background-color);
362 .animation-timeline .animation .iterations.infinite::before,
363 .animation-timeline .animation .iterations.infinite::after {
370 border-right: 4px solid var(--theme-body-background);
371 border-top: 4px solid transparent;
372 border-bottom: 4px solid transparent;
375 .animation-timeline .animation .iterations.infinite::after {
380 .animation-timeline .animation .name {
382 color: var(--theme-selection-color);
387 box-sizing: border-box;
388 --fast-track-icon-width: 15px;
392 .animation-timeline .animation .name div {
393 /* Flex items don't support text-overflow, so a child div is used */
396 text-overflow: ellipsis;
399 .animation-timeline .fast-track .name div {
400 width: calc(100% - var(--fast-track-icon-width));
403 .animation-timeline .fast-track .name::after {
404 /* Animations running on the compositor have the fast-track background image*/
411 width: var(--fast-track-icon-width);
415 .animation-timeline .all-properties .name::after {
416 background-color: white;
417 clip-path: url(images/animation-fast-track.svg#thunderbolt);
418 background-repeat: no-repeat;
419 background-position: center;
422 .animation-timeline .some-properties .name::after {
423 background-color: var(--theme-content-color3);
424 clip-path: url(images/animation-fast-track.svg#thunderbolt);
425 background-repeat: no-repeat;
426 background-position: center;
429 .animation-timeline .animation .delay,
430 .animation-timeline .animation .end-delay {
433 border: 1px solid var(--timeline-border-color);
434 box-sizing: border-box;
437 .animation-timeline .animation .delay {
438 border-width: 1px 0 1px 1px;
439 background-image: repeating-linear-gradient(45deg,
442 var(--theme-selection-color) 1px,
443 var(--theme-selection-color) 4px);
444 background-color: var(--timeline-border-color);
447 .animation-timeline .animation .end-delay {
448 border-width: 1px 1px 1px 0;
449 background-image: repeating-linear-gradient(
453 var(--timeline-border-color) 3px,
454 var(--timeline-border-color) 4px);
457 .animation-timeline .animation .delay.negative,
458 .animation-timeline .animation .end-delay.negative {
459 /* Negative delays are displayed on top of the animation, so they need a
460 right border. Whereas normal delays are displayed just before the
461 animation, so there's already the animation's left border that serves as
466 /* Animation target node gutter, contains a preview of the dom node */
469 background-color: var(--theme-toolbar-background);
471 box-sizing: border-box;
473 text-overflow: ellipsis;
478 .animation-target .attribute-name {
482 .animation-target .node-highlighter {
483 background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0;
489 .animation-target .node-highlighter:hover {
490 filter: url(images/filters.svg#checked-icon-state);
493 .animation-target .node-highlighter:active,
494 .animation-target .node-highlighter.selected {
495 filter: url(images/filters.svg#checked-icon-state);
498 /* Inline keyframes info in the timeline */
500 .animation-timeline .animated-properties:not(.selected) {
504 .animation-timeline .animated-properties {
505 background-color: var(--theme-selection-background-semitransparent);
508 .animation-timeline .animated-properties ul {
511 list-style-type: none;
514 .animation-timeline .animated-properties .property {
515 height: var(--timeline-animation-height);
519 .animation-timeline .animated-properties .property:nth-child(2n) {
520 background-color: var(--even-animation-timeline-background-color);
523 .animation-timeline .animated-properties .name {
524 width: var(--timeline-sidebar-width);
525 padding-right: var(--keyframes-marker-size);
526 box-sizing: border-box;
528 color: var(--theme-body-color-alt);
531 justify-content: flex-end;
535 .animation-timeline .animated-properties .name div {
537 text-overflow: ellipsis;
540 .animated-properties.cssanimation {
541 --background-color: var(--theme-contrast-background);
544 .animated-properties.csstransition {
545 --background-color: var(--theme-highlight-blue);
548 .animated-properties.scriptanimation {
549 --background-color: var(--theme-graphs-green);
552 .animation-timeline .animated-properties .oncompositor::before {
554 display: inline-block;
557 background-color: var(--background-color);
558 clip-path: url(images/animation-fast-track.svg#thunderbolt);
559 vertical-align: middle;
562 .animation-timeline .animated-properties .warning {
563 text-decoration: underline dotted;
566 .animation-timeline .animated-properties .frames {
567 /* The frames list is absolutely positioned and the left and width properties
568 are dynamically set from javascript to match the animation's startTime and
573 /* Using flexbox to vertically center the frames */
578 /* Keyframes diagram, displayed below the timeline, inside the animation-details
582 /* Actual keyframe markers are positioned absolutely within this container and
583 their position is relative to its size (we know the offset of each frame
590 .keyframes.cssanimation {
591 background-color: var(--theme-contrast-background);
594 .keyframes.csstransition {
595 background-color: var(--theme-highlight-blue);
598 .keyframes.scriptanimation {
599 background-color: var(--theme-graphs-green);
607 background-color: inherit;
611 .keyframes .frame::before {
615 translateX(calc(var(--keyframes-marker-size) * -.5))
616 /* The extra pixel on the Y axis is so that markers are centered on the
617 horizontal line in the keyframes diagram. */
618 translateY(calc(var(--keyframes-marker-size) * -.5 + 1px));
619 width: var(--keyframes-marker-size);
620 height: var(--keyframes-marker-size);
622 background-color: inherit;