Bug 1478448 - (Part 3) Add Track Changes sidebar panel in Inspector. r=nchevobbe

Differential Revision: https://phabricator.services.mozilla.com/D3328

--HG--
rename : devtools/client/inspector/changes/moz.build => devtools/client/inspector/changes/components/moz.build
extra : moz-landing-system : lando

devtools/client/inspector/changes/ChangesView.js

@@ -0,0 +1,53 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* 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/. */
+
+"use strict";
+
+const { createFactory, createElement } = require("devtools/client/shared/vendor/react");
+const { Provider } = require("devtools/client/shared/vendor/react-redux");
+
+const ChangesApp = createFactory(require("./components/ChangesApp"));
+
+const {
+  resetChanges,
+} = require("./actions/changes");
+
+class ChangesView {
+  constructor(inspector) {
+    this.inspector = inspector;
+    this.store = this.inspector.store;
+
+    this.destroy = this.destroy.bind(this);
+
+    this.init();
+  }
+
+  init() {
+    const changesApp = ChangesApp({});
+
+    // Expose the provider to let inspector.js use it in setupSidebar.
+    this.provider = createElement(Provider, {
+      id: "changesview",
+      key: "changesview",
+      store: this.store,
+    }, changesApp);
+
+    // TODO: save store and restore/replay on refresh.
+    // Bug 1478439 - https://bugzilla.mozilla.org/show_bug.cgi?id=1478439
+    this.inspector.target.once("will-navigate", this.destroy);
+  }
+
+  /**
+   * Destruction function called when the inspector is destroyed.
+   */
+  destroy() {
+    this.store.dispatch(resetChanges());
+    this.inspector = null;
+    this.store = null;
+  }
+}
+
+module.exports = ChangesView;

devtools/client/inspector/changes/components/ChangesApp.js

@@ -0,0 +1,22 @@
+/* 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/. */
+
+"use strict";
+
+const { PureComponent } = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+const { connect } = require("devtools/client/shared/vendor/react-redux");
+
+class ChangesApp extends PureComponent {
+  render() {
+    return dom.div(
+      {
+        className: "theme-sidebar inspector-tabpanel",
+        id: "sidebar-panel-changes"
+      }
+    );
+  }
+}
+
+module.exports = connect(state => state)(ChangesApp);

devtools/client/inspector/changes/components/moz.build

@@ -0,0 +1,9 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# 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/.
+
+DevToolsModules(
+    'ChangesApp.js',
+)

devtools/client/inspector/changes/moz.build

@@ -6,5 +6,10 @@
 
 DIRS += [
     'actions',
+    'components',
     'reducers',
 ]
+
+DevToolsModules(
+    'ChangesView.js',
+)

devtools/client/inspector/inspector.js

@@ -67,6 +67,7 @@ const THREE_PANE_ENABLED_PREF = "devtools.inspector.three-pane-enabled";
 const THREE_PANE_ENABLED_SCALAR = "devtools.inspector.three_pane_enabled";
 const THREE_PANE_CHROME_ENABLED_PREF = "devtools.inspector.chrome.three-pane-enabled";
 const TELEMETRY_EYEDROPPER_OPENED = "devtools.toolbar.eyedropper.opened";
+const TRACK_CHANGES_ENABLED = "devtools.inspector.changes.enabled";
 
 /**
  * Represents an open instance of the Inspector for a tab.
@@ -979,6 +980,32 @@ Inspector.prototype = {
       },
       defaultTab == fontId);
 
+    if (Services.prefs.getBoolPref(TRACK_CHANGES_ENABLED)) {
+      // Inject a lazy loaded react tab by exposing a fake React object
+      // with a lazy defined Tab thanks to `panel` being a function
+      const changesId = "changesview";
+      const changesTitle = INSPECTOR_L10N.getStr("inspector.sidebar.changesViewTitle");
+      this.sidebar.queueTab(
+        changesId,
+        changesTitle,
+        {
+          props: {
+            id: changesId,
+            title: changesTitle
+          },
+          panel: () => {
+            if (!this.changesView) {
+              const ChangesView =
+                this.browserRequire("devtools/client/inspector/changes/ChangesView");
+              this.changesView = new ChangesView(this, this.panelWin);
+            }
+
+            return this.changesView.provider;
+          }
+        },
+        defaultTab == changesId);
+    }
+
     this.sidebar.addAllQueuedTabs();
 
     // Persist splitter state in preferences.
@@ -1417,6 +1444,10 @@ Inspector.prototype = {
       this.layoutview.destroy();
     }
 
+    if (this.changesView) {
+      this.changesView.destroy();
+    }
+
     if (this.fontinspector) {
       this.fontinspector.destroy();
     }

devtools/client/locales/en-US/inspector.properties

@@ -400,6 +400,11 @@ markupView.scrollInto.key=s
 # that corresponds to the tool displaying the list of fonts used in the page.
 inspector.sidebar.fontInspectorTitle=Fonts
 
+# LOCALIZATION NOTE (inspector.sidebar.changesViewTitle):
+# Title of the Changes sidebar tab shown in the Inspector panel. The Changes panel shows
+# style changes made using DevTools.
+inspector.sidebar.changesViewTitle=Changes
+
 # LOCALIZATION NOTE (inspector.sidebar.ruleViewTitle):
 # This is the title shown in a tab in the side panel of the Inspector panel
 # that corresponds to the tool displaying the list of CSS rules used