summaryrefslogtreecommitdiffstats
path: root/devtools/client/themes/animationinspector.css
diff options
context:
space:
mode:
Diffstat (limited to 'devtools/client/themes/animationinspector.css')
-rw-r--r--devtools/client/themes/animationinspector.css623
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;
+}