Bug 1404801 - Part 3: Avoid applying old animationinspector.css in inspector.xhtml. r?gl
Accompanied by React-ify, although we will change the CSS as well, the selector
may be conflicted if old animationinspector.css is in inspector.xhtml.
Therefore, we will make the CSS to impact within only animation-inspector.xhtml.
MozReview-Commit-ID: HnYDaasssf4
--- a/devtools/client/inspector/inspector.xhtml
+++ b/devtools/client/inspector/inspector.xhtml
@@ -10,17 +10,16 @@
<link rel="stylesheet" href="chrome://devtools/skin/widgets.css"/>
<link rel="stylesheet" href="chrome://devtools/skin/inspector.css"/>
<link rel="stylesheet" href="chrome://devtools/skin/rules.css"/>
<link rel="stylesheet" href="chrome://devtools/skin/computed.css"/>
<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/animationinspector.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"/>
<link rel="stylesheet" href="resource://devtools/client/shared/components/splitter/SplitBox.css"/>
<link rel="stylesheet" href="resource://devtools/client/inspector/layout/components/Accordion.css"/>
<link rel="stylesheet" href="resource://devtools/client/shared/components/reps/reps.css"/>
<link rel="stylesheet" href="resource://devtools/client/shared/components/tree/TreeView.css"/>
--- a/devtools/client/themes/animationinspector.css
+++ b/devtools/client/themes/animationinspector.css
@@ -135,21 +135,16 @@ body {
}
[timeline] #timeline-toolbar {
display: flex;
}
/* The main animations container */
-#sidebar-panel-animationinspector {
- height: 100%;
- width: 100%;
-}
-
#players {
height: calc(100% - var(--toolbar-height));
}
[empty] #players {
display: none;
}
--- a/devtools/client/themes/inspector.css
+++ b/devtools/client/themes/inspector.css
@@ -187,8 +187,14 @@ iframe {
flex: 1;
min-height: 0;
}
#markup-box > iframe {
height: 100%;
width: 100%;
}
+
+/* Animation inspector */
+#sidebar-panel-animationinspector {
+ height: 100%;
+ width: 100%;
+}