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 html {
  13   height: 100%;
  14 }
  15
  16 body {
  17   margin: 0;
  18   padding: 0;
  19   display : flex;
  20   flex-direction: column;
  21   height: 100%;
  22   overflow: hidden;
  23   color: var(--theme-content-color3);
  24 }
  25
  26 /* The top toolbar, containing the toggle-all button */
  27
  28 #toolbar {
  29   border-bottom: 1px solid var(--theme-splitter-color);
  30   display: flex;
  31   flex-direction: row;
  32   align-items: center;
  33   justify-content: flex-end;
  34   height: 20px;
  35 }
  36
  37 #toolbar .label {
  38   padding: 1px 4px;
  39 }
  40
  41 #toggle-all {
  42   border-width: 0 0 0 1px;
  43   min-height: 20px;
  44 }
  45
  46 /* The main animations container */
  47
  48 #players {
  49   height: calc(100% - 20px);
  50   overflow: auto;
  51 }
  52
  53 /* The error message, shown when an invalid/unanimated element is selected */
  54
  55 #error-message {
  56   padding-top: 10%;
  57   text-align: center;
  58   flex: 1;
  59   overflow: auto;
  60
  61   /* The error message is hidden by default */
  62   display: none;
  63 }
  64
  65 /* Element picker and toggle-all buttons */
  66
  67 #element-picker,
  68 #toggle-all {
  69   position: relative;
  70 }
  71
  72 #element-picker::before,
  73 #toggle-all::before {
  74   content: "";
  75   display: block;
  76   width: 16px;
  77   height: 16px;
  78   position: absolute;
  79   left: 50%;
  80   top: 50%;
  81   margin: -8px 0 0 -8px;
  82   background-image: url("chrome://browser/skin/devtools/command-pick.png");
  83 }
  84
  85 #toggle-all::before {
  86   background-image: url("debugger-pause.png");
  87 }
  88
  89 #element-picker[checked]::before {
  90   background-position: -48px 0;
  91   filter: none; /* Icon is blue when checked, don't invert for light theme */
  92 }
  93
  94 #toggle-all.paused::before {
  95   background-image: url("debugger-play.png");
  96 }
  97
  98 @media (min-resolution: 1.25dppx) {
  99   #element-picker::before {
 100     background-image: url("chrome://browser/skin/devtools/command-pick@2x.png");
 101     background-size: 64px;
 102   }
 103
 104   #toggle-all::before {
 105     background-image: url("debugger-pause@2x.png");
 106   }
 107
 108   #toggle-all.paused::before {
 109     background-image: url("debugger-play@2x.png");
 110   }
 111 }
 112
 113 /* Animation timeline component */
 114
 115 .animation-timeline {
 116   height: 100%;
 117   overflow: hidden;
 118   /* The timeline gets its background-image from a canvas element created in
 119      /browser/devtools/animationinspector/utils.js drawGraphElementBackground
 120      thanks to document.mozSetImageElement("time-graduations", canvas)
 121      This is done so that the background can be built dynamically from script */
 122   background-image: -moz-element(#time-graduations);
 123   background-repeat: repeat-y;
 124   /* The animations are drawn 150px from the left edge so that animated nodes
 125      can be displayed in a sidebar */
 126   background-position: 150px 0;
 127   display: flex;
 128   flex-direction: column;
 129 }
 130
 131 .animation-timeline .time-header {
 132   margin-left: 150px;
 133   height: 20px;
 134   overflow: hidden;
 135   position: relative;
 136   border-bottom: 1px solid var(--theme-splitter-color);
 137 }
 138
 139 .animation-timeline .time-header .time-tick {
 140   position: absolute;
 141   top: 3px;
 142 }
 143
 144 .animation-timeline .animations {
 145   width: 100%;
 146   overflow-y: auto;
 147   overflow-x: hidden;
 148   margin: 0;
 149   padding: 0;
 150   list-style-type: none;
 151 }
 152
 153 /* Animation block widgets */
 154
 155 .animation-timeline .animation {
 156   margin: 4px 0;
 157   height: 20px;
 158   position: relative;
 159 }
 160
 161 .animation-timeline .animation:nth-child(2n) {
 162   background-color: var(--even-animation-timeline-background-color);
 163 }
 164
 165 .animation-timeline .animation .target {
 166   width: 150px;
 167   overflow: hidden;
 168   height: 100%;
 169 }
 170
 171 .animation-timeline .animation-target {
 172   background-color: transparent;
 173 }
 174
 175 .animation-timeline .animation .time-block {
 176   position: absolute;
 177   top: 0;
 178   left: 150px;
 179   right: 0;
 180   height: 100%;
 181 }
 182
 183 /* Animation iterations */
 184
 185 .animation-timeline .animation .iterations {
 186   position: relative;
 187   height: 100%;
 188   border: 1px solid var(--theme-highlight-lightorange);
 189   box-sizing: border-box;
 190   background: var(--theme-contrast-background);
 191   /* Iterations are displayed with a repeating linear-gradient which size is
 192      dynamically changed from JS */
 193   background-image:
 194     linear-gradient(to right,
 195                     var(--theme-highlight-lightorange) 0,
 196                     var(--theme-highlight-lightorange) 1px,
 197                     transparent 1px,
 198                     transparent 2px);
 199   background-repeat: repeat-x;
 200   background-position: -1px 0;
 201 }
 202
 203 .animation-timeline .animation .iterations.infinite {
 204   border-right-width: 0;
 205 }
 206
 207 .animation-timeline .animation .iterations.infinite::before,
 208 .animation-timeline .animation .iterations.infinite::after {
 209   content: "";
 210   position: absolute;
 211   top: 0;
 212   right: 0;
 213   width: 0;
 214   height: 0;
 215   border-right: 4px solid var(--theme-body-background);
 216   border-top: 4px solid transparent;
 217   border-bottom: 4px solid transparent;
 218 }
 219
 220 .animation-timeline .animation .iterations.infinite::after {
 221   bottom: 0;
 222   top: unset;
 223 }
 224
 225 .animation-timeline .animation .animation-title {
 226   height: 1.5em;
 227   width: 100%;
 228   box-sizing: border-box;
 229   overflow: hidden;
 230 }
 231
 232 .animation-timeline .animation .delay {
 233   position: absolute;
 234   top: 0;
 235   height: 100%;
 236   background-image: linear-gradient(to bottom,
 237                                     transparent,
 238                                     transparent 9px,
 239                                     var(--theme-highlight-lightorange) 9px,
 240                                     var(--theme-highlight-lightorange) 11px,
 241                                     transparent 11px,
 242                                     transparent);
 243 }
 244
 245 .animation-timeline .animation .delay::before {
 246   position: absolute;
 247   content: "";
 248   left: 0;
 249   width: 2px;
 250   height: 8px;
 251   top: 50%;
 252   margin-top: -4px;
 253   background: var(--theme-highlight-lightorange);
 254 }
 255
 256 .animation-timeline .animation .name {
 257   position: absolute;
 258   z-index: 1;
 259   padding: 2px;
 260   white-space: nowrap;
 261 }
 262
 263 /* Animation target node gutter, contains a preview of the dom node */
 264
 265 .animation-target {
 266   background-color: var(--theme-toolbar-background);
 267   padding: 1px 4px;
 268   box-sizing: border-box;
 269   overflow: hidden;
 270   text-overflow: ellipsis;
 271   white-space: nowrap;
 272 }
 273
 274 .animation-target .attribute-name {
 275   padding-left: 4px;
 276 }
 277
 278 .animation-target .node-selector {
 279   background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0;
 280   padding-left: 16px;
 281   margin-right: 5px;
 282   cursor: pointer;
 283 }
 284
 285 .animation-target .node-selector:hover {
 286   background-position: -32px 0;
 287 }
 288
 289 .animation-target .node-selector:active {
 290   background-position: -16px 0;
 291 }
 292
 293 /* Animation title gutter, contains the name, duration, iteration */
 294
 295 .animation-title {
 296   background-color: var(--theme-toolbar-background);
 297   border-bottom: 1px solid var(--theme-splitter-color);
 298   padding: 1px 4px;
 299   word-wrap: break-word;
 300   overflow: auto;
 301 }
 302
 303 .animation-title .meta-data {
 304   float: right;
 305 }
 306
 307 .animation-title strong {
 308   margin: 0 .5em;
 309 }
 310
 311 .animation-title .meta-data .compositor-icon {
 312     display: none;
 313     background-image: url("animation-fast-track.svg");
 314     background-repeat: no-repeat;
 315     padding-left: 12px;
 316     /* Make sure the icon is positioned above the timeline range input so that
 317        its tooltip appears on hover */
 318     z-index: 1;
 319     position: relative;
 320 }
 321
 322 /* Timeline wiget */
 323
 324 .timeline {
 325   height: 20px;
 326   width: 100%;
 327   display: flex;
 328   flex-direction: row;
 329   border-bottom: 1px solid var(--theme-splitter-color);
 330 }
 331
 332 .timeline .playback-controls {
 333   display: flex;
 334   flex-direction: row;
 335 }
 336
 337 /* Playback control buttons */
 338
 339 .timeline .playback-controls button {
 340   flex-grow: 1;
 341   border-width: 0 1px 0 0;
 342 }
 343
 344 .timeline .toggle::before {
 345   background-image: url(debugger-pause.png);
 346 }
 347
 348 .paused .timeline .toggle::before,
 349 .finished .timeline .toggle::before {
 350   background-image: url(debugger-play.png);
 351 }
 352
 353 .timeline .ff::before {
 354   background-image: url(fast-forward.png);
 355 }
 356
 357 .timeline .rw::before {
 358   background-image: url(rewind.png);
 359 }
 360
 361 @media (min-resolution: 1.25dppx) {
 362   .timeline .toggle::before {
 363     background-image: url(debugger-pause@2x.png);
 364   }
 365
 366   .paused .timeline .toggle::before,
 367   .finished .timeline .toggle::before {
 368     background-image: url(debugger-play@2x.png);
 369   }
 370
 371   .timeline .ff::before {
 372     background-image: url(fast-forward@2x.png);
 373   }
 374
 375   .timeline .rw::before {
 376     background-image: url(rewind@2x.png);
 377   }
 378 }
 379
 380 .timeline .rate {
 381   -moz-appearance: none;
 382   text-align: center;
 383   color: var(--theme-body-color);
 384   border-right: 1px solid var(--theme-splitter-color);
 385 }
 386
 387 /* Slider (input type range) container */
 388
 389 .timeline .sliders-container {
 390   flex-grow: 1;
 391   height: 100%;
 392   position: relative;
 393   border-width: 1px 0;
 394 }
 395
 396 .timeline .sliders-container .current-time {
 397   position: absolute;
 398   padding: 0;
 399   margin: 0;
 400   left: 0;
 401   width: 100%;
 402   height: 100%;
 403 }
 404
 405 .timeline .sliders-container .current-time::-moz-range-thumb {
 406   height: 100%;
 407   width: 4px;
 408   border-radius: 0;
 409   border: none;
 410   background: var(--theme-highlight-blue);
 411 }
 412
 413 .timeline .sliders-container .current-time::-moz-range-track {
 414   width: 100%;
 415   height: 50px;
 416   background: transparent;
 417 }
 418
 419 /* Current time label */
 420
 421 .timeline .time-display {
 422   display: flex;
 423   align-items: center;
 424   justify-content: center;
 425   width: 50px;
 426   border-left: 1px solid var(--theme-splitter-color);
 427   background: var(--theme-toolbar-background);
 428 }