Bug 1478894 - Part 1: Add an initial boilerplate React/Redux app for the new Rules View. r=pbro
☠☠ backed out by 21c1ab065df1 ☠ ☠
authorGabriel Luong <gabriel.luong@gmail.com>
Fri, 21 Dec 2018 14:05:46 -0500
changeset 451736 d5f22f6c8de8c96d46679399d60b453f4d98d57c
parent 451735 ddcc1ef993543f7bfb15e2d136c83fc721d54f09
child 451737 21c1ab065df1b2d9dce639fb814c42e23fa86034
push id35252
push userccoroiu@mozilla.com
push dateFri, 21 Dec 2018 21:56:22 +0000
treeherdermozilla-central@b23630094b9c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1478894
milestone66.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1478894 - Part 1: Add an initial boilerplate React/Redux app for the new Rules View. r=pbro
devtools/client/inspector/inspector.js
devtools/client/inspector/reducers.js
devtools/client/inspector/rules/actions/index.js
devtools/client/inspector/rules/actions/moz.build
devtools/client/inspector/rules/components/RulesApp.js
devtools/client/inspector/rules/components/moz.build
devtools/client/inspector/rules/moz.build
devtools/client/inspector/rules/new-rules.js
devtools/client/inspector/rules/reducers/moz.build
devtools/client/inspector/rules/reducers/rules.js
devtools/client/inspector/rules/utils/l10n.js
devtools/client/inspector/rules/utils/moz.build
devtools/client/preferences/devtools-client.js
--- a/devtools/client/inspector/inspector.js
+++ b/devtools/client/inspector/inspector.js
@@ -876,16 +876,21 @@ Inspector.prototype = {
           this.browserRequire("devtools/client/inspector/fonts/fonts");
         panel = new FontInspector(this, this.panelWin);
         break;
       case "layoutview":
         const LayoutView =
           this.browserRequire("devtools/client/inspector/layout/layout");
         panel = new LayoutView(this, this.panelWin);
         break;
+      case "newruleview":
+        const RulesView =
+          this.browserRequire("devtools/client/inspector/rules/new-rules");
+        panel = new RulesView(this, this.panelWin);
+        break;
       case "ruleview":
         const {RuleViewTool} = require("devtools/client/inspector/rules/rules");
         panel = new RuleViewTool(this, this.panelWin);
         break;
       default:
         // This is a custom panel or a non lazy-loaded one.
         return null;
     }
@@ -956,16 +961,23 @@ Inspector.prototype = {
       // Insert Changes as third tab, right after Computed.
       // TODO: move this inline to `sidebarPanels` above when addressing Bug 1491887.
       sidebarPanels.splice(2, 0, {
         id: "changesview",
         title: INSPECTOR_L10N.getStr("inspector.sidebar.changesViewTitle"),
       });
     }
 
