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 */
9 --even-animation-timeline-background-color: rgba(160,144,144,0.03);
13 /* How high should toolbars be */
14 --toolbar-height: 20px;
15 /* How wide should the sidebar be */
16 --timeline-sidebar-width: 150px;
17 /* How high should animations displayed in the timeline be */
18 --timeline-animation-height: 20px;
29 flex-direction: column;
32 color: var(--theme-content-color3);
35 /* The top toolbar, containing the toggle-all button. And the timeline toolbar,
36 containing playback control buttons, shown only when there are animations
37 displayed in the timeline */
41 border-bottom: 1px solid var(--theme-splitter-color);
45 justify-content: flex-end;
46 height: var(--toolbar-height);
53 [timeline] #global-toolbar {
57 [timeline] #timeline-toolbar {
61 #global-toolbar .label {
65 /* The main animations container */
68 height: calc(100% - var(--toolbar-height));
76 /* The error message, shown when an invalid/unanimated element is selected */
84 /* The error message is hidden by default */
88 [empty] #error-message {
92 /* Element picker, toggle-all buttons, timeline pause button, ... */
94 #global-toolbar .devtools-button,
95 #timeline-toolbar .devtools-button {
96 border-width: 0 0 0 1px;
97 min-height: var(--toolbar-height);
100 #element-picker::before {
101 background-image: url("chrome://devtools/skin/command-pick.svg");
104 .pause-button::before {
105 background-image: url("debugger-pause.png");
108 .pause-button.paused::before {
109 background-image: url("debugger-play.png");
112 @media (min-resolution: 1.1dppx) {
113 .pause-button::before {
114 background-image: url("debugger-pause@2x.png");
117 .pause-button.paused::before {
118 background-image: url("debugger-play@2x.png");
122 #timeline-rate select {
123 -moz-appearance: none;
126 font-family: inherit;
129 /* Animation timeline component */
131 .animation-timeline {
135 /* The timeline gets its background-image from a canvas element created in
136 /browser/devtools/animationinspector/utils.js drawGraphElementBackground
137 thanks to document.mozSetImageElement("time-graduations", canvas)
138 This is done so that the background can be built dynamically from script */
139 background-image: -moz-element(#time-graduations);
140 background-repeat: repeat-y;
141 /* The animations are drawn 150px from the left edge so that animated nodes
142 can be displayed in a sidebar */
143 background-position: var(--timeline-sidebar-width) 0;
145 flex-direction: column;
148 .animation-timeline .scrubber {
151 width: var(--timeline-sidebar-width);
152 border-right: 1px solid #FF0000;
153 box-sizing: border-box;
155 pointer-events: none;
158 .animation-timeline .scrubber::before {
164 border-top: 5px solid #FF0000;
165 border-left: 5px solid transparent;
166 border-right: 5px solid transparent;
169 .animation-timeline .time-header {
170 margin-left: var(--timeline-sidebar-width);
171 height: var(--toolbar-height);
174 /* This is the same color as the time graduations in
175 browser/devtools/animationinspector/utils.js */
176 border-bottom: 1px solid var(--theme-splitter-color);
178 -moz-user-select: none;
181 .animation-timeline .time-header .time-tick {
186 .animation-timeline .animations {
192 list-style-type: none;
195 /* Animation block widgets */
197 .animation-timeline .animation {
199 height: var(--timeline-animation-height);
203 .animation-timeline .animation:nth-child(2n) {
204 background-color: var(--even-animation-timeline-background-color);
207 .animation-timeline .animation .target {
208 width: var(--timeline-sidebar-width);
213 .animation-timeline .animation-target {
214 background-color: transparent;
217 .animation-timeline .animation .time-block {
220 left: var(--timeline-sidebar-width);
225 /* Animation iterations */
227 .animation-timeline .animation .iterations {
230 box-sizing: border-box;
231 --timelime-border-color: var(--theme-body-color);
232 --timeline-background-color: var(--theme-splitter-color);
234 /* Iterations of the animation are displayed with a repeating linear-gradient
235 which size is dynamically changed from JS. The gradient only draws 1px
236 borders between each iteration. These borders must have the same color as
237 the border of this element */
239 linear-gradient(to right,
240 var(--timelime-border-color) 0,
241 var(--timelime-border-color) 1px,
244 background-repeat: repeat-x;
245 background-position: -1px 0;
246 border: 1px solid var(--timelime-border-color);
248 /* The background color is set independently */
249 background-color: var(--timeline-background-color);
252 .animation-timeline .animation .cssanimation {
253 --timelime-border-color: var(--theme-highlight-lightorange);
254 --timeline-background-color: var(--theme-contrast-background);
257 .animation-timeline .animation .csstransition {
258 --timelime-border-color: var(--theme-highlight-bluegrey);
259 --timeline-background-color: var(--theme-highlight-blue);
262 .animation-timeline .animation .iterations.infinite {
263 border-right-width: 0;
266 .animation-timeline .animation .iterations.infinite::before,
267 .animation-timeline .animation .iterations.infinite::after {
274 border-right: 4px solid var(--theme-body-background);
275 border-top: 4px solid transparent;
276 border-bottom: 4px solid transparent;
279 .animation-timeline .animation .iterations.infinite::after {
284 .animation-timeline .animation .name {
285 color: var(--theme-selection-color);
289 text-overflow: ellipsis;
295 .animation-timeline .fast-track .name {
296 /* Animations running on the compositor have the fast-track background image*/
297 background-image: url("images/animation-fast-track.svg");
298 background-repeat: no-repeat;
301 .animation-timeline .animation .delay {
304 /* Make sure the delay covers up the animation border */
305 transform: translate(-1px, -1px);
306 box-sizing: border-box;
307 height: calc(100% + 2px);
309 border: 1px solid var(--timelime-border-color);
310 border-width: 1px 0 1px 1px;
311 background-image: repeating-linear-gradient(45deg,
314 var(--theme-selection-color) 1px,
315 var(--theme-selection-color) 4px);
316 background-color: var(--timelime-border-color);
319 .animation-timeline .animation .delay.negative {
320 /* Negative delays are displayed on top of the animation, so they need a
321 right border. Whereas normal delays are displayed just before the
322 animation, so there's already the animation's left border that serves as
327 .animation-timeline .animation .delay::before {
335 background: var(--timelime-border-color);
338 /* Animation target node gutter, contains a preview of the dom node */
341 background-color: var(--theme-toolbar-background);
343 box-sizing: border-box;
345 text-overflow: ellipsis;
349 .animation-target .attribute-name {
353 .animation-target .node-highlighter {
354 background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0;
360 .animation-target .node-highlighter:hover {
361 filter: url(images/filters.svg#checked-icon-state);
364 .animation-target .node-highlighter:active,
365 .animation-target .node-highlighter.selected {
366 filter: url(images/filters.svg#checked-icon-state);
369 /* Animation title gutter, contains the name, duration, iteration */
372 background-color: var(--theme-toolbar-background);
373 border-bottom: 1px solid var(--theme-splitter-color);
375 word-wrap: break-word;
379 .animation-title .meta-data {
383 .animation-title strong {
387 .animation-title .meta-data .compositor-icon {
389 background-image: url("images/animation-fast-track.svg");
390 background-repeat: no-repeat;
392 /* Make sure the icon is positioned above the timeline range input so that
393 its tooltip appears on hover */
401 height: var(--timeline-animation-height);
405 border-bottom: 1px solid var(--theme-splitter-color);
408 .timeline .playback-controls {
413 /* Playback control buttons */
415 .timeline .playback-controls button {
417 border-width: 0 1px 0 0;
420 .timeline .toggle::before {
421 background-image: url(debugger-pause.png);
424 .paused .timeline .toggle::before,
425 .finished .timeline .toggle::before {
426 background-image: url(debugger-play.png);
429 .timeline .ff::before {
430 background-image: url(fast-forward.png);
433 .timeline .rw::before {
434 background-image: url(rewind.png);
437 @media (min-resolution: 1.1dppx) {
438 .timeline .toggle::before {
439 background-image: url(debugger-pause@2x.png);
442 .paused .timeline .toggle::before,
443 .finished .timeline .toggle::before {
444 background-image: url(debugger-play@2x.png);
447 .timeline .ff::before {
448 background-image: url(fast-forward@2x.png);
451 .timeline .rw::before {
452 background-image: url(rewind@2x.png);
457 -moz-appearance: none;
459 color: var(--theme-body-color);
460 border-right: 1px solid var(--theme-splitter-color);
463 /* Slider (input type range) container */
465 .timeline .sliders-container {
472 .timeline .sliders-container .current-time {
481 .timeline .sliders-container .current-time::-moz-range-thumb {
486 background: var(--theme-highlight-blue);
489 .timeline .sliders-container .current-time::-moz-range-track {
492 background: transparent;
495 /* Current time label */
497 .timeline .time-display {
500 justify-content: center;
502 border-left: 1px solid var(--theme-splitter-color);
503 background: var(--theme-toolbar-background);