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   --even-animation-timeline-background-color: rgba(160,144,144,0.03);
  10 }
  11
  12 :root {
  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;
  19 }
  20
  21 html {
  22   height: 100%;
  23 }
  24
  25 body {
  26   margin: 0;
  27   padding: 0;
  28   display : flex;
  29   flex-direction: column;
  30   height: 100%;
  31   overflow: hidden;
  32   color: var(--theme-content-color3);
  33 }
  34
  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 */
  38
  39 #global-toolbar,
  40 #timeline-toolbar {
  41   border-bottom: 1px solid var(--theme-splitter-color);
  42   display: flex;
  43   flex-direction: row;
  44   align-items: center;
  45   justify-content: flex-end;
  46   height: var(--toolbar-height);
  47 }
  48
  49 #timeline-toolbar {
  50  display: none;
  51 }
  52
  53 [timeline] #global-toolbar {
  54   display: none;
  55 }
  56
  57 [timeline] #timeline-toolbar {
  58   display: flex;
  59 }
  60
  61 #global-toolbar .label {
  62   padding: 1px 4px;
  63 }
  64
  65 /* The main animations container */
  66
  67 #players {
  68   height: calc(100% - var(--toolbar-height));
  69   overflow: auto;
  70 }
  71
  72 [empty] #players {
  73   display: none;
  74 }
  75
  76 /* The error message, shown when an invalid/unanimated element is selected */
  77
  78 #error-message {
  79   padding-top: 10%;
  80   text-align: center;
  81   flex: 1;
  82   overflow: auto;
  83
  84   /* The error message is hidden by default */
  85   display: none;
  86 }
  87
  88 [empty] #error-message {
  89   display: block;
  90 }
  91
  92 /* Element picker, toggle-all buttons, timeline pause button, ... */
  93
  94 #global-toolbar .devtools-button,
  95 #timeline-toolbar .devtools-button {
  96   border-width: 0 0 0 1px;
  97   min-height: var(--toolbar-height);
  98 }
  99
 100 #element-picker::before {
 101   background-image: url("chrome://devtools/skin/command-pick.svg");
 102 }
 103
 104 .pause-button::before {
 105   background-image: url("debugger-pause.png");
 106 }
 107
 108 .pause-button.paused::before {
 109   background-image: url("debugger-play.png");
 110 }
 111
 112 @media (min-resolution: 1.1dppx) {
 113   .pause-button::before {
 114     background-image: url("debugger-pause@2x.png");
 115   }
 116
 117   .pause-button.paused::before {
 118     background-image: url("debugger-play@2x.png");
 119   }
 120 }
 121
 122 #timeline-rate select {
 123   -moz-appearance: none;
 124   text-align: center;
 125   color: inherit;
 126   font-family: inherit;
 127 }
 128
 129 /* Animation timeline component */
 130
 131 .animation-timeline {
 132   height: 100%;
 133   overflow: hidden;
 134   position: relative;
 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;
 144   display: flex;
 145   flex-direction: column;
 146 }
 147
 148 .animation-timeline .scrubber {
 149   position: absolute;
 150   height: 100%;
 151   width: var(--timeline-sidebar-width);
 152   border-right: 1px solid #FF0000;
 153   box-sizing: border-box;
 154   z-index: 1;
 155   pointer-events: none;
 156 }
 157
 158 .animation-timeline .scrubber::before {
 159   content: "";
 160   position: absolute;
 161   top: 0;
 162   width: 1px;
 163   right: -6px;
 164   border-top: 5px solid #FF0000;
 165   border-left: 5px solid transparent;
 166   border-right: 5px solid transparent;
 167 }
 168
 169 .animation-timeline .time-header {
 170   margin-left: var(--timeline-sidebar-width);
 171   height: var(--toolbar-height);
 172   overflow: hidden;
 173   position: relative;
 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);
 177   cursor: col-resize;
 178   -moz-user-select: none;
 179 }
 180
 181 .animation-timeline .time-header .time-tick {
 182   position: absolute;
 183   top: 3px;
 184 }
 185
 186 .animation-timeline .animations {
 187   width: 100%;
 188   overflow-y: auto;
 189   overflow-x: hidden;
 190   margin: 0;
 191   padding: 0;
 192   list-style-type: none;
 193 }
 194
 195 /* Animation block widgets */
 196
 197 .animation-timeline .animation {
 198   margin: 4px 0;
 199   height: var(--timeline-animation-height);
 200   position: relative;
 201 }
 202
 203 .animation-timeline .animation:nth-child(2n) {
 204   background-color: var(--even-animation-timeline-background-color);
 205 }
 206
 207 .animation-timeline .animation .target {
 208   width: var(--timeline-sidebar-width);
 209   overflow: hidden;
 210   height: 100%;
 211 }
 212
 213 .animation-timeline .animation-target {
 214   background-color: transparent;
 215 }
 216
 217 .animation-timeline .animation .time-block {
 218   position: absolute;
 219   top: 0;
 220   left: var(--timeline-sidebar-width);
 221   right: 0;
 222   height: 100%;
 223 }
 224
 225 /* Animation iterations */
 226
 227 .animation-timeline .animation .iterations {
 228   position: relative;
 229   height: 100%;
 230   box-sizing: border-box;
 231   --timelime-border-color: var(--theme-body-color);
 232   --timeline-background-color: var(--theme-splitter-color);
 233
 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 */
 238   background-image:
 239     linear-gradient(to right,
 240                     var(--timelime-border-color) 0,
 241                     var(--timelime-border-color) 1px,
 242                     transparent 1px,
 243                     transparent 2px);
 244   background-repeat: repeat-x;
 245   background-position: -1px 0;
 246   border: 1px solid var(--timelime-border-color);
 247
 248   /* The background color is set independently */
 249   background-color: var(--timeline-background-color);
 250 }
 251
 252 .animation-timeline .animation .cssanimation {
 253   --timelime-border-color: var(--theme-highlight-lightorange);
 254   --timeline-background-color: var(--theme-contrast-background);
 255 }
 256
 257 .animation-timeline .animation .csstransition {
 258   --timelime-border-color: var(--theme-highlight-bluegrey);
 259   --timeline-background-color: var(--theme-highlight-blue);
 260 }
 261
 262 .animation-timeline .animation .iterations.infinite {
 263   border-right-width: 0;
 264 }
 265
 266 .animation-timeline .animation .iterations.infinite::before,
 267 .animation-timeline .animation .iterations.infinite::after {
 268   content: "";
 269   position: absolute;
 270   top: 0;
 271   right: 0;
 272   width: 0;
 273   height: 0;
 274   border-right: 4px solid var(--theme-body-background);
 275   border-top: 4px solid transparent;
 276   border-bottom: 4px solid transparent;
 277 }
 278
 279 .animation-timeline .animation .iterations.infinite::after {
 280   bottom: 0;
 281   top: unset;
 282 }
 283
 284 .animation-timeline .animation .name {
 285   color: var(--theme-selection-color);
 286   height: 100%;
 287   width: 100%;
 288   overflow: hidden;
 289   text-overflow: ellipsis;
 290   white-space: nowrap;
 291   line-height: 150%;
 292   padding: 0 2px;
 293 }
 294
 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;
 299 }
 300
 301 .animation-timeline .animation .delay {
 302   position: absolute;
 303   top: 0;
 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);
 308
 309   border: 1px solid var(--timelime-border-color);
 310   border-width: 1px 0 1px 1px;
 311   background-image: repeating-linear-gradient(45deg,
 312                                               transparent,
 313                                               transparent 1px,
 314                                               var(--theme-selection-color) 1px,
 315                                               var(--theme-selection-color) 4px);
 316   background-color: var(--timelime-border-color);
 317 }
 318
 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
 323      a separation. */
 324   border-width: 1px;
 325 }
 326
 327 .animation-timeline .animation .delay::before {
 328   position: absolute;
 329   content: "";
 330   left: 0;
 331   width: 2px;
 332   height: 8px;
 333   top: 50%;
 334   margin-top: -4px;
 335   background: var(--timelime-border-color);
 336 }
 337
 338 /* Animation target node gutter, contains a preview of the dom node */
 339
 340 .animation-target {
 341   background-color: var(--theme-toolbar-background);
 342   padding: 1px 4px;
 343   box-sizing: border-box;
 344   overflow: hidden;
 345   text-overflow: ellipsis;
 346   white-space: nowrap;
 347 }
 348
 349 .animation-target .attribute-name {
 350   padding-left: 4px;
 351 }
 352
 353 .animation-target .node-highlighter {
 354   background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0;
 355   padding-left: 16px;
 356   margin-right: 5px;
 357   cursor: pointer;
 358 }
 359
 360 .animation-target .node-highlighter:hover {
 361   filter: url(images/filters.svg#checked-icon-state);
 362 }
 363
 364 .animation-target .node-highlighter:active,
 365 .animation-target .node-highlighter.selected {
 366   filter: url(images/filters.svg#checked-icon-state);
 367 }
 368
 369 /* Animation title gutter, contains the name, duration, iteration */
 370
 371 .animation-title {
 372   background-color: var(--theme-toolbar-background);
 373   border-bottom: 1px solid var(--theme-splitter-color);
 374   padding: 1px 4px;
 375   word-wrap: break-word;
 376   overflow: auto;
 377 }
 378
 379 .animation-title .meta-data {
 380   float: right;
 381 }
 382
 383 .animation-title strong {
 384   margin: 0 .5em;
 385 }
 386
 387 .animation-title .meta-data .compositor-icon {
 388     display: none;
 389     background-image: url("images/animation-fast-track.svg");
 390     background-repeat: no-repeat;
 391     padding-left: 12px;
 392     /* Make sure the icon is positioned above the timeline range input so that
 393        its tooltip appears on hover */
 394     z-index: 1;
 395     position: relative;
 396 }
 397
 398 /* Timeline wiget */
 399
 400 .timeline {
 401   height: var(--timeline-animation-height);
 402   width: 100%;
 403   display: flex;
 404   flex-direction: row;
 405   border-bottom: 1px solid var(--theme-splitter-color);
 406 }
 407
 408 .timeline .playback-controls {
 409   display: flex;
 410   flex-direction: row;
 411 }
 412
 413 /* Playback control buttons */
 414
 415 .timeline .playback-controls button {
 416   flex-grow: 1;
 417   border-width: 0 1px 0 0;
 418 }
 419
 420 .timeline .toggle::before {
 421   background-image: url(debugger-pause.png);
 422 }
 423
 424 .paused .timeline .toggle::before,
 425 .finished .timeline .toggle::before {
 426   background-image: url(debugger-play.png);
 427 }
 428
 429 .timeline .ff::before {
 430   background-image: url(fast-forward.png);
 431 }
 432
 433 .timeline .rw::before {
 434   background-image: url(rewind.png);
 435 }
 436
 437 @media (min-resolution: 1.1dppx) {
 438   .timeline .toggle::before {
 439     background-image: url(debugger-pause@2x.png);
 440   }
 441
 442   .paused .timeline .toggle::before,
 443   .finished .timeline .toggle::before {
 444     background-image: url(debugger-play@2x.png);
 445   }
 446
 447   .timeline .ff::before {
 448     background-image: url(fast-forward@2x.png);
 449   }
 450
 451   .timeline .rw::before {
 452     background-image: url(rewind@2x.png);
 453   }
 454 }
 455
 456 .timeline .rate {
 457   -moz-appearance: none;
 458   text-align: center;
 459   color: var(--theme-body-color);
 460   border-right: 1px solid var(--theme-splitter-color);
 461 }
 462
 463 /* Slider (input type range) container */
 464
 465 .timeline .sliders-container {
 466   flex-grow: 1;
 467   height: 100%;
 468   position: relative;
 469   border-width: 1px 0;
 470 }
 471
 472 .timeline .sliders-container .current-time {
 473   position: absolute;
 474   padding: 0;
 475   margin: 0;
 476   left: 0;
 477   width: 100%;
 478   height: 100%;
 479 }
 480
 481 .timeline .sliders-container .current-time::-moz-range-thumb {
 482   height: 100%;
 483   width: 4px;
 484   border-radius: 0;
 485   border: none;
 486   background: var(--theme-highlight-blue);
 487 }
 488
 489 .timeline .sliders-container .current-time::-moz-range-track {
 490   width: 100%;
 491   height: 50px;
 492   background: transparent;
 493 }
 494
 495 /* Current time label */
 496
 497 .timeline .time-display {
 498   display: flex;
 499   align-items: center;
 500   justify-content: center;
 501   width: 50px;
 502   border-left: 1px solid var(--theme-splitter-color);
 503   background: var(--theme-toolbar-background);
 504 }