--- 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);