Bug 1400115 - Part 2: Introduce a pref to implement the new Animation panel behind. r?pbro draft
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Tue, 19 Sep 2017 22:41:10 +0900
changeset 666970 a7032c40e01f928d444d0ec13c2aba6bc727db19
parent 666969 615b16c7acc6894583dff8add0c3eed360c2d956
child 666971 d5350ce325943e91f25a0de17267fa180df27ee2
push id80571
push userbmo:dakatsuka@mozilla.com
push dateTue, 19 Sep 2017 13:55:41 +0000
reviewerspbro
bugs1400115
milestone57.0a1
Bug 1400115 - Part 2: Introduce a pref to implement the new Animation panel behind. r?pbro MozReview-Commit-ID: LgEW8w1CyhU
devtools/client/inspector/inspector.js
devtools/client/inspector/inspector.xhtml
devtools/client/preferences/devtools.js
--- a/devtools/client/inspector/inspector.js
+++ b/devtools/client/inspector/inspector.js
@@ -645,21 +645,55 @@ Inspector.prototype = {
             this.layoutview = new LayoutView(this, this.panelWin);
           }
           return this.layoutview.provider;
         }
       },
       defaultTab == layoutId);
 
     if (this.target.form.animationsActor) {
-      this.sidebar.addFrameTab(
-        "animationinspector",
-        INSPECTOR_L10N.getStr("inspector.sidebar.animationInspectorTitle"),
-        "chrome://devtools/content/animationinspector/animation-inspector.xhtml",
-        defaultTab == "animationinspector");
+      const animationId = "animationinspector";
+      const animationTitle =
+        INSPECTOR_L10N.getStr("inspector.sidebar.animationInspectorTitle");
+      if (Services.prefs.getBoolPref("devtools.new-animationinspector.enabled")) {
+        this.sidebar.addTab(
+          animationId,
+          animationTitle,
+          {
+            props: {
+              id: animationId,
+              title: animationTitle
+            },
+            panel: () => {
+              const AnimationInspector =
+                this.browserRequire("devtools/client/inspector/animation/animation");
+              this.animationinspector = new AnimationInspector();
+              return this.animationinspector.app;
+            }
+          },
+          defaultTab == animationId);
+      } else {
+        // Append animation inspector iframe.
+        const doc = this.panelWin.document;
+        const tabpanelsEl = doc.querySelector("#tabpanels");
+        const sidebarPanelEl = doc.createElement("div");
+        sidebarPanelEl.id = "sidebar-panel-animationinspector";
+        sidebarPanelEl.classList.add("theme-sidebar");
+        sidebarPanelEl.classList.add("inspector-tabpanel");
+        const iframeEl = doc.createElement("iframe");
+        iframeEl.classList.add("devtools-inspector-tab-frame");
+        sidebarPanelEl.appendChild(iframeEl);
+        tabpanelsEl.appendChild(sidebarPanelEl);
+
+        this.sidebar.addFrameTab(
+          animationId,
+          animationTitle,
+          "chrome://devtools/content/animationinspector/animation-inspector.xhtml",
+          defaultTab == animationId);
+      }
     }
 
     if (Services.prefs.getBoolPref("devtools.fontinspector.enabled") &&
         this.canGetUsedFontFaces) {
       const FontInspector = this.browserRequire("devtools/client/inspector/fonts/fonts");
       this.fontinspector = new FontInspector(this, this.panelWin);
       this.fontinspector.init();
 
--- a/devtools/client/inspector/inspector.xhtml
+++ b/devtools/client/inspector/inspector.xhtml
@@ -130,17 +130,13 @@
         <div id="computed-container">
           <div id="computed-container-focusable" tabindex="-1">
             <div id="boxmodel-wrapper"></div>
             <div id="computed-property-container" class="devtools-monospace" tabindex="0" dir="ltr"></div>
             <div id="computed-no-results" class="devtools-sidepanel-no-result" hidden="" data-localization="content=inspector.noProperties"></div>
           </div>
         </div>
       </div>
-
-      <div id="sidebar-panel-animationinspector" class="theme-sidebar inspector-tabpanel">
-        <iframe class="devtools-inspector-tab-frame"></iframe>
-      </div>
     </div>
 
   </div>
 </body>
 </html>
--- a/devtools/client/preferences/devtools.js
+++ b/devtools/client/preferences/devtools.js
@@ -58,16 +58,19 @@ pref("devtools.inspector.showUserAgentSt
 pref("devtools.inspector.showAllAnonymousContent", false);
 // Enable the MDN docs tooltip
 pref("devtools.inspector.mdnDocsTooltip.enabled", false);
 // Enable the new color widget
 pref("devtools.inspector.colorWidget.enabled", false);
 // Enable the CSS shapes highlighter
 pref("devtools.inspector.shapesHighlighter.enabled", false);
 
+// Enable the new Animation Inspector
+pref("devtools.new-animationinspector.enabled", false);
+
 // Enable the Font Inspector
 pref("devtools.fontinspector.enabled", true);
 
 // Counter to promote the inspector layout view.
 // @remove after release 56 (See Bug 1355747)
 pref("devtools.promote.layoutview", 1);
 // Whether or not to show the promote bar in the layout view
 // @remove after release 56 (See Bug 1355747)