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