--- a/devtools/client/inspector/fonts/actions/font-editor.js
+++ b/devtools/client/inspector/fonts/actions/font-editor.js
@@ -4,17 +4,16 @@
 
 "use strict";
 
 const {
   APPLY_FONT_VARIATION_INSTANCE,
   RESET_EDITOR,
   UPDATE_AXIS_VALUE,
   UPDATE_CUSTOM_INSTANCE,
-  UPDATE_EDITOR_VISIBILITY,
   UPDATE_EDITOR_STATE,
   UPDATE_PROPERTY_VALUE,
 } = require("./index");
 
 module.exports = {
 
   resetFontEditor() {
     return {
@@ -25,24 +24,16 @@ module.exports = {
   applyInstance(name, values) {
     return {
       type: APPLY_FONT_VARIATION_INSTANCE,
       name,
       values,
     };
   },
 
-  toggleFontEditor(isVisible, selector = "") {
-    return {
-      type: UPDATE_EDITOR_VISIBILITY,
-      isVisible,
-      selector,
-    };
-  },
-
   updateCustomInstance() {
     return {
       type: UPDATE_CUSTOM_INSTANCE,
     };
   },
 
   updateAxis(axis, value) {
     return {

--- a/devtools/client/inspector/fonts/fonts.js
+++ b/devtools/client/inspector/fonts/fonts.js
@@ -1,16 +1,17 @@
 /* -*- 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 Services = require("Services");
 const { gDevTools } = require("devtools/client/framework/devtools");
 const { getColor } = require("devtools/client/shared/theme");
 const { createFactory, createElement } = require("devtools/client/shared/vendor/react");
 const { Provider } = require("devtools/client/shared/vendor/react-redux");
 const { throttle } = require("devtools/shared/throttle");
 const { debounce } = require("devtools/shared/debounce");
 
 const FontsApp = createFactory(require("./components/FontsApp"));
@@ -19,34 +20,33 @@ const { LocalizationHelper } = require("
 const INSPECTOR_L10N =
   new LocalizationHelper("devtools/client/locales/inspector.properties");
 
 const { getStr } = require("./utils/l10n");
 const { updateFonts } = require("./actions/fonts");
 const {
   applyInstance,
   resetFontEditor,
-  toggleFontEditor,
   updateAxis,
   updateCustomInstance,
   updateFontEditor,
   updateFontProperty,
 } = require("./actions/font-editor");
 const { updatePreviewText } = require("./actions/font-options");
 
 const CUSTOM_INSTANCE_NAME = getStr("fontinspector.customInstanceName");
-const FONT_EDITOR_ID = "fonteditor";
 const FONT_PROPERTIES = [
   "font-optical-sizing",
   "font-size",
   "font-stretch",
   "font-style",
   "font-variation-settings",
   "font-weight",
 ];
+const PREF_FONT_EDITOR = "devtools.inspector.fonteditor.enabled";
 const REGISTERED_AXES_TO_FONT_PROPERTIES = {
   "ital": "font-style",
   "opsz": "font-optical-sizing",
   "slnt": "font-style",
   "wdth": "font-stretch",
   "wght": "font-weight",
 };
 const REGISTERED_AXES = Object.keys(REGISTERED_AXES_TO_FONT_PROPERTIES);
@@ -69,19 +69,17 @@ class FontInspector {
     this.writers = new Map();
 
     this.snapshotChanges = debounce(this.snapshotChanges, 100, this);
     this.syncChanges = throttle(this.syncChanges, 100, this);
     this.onInstanceChange = this.onInstanceChange.bind(this);
     this.onNewNode = this.onNewNode.bind(this);
     this.onPreviewFonts = this.onPreviewFonts.bind(this);
     this.onPropertyChange = this.onPropertyChange.bind(this);
-    this.onRuleSelected = this.onRuleSelected.bind(this);
     this.onToggleFontHighlight = this.onToggleFontHighlight.bind(this);
-    this.onRuleUnselected = this.onRuleUnselected.bind(this);
     this.onRuleUpdated = this.onRuleUpdated.bind(this);
     this.onThemeChanged = this.onThemeChanged.bind(this);
     this.update = this.update.bind(this);
     this.updateFontVariationSettings = this.updateFontVariationSettings.bind(this);
 
     this.init();
   }
 
@@ -103,33 +101,24 @@ class FontInspector {
       store: this.store,
       title: INSPECTOR_L10N.getStr("inspector.sidebar.fontInspectorTitle"),
     }, fontsApp);
 
     // Expose the provider to let inspector.js use it in setupSidebar.
     this.provider = provider;
 
     this.inspector.selection.on("new-node-front", this.onNewNode);
-    this.inspector.sidebar.on("fontinspector-selected", this.onNewNode);
-    this.ruleView.on("ruleview-rule-selected", this.onRuleSelected);
-    this.ruleView.on("ruleview-rule-unselected", this.onRuleUnselected);
+    this.ruleView.on("property-value-updated", this.onRuleUpdated);
 
     // Listen for theme changes as the color of the previews depend on the theme
     gDevTools.on("theme-switched", this.onThemeChanged);
 
-    // The FontInspector is lazy-loaded. If it's not yet loaded, the event handler for
-    // "ruleview-rule-selected" won't be attached to catch the first font editor toggle.
-    // Here, we check if the rule was already marked as selected for the font editor
-    // before the FontInspector was instantiated and call the event handler manually.
-    const selectedRule = this.ruleView.getSelectedRules(FONT_EDITOR_ID)[0];
-    if (selectedRule) {
-      this.onRuleSelected({ editorId: FONT_EDITOR_ID, rule: selectedRule });
-    } else {
-      this.store.dispatch(updatePreviewText(""));
-      this.update();
+    // If a node is already selected, call the handler for node change.
+    if (this.isSelectedNodeValid()) {
+      this.onNewNode();
     }
   }
 
   /**
    * Given all fonts on the page, and given the fonts used in given node, return all fonts
    * not from the page not used in this node.
    *
    * @param  {Array} allFonts
@@ -146,20 +135,17 @@ class FontInspector {
   }
 
   /**
    * Destruction function called when the inspector is destroyed. Removes event listeners
    * and cleans up references.
    */
   destroy() {
     this.inspector.selection.off("new-node-front", this.onNewNode);
-    this.inspector.sidebar.off("fontinspector-selected", this.onNewNode);
     this.ruleView.off("property-value-updated", this.onRuleUpdated);
-    this.ruleView.off("ruleview-rule-selected", this.onRuleSelected);
-    this.ruleView.off("ruleview-rule-unselected", this.onRuleUnselected);
     gDevTools.off("theme-switched", this.onThemeChanged);
 
     this.document = null;
     this.inspector = null;
     this.nodeComputedStyle = {};
     this.pageStyle = null;
     this.ruleView = null;
     this.selectedRule = null;
@@ -358,16 +344,26 @@ class FontInspector {
 
   /**
    * Returns true if the font inspector panel is visible, and false otherwise.
    */
   isPanelVisible() {
     return this.inspector.sidebar &&
            this.inspector.sidebar.getCurrentTabID() === "fontinspector";
   }
+  /**
+   * Check if a selected node exists and fonts can apply to it.
+   *
+   * @return {Boolean}
+   */
+  isSelectedNodeValid() {
+    return this.inspector.selection.nodeFront &&
+           this.inspector.selection.isConnected() &&
+           this.inspector.selection.isElementNode();
+  }
 
     /**
    * Sync the Rule view with the styles from the page. Called in a throttled way
    * (see constructor) after property changes are applied directly to the CSS style rule
    * on the page circumventing TextProperty.setValue() which triggers expensive DOM
    * operations in TextPropertyEditor.update().
    *
    * @param  {TextProperty} textProperty
@@ -433,16 +429,17 @@ class FontInspector {
   }
 
   /**
    * Selection 'new-node' event handler.
    */
   onNewNode() {
     if (this.isPanelVisible()) {
       this.update();
+      this.refreshFontEditor();
     }
   }
 
   /**
    * Handler for change in preview input.
    */
   onPreviewFonts(value) {
     this.store.dispatch(updatePreviewText(value));
@@ -468,73 +465,24 @@ class FontInspector {
     if (FONT_PROPERTIES.includes(property)) {
       this.onFontPropertyUpdate(property, value, unit);
     } else {
       this.onAxisUpdate(property, value);
     }
   }
 
   /**
-   * Handler for "ruleview-rule-selected" event emitted from the rule view when a rule is
-   * marked as selected for an editor.
-   * If selected for the font editor, hold a reference to the rule so we know where to
-   * put property changes coming from the font editor and show the font editor panel.
-   *
-   * @param  {Object} eventData
-   *         Data payload for the event. Contains:
-   *         - {String} editorId - id of the editor for which the rule was selected
-   *         - {Rule} rule - reference to rule that was selected
-   */
-  async onRuleSelected(eventData) {
-    const { editorId, rule } = eventData;
-    if (editorId === FONT_EDITOR_ID) {
-      const selector = rule.matchedSelectors[0];
-      this.selectedRule = rule;
-
-      await this.refreshFontEditor();
-      this.store.dispatch(toggleFontEditor(true, selector));
-      this.ruleView.on("property-value-updated", this.onRuleUpdated);
-    }
-  }
-
-  /**
    * Handler for "property-value-updated" event emitted from the rule view whenever a
    * property value changes.
    */
   async onRuleUpdated() {
     await this.refreshFontEditor();
   }
 
   /**
-   * Handler for "ruleview-rule-unselected" event emitted from the rule view when a rule
-   * was released from being selected for an editor.
-   * If previously selected for the font editor, release the reference to the rule and
-   * hide the font editor panel.
-   *
-   * @param {Object} eventData
-   *        Data payload for the event. Contains:
-   *        - {String} editorId - id of the editor for which the rule was released
-   *        - {Rule} rule - reference to rule that was released
-   */
-  onRuleUnselected(eventData) {
-    const { editorId, rule } = eventData;
-    if (editorId === FONT_EDITOR_ID && rule == this.selectedRule) {
-      this.nodeComputedStyle = {};
-      this.selectedRule = null;
-      this.textProperties.clear();
-      this.writers.clear();
-
-      this.store.dispatch(toggleFontEditor(false));
-      this.store.dispatch(resetFontEditor());
-
-      this.ruleView.off("property-value-updated", this.onRuleUpdated);
-    }
-  }
-
-    /**
    * Reveal a font's usage in the page.
    *
    * @param  {String} font
    *         The name of the font to be revealed in the page.
    * @param  {Boolean} show
    *         Whether or not to reveal the font.
    * @param  {Boolean} isForCurrentElement
    *         Whether or not to reveal the font for the current element selection.
@@ -587,17 +535,23 @@ class FontInspector {
    * - the CSS font properties declared on the selected rule.
    *
    * This method is called during initial setup and as a result of any property
    * values change in the Rule view. For the latter case, we do a deep compare between the
    * font properties on the selected rule and the ones already store to decide if to
    * update the font edtior to reflect a new external state.
    */
   async refreshFontEditor() {
-    if (!this.selectedRule || !this.inspector || !this.store) {
+    // Early return if pref for font editor is not enabled.
+    if (!Services.prefs.getBoolPref(PREF_FONT_EDITOR)) {
+      return;
+    }
+
+    if (!this.inspector || !this.store || !this.isSelectedNodeValid()) {
+      this.store.dispatch(resetFontEditor());
       return;
     }
 
     const options = {};
     if (this.pageStyle.supportsFontVariations) {
       options.includeVariations = true;
     }
 

--- a/devtools/client/inspector/fonts/reducers/font-editor.js
+++ b/devtools/client/inspector/fonts/reducers/font-editor.js
@@ -7,38 +7,33 @@
 const { getStr } = require("../utils/l10n");
 
 const {
   APPLY_FONT_VARIATION_INSTANCE,
   RESET_EDITOR,
   UPDATE_AXIS_VALUE,
   UPDATE_CUSTOM_INSTANCE,
   UPDATE_EDITOR_STATE,
-  UPDATE_EDITOR_VISIBILITY,
   UPDATE_PROPERTY_VALUE,
 } = require("../actions/index");
 
 const INITIAL_STATE = {
   // Variable font axes.
   axes: {},
   // Copy of the most recent axes values. Used to revert from a named instance.
   customInstanceValues: [],
   // Fonts applicable to selected element.
   fonts: [],
   // Current selected font variation instance.
   instance: {
     name: getStr("fontinspector.customInstanceName"),
     values: [],
   },
-  // Whether or not the font editor is visible.
-  isVisible: false,
   // CSS font properties defined on the selected rule.
   properties: {},
-  // Selector text of the selected rule where updated font properties will be written.
-  selector: "",
 };
 
 let reducers = {
 
   // Update font editor with the axes and values defined by a font variation instance.
   [APPLY_FONT_VARIATION_INSTANCE](state, { name, values }) {
     let newState = { ...state };
     newState.instance.name = name;
@@ -107,20 +102,16 @@ let reducers = {
     let match = stretch.trim().match(/^(\d+(.\d+)?)%$/);
     if (axes.wdth === undefined && match && match[1]) {
       axes.wdth = match[1];
     }
 
     return { ...state, axes, fonts, properties };
   },
 
-  [UPDATE_EDITOR_VISIBILITY](state, { isVisible, selector }) {
-    return { ...state, isVisible, selector };
-  },
-
   [UPDATE_PROPERTY_VALUE](state, { property, value }) {
     let newState = { ...state };
     newState.properties[property] = value;
     return newState;
   }
 
 };
 

--- a/devtools/client/inspector/fonts/types.js
+++ b/devtools/client/inspector/fonts/types.js
@@ -88,24 +88,18 @@ exports.fontEditor = {
   customInstanceValues: PropTypes.array,
 
   // Fonts applicable to selected element
   fonts: PropTypes.arrayOf(PropTypes.shape(font)),
 
   // Font variation instance currently selected
   instance: PropTypes.shape(fontVariationInstance),
 
-  // Whether or not the font editor is visible
-  isVisible: PropTypes.bool,
-
   // CSS font properties defined on the element
   properties: PropTypes.object,
-
-  // Selector text of the rule where font properties will be written
-  selector: PropTypes.string,
 };
 
 /**
  * Font data.
  */
 exports.fontData = {
   // The fonts used in the current element.
   fonts: PropTypes.arrayOf(PropTypes.shape(font)),

--- a/devtools/client/inspector/rules/rules.js
+++ b/devtools/client/inspector/rules/rules.js
@@ -36,17 +36,16 @@ const AutocompletePopup = require("devto
 loader.lazyRequireGetter(this, "ClassListPreviewer", "devtools/client/inspector/rules/views/class-list-previewer");
 loader.lazyRequireGetter(this, "StyleInspectorMenu", "devtools/client/inspector/shared/style-inspector-menu");
 loader.lazyRequireGetter(this, "KeyShortcuts", "devtools/client/shared/key-shortcuts");
 loader.lazyRequireGetter(this, "clipboardHelper", "devtools/shared/platform/clipboard");
 
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 const PREF_UA_STYLES = "devtools.inspector.showUserAgentStyles";
 const PREF_DEFAULT_COLOR_UNIT = "devtools.defaultColorUnit";
-const PREF_FONT_EDITOR = "devtools.inspector.fonteditor.enabled";
 const FILTER_CHANGED_TIMEOUT = 150;
 
 // This is used to parse user input when filtering.
 const FILTER_PROP_RE = /\s*([^:\s]*)\s*:\s*(.*?)\s*;?$/;
 // This is used to parse the filter search value to see if the filter
 // should be strict or not
 const FILTER_STRICT_RE = /\s*`(.*?)`\s*$/;
 const INSET_POINT_TYPES = ["top", "right", "bottom", "left"];
@@ -121,17 +120,16 @@ function CssRuleView(inspector, document
 
   this._outputParser = new OutputParser(document, this.cssProperties);
 
   this._onAddRule = this._onAddRule.bind(this);
   this._onContextMenu = this._onContextMenu.bind(this);
   this._onCopy = this._onCopy.bind(this);
   this._onFilterStyles = this._onFilterStyles.bind(this);
   this._onClearSearch = this._onClearSearch.bind(this);
-  this._onRuleSelected = this._onRuleSelected.bind(this);
   this._onTogglePseudoClassPanel = this._onTogglePseudoClassPanel.bind(this);
   this._onTogglePseudoClass = this._onTogglePseudoClass.bind(this);
   this._onToggleClassPanel = this._onToggleClassPanel.bind(this);
 
   let doc = this.styleDocument;
   this.element = doc.getElementById("ruleview-container-focusable");
   this.addRuleButton = doc.getElementById("ruleview-add-rule-button");
   this.searchField = doc.getElementById("ruleview-searchbox");
@@ -157,29 +155,27 @@ function CssRuleView(inspector, document
   this.addRuleButton.addEventListener("click", this._onAddRule);
   this.searchField.addEventListener("input", this._onFilterStyles);
   this.searchClearButton.addEventListener("click", this._onClearSearch);
   this.pseudoClassToggle.addEventListener("click", this._onTogglePseudoClassPanel);
   this.classToggle.addEventListener("click", this._onToggleClassPanel);
   this.hoverCheckbox.addEventListener("click", this._onTogglePseudoClass);
   this.activeCheckbox.addEventListener("click", this._onTogglePseudoClass);
   this.focusCheckbox.addEventListener("click", this._onTogglePseudoClass);
-  this.on("ruleview-rule-selected", this._onRuleSelected);
 
   this._handlePrefChange = this._handlePrefChange.bind(this);
   this._handleUAStylePrefChange = this._handleUAStylePrefChange.bind(this);
   this._handleDefaultColorUnitPrefChange =
     this._handleDefaultColorUnitPrefChange.bind(this);
 
   this._prefObserver = new PrefObserver("devtools.");
   this._prefObserver.on(PREF_UA_STYLES, this._handleUAStylePrefChange);
   this._prefObserver.on(PREF_DEFAULT_COLOR_UNIT, this._handleDefaultColorUnitPrefChange);
 
   this.showUserAgentStyles = Services.prefs.getBoolPref(PREF_UA_STYLES);
-  this.showFontEditor = Services.prefs.getBoolPref(PREF_FONT_EDITOR);
 
   // The popup will be attached to the toolbox document.
   this.popup = new AutocompletePopup(inspector._toolbox.doc, {
     autoSelect: true,
     theme: "auto"
   });
 
   this._showEmpty();
@@ -754,17 +750,16 @@ CssRuleView.prototype = {
     this.addRuleButton.removeEventListener("click", this._onAddRule);
     this.searchField.removeEventListener("input", this._onFilterStyles);
     this.searchClearButton.removeEventListener("click", this._onClearSearch);
     this.pseudoClassToggle.removeEventListener("click", this._onTogglePseudoClassPanel);
     this.classToggle.removeEventListener("click", this._onToggleClassPanel);
     this.hoverCheckbox.removeEventListener("click", this._onTogglePseudoClass);
     this.activeCheckbox.removeEventListener("click", this._onTogglePseudoClass);
     this.focusCheckbox.removeEventListener("click", this._onTogglePseudoClass);
-    this.off("ruleview-rule-selected", this._onRuleSelected);
 
     this.searchField = null;
     this.searchClearButton = null;
     this.pseudoClassPanel = null;
     this.pseudoClassToggle = null;
     this.classPanel = null;
     this.classToggle = null;
     this.hoverCheckbox = null;
@@ -1310,34 +1305,16 @@ CssRuleView.prototype = {
    * @return {Array}
    */
   getSelectedRules(editorId) {
     const rules = this.selectedRules.get(editorId);
     return Array.isArray(rules) ? rules : [];
   },
 
   /**
-   * Called when a rule from the Rule view was marked as selected for an editor.
-   * Handle the event and show panels relevant for the given editor id.
-   *
-   * @param {Object} eventData
-   *        Data payload for the event. Contains:
-   *        - {String} editorId - id of the editor for which the rule was selected
-   *        - {Rule} rule - reference to rule that was selected
-   */
-  _onRuleSelected(eventData) {
-    const { editorId } = eventData;
-    switch (editorId) {
-      case "fonteditor":
-        this.inspector.sidebar.show("fontinspector");
-        break;
-    }
-  },
-
-  /**
    * Highlights the rule selector that matches the filter search value and
    * returns a boolean indicating whether or not the selector was highlighted.
    *
    * @param  {Rule} rule
    *         The Rule object.
    * @return {Boolean} true if the rule selector was highlighted,
    *         false otherwise.
    */

--- a/devtools/client/inspector/rules/views/rule-editor.js
+++ b/devtools/client/inspector/rules/views/rule-editor.js
@@ -59,45 +59,37 @@ function RuleEditor(ruleView, rule) {
   this.sourceMapURLService = this.toolbox.sourceMapURLService;
   this.rule = rule;
 
   this.isEditable = !rule.isSystem;
   // Flag that blocks updates of the selector and properties when it is
   // being edited
   this.isEditing = false;
 
-  this._onFontSwatchClick = this._onFontSwatchClick.bind(this);
   this._onNewProperty = this._onNewProperty.bind(this);
   this._newPropertyDestroy = this._newPropertyDestroy.bind(this);
   this._onSelectorDone = this._onSelectorDone.bind(this);
   this._locationChanged = this._locationChanged.bind(this);
   this.updateSourceLink = this.updateSourceLink.bind(this);
   this._onToolChanged = this._onToolChanged.bind(this);
   this._updateLocation = this._updateLocation.bind(this);
   this._onSourceClick = this._onSourceClick.bind(this);
-  this._onRuleUnselected = this._onRuleUnselected.bind(this);
 
   this.rule.domRule.on("location-changed", this._locationChanged);
   this.toolbox.on("tool-registered", this._onToolChanged);
   this.toolbox.on("tool-unregistered", this._onToolChanged);
-  this.ruleView.on("ruleview-rule-unselected", this._onRuleUnselected);
 
   this._create();
 }
 
 RuleEditor.prototype = {
   destroy: function() {
     this.rule.domRule.off("location-changed");
     this.toolbox.off("tool-registered", this._onToolChanged);
     this.toolbox.off("tool-unregistered", this._onToolChanged);
-    this.ruleView.off("ruleview-rule-unselected", this._onRuleUnselected);
-
-    if (this.fontSwatch) {
-      this.fontSwatch.removeEventListener("click", this._onFontSwatchClick);
-    }
 
     let url = null;
     if (this.rule.sheet) {
       url = this.rule.sheet.href || this.rule.sheet.nodeHref;
     }
     if (url && !this.rule.isSystem && this.rule.domRule.type !== ELEMENT_STYLE) {
       // Only get the original source link if the rule isn't a system
       // rule and if it isn't an inline rule.
@@ -239,63 +231,16 @@ RuleEditor.prototype = {
         this.doc.defaultView.focus();
       });
 
       // Create a property editor when the close brace is clicked.
       editableItem({ element: this.closeBrace }, () => {
         this.newProperty();
       });
     }
-
-    // Create the font editor toggle icon visible on hover.
-    if (this.ruleView.showFontEditor) {
-      this.fontSwatch = createChild(this.element, "div", {
-        class: "ruleview-font-editor-toggle"
-      });
-      this.fontSwatch.textContent = "Aa";
-
-      this.fontSwatch.addEventListener("click", this._onFontSwatchClick);
-    }
-  },
-
-  /**
-   * Handler for clicks on font swatch icon.
-   * Toggles the selected state of the the current rule for the font editor.
-   *
-   * @param {MouseEvent} e
-   *        Mouse click event.
-   */
-  _onFontSwatchClick: function(e) {
-    const editorId = "fonteditor";
-    const isActive = e.target.classList.toggle("active");
-
-    if (isActive) {
-      this.ruleView.selectRule(this.rule, editorId);
-    } else {
-      this.ruleView.unselectRule(this.rule, editorId);
-    }
-  },
-
-  /**
-   * Called when a rule was released from being selected for an editor.
-   * A rule may be released by: toggling a swatch icon, an action from an editor
-   * (ex: close), selecting a different node in the markup view, etc.
-   *
-   * @param {Object} eventData
-   *        Data payload for the event. Contains:
-   *        - {String} editorId - id of the editor for which the rule was released
-   *        - {Rule} rule - reference to rule that was released
-   */
-  _onRuleUnselected: function(eventData) {
-    const { rule, editorId } = eventData;
-
-    // If no longer selected for the font editor, toggle the swatch icon.
-    if (editorId === "fonteditor" && rule == this.rule) {
-      this.fontSwatch.classList.remove("active");
-    }
   },
 
   /**
    * Called when a tool is registered or unregistered.
    */
   _onToolChanged: function() {
     // When the source editor is registered, update the source links
     // to be clickable; and if it is unregistered, update the links to

--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -1,32 +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/. */
 
 /* CSS Variables specific to this panel that aren't defined by the themes */
 :root {
-  --rule-badge-active-background-color: var(--blue-50);
-  --rule-badge-background-color: var(--grey-20);
-  --rule-badge-border-color: #CACAD1;
-  --rule-badge-color: var(--grey-90);
-  --rule-badge-hover-background-color: #DFDFE8;
   --rule-highlight-background-color: var(--theme-highlight-yellow);
   --rule-overridden-item-border-color: var(--theme-content-color3);
   --rule-header-background-color: var(--theme-toolbar-background);
   --rule-flex-toggle-color: var(--grey-90);
   --rule-shape-toggle-color: var(--grey-90);
 }
 
 :root.theme-dark {
-  --rule-badge-active-background-color: var(--blue-60);
-  --rule-badge-background-color: var(--grey-70);
-  --rule-badge-border-color: var(--grey-50);
-  --rule-badge-color: var(--grey-30);
-  --rule-badge-hover-background-color: var(--grey-80);
   --rule-highlight-background-color: #521C76;
   --rule-overridden-item-border-color: var(--theme-content-color1);
   --rule-header-background-color: #222225;
   --rule-flex-toggle-color: var(--grey-10);
   --rule-shape-toggle-color: var(--grey-10);
 }
 
 /* Rule View Tabpanel */
@@ -595,39 +585,8 @@
 }
 
 .ruleview-overridden-rule-filter {
   opacity: 0.8;
 }
 .ruleview-overridden-rule-filter:hover {
   opacity: 1;
 }
-
-.ruleview-rule:not(:hover) .ruleview-font-editor-toggle:not(.active) {
-  visibility: hidden;
-}
-
-.ruleview-font-editor-toggle {
-  position: absolute;
-  right: 1.5em;
-  bottom: 0.5em;
-  font-size: 11px;
-  font-weight: normal;
-  line-height: 11px;
-  border: 1px solid var(--rule-badge-border-color);
-  border-radius: 3px;
-  padding: 0px 4px;
-  -moz-user-select: none;
-  cursor: pointer;
-  background-color: var(--rule-badge-background-color);
-  color: var(--rule-badge-color);
-}
-
-.ruleview-font-editor-toggle:focus,
-.ruleview-font-editor-toggle:hover {
-  background-color: var(--rule-badge-hover-background-color);
-}
-
-.ruleview-font-editor-toggle.active {
-  background-color: var(--rule-badge-active-background-color);
-  border-color: var(--rule-badge-active-background-color);
-  color: var(--theme-selection-color);
-}