devtools/client/themes/animation.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 :root {
   8   --animation-item-hover-color: rgba(215, 215, 219, 0.4);
   9   --animation-item-selected-color: rgba(215, 215, 219, 0.9);
  10   --cssanimation-color: var(--purple-50);
  11   --csstransition-color: var(--blue-55);
  12   --fast-track-image: url("images/animation-fast-track.svg");
  13   --graph-height: 30px;
  14   --graph-right-offset: 10px;
  15   --keyframe-marker-shadow-color: #c4c4c4;
  16   --pause-image: url(chrome://devtools/skin/images/pause.svg);
  17   --progress-bar-color: var(--grey-40);
  18   --resume-image: url(chrome://devtools/skin/images/play.svg);
  19   --rewind-image: url(chrome://devtools/skin/images/rewind.svg);
  20   --scriptanimation-color: var(--green-60);
  21   --scrubber-color: var(--magenta-65);
  22   --sidebar-width: 200px;
  23   --tick-line-style: 0.5px solid var(--theme-splitter-color);
  24 }
  25
  26 :root.theme-dark {
  27   --animation-item-hover-color: rgba(74, 74, 79, 0.5);
  28   --animation-item-selected-color: var(--grey-60);
  29   --csstransition-color: var(--blue-50);
  30   --keyframe-marker-shadow-color: #818181;
  31   --progress-bar-color: var(--grey-50);
  32   --scrubber-color: var(--magenta-50);
  33 }
  34
  35 #animationinspector-panel {
  36   overflow-x: auto;
  37 }
  38
  39 /* Root element of animation inspector */
  40 #animation-container {
  41   cursor: default;
  42   display: flex;
  43   flex-direction: column;
  44   height: 100%;
  45   outline: none;
  46   min-width: var(--min-container-width);
  47 }
  48
  49 #animation-container .uncontrolled {
  50   overflow: hidden;
  51 }
  52
  53 #animation-container:not(.animation-detail-visible) .controlled {
  54   display: none;
  55 }
  56
  57 #animation-container .animation-container-splitter {
  58   overflow: hidden;
  59 }
  60
  61 /* Animation Toolbar */
  62 .animation-toolbar {
  63   display: flex;
  64 }
  65
  66 .pause-resume-button::before {
  67   background-image: var(--pause-image);
  68 }
  69
  70 .pause-resume-button.paused::before {
  71   background-image: var(--resume-image);
  72 }
  73
  74 select.playback-rate-selector.devtools-button {
  75   background-image: url("chrome://devtools/skin/images/dropmarker.svg");
  76   background-position: calc(100% - 4px) center;
  77   background-repeat: no-repeat;
  78   padding-inline-end: 1em;
  79   text-align: center;
  80 }
  81
  82 select.playback-rate-selector.devtools-button:not(:empty, :disabled, .checked):hover {
  83   background: none;
  84   background-color: var(--toolbarbutton-background);
  85   background-image: url("chrome://devtools/skin/images/dropmarker.svg");
  86   background-position: calc(100% - 4px) center;
  87   background-repeat: no-repeat;
  88   border-color: var(--toolbarbutton-hover-border-color);
  89 }
  90
  91 .rewind-button::before {
  92   background-image: var(--rewind-image);
  93 }
  94
  95 /* Animation List Container */
  96 .animation-list-container {
  97   overflow: hidden;
  98   width: 100%;
  99   user-select: none;
 100 }
 101
 102 .animation-list-container.active-scrubber,
 103 .animation-list-container.active-scrubber .animation-summary-graph {
 104   cursor: col-resize;
 105 }
 106
 107 /* Current Time Scrubber */
 108 .current-time-scrubber-area {
 109   grid-column: 2 / 3;
 110   position: relative;
 111   z-index: 2;
 112 }
 113
 114 .current-time-scrubber-area::before {
 115   content: "";
 116   cursor: col-resize;
 117   height: var(--theme-toolbar-height);
 118   pointer-events: auto;
 119   position: absolute;
 120   /* In order to click on edge of current-time-scrubber-controller element */
 121   width: calc(100% + 1px);
 122 }
 123
 124 .current-time-scrubber-area:dir(rtl)::before {
 125   /* In order to click on the start edge of current-time-scrubber-area element on RTL */
 126   margin-inline-start: -1px;
 127 }
 128
 129 .indication-bar.current-time-scrubber {
 130   cursor: col-resize;
 131   pointer-events: auto;
 132 }
 133
 134 .indication-bar.current-time-scrubber:dir(rtl)::before {
 135   transform: translateX(6px);
 136 }
 137
 138 .indication-bar.current-time-scrubber:dir(rtl)::after {
 139   transform: translateX(1px);
 140 }
 141
 142 .indication-bar.current-time-scrubber::before {
 143   border-top-color: var(--scrubber-color);
 144 }
 145
 146 .indication-bar.current-time-scrubber::after {
 147   background-color: var(--scrubber-color);
 148 }
 149
 150 /* Animation Item */
 151 .animation-item.cssanimation {
 152   --graph-color: var(--cssanimation-color);
 153   --graph-opacity: 0.7;
 154 }
 155
 156 .animation-item.csstransition {
 157   --graph-color: var(--csstransition-color);
 158   --graph-opacity: 0.8;
 159 }
 160
 161 .animation-item.scriptanimation {
 162   --graph-color: var(--scriptanimation-color);
 163   --graph-opacity: 0.5;
 164 }
 165
 166 .animation-item:hover {
 167   background-color: var(--animation-item-hover-color);
 168 }
 169
 170 .animation-item.selected {
 171   background-color: var(--animation-item-selected-color);
 172 }
 173
 174 /* Animation Target */
 175 .animation-target {
 176   align-items: center;
 177   display: flex;
 178   grid-column: 1 / 2;
 179   height: inherit;
 180   padding-inline-start: 4px;
 181   /* animation-target is tech term, so it should be displayed as ltr. */
 182   direction: ltr;
 183 }
 184
 185 .animation-item:dir(rtl).animation-target {
 186   right:0;
 187 }
 188
 189 /* Reps component */
 190 .animation-target .objectBox {
 191   display: flex;
 192   max-width: 100%;
 193 }
 194
 195 .animation-target .objectBox .attrName {
 196   min-width: 0;
 197   overflow: hidden;
 198   text-overflow: ellipsis;
 199   white-space: nowrap;
 200 }
 201
 202 .animation-target .objectBox .highlight-node {
 203   fill: var(--theme-icon-dimmed-color);
 204   flex: none;
 205 }
 206
 207 .animation-target .objectBox .highlight-node:hover{
 208   fill: var(--theme-icon-color);
 209 }
 210
 211 .animation-target .objectBox .highlight-node:active,
 212 .animation-target.highlighting .objectBox .highlight-node {
 213   fill: var(--theme-icon-checked-color);
 214   /* Since the icon is quite thin, it can be hard to differentiate it
 215      from its regular state. Adding some background helps make it pop a bit */
 216   background-color: var(--dimmed-highlighter-box-content-color);
 217 }
 218
 219 /* Summary Graph */
 220 .animation-summary-graph {
 221   cursor: pointer;
 222   grid-column: 2 / 3;
 223   height: inherit;
 224   padding-bottom: 3px;
 225   padding-top: 3px;
 226   position: relative;
 227 }
 228
 229 .animation-summary-graph.compositor::after {
 230   background-image: var(--fast-track-image);
 231   background-repeat: no-repeat;
 232   content: "";
 233   display: block;
 234   fill: var(--theme-icon-dimmed-color);
 235   height: 100%;
 236   position: absolute;
 237   right: 0;
 238   top: 5px;
 239   width: 15px;
 240   -moz-context-properties: fill;
 241 }
 242
 243 .animation-summary-graph.compositor:dir(rtl)::after {
 244   right: unset;
 245   left: 0;
 246 }
 247
 248 .animation-summary-graph-path {
 249   height: 100%;
 250   width: 100%;
 251 }
 252
 253 .animation-summary-graph:dir(rtl) .animation-summary-graph-path {
 254   transform: scaleX(-1.0);
 255 }
 256
 257 .animation-computed-timing-path path {
 258   fill: var(--graph-color);
 259   fill-opacity: var(--graph-opacity);
 260   stroke: var(--graph-color);
 261   vector-effect: non-scaling-stroke;
 262   transform: scale(1, -1);
 263 }
 264
 265 .animation-computed-timing-path path.infinity:nth-child(n+2) {
 266   opacity: 0.3;
 267 }
 268
 269 .animation-effect-timing-path path {
 270   fill: none;
 271   stroke: var(--graph-color);
 272   stroke-dasharray: 2px 2px;
 273   transform: scale(1, -1);
 274   vector-effect: non-scaling-stroke;
 275 }
 276
 277 .animation-effect-timing-path path.infinity:nth-child(n+2) {
 278   opacity: 0.3;
 279 }
 280
 281 .animation-computed-timing-path path.infinity-duration,
 282 .animation-effect-timing-path path.infinity-duration {
 283   mask-clip: stroke-box;
 284   mask-image: linear-gradient(90deg, black, transparent);
 285   mask-origin: stroke-box;
 286 }
 287
 288 .animation-negative-delay-path path,
 289 .animation-negative-end-delay-path path {
 290   fill: none;
 291   stroke: var(--theme-graphs-grey);
 292   stroke-dasharray: 2px 2px;
 293   transform: scale(1, -1);
 294   vector-effect: non-scaling-stroke;
 295 }
 296
 297 .animation-delay-sign,
 298 .animation-end-delay-sign {
 299   background-color: var(--theme-graphs-grey);
 300   height: 3px;
 301   position: absolute;
 302   bottom: 2px;
 303 }
 304
 305 .animation-delay-sign::before,
 306 .animation-end-delay-sign::before {
 307   background-color: inherit;
 308   border-radius: 50%;
 309   content: "";
 310   height: 6px;
 311   position: absolute;
 312   top: -1.5px;
 313   width: 6px;
 314 }
 315
 316 .animation-delay-sign.fill,
 317 .animation-end-delay-sign.fill {
 318   background-color: var(--graph-color);
 319 }
 320
 321 /* These are delay sign directions. Basically, we can't use
 322   the transform due to pseudo element, So we use the left/right align. */
 323
 324 .animation-delay-sign:dir(ltr)::before {
 325   left: -3px;
 326   right: unset;
 327 }
 328
 329 .animation-delay-sign:dir(rtl)::before {
 330   left: unset;
 331   right: -3px;
 332 }
 333
 334 .animation-delay-sign.negative:dir(ltr)::before {
 335   left: unset;
 336   right: -3px;
 337 }
 338
 339 .animation-delay-sign.negative:dir(rtl)::before {
 340   left: -3px;
 341   right: unset;
 342 }
 343
 344 .animation-end-delay-sign:dir(ltr)::before {
 345   left: unset;
 346   right: -3px;
 347 }
 348
 349 .animation-end-delay-sign:dir(rtl)::before {
 350   left: -3px;
 351   right: unset;
 352 }
 353
 354 .animation-end-delay-sign.negative:dir(ltr)::before {
 355   left: -3px;
 356   right: unset;
 357 }
 358 .animation-end-delay-sign.negative:dir(rtl)::before {
 359   left: unset;
 360   right: -3px;
 361 }
 362
 363 .animation-name {
 364   height: 100%;
 365   left: 0;
 366   pointer-events: none;
 367   position: absolute;
 368   top: 0;
 369   width: calc(100% - 20px);
 370 }
 371
 372 .animation-name text {
 373   dominant-baseline: middle;
 374   fill: var(--theme-focus-outline-color);
 375   paint-order: stroke;
 376   stroke: var(--theme-body-background);
 377   stroke-linejoin: round;
 378   stroke-opacity: .5;
 379   stroke-width: 4;
 380   text-anchor: end;
 381 }
 382
 383 .animation-summary-graph:dir(rtl) .animation-name text {
 384   transform: translateX(-100%);
 385 }
 386
 387 .animation-summary-graph:dir(rtl) .animation-name {
 388   right:0;
 389 }
 390
 391 /* Animation Detail */
 392 .animation-detail-container {
 393   background-color: var(--theme-sidebar-background);
 394   display: flex;
 395   flex-direction: column;
 396   height: 100%;
 397   overflow: hidden;
 398   width: 100%;
 399   z-index: 2;
 400 }
 401
 402 .animation-detail-header {
 403   display: flex;
 404   padding-inline-end: 0;
 405 }
 406
 407 /* On OSX the cursor turns into a window-resizing cursor at the edges of the
 408  * window, so bring the end of the close button in. */
 409 :root[platform="mac"] .animation-detail-header {
 410   padding-inline-end: 2px;
 411 }
 412
 413 .animation-detail-title {
 414   flex: 1;
 415   overflow: hidden;
 416   text-overflow: ellipsis;
 417   white-space: nowrap;
 418 }
 419
 420 .animation-detail-close-button {
 421   margin: 0;
 422 }
 423
 424 .animation-detail-close-button::before {
 425   background-image: url(chrome://devtools/skin/images/close.svg);
 426 }
 427
 428 /* Animated Property List Container */
 429 .animated-property-list-container {
 430   flex: 1;
 431   overflow: hidden;
 432   user-select: none;
 433 }
 434
 435 /* Keyframes Progress Bar */
 436 .keyframes-progress-bar-area {
 437   background: none;
 438   grid-column: 2 / 3;
 439   pointer-events: none;
 440   position: relative;
 441   z-index: 2;
 442 }
 443
 444 .indication-bar.keyframes-progress-bar::before {
 445   border-top-color: var(--progress-bar-color);
 446 }
 447
 448 .indication-bar.keyframes-progress-bar::after {
 449   background-color: var(--progress-bar-color);
 450 }
 451
 452 /* Animated Property Item */
 453 .animated-property-item.unchanged {
 454   opacity: 0.6;
 455 }
 456
 457 /* Animated Property Name */
 458 .animated-property-name {
 459   align-items: center;
 460   display: flex;
 461   height: inherit;
 462   justify-content: flex-end;
 463   padding-inline-end: 10px;
 464 }
 465
 466 .animated-property-name.compositor span {
 467   padding-inline-start: 15px;
 468   position: relative;
 469 }
 470
 471 .animated-property-list-container.cssanimation .animated-property-name.compositor {
 472   --fast-track-color: var(--cssanimation-color);
 473 }
 474
 475 .animated-property-list-container.csstransition .animated-property-name.compositor {
 476   --fast-track-color: var(--csstransition-color);
 477 }
 478
 479 .animated-property-list-container.scriptanimation .animated-property-name.compositor {
 480   --fast-track-color: var(--scriptanimation-color);
 481 }
 482
 483 .animated-property-name.compositor span:dir(ltr)::before,
 484 .animated-property-name.compositor span:dir(rtl)::after {
 485   background-image: var(--fast-track-image);
 486   background-repeat: no-repeat;
 487   background-size: contain;
 488   content: "";
 489   fill: var(--fast-track-color);
 490   height: 100%;
 491   position: absolute;
 492   /* In order to support RTL/LTR both of environment, set the left and right to zero */
 493   left: 0;
 494   right: 0;
 495   width: 15px;
 496   -moz-context-properties: fill;
 497 }
 498
 499 .animated-property-name.warning span {
 500   text-decoration: underline dotted;
 501 }
 502
 503 /* Keyframes Graph */
 504 .keyframes-graph {
 505   grid-column: 2 / 3;
 506   height: inherit;
 507   padding-top: 5px;
 508   position: relative;
 509 }
 510
 511 .keyframes-graph:dir(rtl) .keyframes-graph-path {
 512   transform: scaleX(-1.0);
 513 }
 514
 515 .keyframes-graph-path {
 516   height: 100%;
 517   width: 100%;
 518 }
 519
 520 .keyframes-graph-path path {
 521   fill: var(--teal-60);
 522   fill-opacity: 0.5;
 523   stroke: var(--teal-70);
 524   vector-effect: non-scaling-stroke;
 525   transform: scale(1, -1);
 526 }
 527
 528 .keyframes-graph.opacity .keyframes-graph-path path {
 529   fill: var(--magenta-50);
 530   stroke: var(--magenta-70);
 531 }
 532
 533 .keyframes-graph.transform .keyframes-graph-path path {
 534   fill: var(--yellow-50);
 535   stroke: var(--yellow-60);
 536 }
 537
 538 .keyframes-graph-path .color-path path {
 539   fill-opacity: 1;
 540   stroke: none;
 541 }
 542
 543 .keyframes-graph .keyframes-graph-path .hint path {
 544   fill: none;
 545   stroke-linecap: round;
 546   stroke-opacity: 0;
 547 }
 548
 549 .keyframes-graph-path .hint path:hover {
 550   stroke-opacity: 1;
 551 }
 552
 553 .keyframes-graph-path .hint rect {
 554   fill-opacity: 0.1;
 555 }
 556
 557 .keyframes-graph-path .hint line {
 558   stroke: #00b0bd;
 559   stroke-opacity: 0;
 560   vector-effect: non-scaling-stroke;
 561 }
 562
 563 .keyframes-graph-path .hint:hover line {
 564   stroke-opacity: 1;
 565 }
 566
 567 /* Keyframe Marker List */
 568 .keyframe-marker-list {
 569   pointer-events: none;
 570   position: absolute;
 571   height: 100%;
 572   list-style-type: none;
 573   top: 0%;
 574   width: 100%;
 575   padding-inline-start: 0;
 576 }
 577
 578 .keyframe-marker-item {
 579   box-shadow: 0 0 0 1px var(--keyframe-marker-shadow-color);
 580   border-radius: 100%;
 581   pointer-events: auto;
 582   position: absolute;
 583   top: 50%;
 584   height: 10px;
 585   transform: translate(-5px, -3px);
 586   width: 10px;
 587 }
 588
 589 .keyframe-marker-item:dir(rtl) {
 590   transform: translate(5px, -3px);
 591 }
 592
 593 .animated-property-list-container.cssanimation .keyframe-marker-item {
 594   background-color: var(--cssanimation-color);
 595 }
 596
 597 .animated-property-list-container.csstransition .keyframe-marker-item {
 598   background-color: var(--csstransition-color);
 599 }
 600
 601 .animated-property-list-container.scriptanimation .keyframe-marker-item {
 602   background-color: var(--scriptanimation-color);
 603 }
 604
 605 /* Common Components */
 606 /* Progress Inspection Panel */
 607 .progress-inspection-panel {
 608   height: 100%;
 609   overflow-y: auto;
 610   overflow-x: hidden;
 611
 612   display: grid;
 613   grid-template-columns: var(--sidebar-width) 1fr var(--graph-right-offset);
 614   grid-template-rows: var(--theme-toolbar-height) calc(100% - var(--theme-toolbar-height));
 615 }
 616
 617 .progress-inspection-panel > .background {
 618   grid-column: 1 / -1;
 619   grid-row: 1 / -1;
 620
 621   position: sticky;
 622   top: 0;
 623
 624   /* Correspond to the bug 1462235 */
 625   height: calc(100% - 1px);
 626
 627   pointer-events: none;
 628
 629   display: grid;
 630   grid-template-columns: subgrid;
 631 }
 632
 633 .progress-inspection-panel > .header {
 634   grid-column: 1 / -1;
 635   grid-row: 1 / 2;
 636
 637   position: sticky;
 638   top: 0;
 639
 640   padding: 0;
 641   z-index: 1;
 642
 643   display: grid;
 644   grid-template-columns: subgrid;
 645 }
 646
 647 .progress-inspection-panel > .indicator {
 648   grid-column: 1 / -1;
 649   grid-row: 1 / -1;
 650
 651   position: sticky;
 652   top: 0;
 653
 654   /* Correspond to the bug 1462235 */
 655   height: calc(100% - 1px);
 656
 657   pointer-events: none;
 658   z-index: 2;
 659
 660   display: grid;
 661   grid-template-columns: subgrid;
 662 }
 663
 664 .progress-inspection-panel > ul {
 665   grid-column: 1 / -1;
 666   grid-row: 2 / -1;
 667
 668   list-style-type: none;
 669   margin: 0;
 670   padding: 0;
 671
 672   display: grid;
 673   grid-template-columns: subgrid;
 674   grid-auto-rows: min-content;
 675 }
 676
 677 .progress-inspection-panel > ul > li {
 678   grid-column: 1 / -1;
 679   height: var(--graph-height);
 680   display: grid;
 681   grid-template-columns: subgrid;
 682 }
 683
 684 /* Tick Lines */
 685 .tick-lines {
 686   grid-column: 2 / 3;
 687   position: relative;
 688 }
 689
 690 .tick-line {
 691   position: absolute;
 692   height: 100%;
 693   border-inline-start: var(--tick-line-style);
 694 }
 695
 696 /* Tick Labels */
 697 .tick-labels {
 698   grid-column: 2 / 3;
 699   height: 100%;
 700   position: relative;
 701 }
 702
 703 .tick-label {
 704   border-inline-start: var(--tick-line-style);
 705   height: 100%;
 706   position: absolute;
 707   white-space: nowrap;
 708   overflow: hidden;
 709   text-overflow: ellipsis;
 710 }
 711
 712 .animated-property-list-container .tick-label:last-child {
 713   border-inline-start: unset;
 714   border-inline-end: var(--tick-line-style);
 715   transform: translateX(calc(-100% + 0.5px));
 716 }
 717
 718 .animated-property-list-container .tick-label:dir(rtl):last-child {
 719   transform: translateX(calc(100% - 0.6px));
 720 }
 721
 722 /* Indication Bar */
 723 .indication-bar {
 724   position: absolute;
 725   height: 100%;
 726 }
 727
 728 .indication-bar::before {
 729   border-inline-start: 5px solid transparent;
 730   border-inline-end: 5px solid transparent;
 731   border-top: 5px solid;
 732   content: "";
 733   height: calc(100% - 5px);
 734   position: absolute;
 735   transform: translateX(-6px);
 736   width: 1px;
 737 }
 738
 739 .indication-bar::after {
 740   content: "";
 741   height: 100%;
 742   position: absolute;
 743   transform: translateX(-1px);
 744   width: 1px;
 745 }
 746
 747 /* No Animation Panel */
 748 .animation-error-message > p {
 749   white-space: pre-wrap;
 750 }
 751
 752 .animation-element-picker::before {
 753   background-image: url("resource://devtools-shared-images/command-pick.svg");
 754 }