LCARStrek/devtools/animationinspector.css

   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/. */
   4
   5 /* Animation-inspector specific theme variables */
   6
   7 .theme-dark,
   8 .theme-light,
   9 .theme-firebug {
  10   --even-animation-timeline-background-color: rgba(160,144,144,0.03);
  11   --command-pick-image: url(chrome://devtools/skin/images/command-pick.svg);
  12   --pause-image: url(chrome://devtools/skin/images/pause.svg);
  13   --rewind-image: url(chrome://devtools/skin/images/rewind.svg);
  14   --play-image: url(chrome://devtools/skin/images/play.svg);
  15 }
  16
  17 :root {
  18   /* How high should toolbars be */
  19   --toolbar-height: 20px;
  20   /* How wide should the sidebar be (should be wide enough to contain long
  21      property names like 'border-bottom-right-radius' without ellipsis) */
  22   --timeline-sidebar-width: 200px;
  23   /* How high should animations displayed in the timeline be */
  24   --timeline-animation-height: 20px;
  25   /* The size of a keyframe marker in the keyframes diagram */
  26   --keyframes-marker-size: 10px;
  27   /* The color of the time graduation borders */
  28   --time-graduation-border-color: rgba(160, 144, 144, .5);
  29 }
  30
  31 .animation {
  32   --timeline-border-color: var(--theme-body-color);
  33   --timeline-background-color: var(--theme-splitter-color);
  34 }
  35
  36 .animation.cssanimation {
  37   --timeline-border-color: var(--theme-highlight-lightorange);
  38   --timeline-background-color: var(--theme-contrast-background);
  39 }
  40
  41 .animation.csstransition {
  42   --timeline-border-color: var(--theme-highlight-bluegrey);
  43   --timeline-background-color: var(--theme-highlight-blue);
  44 }
  45
  46 .animation.scriptanimation {
  47   --timeline-border-color: var(--theme-highlight-green);
  48   --timeline-background-color: var(--theme-graphs-green);
  49 }
  50
  51 html {
  52   height: 100%;
  53 }
  54
  55 body {
  56   margin: 0;
  57   padding: 0;
  58   display : flex;
  59   flex-direction: column;
  60   height: 100%;
  61   overflow: hidden;
  62   color: var(--theme-content-color3);
  63 }
  64
  65 /* The top toolbar, containing the toggle-all button. And the timeline toolbar,
  66    containing playback control buttons, shown only when there are animations
  67    displayed in the timeline */
  68
  69 #global-toolbar,
  70 #timeline-toolbar {
  71   border-bottom: 1px solid var(--theme-splitter-color);
  72   display: flex;
  73   flex-direction: row;
  74   align-items: center;
  75   justify-content: flex-end;
  76   height: var(--toolbar-height);
  77 }
  78
  79 #timeline-toolbar {
  80   display: none;
  81   justify-content: flex-start;
  82 }
  83
  84 [timeline] #global-toolbar {
  85   display: none;
  86 }
  87
  88 [timeline] #timeline-toolbar {
  89   display: flex;
  90 }
  91
  92 /* The main animations container */
  93
  94 #sidebar-panel-animationinspector {
  95   height: 100%;
  96   width: 100%;
  97 }
  98
  99 #players {
 100   height: calc(100% - var(--toolbar-height));
 101   overflow-x: hidden;
 102   overflow-y: auto;
 103 }
 104
 105 [empty] #players {
 106   display: none;
 107 }
 108
 109 /* The error message, shown when an invalid/unanimated element is selected */
 110
 111 #error-message {
 112   padding-top: 10%;
 113   text-align: center;
 114   flex: 1;
 115   overflow: auto;
 116
 117   /* The error message is hidden by default */
 118   display: none;
 119 }
 120
 121 [empty] #error-message {
 122   display: block;
 123 }
 124
 125 /* Element picker, toggle-all buttons, timeline pause button, ... */
 126
 127 #global-toolbar > *,
 128 #timeline-toolbar > * {
 129   min-height: var(--toolbar-height);
 130   border-color: var(--theme-splitter-color);
 131   border-width: 0 0 0 1px;
 132   display: flex;
 133   justify-content: center;
 134   align-items: center;
 135 }
 136
 137 #global-toolbar .label,
 138 #timeline-toolbar .label {
 139   padding: 0 5px;
 140   border-style: solid;
 141 }
 142
 143 #global-toolbar .devtools-button,
 144 #timeline-toolbar .devtools-button {
 145   margin: 0;
 146   padding: 0;
 147 }
 148
 149 #timeline-toolbar .devtools-button,
 150 #timeline-toolbar .label {
 151   border-width: 0 1px 0 0;
 152 }
 153
 154 #element-picker {
 155   height: 18px;
 156 }
 157
 158 #element-picker::before {
 159   background-image: var(--command-pick-image);
 160 }
 161
 162 .pause-button::before {
 163   background-image: var(--pause-image);
 164 }
 165
 166 #rewind-timeline::before {
 167   background-image: var(--rewind-image);
 168 }
 169
 170 .pause-button.paused::before {
 171   background-image: var(--play-image);
 172 }
 173
 174 #timeline-rate select.devtools-button {
 175   -moz-appearance: none;
 176   text-align: center;
 177   font-family: inherit;
 178   color: var(--theme-body-color);
 179   font-size: 1em;
 180   position: absolute;
 181   top: 0;
 182   left: 0;
 183   width: 100%;
 184   height: 100%;
 185   background-image: url("chrome://devtools/skin/images/dropmarker.svg");
 186   background-repeat: no-repeat;
 187   background-position: calc(100% - 4px) center;
 188   padding-right: 1em;
 189 }
 190
 191 #timeline-rate {
 192   position: relative;
 193   width: 4.5em;
 194 }
 195
 196 /* Animation timeline component */
 197
 198 .animation-timeline {
 199   position: relative;
 200   display: flex;
 201   flex-direction: column;
 202 }
 203
 204 /* Useful for positioning animations or keyframes in the timeline */
 205 .animation-timeline .track-container {
 206   position: absolute;
 207   top: 0;
 208   left: var(--timeline-sidebar-width);
 209   /* Leave the width of a marker right of a track so the 100% markers can be
 210      selected easily */
 211   right: var(--keyframes-marker-size);
 212   height: var(--timeline-animation-height);
 213 }
 214
 215 .animation-timeline .scrubber-wrapper {
 216   position: absolute;
 217   left: var(--timeline-sidebar-width);
 218   /* Leave the width of a marker right of a track so the 100% markers can be
 219      selected easily */
 220   right: var(--keyframes-marker-size);
 221   height: 100%;
 222 }
 223
 224 .animation-timeline .scrubber {
 225   z-index: 5;
 226   pointer-events: none;
 227   position: absolute;
 228   /* Make the scrubber as tall as the viewport minus the toolbar height and the
 229      header-wrapper's borders */
 230   height: calc(100vh - var(--toolbar-height) - 1px);
 231   min-height: 100%;
 232   width: 0;
 233   border-right: 1px solid #FF0000;
 234   box-sizing: border-box;
 235 }
 236
 237 /* The scrubber handle is a transparent element displayed on top of the scrubber
 238    line that allows users to drag it */
 239 .animation-timeline .scrubber .scrubber-handle {
 240   position: absolute;
 241   height: 100%;
 242   /* Make it thick enough for easy dragging */
 243   width: 6px;
 244   right: -1.5px;
 245   cursor: col-resize;
 246   pointer-events: all;
 247 }
 248
 249 .animation-timeline .scrubber .scrubber-handle::before {
 250   content: "";
 251   position: sticky;
 252   top: 0;
 253   width: 1px;
 254   border-top: 5px solid red;
 255   border-left: 5px solid transparent;
 256   border-right: 5px solid transparent;
 257 }
 258
 259 .animation-timeline .time-header {
 260   min-height: var(--timeline-animation-height);
 261   cursor: col-resize;
 262   -moz-user-select: none;
 263 }
 264
 265 .animation-timeline .time-header .header-item {
 266   position: absolute;
 267   height: 100%;
 268   padding-top: 3px;
 269   border-left: 0.5px solid var(--time-graduation-border-color);
 270 }
 271
 272 .animation-timeline .header-wrapper {
 273   position: sticky;
 274   top: 0;
 275   background-color: var(--theme-body-background);
 276   border-bottom: 1px solid var(--time-graduation-border-color);
 277   z-index: 3;
 278   height: var(--timeline-animation-height);
 279   overflow: hidden;
 280 }
 281
 282 .animation-timeline .time-body {
 283   height: 100%;
 284 }
 285
 286 .animation-timeline .time-header .time-tick {
 287   -moz-user-select: none;
 288   position: absolute;
 289   width: 0;
 290   /* When scroll bar is shown, make it covers entire time-body */
 291   height: 100%;
 292   /* When scroll bar is hidden, make it as tall as the viewport minus the
 293      timeline animation height and the header-wrapper's borders */
 294   min-height: calc(100vh - var(--timeline-animation-height) - 1px);
 295   border-left: 0.5px solid var(--time-graduation-border-color);
 296 }
 297
 298 .animation-timeline .animations {
 299   width: 100%;
 300   height: 100%;
 301   padding: 0;
 302   list-style-type: none;
 303   margin-top: 0;
 304 }
 305
 306 /* Animation block widgets */
 307
 308 .animation-timeline .animation {
 309   margin: 2px 0;
 310   height: var(--timeline-animation-height);
 311   position: relative;
 312 }
 313
 314 /* We want animations' background colors to alternate, but each animation has
 315    a sibling (hidden by default) that contains the animated properties and
 316    keyframes, so we need to alternate every 4 elements. */
 317 .animation-timeline .animation:nth-child(4n+1) {
 318   background-color: var(--even-animation-timeline-background-color);
 319 }
 320
 321 .animation-timeline .animation .target {
 322   width: var(--timeline-sidebar-width);
 323   height: 100%;
 324   overflow: hidden;
 325   display: flex;
 326   align-items: center;
 327 }
 328
 329 .animation-timeline .animation-target {
 330   background-color: transparent;
 331 }
 332
 333 .animation-timeline .animation .time-block {
 334   cursor: pointer;
 335 }
 336
 337 /* Animation iterations */
 338
 339 .animation-timeline .animation .iterations {
 340   position: absolute;
 341   height: 100%;
 342   box-sizing: border-box;
 343
 344   /* Iterations of the animation are displayed with a repeating linear-gradient
 345      which size is dynamically changed from JS. The gradient only draws 1px
 346      borders between each iteration. These borders must have the same color as
 347      the border of this element */
 348   background-image:
 349     linear-gradient(to left,
 350                     var(--timeline-border-color) 0,
 351                     var(--timeline-border-color) 1px,
 352                     transparent 1px,
 353                     transparent 2px);
 354   border: 1px solid var(--timeline-border-color);
 355   /* Border-right is already handled by the gradient */
 356   border-width: 1px 0 1px 1px;
 357
 358   /* The background color is set independently */
 359   background-color: var(--timeline-background-color);
 360 }
 361
 362 .animation-timeline .animation .iterations.infinite::before,
 363 .animation-timeline .animation .iterations.infinite::after {
 364   content: "";
 365   position: absolute;
 366   top: 0;
 367   right: 0;
 368   width: 0;
 369   height: 0;
 370   border-right: 4px solid var(--theme-body-background);
 371   border-top: 4px solid transparent;
 372   border-bottom: 4px solid transparent;
 373 }
 374
 375 .animation-timeline .animation .iterations.infinite::after {
 376   bottom: 0;
 377   top: unset;
 378 }
 379
 380 .animation-timeline .animation .name {
 381   position: absolute;
 382   color: var(--theme-selection-color);
 383   height: 100%;
 384   display: flex;
 385   align-items: center;
 386   padding: 0 2px;
 387   box-sizing: border-box;
 388   --fast-track-icon-width: 15px;
 389   z-index: 1;
 390 }
 391
 392 .animation-timeline .animation .name div {
 393   /* Flex items don't support text-overflow, so a child div is used */
 394   white-space: nowrap;
 395   overflow: hidden;
 396   text-overflow: ellipsis;
 397 }
 398
 399 .animation-timeline .fast-track .name div {
 400   width: calc(100% - var(--fast-track-icon-width));
 401 }
 402
 403 .animation-timeline .fast-track .name::after {
 404   /* Animations running on the compositor have the fast-track background image*/
 405   content: "";
 406   display: block;
 407   position: absolute;
 408   top: 1px;
 409   right: 0;
 410   height: 100%;
 411   width: var(--fast-track-icon-width);
 412   z-index: 1;
 413 }
 414
 415 .animation-timeline .all-properties .name::after {
 416   background-color: white;
 417   clip-path: url(images/animation-fast-track.svg#thunderbolt);
 418   background-repeat: no-repeat;
 419   background-position: center;
 420 }
 421
 422 .animation-timeline .some-properties .name::after {
 423   background-color: var(--theme-content-color3);
 424   clip-path: url(images/animation-fast-track.svg#thunderbolt);
 425   background-repeat: no-repeat;
 426   background-position: center;
 427 }
 428
 429 .animation-timeline .animation .delay,
 430 .animation-timeline .animation .end-delay {
 431   position: absolute;
 432   height: 100%;
 433   border: 1px solid var(--timeline-border-color);
 434   box-sizing: border-box;
 435 }
 436
 437 .animation-timeline .animation .delay {
 438   border-width: 1px 0 1px 1px;
 439   background-image: repeating-linear-gradient(45deg,
 440                                               transparent,
 441                                               transparent 1px,
 442                                               var(--theme-selection-color) 1px,
 443                                               var(--theme-selection-color) 4px);
 444   background-color: var(--timeline-border-color);
 445 }
 446
 447 .animation-timeline .animation .end-delay {
 448   border-width: 1px 1px 1px 0;
 449   background-image: repeating-linear-gradient(
 450                       -45deg,
 451                       transparent,
 452                       transparent 3px,
 453                       var(--timeline-border-color) 3px,
 454                       var(--timeline-border-color) 4px);
 455 }
 456
 457 .animation-timeline .animation .delay.negative,
 458 .animation-timeline .animation .end-delay.negative {
 459   /* Negative delays are displayed on top of the animation, so they need a
 460      right border. Whereas normal delays are displayed just before the
 461      animation, so there's already the animation's left border that serves as
 462      a separation. */
 463   border-width: 1px;
 464 }
 465
 466 /* Animation target node gutter, contains a preview of the dom node */
 467
 468 .animation-target {
 469   background-color: var(--theme-toolbar-background);
 470   padding: 0 4px;
 471   box-sizing: border-box;
 472   overflow: hidden;
 473   text-overflow: ellipsis;
 474   white-space: nowrap;
 475   cursor: pointer;
 476 }
 477
 478 .animation-target .attribute-name {
 479   padding-left: 4px;
 480 }
 481
 482 .animation-target .node-highlighter {
 483   background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0;
 484   padding-left: 16px;
 485   margin-right: 5px;
 486   cursor: pointer;
 487 }
 488
 489 .animation-target .node-highlighter:hover {
 490   filter: url(images/filters.svg#checked-icon-state);
 491 }
 492
 493 .animation-target .node-highlighter:active,
 494 .animation-target .node-highlighter.selected {
 495   filter: url(images/filters.svg#checked-icon-state);
 496 }
 497
 498 /* Inline keyframes info in the timeline */
 499
 500 .animation-timeline .animated-properties:not(.selected) {
 501   display: none;
 502 }
 503
 504 .animation-timeline .animated-properties {
 505   background-color: var(--theme-selection-background-semitransparent);
 506 }
 507
 508 .animation-timeline .animated-properties ul {
 509   margin: 0;
 510   padding: 0;
 511   list-style-type: none;
 512 }
 513
 514 .animation-timeline .animated-properties .property {
 515   height: var(--timeline-animation-height);
 516   position: relative;
 517 }
 518
 519 .animation-timeline .animated-properties .property:nth-child(2n) {
 520   background-color: var(--even-animation-timeline-background-color);
 521 }
 522
 523 .animation-timeline .animated-properties .name {
 524   width: var(--timeline-sidebar-width);
 525   padding-right: var(--keyframes-marker-size);
 526   box-sizing: border-box;
 527   height: 100%;
 528   color: var(--theme-body-color-alt);
 529   white-space: nowrap;
 530   display: flex;
 531   justify-content: flex-end;
 532   align-items: center;
 533 }
 534
 535 .animation-timeline .animated-properties .name div {
 536   overflow: hidden;
 537   text-overflow: ellipsis;
 538 }
 539
 540 .animated-properties.cssanimation {
 541   --background-color: var(--theme-contrast-background);
 542 }
 543
 544 .animated-properties.csstransition {
 545   --background-color: var(--theme-highlight-blue);
 546 }
 547
 548 .animated-properties.scriptanimation {
 549   --background-color: var(--theme-graphs-green);
 550 }
 551
 552 .animation-timeline .animated-properties .oncompositor::before {
 553   content: "";
 554   display: inline-block;
 555   width: 17px;
 556   height: 17px;
 557   background-color: var(--background-color);
 558   clip-path: url(images/animation-fast-track.svg#thunderbolt);
 559   vertical-align: middle;
 560 }
 561
 562 .animation-timeline .animated-properties .warning {
 563   text-decoration: underline dotted;
 564 }
 565
 566 .animation-timeline .animated-properties .frames {
 567   /* The frames list is absolutely positioned and the left and width properties
 568      are dynamically set from javascript to match the animation's startTime and
 569      duration */
 570   position: absolute;
 571   top: 0;
 572   height: 100%;
 573   /* Using flexbox to vertically center the frames */
 574   display: flex;
 575   align-items: center;
 576 }
 577
 578 /* Keyframes diagram, displayed below the timeline, inside the animation-details
 579    element. */
 580
 581 .keyframes {
 582   /* Actual keyframe markers are positioned absolutely within this container and
 583      their position is relative to its size (we know the offset of each frame
 584      in percentage) */
 585   position: relative;
 586   width: 100%;
 587   height: 0;
 588 }
 589
 590 .keyframes.cssanimation {
 591   background-color: var(--theme-contrast-background);
 592 }
 593
 594 .keyframes.csstransition {
 595   background-color: var(--theme-highlight-blue);
 596 }
 597
 598 .keyframes.scriptanimation {
 599   background-color: var(--theme-graphs-green);
 600 }
 601
 602 .keyframes .frame {
 603   position: absolute;
 604   top: 0;
 605   width: 0;
 606   height: 0;
 607   background-color: inherit;
 608   cursor: pointer;
 609 }
 610
 611 .keyframes .frame::before {
 612   content: "";
 613   display: block;
 614   transform:
 615     translateX(calc(var(--keyframes-marker-size) * -.5))
 616     /* The extra pixel on the Y axis is so that markers are centered on the
 617        horizontal line in the keyframes diagram. */
 618     translateY(calc(var(--keyframes-marker-size) * -.5 + 1px));
 619   width: var(--keyframes-marker-size);
 620   height: var(--keyframes-marker-size);
 621   border-radius: 100%;
 622   background-color: inherit;
 623 }