+    if (Services.prefs.getBoolPref("devtools.inspector.new-rulesview.enabled")) {
+      sidebarPanels.push({
+        id: "newruleview",
+        title: INSPECTOR_L10N.getStr("inspector.sidebar.ruleViewTitle"),
+      });
+    }
+
     for (const { id, title } of sidebarPanels) {
       // The Computed panel is not a React-based panel. We pick its element container from
       // the DOM and wrap it in a React component (InspectorTabPanel) so it behaves like
       // other panels when using the Inspector's tool sidebar.
       if (id === "computedview") {
         this.sidebar.queueExistingTab(id, title, defaultTab === id);
       } else {
         // When `panel` is a function, it is called when the tab should render. It is
--- a/devtools/client/inspector/reducers.js
+++ b/devtools/client/inspector/reducers.js
@@ -12,8 +12,9 @@ exports.boxModel = require("devtools/cli
 exports.changes = require("devtools/client/inspector/changes/reducers/changes");
 exports.extensionsSidebar = require("devtools/client/inspector/extensions/reducers/sidebar");
 exports.flexbox = require("devtools/client/inspector/flexbox/reducers/flexbox");
 exports.fontOptions = require("devtools/client/inspector/fonts/reducers/font-options");
 exports.fontData = require("devtools/client/inspector/fonts/reducers/fonts");
 exports.fontEditor = require("devtools/client/inspector/fonts/reducers/font-editor");
 exports.grids = require("devtools/client/inspector/grids/reducers/grids");
 exports.highlighterSettings = require("devtools/client/inspector/grids/reducers/highlighter-settings");
+exports.rules = require("devtools/client/inspector/rules/reducers/rules");
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/rules/actions/index.js
@@ -0,0 +1,14 @@
+/* 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 { createEnum } = require("devtools/client/shared/enum");
+
+createEnum([
+
+  // Update the entire rules state with the new list of rules.
+  "UPDATE_RULES",
+
+], module.exports);
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/rules/actions/moz.build
@@ -0,0 +1,7 @@
+# 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(
+    'index.js',
+)
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/rules/components/RulesApp.js
@@ -0,0 +1,35 @@
+/* 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");
+
+const { getStr } = require("../utils/l10n");
+
+class RulesApp extends PureComponent {
+  static get propTypes() {
+    return {};
+  }
+
+  render() {
+    return dom.div(
+      {
+        id: "sidebar-panel-ruleview",
+        className: "theme-sidebar inspector-tabpanel",
+      },
+      dom.div(
+        {
+          id: "ruleview-no-results",
+          className: "devtools-sidepanel-no-result",
+        },
+        getStr("rule.empty")
+      )
+    );
+  }
+}
+
+module.exports = connect(state => state)(RulesApp);
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/rules/components/moz.build
@@ -0,0 +1,7 @@
+# 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(
+    'RulesApp.js',
+)
--- a/devtools/client/inspector/rules/moz.build
+++ b/devtools/client/inspector/rules/moz.build
@@ -1,19 +1,24 @@
 # -*- 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/.
 
 DIRS += [
+    'actions',
+    'components',
     'models',
+    'reducers',
+    'utils',
     'views',
 ]
 
 DevToolsModules(
+    'new-rules.js',
     'rules.js',
 )
 
 BROWSER_CHROME_MANIFESTS += ['test/browser.ini']
 
 with Files('**'):
     BUG_COMPONENT = ('DevTools', 'CSS Rules Inspector')
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/rules/new-rules.js
@@ -0,0 +1,50 @@
+/* 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 RulesApp = createFactory(require("./components/RulesApp"));
+
+const { LocalizationHelper } = require("devtools/shared/l10n");
+const INSPECTOR_L10N =
+  new LocalizationHelper("devtools/client/locales/inspector.properties");
+
+class RulesView {
+  constructor(inspector, window) {
+    this.document = window.document;
+    this.inspector = inspector;
+    this.store = inspector.store;
+
+    this.init();
+  }
+
+  init() {
+    if (!this.inspector) {
+      return;
+    }
+
+    const rulesApp = RulesApp({});
+
+    const provider = createElement(Provider, {
+      id: "ruleview",
+      key: "ruleview",
+      store: this.store,
+      title: INSPECTOR_L10N.getStr("inspector.sidebar.ruleViewTitle")
+    }, rulesApp);
+
+    // Expose the provider to let inspector.js use it in setupSidebar.
+    this.provider = provider;
+  }
+
+  destroy() {
+    this.document = null;
+    this.inspector = null;
+    this.store = null;
+  }
+}
+
+module.exports = RulesView;
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/rules/reducers/moz.build
@@ -0,0 +1,7 @@
+# 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(
+    'rules.js',
+)
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/rules/reducers/rules.js
@@ -0,0 +1,19 @@
+/* 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 INITIAL_RULES = {};
+
+const reducers = {
+
+};
+
+module.exports = function(rules = INITIAL_RULES, action) {
+  const reducer = reducers[action.type];
+  if (!reducer) {
+    return rules;
+  }
+  return reducer(rules, action);
+};
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/rules/utils/l10n.js
@@ -0,0 +1,13 @@
+/* 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 { LocalizationHelper } = require("devtools/shared/l10n");
+const L10N = new LocalizationHelper("devtools/shared/locales/styleinspector.properties");
+
+module.exports = {
+  getStr: (...args) => L10N.getStr(...args),
+  getFormatStr: (...args) => L10N.getFormatStr(...args),
+};
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/rules/utils/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(
+    'l10n.js',
+)
--- a/devtools/client/preferences/devtools-client.js
+++ b/devtools/client/preferences/devtools-client.js
@@ -51,16 +51,18 @@ pref("devtools.inspector.showAllAnonymou
 // Show user agent shadow roots
 pref("devtools.inspector.showUserAgentShadowRoots", false);
 // Enable the CSS shapes highlighter
 pref("devtools.inspector.shapesHighlighter.enabled", true);
 // Enable the font highlight-on-hover feature
 pref("devtools.inspector.fonthighlighter.enabled", true);
 // Enable tracking of style changes and the Changes panel in the Inspector
 pref("devtools.inspector.changes.enabled", true);
+// Enable the new Rules View
+pref("devtools.inspector.new-rulesview.enabled", false);
 
 // Flexbox preferences
 pref("devtools.inspector.flexboxHighlighter.enabled", true);
 pref("devtools.flexboxinspector.enabled", true);
 
 // Grid highlighter preferences
 pref("devtools.gridinspector.gridOutlineMaxColumns", 50);
 pref("devtools.gridinspector.gridOutlineMaxRows", 50);