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