/* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ /* Animation-inspector specific theme variables */ .theme-dark, .theme-light, .theme-firebug { --even-animation-timeline-background-color: rgba(160,144,144,0.03); --command-pick-image: url(chrome://devtools/skin/images/command-pick.svg); --pause-image: url(chrome://devtools/skin/images/pause.svg); --rewind-image: url(chrome://devtools/skin/images/rewind.svg); --play-image: url(chrome://devtools/skin/images/play.svg); } :root { /* How high should toolbars be */ --toolbar-height: 20px; /* How wide should the sidebar be (should be wide enough to contain long property names like 'border-bottom-right-radius' without ellipsis) */ --timeline-sidebar-width: 200px; /* How high should animations displayed in the timeline be */ --timeline-animation-height: 20px; /* The size of a keyframe marker in the keyframes diagram */ --keyframes-marker-size: 10px; /* The color of the time graduation borders */ --time-graduation-border-color: rgba(160, 144, 144, .5); } .animation { --timeline-border-color: var(--theme-body-color); --timeline-background-color: var(--theme-splitter-color); } .animation.cssanimation { --timeline-border-color: var(--theme-highlight-lightorange); --timeline-background-color: var(--theme-contrast-background); } .animation.csstransition { --timeline-border-color: var(--theme-highlight-bluegrey); --timeline-background-color: var(--theme-highlight-blue); } .animation.scriptanimation { --timeline-border-color: var(--theme-highlight-green); --timeline-background-color: var(--theme-graphs-green); } html { height: 100%; } body { margin: 0; padding: 0; display : flex; flex-direction: column; height: 100%; overflow: hidden; color: var(--theme-content-color3); } /* The top toolbar, containing the toggle-all button. And the timeline toolbar, containing playback control buttons, shown only when there are animations displayed in the timeline */ #global-toolbar, #timeline-toolbar { border-bottom: 1px solid var(--theme-splitter-color); display: flex; flex-direction: row; align-items: center; justify-content: flex-end; height: var(--toolbar-height); } #timeline-toolbar { display: none; justify-content: flex-start; } [timeline] #global-toolbar { display: none; } [timeline] #timeline-toolbar { display: flex; } /* The main animations container */ #sidebar-panel-animationinspector { height: 100%; width: 100%; } #players { height: calc(100% - var(--toolbar-height)); overflow-x: hidden; overflow-y: auto; } [empty] #players { display: none; } /* The error message, shown when an invalid/unanimated element is selected */ #error-message { padding-top: 10%; text-align: center; flex: 1; overflow: auto; /* The error message is hidden by default */ display: none; } [empty] #error-message { display: block; } /* Element picker, toggle-all buttons, timeline pause button, ... */ #global-toolbar > *, #timeline-toolbar > * { min-height: var(--toolbar-height); border-color: var(--theme-splitter-color); border-width: 0 0 0 1px; display: flex; justify-content: center; align-items: center; } #global-toolbar .label, #timeline-toolbar .label { padding: 0 5px; border-style: solid; } #global-toolbar .devtools-button, #timeline-toolbar .devtools-button { margin: 0; padding: 0; } #timeline-toolbar .devtools-button, #timeline-toolbar .label { border-width: 0 1px 0 0; } #element-picker { height: 18px; } #element-picker::before { background-image: var(--command-pick-image); } .pause-button::before { background-image: var(--pause-image); } #rewind-timeline::before { background-image: var(--rewind-image); } .pause-button.paused::before { background-image: var(--play-image); } #timeline-rate select.devtools-button { -moz-appearance: none; text-align: center; font-family: inherit; color: var(--theme-body-color); font-size: 1em; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("chrome://devtools/skin/images/dropmarker.svg"); background-repeat: no-repeat; background-position: calc(100% - 4px) center; padding-right: 1em; } #timeline-rate { position: relative; width: 4.5em; } /* Animation timeline component */ .animation-timeline { position: relative; display: flex; flex-direction: column; } /* Useful for positioning animations or keyframes in the timeline */ .animation-timeline .track-container { position: absolute; top: 0; left: var(--timeline-sidebar-width); /* Leave the width of a marker right of a track so the 100% markers can be selected easily */ right: var(--keyframes-marker-size); height: var(--timeline-animation-height); } .animation-timeline .scrubber-wrapper { position: absolute; left: var(--timeline-sidebar-width); /* Leave the width of a marker right of a track so the 100% markers can be selected easily */ right: var(--keyframes-marker-size); height: 100%; } .animation-timeline .scrubber { z-index: 5; pointer-events: none; position: absolute; /* Make the scrubber as tall as the viewport minus the toolbar height and the header-wrapper's borders */ height: calc(100vh - var(--toolbar-height) - 1px); min-height: 100%; width: 0; border-right: 1px solid #FF0000; box-sizing: border-box; } /* The scrubber handle is a transparent element displayed on top of the scrubber line that allows users to drag it */ .animation-timeline .scrubber .scrubber-handle { position: absolute; height: 100%; /* Make it thick enough for easy dragging */ width: 6px; right: -1.5px; cursor: col-resize; pointer-events: all; } .animation-timeline .scrubber .scrubber-handle::before { content: ""; position: sticky; top: 0; width: 1px; border-top: 5px solid red; border-left: 5px solid transparent; border-right: 5px solid transparent; } .animation-timeline .time-header { min-height: var(--timeline-animation-height); cursor: col-resize; -moz-user-select: none; } .animation-timeline .time-header .header-item { position: absolute; height: 100%; padding-top: 3px; border-left: 0.5px solid var(--time-graduation-border-color); } .animation-timeline .header-wrapper { position: sticky; top: 0; background-color: var(--theme-body-background); border-bottom: 1px solid var(--time-graduation-border-color); z-index: 3; height: var(--timeline-animation-height); overflow: hidden; } .animation-timeline .time-body { height: 100%; } .animation-timeline .time-header .time-tick { -moz-user-select: none; position: absolute; width: 0; /* When scroll bar is shown, make it covers entire time-body */ height: 100%; /* When scroll bar is hidden, make it as tall as the viewport minus the timeline animation height and the header-wrapper's borders */ min-height: calc(100vh - var(--timeline-animation-height) - 1px); border-left: 0.5px solid var(--time-graduation-border-color); } .animation-timeline .animations { width: 100%; height: 100%; padding: 0; list-style-type: none; margin-top: 0; } /* Animation block widgets */ .animation-timeline .animation { margin: 2px 0; height: var(--timeline-animation-height); position: relative; } /* We want animations' background colors to alternate, but each animation has a sibling (hidden by default) that contains the animated properties and keyframes, so we need to alternate every 4 elements. */ .animation-timeline .animation:nth-child(4n+1) { background-color: var(--even-animation-timeline-background-color); } .animation-timeline .animation .target { width: var(--timeline-sidebar-width); height: 100%; overflow: hidden; display: flex; align-items: center; } .animation-timeline .animation-target { background-color: transparent; } .animation-timeline .animation .time-block { cursor: pointer; } /* Animation iterations */ .animation-timeline .animation .iterations { position: absolute; height: 100%; box-sizing: border-box; /* Iterations of the animation are displayed with a repeating linear-gradient which size is dynamically changed from JS. The gradient only draws 1px borders between each iteration. These borders must have the same color as the border of this element */ background-image: linear-gradient(to left, var(--timeline-border-color) 0, var(--timeline-border-color) 1px, transparent 1px, transparent 2px); border: 1px solid var(--timeline-border-color); /* Border-right is already handled by the gradient */ border-width: 1px 0 1px 1px; /* The background color is set independently */ background-color: var(--timeline-background-color); } .animation-timeline .animation .iterations.infinite::before, .animation-timeline .animation .iterations.infinite::after { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0; border-right: 4px solid var(--theme-body-background); border-top: 4px solid transparent; border-bottom: 4px solid transparent; } .animation-timeline .animation .iterations.infinite::after { bottom: 0; top: unset; } .animation-timeline .animation .name { position: absolute; color: var(--theme-selection-color); height: 100%; display: flex; align-items: center; padding: 0 2px; box-sizing: border-box; --fast-track-icon-width: 15px; z-index: 1; } .animation-timeline .animation .name div { /* Flex items don't support text-overflow, so a child div is used */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .animation-timeline .fast-track .name div { width: calc(100% - var(--fast-track-icon-width)); } .animation-timeline .fast-track .name::after { /* Animations running on the compositor have the fast-track background image*/ content: ""; display: block; position: absolute; top: 1px; right: 0; height: 100%; width: var(--fast-track-icon-width); z-index: 1; } .animation-timeline .all-properties .name::after { background-color: white; clip-path: url(images/animation-fast-track.svg#thunderbolt); background-repeat: no-repeat; background-position: center; } .animation-timeline .some-properties .name::after { background-color: var(--theme-content-color3); clip-path: url(images/animation-fast-track.svg#thunderbolt); background-repeat: no-repeat; background-position: center; } .animation-timeline .animation .delay, .animation-timeline .animation .end-delay { position: absolute; height: 100%; border: 1px solid var(--timeline-border-color); box-sizing: border-box; } .animation-timeline .animation .delay { border-width: 1px 0 1px 1px; background-image: repeating-linear-gradient(45deg, transparent, transparent 1px, var(--theme-selection-color) 1px, var(--theme-selection-color) 4px); background-color: var(--timeline-border-color); } .animation-timeline .animation .end-delay { border-width: 1px 1px 1px 0; background-image: repeating-linear-gradient( -45deg, transparent, transparent 3px, var(--timeline-border-color) 3px, var(--timeline-border-color) 4px); } .animation-timeline .animation .delay.negative, .animation-timeline .animation .end-delay.negative { /* Negative delays are displayed on top of the animation, so they need a right border. Whereas normal delays are displayed just before the animation, so there's already the animation's left border that serves as a separation. */ border-width: 1px; } /* Animation target node gutter, contains a preview of the dom node */ .animation-target { background-color: var(--theme-toolbar-background); padding: 0 4px; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } .animation-target .attribute-name { padding-left: 4px; } .animation-target .node-highlighter { background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0; padding-left: 16px; margin-right: 5px; cursor: pointer; } .animation-target .node-highlighter:hover { filter: url(images/filters.svg#checked-icon-state); } .animation-target .node-highlighter:active, .animation-target .node-highlighter.selected { filter: url(images/filters.svg#checked-icon-state); } /* Inline keyframes info in the timeline */ .animation-timeline .animated-properties:not(.selected) { display: none; } .animation-timeline .animated-properties { background-color: var(--theme-selection-background-semitransparent); } .animation-timeline .animated-properties ul { margin: 0; padding: 0; list-style-type: none; } .animation-timeline .animated-properties .property { height: var(--timeline-animation-height); position: relative; } .animation-timeline .animated-properties .property:nth-child(2n) { background-color: var(--even-animation-timeline-background-color); } .animation-timeline .animated-properties .name { width: var(--timeline-sidebar-width); padding-right: var(--keyframes-marker-size); box-sizing: border-box; height: 100%; color: var(--theme-body-color-alt); white-space: nowrap; display: flex; justify-content: flex-end; align-items: center; } .animation-timeline .animated-properties .name div { overflow: hidden; text-overflow: ellipsis; } .animated-properties.cssanimation { --background-color: var(--theme-contrast-background); } .animated-properties.csstransition { --background-color: var(--theme-highlight-blue); } .animated-properties.scriptanimation { --background-color: var(--theme-graphs-green); } .animation-timeline .animated-properties .oncompositor::before { content: ""; display: inline-block; width: 17px; height: 17px; background-color: var(--background-color); clip-path: url(images/animation-fast-track.svg#thunderbolt); vertical-align: middle; } .animation-timeline .animated-properties .warning { text-decoration: underline dotted; } .animation-timeline .animated-properties .frames { /* The frames list is absolutely positioned and the left and width properties are dynamically set from javascript to match the animation's startTime and duration */ position: absolute; top: 0; height: 100%; /* Using flexbox to vertically center the frames */ display: flex; align-items: center; } /* Keyframes diagram, displayed below the timeline, inside the animation-details element. */ .keyframes { /* Actual keyframe markers are positioned absolutely within this container and their position is relative to its size (we know the offset of each frame in percentage) */ position: relative; width: 100%; height: 0; } .keyframes.cssanimation { background-color: var(--theme-contrast-background); } .keyframes.csstransition { background-color: var(--theme-highlight-blue); } .keyframes.scriptanimation { background-color: var(--theme-graphs-green); } .keyframes .frame { position: absolute; top: 0; width: 0; height: 0; background-color: inherit; cursor: pointer; } .keyframes .frame::before { content: ""; display: block; transform: translateX(calc(var(--keyframes-marker-size) * -.5)) /* The extra pixel on the Y axis is so that markers are centered on the horizontal line in the keyframes diagram. */ translateY(calc(var(--keyframes-marker-size) * -.5 + 1px)); width: var(--keyframes-marker-size); height: var(--keyframes-marker-size); border-radius: 100%; background-color: inherit; }