From 3ae0c90209c4aeacc3f8a7958e943361097a272d Mon Sep 17 00:00:00 2001
From: Horst3180
Date: Wed, 21 Oct 2015 21:18:30 +0200
Subject: add support for Firefox 38 esr

---
 .../chrome/browser/devtools/animationinspector.css | 253 ++-------------------
 1 file changed, 17 insertions(+), 236 deletions(-)

(limited to 'arc-firefox-theme/chrome/browser/devtools/animationinspector.css')

diff --git a/arc-firefox-theme/chrome/browser/devtools/animationinspector.css b/arc-firefox-theme/chrome/browser/devtools/animationinspector.css
index 40efab7..c632d91 100644
--- a/arc-firefox-theme/chrome/browser/devtools/animationinspector.css
+++ b/arc-firefox-theme/chrome/browser/devtools/animationinspector.css
@@ -1,17 +1,3 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-/* Animation-inspector specific theme variables */
-
-.theme-dark {
-  --even-animation-timeline-background-color: rgba(255,255,255,0.03);
-}
-
-.theme-light {
-  --even-animation-timeline-background-color: rgba(128,128,128,0.03);
-}
-
 html {
   height: 100%;
 }
@@ -42,17 +28,10 @@ body {
 }
 
 #toggle-all {
-  border-width: 0 0 0 1px;
+  border-width: 0px 1px;
   min-height: 20px;
 }
 
-/* The main animations container */
-
-#players {
-  height: calc(100% - 20px);
-  overflow: auto;
-}
-
 /* The error message, shown when an invalid/unanimated element is selected */
 
 #error-message {
@@ -65,6 +44,12 @@ body {
   display: none;
 }
 
+/* The animation players container */
+
+#players {
+  flex: 1;
+  overflow: auto;
+}
 
 /* Element picker and toggle-all buttons */
 
@@ -99,7 +84,7 @@ body {
   background-image: url("debugger-play.png");
 }
 
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 2dppx) {
   #element-picker::before {
     background-image: url("chrome://browser/skin/devtools/command-pick@2x.png");
     background-size: 64px;
@@ -114,184 +99,11 @@ body {
   }
 }
 
