diff options
Diffstat (limited to 'devtools/client/themes/animationinspector.css')
| -rw-r--r-- | devtools/client/themes/animationinspector.css | 623 |
1 files changed, 623 insertions, 0 deletions
diff --git a/devtools/client/themes/animationinspector.css b/devtools/client/themes/animationinspector.css new file mode 100644 index 000000000..6a17ca02f --- /dev/null +++ b/devtools/client/themes/animationinspector.css @@ -0,0 +1,623 @@ +/* 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 { + --even-animation-timeline-background-color: rgba(255,255,255,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); +} + +.theme-light { + --even-animation-timeline-background-color: rgba(128,128,128,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); +} + +.theme-firebug { + --even-animation-timeline-background-color: rgba(128,128,128,0.03); + --command-pick-image: url(chrome://devtools/skin/images/firebug/command-pick.svg); + --pause-image: url(chrome://devtools/skin/images/firebug/pause.svg); + --rewind-image: url(chrome://devtools/skin/images/firebug/rewind.svg); + --play-image: url(chrome://devtools/skin/images/firebug/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(128, 136, 144, .5); +} + +.animation { + --timeline-border-color: var(--theme-body-color); + --timeline-background-color: var(--theme-splitter-color); + /* The color of the endDelay hidden progress */ + --enddelay-hidden-progress-color: var(--theme-graphs-grey); + /* The color of none fill mode */ + --fill-none-color: var(--theme-highlight-gray); + /* The color of enable fill mode */ + --fill-enable-color: var(--timeline-border-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::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 red; + 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-body .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 summary graph */ +.animation-timeline .animation .summary { + position: absolute; + width: 100%; + height: 100%; +} + +.animation-timeline .animation .summary path { + fill: var(--timeline-background-color); + stroke: var(--timeline-border-color); +} + +.animation-timeline .animation .summary .infinity.copied { + opacity: .3; +} + +.animation-timeline .animation .summary path.delay-path.negative, +.animation-timeline .animation .summary path.enddelay-path.negative { + fill: none; + stroke: var(--enddelay-hidden-progress-color); + stroke-dasharray: 2, 2; +} + +.animation-timeline .animation .name { + position: absolute; + color: var(--theme-content-color3); + top: 0px; + left: 0px; + height: 100%; + width: 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; + background-color: rgba(255, 255, 255, 0.7); + max-width: 50%; +} + +.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: var(--theme-content-color3); + 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; + border-bottom: 3px solid var(--fill-none-color); + bottom: -0.5px; +} + +.animation-timeline .animation .delay::after, +.animation-timeline .animation .end-delay::after { + content: ""; + position: absolute; + top: -2px; + width: 3px; + height: 3px; + border: 2px solid var(--fill-none-color); + background-color: var(--fill-none-color); + border-radius: 50%; +} + +.animation-timeline .animation .negative.delay::after, +.animation-timeline .animation .positive.end-delay::after { + right: -3px; +} + +.animation-timeline .animation .positive.delay::after, +.animation-timeline .animation .negative.end-delay::after { + left: -3px; +} + +.animation-timeline .animation .fill.delay, +.animation-timeline .animation .fill.end-delay { + border-color: var(--fill-enable-color); +} + +.animation-timeline .animation .fill.delay::after, +.animation-timeline .animation .fill.end-delay::after { + border-color: var(--fill-enable-color); + background-color: var(--fill-enable-color); +} + +/* 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) brightness(0.9); +} + +/* 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; +} |