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 */
38 border-bottom: 1px solid var(--theme-splitter-color);
42 justify-content: flex-end;
43 height: var(--toolbar-height);
51 border-width: 0 0 0 1px;
52 min-height: var(--toolbar-height);
55 /* The main animations container */
58 height: calc(100% - var(--toolbar-height));
62 /* The error message, shown when an invalid/unanimated element is selected */
70 /* The error message is hidden by default */
74 /* Element picker and toggle-all buttons */
81 #element-picker::before,
90 margin: -8px 0 0 -8px;
91 background-image: url("chrome://browser/skin/devtools/command-pick.png");
95 background-image: url("debugger-pause.png");
98 #element-picker[checked]::before {
99 background-position: -48px 0;
100 filter: none; /* Icon is blue when checked, don't invert for light theme */
103 #toggle-all.paused::before {
104 background-image: url("debugger-play.png");
107 @media (min-resolution: 1.1dppx) {
108 #element-picker::before {
109 background-image: url("chrome://browser/skin/devtools/command-pick@2x.png");
110 background-size: 64px;
113 #toggle-all::before {
114 background-image: url("debugger-pause@2x.png");
117 #toggle-all.paused::before {
118 background-image: url("debugger-play@2x.png");
122 /* Animation timeline component */
124 .animation-timeline {
127 /* The timeline gets its background-image from a canvas element created in
128 /browser/devtools/animationinspector/utils.js drawGraphElementBackground
129 thanks to document.mozSetImageElement("time-graduations", canvas)
130 This is done so that the background can be built dynamically from script */
131 background-image: -moz-element(#time-graduations);
132 background-repeat: repeat-y;
133 /* The animations are drawn 150px from the left edge so that animated nodes
134 can be displayed in a sidebar */
135 background-position: var(--timeline-sidebar-width) 0;
137 flex-direction: column;
140 .animation-timeline .scrubber {
143 width: var(--timeline-sidebar-width);
144 border-right: 1px solid #FF0000;
145 box-sizing: border-box;
147 pointer-events: none;
150 .animation-timeline .scrubber::before {
156 border-top: 5px solid #FF0000;
157 border-left: 5px solid transparent;
158 border-right: 5px solid transparent;
161 .animation-timeline .time-header {
162 margin-left: var(--timeline-sidebar-width);
163 height: var(--toolbar-height);
166 /* This is the same color as the time graduations in
167 browser/devtools/animationinspector/utils.js */
168 border-bottom: 1px solid var(--theme-splitter-color);
170 -moz-user-select: none;
173 .animation-timeline .time-header .time-tick {
178 .animation-timeline .animations {
184 list-style-type: none;
187 /* Animation block widgets */
189 .animation-timeline .animation {
191 height: var(--timeline-animation-height);
195 .animation-timeline .animation:nth-child(2n) {
196 background-color: var(--even-animation-timeline-background-color);
199 .animation-timeline .animation .target {
200 width: var(--timeline-sidebar-width);
205 .animation-timeline .animation-target {
206 background-color: transparent;
209 .animation-timeline .animation .time-block {
212 left: var(--timeline-sidebar-width);
217 /* Animation iterations */
219 .animation-timeline .animation .iterations {
222 box-sizing: border-box;
223 --timelime-border-color: var(--theme-body-color);
224 --timeline-background-color: var(--theme-splitter-color);
226 /* Iterations of the animation are displayed with a repeating linear-gradient
227 which size is dynamically changed from JS. The gradient only draws 1px
228 borders between each iteration. These borders must have the same color as
229 the border of this element */
231 linear-gradient(to right,
232 var(--timelime-border-color) 0,
233 var(--timelime-border-color) 1px,
236 background-repeat: repeat-x;
237 background-position: -1px 0;
238 border: 1px solid var(--timelime-border-color);
240 /* The background color is set independently */
241 background-color: var(--timeline-background-color);
244 .animation-timeline .animation .cssanimation {
245 --timelime-border-color: var(--theme-highlight-lightorange);
246 --timeline-background-color: var(--theme-contrast-background);
249 .animation-timeline .animation .csstransition {
250 --timelime-border-color: var(--theme-highlight-bluegrey);
251 --timeline-background-color: var(--theme-highlight-blue);
254 .animation-timeline .animation .iterations.infinite {
255 border-right-width: 0;
258 .animation-timeline .animation .iterations.infinite::before,
259 .animation-timeline .animation .iterations.infinite::after {
266 border-right: 4px solid var(--theme-body-background);
267 border-top: 4px solid transparent;
268 border-bottom: 4px solid transparent;
271 .animation-timeline .animation .iterations.infinite::after {
276 .animation-timeline .animation .name {
277 color: var(--theme-selection-color);
281 text-overflow: ellipsis;
287 .animation-timeline .animation .delay {
290 /* Make sure the delay covers up the animation border */
291 transform: translate(-1px, -1px);
292 box-sizing: border-box;
293 height: calc(100% + 2px);
295 border: 1px solid var(--timelime-border-color);
296 border-width: 1px 0 1px 1px;
297 background-image: repeating-linear-gradient(45deg,
300 var(--theme-selection-color) 1px,
301 var(--theme-selection-color) 4px);
302 background-color: var(--timelime-border-color);
305 .animation-timeline .animation .delay.negative {
306 /* Negative delays are displayed on top of the animation, so they need a
307 right border. Whereas normal delays are displayed just before the
308 animation, so there's already the animation's left border that serves as
313 .animation-timeline .animation .delay::before {
321 background: var(--timelime-border-color);
324 /* Animation target node gutter, contains a preview of the dom node */
327 background-color: var(--theme-toolbar-background);
329 box-sizing: border-box;
331 text-overflow: ellipsis;
335 .animation-target .attribute-name {
339 .animation-target .node-selector {
340 background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0;
346 .animation-target .node-selector:hover {
347 background-position: -32px 0;
350 .animation-target .node-selector:active {
351 background-position: -16px 0;
354 /* Animation title gutter, contains the name, duration, iteration */
357 background-color: var(--theme-toolbar-background);
358 border-bottom: 1px solid var(--theme-splitter-color);
360 word-wrap: break-word;
364 .animation-title .meta-data {
368 .animation-title strong {
372 .animation-title .meta-data .compositor-icon {
374 background-image: url("animation-fast-track.svg");
375 background-repeat: no-repeat;
377 /* Make sure the icon is positioned above the timeline range input so that
378 its tooltip appears on hover */
386 height: var(--timeline-animation-height);
390 border-bottom: 1px solid var(--theme-splitter-color);
393 .timeline .playback-controls {
398 /* Playback control buttons */
400 .timeline .playback-controls button {
402 border-width: 0 1px 0 0;
405 .timeline .toggle::before {
406 background-image: url(debugger-pause.png);
409 .paused .timeline .toggle::before,
410 .finished .timeline .toggle::before {
411 background-image: url(debugger-play.png);
414 .timeline .ff::before {
415 background-image: url(fast-forward.png);
418 .timeline .rw::before {
419 background-image: url(rewind.png);
422 @media (min-resolution: 1.1dppx) {
423 .timeline .toggle::before {
424 background-image: url(debugger-pause@2x.png);
427 .paused .timeline .toggle::before,
428 .finished .timeline .toggle::before {
429 background-image: url(debugger-play@2x.png);
432 .timeline .ff::before {
433 background-image: url(fast-forward@2x.png);
436 .timeline .rw::before {
437 background-image: url(rewind@2x.png);
442 -moz-appearance: none;
444 color: var(--theme-body-color);
445 border-right: 1px solid var(--theme-splitter-color);
448 /* Slider (input type range) container */
450 .timeline .sliders-container {
457 .timeline .sliders-container .current-time {
466 .timeline .sliders-container .current-time::-moz-range-thumb {
471 background: var(--theme-highlight-blue);
474 .timeline .sliders-container .current-time::-moz-range-track {
477 background: transparent;
480 /* Current time label */
482 .timeline .time-display {
485 justify-content: center;
487 border-left: 1px solid var(--theme-splitter-color);
488 background: var(--theme-toolbar-background);