-/* Animation timeline component */
-
-.animation-timeline {
-  height: 100%;
-  overflow: hidden;
-  /* The timeline gets its background-image from a canvas element created in
-     /browser/devtools/animationinspector/utils.js drawGraphElementBackground
-     thanks to document.mozSetImageElement("time-graduations", canvas)
-     This is done so that the background can be built dynamically from script */
-  background-image: -moz-element(#time-graduations);
-  background-repeat: repeat-y;
-  /* The animations are drawn 150px from the left edge so that animated nodes
-     can be displayed in a sidebar */
-  background-position: 150px 0;
-  display: flex;
-  flex-direction: column;
-}
-
-.animation-timeline .time-header {
-  margin-left: 150px;
-  height: 20px;
-  overflow: hidden;
-  position: relative;
-  border-bottom: 1px solid var(--theme-splitter-color);
-}
-
-.animation-timeline .time-header .time-tick {
-  position: absolute;
-  top: 3px;
-}
-
-.animation-timeline .animations {
-  width: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-}
-
-/* Animation block widgets */
-
-.animation-timeline .animation {
-  margin: 4px 0;
-  height: 20px;
-  position: relative;
-}
-
-.animation-timeline .animation:nth-child(2n) {
-  background-color: var(--even-animation-timeline-background-color);
-}
-
-.animation-timeline .animation .target {
-  width: 150px;
-  overflow: hidden;
-  height: 100%;
-}
-
-.animation-timeline .animation-target {
-  background-color: transparent;
-}
+/* Disabled playerWidget when the animation has ended */
 
-.animation-timeline .animation .time-block {
-  position: absolute;
-  top: 0;
-  left: 150px;
-  right: 0;
-  height: 100%;
-}
-
-/* Animation iterations */
-
-.animation-timeline .animation .iterations {
-  position: relative;
-  height: 100%;
-  border: 1px solid var(--theme-highlight-lightorange);
-  box-sizing: border-box;
-  background: var(--theme-contrast-background);
-  /* Iterations are displayed with a repeating linear-gradient which size is
-     dynamically changed from JS */
-  background-image:
-    linear-gradient(to right,
-                    var(--theme-highlight-lightorange) 0,
-                    var(--theme-highlight-lightorange) 1px,
-                    transparent 1px,
-                    transparent 2px);
-  background-repeat: repeat-x;
-  background-position: -1px 0;
-}
-
-.animation-timeline .animation .iterations.infinite {
-  border-right-width: 0;
-}
-
-.animation-timeline .animation .iterations.infinite::before,
-.animation-timeline .animation .iterations.infinite::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 0;
-  height: 0;
-  border-right: 4px solid var(--theme-body-background);
-  border-top: 4px solid transparent;
-  border-bottom: 4px solid transparent;
-}
-
-.animation-timeline .animation .iterations.infinite::after {
-  bottom: 0;
-  top: unset;
-}
-
-.animation-timeline .animation .animation-title {
-  height: 1.5em;
-  width: 100%;
-  box-sizing: border-box;
-  overflow: hidden;
-}
-
-.animation-timeline .animation .delay {
-  position: absolute;
-  top: 0;
-  height: 100%;
-  background-image: linear-gradient(to bottom,
-                                    transparent,
-                                    transparent 9px,
-                                    var(--theme-highlight-lightorange) 9px,
-                                    var(--theme-highlight-lightorange) 11px,
-                                    transparent 11px,
-                                    transparent);
-}
-
-.animation-timeline .animation .delay::before {
-  position: absolute;
-  content: "";
-  left: 0;
-  width: 2px;
-  height: 8px;
-  top: 50%;
-  margin-top: -4px;
-  background: var(--theme-highlight-lightorange);
-}
-
-.animation-timeline .animation .name {
-  position: absolute;
-  z-index: 1;
-  padding: 2px;
-  white-space: nowrap;
-}
-
-/* Animation target node gutter, contains a preview of the dom node */
-
-.animation-target {
-  background-color: var(--theme-toolbar-background);
-  padding: 1px 4px;
-  box-sizing: border-box;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.animation-target .attribute-name {
-  padding-left: 4px;
-}
-
-.animation-target .node-selector {
-  background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0;
-  padding-left: 16px;
-  margin-right: 5px;
-  cursor: pointer;
-}
-
-.animation-target .node-selector:hover {
-  background-position: -32px 0;
-}
-
-.animation-target .node-selector:active {
-  background-position: -16px 0;
+.finished {
+  pointer-events: none;
+  opacity: .5;
 }
 
 /* Animation title gutter, contains the name, duration, iteration */
@@ -312,17 +124,6 @@ body {
   margin: 0 .5em;
 }
 
-.animation-title .meta-data .compositor-icon {
-    display: none;
-    background-image: url("animation-fast-track.svg");
-    background-repeat: no-repeat;
-    padding-left: 12px;
-    /* Make sure the icon is positioned above the timeline range input so that
-       its tooltip appears on hover */
-    z-index: 1;
-    position: relative;
-}
-
 /* Timeline wiget */
 
 .timeline {
@@ -334,6 +135,7 @@ body {
 }
 
 .timeline .playback-controls {
+  width: 50px;
   display: flex;
   flex-direction: row;
 }
@@ -345,6 +147,8 @@ body {
   border-width: 0 1px 0 0;
 }
 
+/* Play/pause button */
+
 .timeline .toggle::before {
   background-image: url(debugger-pause.png);
 }
@@ -354,15 +158,7 @@ body {
   background-image: url(debugger-play.png);
 }
 
-.timeline .ff::before {
-  background-image: url(fast-forward.png);
-}
-
-.timeline .rw::before {
-  background-image: url(rewind.png);
-}
-
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 2dppx) {
   .timeline .toggle::before {
     background-image: url(debugger-pause@2x.png);
   }
@@ -371,21 +167,6 @@ body {
   .finished .timeline .toggle::before {
     background-image: url(debugger-play@2x.png);
   }
-
-  .timeline .ff::before {
-    background-image: url(fast-forward@2x.png);
-  }
-
-  .timeline .rw::before {
-    background-image: url(rewind@2x.png);
-  }
-}
-
-.timeline .rate {
-  -moz-appearance: none;
-  text-align: center;
-  color: var(--theme-body-color);
-  border-right: 1px solid var(--theme-splitter-color);
 }
 
 /* Slider (input type range) container */
@@ -429,4 +210,4 @@ body {
   width: 50px;
   border-left: 1px solid var(--theme-splitter-color);
   background: var(--theme-toolbar-background);
-}
\ No newline at end of file
+}
-- 
cgit v1.2.3