Bug 1400115 - Part 2: Introduce a pref to implement the new Animation panel behind. r=gl,pbro
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Thu, 26 Oct 2017 16:55:10 +0900
changeset 688123 6b82964b40604aa29c8aa01bd673e04bf6221e51
parent 688122 d852671509919ece8c57dc77e3dfad76c9edf5c8
child 688124 ec9072a356c07533f2b6bc02bbd85ebc625d8373
push id86669
push userhikezoe@mozilla.com
push dateSat, 28 Oct 2017 10:13:18 +0000
reviewersgl, pbro
bugs1400115
milestone58.0a1
Bug 1400115 - Part 2: Introduce a pref to implement the new Animation panel behind. r=gl,pbro MozReview-Commit-ID: LgEW8w1CyhU
devtools/client/inspector/inspector.js
devtools/client/preferences/devtools.js
--- a/devtools/client/inspector/inspector.js
+++ b/devtools/client/inspector/inspector.js
@@ -700,21 +700,45 @@ Inspector.prototype = {
 
             return this.eventsview.provider;
           }
         },
         defaultTab == eventsId);
     }
 
     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 animationTitle =
+        INSPECTOR_L10N.getStr("inspector.sidebar.animationInspectorTitle");
+
+      if (Services.prefs.getBoolPref("devtools.new-animationinspector.enabled")) {
+        const animationId = "newanimationinspector";
+
+        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.provider;
+            }
+          },
+          defaultTab == animationId);
+      } else {
+        this.sidebar.addFrameTab(
+          "animationinspector",
+          animationTitle,
+          "chrome://devtools/content/animationinspector/animation-inspector.xhtml",
+          defaultTab == "animationinspector");
+      }
     }
 
     if (this.canGetUsedFontFaces) {
       // Inject a lazy loaded react tab by exposing a fake React object
       // with a lazy defined Tab thanks to `panel` being a function
       let fontId = "fontinspector";
       let fontTitle = INSPECTOR_L10N.getStr("inspector.sidebar.fontInspectorTitle");
       this.sidebar.addTab(
--- a/devtools/client/preferences/devtools.js
+++ b/devtools/client/preferences/devtools.js
@@ -62,16 +62,19 @@ pref("devtools.inspector.colorWidget.ena
 pref("devtools.inspector.shapesHighlighter.enabled", true);
 // Enable the Changes View
 pref("devtools.changesview.enabled", false);
 // Enable the Events View
 pref("devtools.eventsview.enabled", false);
 // Enable the Flexbox Inspector
 pref("devtools.flexboxinspector.enabled", false);
 
+// Enable the new Animation Inspector
+pref("devtools.new-animationinspector.enabled", false);
+
 // Grid highlighter preferences
 pref("devtools.gridinspector.gridOutlineMaxColumns", 50);
 pref("devtools.gridinspector.gridOutlineMaxRows", 50);
 pref("devtools.gridinspector.showGridAreas", false);
 pref("devtools.gridinspector.showGridLineNumbers", false);
 pref("devtools.gridinspector.showInfiniteLines", false);
 pref("devtools.gridinspector.showNegativeLineNumbers", false);