Bug 1404801 - Part 4: Apply styles for animation list. r=gl

MozReview-Commit-ID: Drys4ZKrNW

--HG--
extra : rebase_source : 759647b1c562e2e77143682a87b02419e9e8c5c0

devtools/client/inspector/inspector.xhtml

@@ -15,6 +15,7 @@
   <link rel="stylesheet" href="chrome://devtools/skin/fonts.css"/>
   <link rel="stylesheet" href="chrome://devtools/skin/boxmodel.css"/>
   <link rel="stylesheet" href="chrome://devtools/skin/layout.css"/>
+  <link rel="stylesheet" href="chrome://devtools/skin/animation.css"/>
   <link rel="stylesheet" href="resource://devtools/client/shared/components/tabs/Tabs.css"/>
   <link rel="stylesheet" href="resource://devtools/client/shared/components/tabs/TabBar.css"/>
   <link rel="stylesheet" href="resource://devtools/client/inspector/components/InspectorTabPanel.css"/>

devtools/client/jar.mn

@@ -154,6 +154,7 @@ devtools.jar:
     skin/images/webconsole.svg (themes/images/webconsole.svg)
     skin/images/breadcrumbs-scrollbutton.png (themes/images/breadcrumbs-scrollbutton.png)
     skin/images/[email protected] (themes/images/[email protected])
+    skin/animation.css (themes/animation.css)
     skin/animationinspector.css (themes/animationinspector.css)
     skin/canvasdebugger.css (themes/canvasdebugger.css)
     skin/debugger.css (themes/debugger.css)

devtools/client/themes/animation.css

@@ -0,0 +1,29 @@
+/* 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 */
+
+:root {
+  --animation-even-background-color: rgba(0,0,0,0.05);
+}
+
+:root.theme-dark {
+  --animation-even-background-color: rgba(255,255,255,0.05);
+}
+
+/* Settings for animations element */
+.animation-list {
+  list-style-type: none;
+  margin-top: 0;
+  padding: 0;
+}
+
+/* Settings for each animation element */
+.animation-item {
+  height: 30px;
+}
+
+.animation-item:nth-child(2n+1) {
+  background-color: var(--animation-even-background-color);
+}