.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/debugger-pause.png);
- --pause-image-2x: url(chrome://devtools/skin/images/debugger-pause@2x.png);
- --rewind-image: url(chrome://devtools/skin/images/rewind.png);
- --rewind-image-2x: url(chrome://devtools/skin/images/rewind@2x.png);
- --play-image: url(chrome://devtools/skin/images/debugger-play.png);
- --play-image-2x: url(chrome://devtools/skin/images/debugger-play@2x.png);
+ --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 {
--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. This should match the the color
- devtools/client/animationinspector/utils.js */
+ /* The color of the time graduation borders */
--time-graduation-border-color: rgba(160, 144, 144, .5);
}
/* The main animations container */
+#sidebar-panel-animationinspector {
+ height: 100%;
+ width: 100%;
+}
+
#players {
height: calc(100% - var(--toolbar-height));
- overflow: auto;
+ overflow-x: hidden;
+ overflow-y: auto;
}
[empty] #players {
border-width: 0 1px 0 0;
}
+#element-picker {
+ height: 18px;
+}
+
#element-picker::before {
background-image: var(--command-pick-image);
}
background-image: var(--play-image);
}
-@media (min-resolution: 1.1dppx) {
- .pause-button::before {
- background-image: var(--pause-image-2x);
- }
-
- .pause-button.paused::before {
- background-image: var(--play-image-2x);
- }
-
- #rewind-timeline::before {
- background-image: var(--rewind-image-2x);
- }
-}
-
#timeline-rate select.devtools-button {
-moz-appearance: none;
text-align: center;
/* Animation timeline component */
.animation-timeline {
- height: 100%;
- overflow: hidden;
position: relative;
- /* The timeline gets its background-image from a canvas element created in
- /devtools/client/animationinspector/utils.js drawGraphElementBackground
- thanks to document.mozSetImageElement("time-graduations", canvas)
- This is done so that the background can be built dynamically from script */
- background-image: -moz-element(#time-graduations);
- background-repeat: repeat-y;
- /* Make the background be 100% of the timeline area so that it resizes with
- it and subtract the width of the sidebar and the buffer at the right of the
- timeline */
- background-size: calc(100% - var(--timeline-sidebar-width) - var(--keyframes-marker-size)) 100%;
- background-position: var(--timeline-sidebar-width) 0;
display: flex;
flex-direction: column;
}
}
.animation-timeline .scrubber-wrapper {
- z-index: 2;
- pointer-events: none;
+ 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;
- height: 100%;
+ /* 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;
}
-.animation-timeline .scrubber::before {
- content: "";
- position: absolute;
- top: 0;
- width: 1px;
- right: -6px;
- border-top: 5px solid #FF0000;
- border-left: 5px solid transparent;
- border-right: 5px solid transparent;
-}
-
/* 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%;
- top: 0;
/* Make it thick enough for easy dragging */
width: 6px;
- right: -3px;
+ 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(--toolbar-height);
+ 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;
- top: 3px;
+ 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%;
- overflow-y: auto;
- overflow-x: hidden;
- /* Leave some space for the header */
- margin-top: var(--timeline-animation-height);
padding: 0;
list-style-type: none;
- border-top: 1px solid var(--time-graduation-border-color);
+ margin-top: 0;
}
/* Animation block widgets */
align-items: center;
padding: 0 2px;
box-sizing: border-box;
- --fast-track-icon-width: 12px;
+ --fast-track-icon-width: 15px;
z-index: 1;
}
content: "";
display: block;
position: absolute;
- top: 0;
+ top: 1px;
right: 0;
height: 100%;
width: var(--fast-track-icon-width);
z-index: 1;
+}
- background-image: url("images/animation-fast-track.svg");
+.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;
}
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
projects / themes.git / blobdiff