merge fx-team to mozilla-central a=merge

2016-07-31 17:41:56 +02:00 · 2016-07-31 17:41:56 +02:00 · 2b209649d6
--- a/browser/base/content/browser-sets.inc
+++ b/browser/base/content/browser-sets.inc
@ -285,6 +285,7 @@
    <key id="key_fullScreen_old" key="&fullScreenCmd.macCommandKey;" command="View:FullScreen" modifiers="accel,shift"/>
    <key keycode="VK_F11" command="View:FullScreen"/>
 #endif
+    <key id="toggleReaderMode" key="&toggleReaderMode.key;" command="View:ReaderView" modifiers="accel,alt" disabled="true"/>
    <key key="&reloadCmd.commandkey;" command="Browser:Reload" modifiers="accel" id="key_reload"/>
    <key key="&reloadCmd.commandkey;" command="Browser:ReloadSkipCache" modifiers="accel,shift"/>
    <key id="key_viewSource" key="&pageSourceCmd.commandkey;" command="View:PageSource" modifiers="accel"/>
--- a/browser/locales/en-US/chrome/browser/browser.dtd
+++ b/browser/locales/en-US/chrome/browser/browser.dtd
@ -111,6 +111,7 @@ These should match what Safari and other Apple applications use on OS X Lion. --
 <!ENTITY fullScreenCmd.macCommandKey "f">
 <!ENTITY showAllTabsCmd.label "Show All Tabs">
 <!ENTITY showAllTabsCmd.accesskey "A">
+<!ENTITY toggleReaderMode.key "R">

 <!ENTITY fxaSignIn.label "Sign in to &syncBrand.shortName.label;">
 <!ENTITY fxaSignedIn.tooltip "Open &syncBrand.shortName.label; preferences">
--- a/browser/modules/ReaderParent.jsm
+++ b/browser/modules/ReaderParent.jsm
@ -88,6 +88,7 @@ var ReaderParent = {

    let button = win.document.getElementById("reader-mode-button");
    let command = win.document.getElementById("View:ReaderView");
+    let key = win.document.getElementById("toggleReaderMode");
    if (browser.currentURI.spec.startsWith("about:reader")) {
      button.setAttribute("readeractive", true);
      button.hidden = false;
@ -96,6 +97,7 @@ var ReaderParent = {
      command.setAttribute("label", closeText);
      command.setAttribute("hidden", false);
      command.setAttribute("accesskey", gStringBundle.GetStringFromName("readerView.close.accesskey"));
+      key.setAttribute("disabled", false);
    } else {
      button.removeAttribute("readeractive");
      button.hidden = !browser.isArticle;
@ -104,6 +106,7 @@ var ReaderParent = {
      command.setAttribute("label", enterText);
      command.setAttribute("hidden", !browser.isArticle);
      command.setAttribute("accesskey", gStringBundle.GetStringFromName("readerView.enter.accesskey"));
+      key.setAttribute("disabled", !browser.isArticle);
    }

    let currentUriHost = browser.currentURI && browser.currentURI.asciiHost;
--- a/devtools/client/jsonview/css/search-box.css
+++ b/devtools/client/jsonview/css/search-box.css
@ -10,7 +10,7 @@
  height: 18px;
  font: message-box;
  background-color: var(--theme-body-background);
-  background-image: url("chrome://devtools/skin/images/filter.svg");
+  background-image: url("chrome://devtools/skin/images/filter.svg#filterinput");
  background-repeat: no-repeat;
  background-position: 2px center;
  border: 1px solid var(--theme-splitter-color);
--- a/devtools/client/shared/components/reps/array.js
+++ b/devtools/client/shared/components/reps/array.js
@ -11,7 +11,6 @@ define(function (require, exports, module) {
  // Dependencies
  const React = require("devtools/client/shared/vendor/react");
  const { createFactories } = require("./rep-utils");
-  const { ObjectBox } = createFactories(require("./object-box"));
  const { Caption } = createFactories(require("./caption"));

  // Shortcuts
@ -135,8 +134,8 @@ define(function (require, exports, module) {
      let objectLink = this.props.objectLink || DOM.span;

      return (
-        ObjectBox({
-          className: "array"},
+        DOM.span({
+          className: "objectBox objectBox-array"},
          objectLink({
            className: "arrayLeftBracket",
            role: "presentation",
--- a/devtools/client/shared/components/reps/attribute.js
+++ b/devtools/client/shared/components/reps/attribute.js
@ -12,7 +12,6 @@ define(function (require, exports, module) {

  // Reps
  const { createFactories, isGrip } = require("./rep-utils");
-  const { ObjectLink } = createFactories(require("./object-link"));
  const { StringRep } = require("./string");

  // Shortcuts
@ -36,9 +35,10 @@ define(function (require, exports, module) {
    render: function () {
      let grip = this.props.object;
      let value = grip.preview.value;
+      let objectLink = this.props.objectLink || span;

      return (
-        ObjectLink({className: "Attr"},
+        objectLink({className: "objectLink-Attr"},
          span({},
            span({className: "attrTitle"},
              this.getTitle(grip)
--- a/devtools/client/shared/components/reps/date-time.js
+++ b/devtools/client/shared/components/reps/date-time.js
@ -11,8 +11,7 @@ define(function (require, exports, module) {
  const React = require("devtools/client/shared/vendor/react");

  // Reps
-  const { createFactories, isGrip } = require("./rep-utils");
-  const { ObjectBox } = createFactories(require("./object-box"));
+  const { isGrip } = require("./rep-utils");

  // Shortcuts
  const { span } = React.DOM;
@ -39,7 +38,7 @@ define(function (require, exports, module) {
    render: function () {
      let grip = this.props.object;
      return (
-        ObjectBox({},
+        span({className: "objectBox"},
          this.getTitle(grip),
          span({className: "Date"},
            new Date(grip.preview.timestamp).toISOString()
--- a/devtools/client/shared/components/reps/document.js
+++ b/devtools/client/shared/components/reps/document.js
@ -11,8 +11,7 @@ define(function (require, exports, module) {
  const React = require("devtools/client/shared/vendor/react");

  // Reps
-  const { createFactories, isGrip, getFileName } = require("./rep-utils");
-  const { ObjectBox } = createFactories(require("./object-box"));
+  const { isGrip, getFileName } = require("./rep-utils");

  // Shortcuts
  const { span } = React.DOM;
@ -34,7 +33,7 @@ define(function (require, exports, module) {

    getTitle: function (grip) {
      if (this.props.objectLink) {
-        return ObjectBox({},
+        return span({className: "objectBox"},
          this.props.objectLink({
            object: grip
          }, grip.class)
@ -51,7 +50,7 @@ define(function (require, exports, module) {
      let grip = this.props.object;

      return (
-        ObjectBox({className: "object"},
+        span({className: "objectBox objectBox-object"},
          this.getTitle(grip),
          span({className: "objectPropValue"},
            this.getLocation(grip)
--- a/devtools/client/shared/components/reps/event.js
+++ b/devtools/client/shared/components/reps/event.js
@ -11,8 +11,10 @@ define(function (require, exports, module) {
  const React = require("devtools/client/shared/vendor/react");

  // Reps
-  const { createFactories, isGrip } = require("./rep-utils");
-  const { ObjectBox } = createFactories(require("./object-box"));
+  const { isGrip } = require("./rep-utils");
+
+  // Shortcuts
+  const { span } = React.DOM;

  /**
   * Renders DOM event objects.
@ -53,7 +55,7 @@ define(function (require, exports, module) {
    render: function () {
      let grip = this.props.object;
      return (
-        ObjectBox({className: "event"},
+        span({className: "objectBox objectBox-event"},
          this.getTitle(grip),
          this.summarizeEvent(grip)
        )
--- a/devtools/client/shared/components/reps/function.js
+++ b/devtools/client/shared/components/reps/function.js
@ -11,8 +11,10 @@ define(function (require, exports, module) {
  const React = require("devtools/client/shared/vendor/react");

  // Reps
-  const { createFactories, isGrip, cropString } = require("./rep-utils");
-  const { ObjectBox } = createFactories(require("./object-box"));
+  const { isGrip, cropString } = require("./rep-utils");
+
+  // Shortcuts
+  const { span } = React.DOM;

  /**
   * This component represents a template for Function objects.
@ -42,7 +44,7 @@ define(function (require, exports, module) {
      let grip = this.props.object;

      return (
-        ObjectBox({className: "function"},
+        span({className: "objectBox objectBox-function"},
          this.getTitle(grip),
          this.summarizeFunction(grip)
        )
--- a/devtools/client/shared/components/reps/grip-array.js
+++ b/devtools/client/shared/components/reps/grip-array.js
@ -11,7 +11,6 @@ define(function (require, exports, module) {
  // Dependencies
  const React = require("devtools/client/shared/vendor/react");
  const { createFactories, isGrip } = require("./rep-utils");
-  const { ObjectBox } = createFactories(require("./object-box"));
  const { Caption } = createFactories(require("./caption"));

  // Shortcuts
@ -120,8 +119,8 @@ define(function (require, exports, module) {
      let title = this.getTitle(object);

      return (
-        ObjectBox({
-          className: "array"},
+        span({
+          className: "objectBox objectBox-array"},
          title,
          objectLink({
            className: "arrayLeftBracket",
--- a/devtools/client/shared/components/reps/grip.js
+++ b/devtools/client/shared/components/reps/grip.js
@ -11,7 +11,6 @@ define(function (require, exports, module) {
  const React = require("devtools/client/shared/vendor/react");
  // Dependencies
  const { createFactories, isGrip } = require("./rep-utils");
-  const { ObjectBox } = createFactories(require("./object-box"));
  const { Caption } = createFactories(require("./caption"));
  const { PropRep } = createFactories(require("./prop-rep"));
  // Shortcuts
@ -172,7 +171,7 @@ define(function (require, exports, module) {
      let objectLink = this.props.objectLink || span;
      if (this.props.mode == "tiny" || !props.length) {
        return (
-          ObjectBox({className: "object"},
+          span({className: "objectBox objectBox-object"},
            this.getTitle(object),
            objectLink({
              className: "objectLeftBrace",
@ -184,7 +183,7 @@ define(function (require, exports, module) {
      }

      return (
-        ObjectBox({className: "object"},
+        span({className: "objectBox objectBox-object"},
          this.getTitle(object),
          objectLink({
            className: "objectLeftBrace",
--- a/devtools/client/shared/components/reps/moz.build
+++ b/devtools/client/shared/components/reps/moz.build
@ -16,8 +16,6 @@ DevToolsModules(
    'grip.js',
    'null.js',
    'number.js',
-    'object-box.js',
-    'object-link.js',
    'object-with-text.js',
    'object-with-url.js',
    'object.js',
--- a/devtools/client/shared/components/reps/null.js
+++ b/devtools/client/shared/components/reps/null.js
@ -10,8 +10,9 @@
 define(function (require, exports, module) {
  // Dependencies
  const React = require("devtools/client/shared/vendor/react");
-  const { createFactories } = require("./rep-utils");
-  const { ObjectBox } = createFactories(require("./object-box"));
+
+  // Shortcuts
+  const { span } = React.DOM;

  /**
   * Renders null value
@ -21,7 +22,7 @@ define(function (require, exports, module) {

    render: function () {
      return (
-        ObjectBox({className: "null"},
+        span({className: "objectBox objectBox-null"},
          "null"
        )
      );
--- a/devtools/client/shared/components/reps/number.js
+++ b/devtools/client/shared/components/reps/number.js
@ -10,8 +10,9 @@
 define(function (require, exports, module) {
  // Dependencies
  const React = require("devtools/client/shared/vendor/react");
-  const { createFactories } = require("./rep-utils");
-  const { ObjectBox } = createFactories(require("./object-box"));
+
+  // Shortcuts
+  const { span } = React.DOM;

  /**
   * Renders a number
@ -30,7 +31,7 @@ define(function (require, exports, module) {
      let value = this.props.object;

      return (
-        ObjectBox({className: "number"},
+        span({className: "objectBox objectBox-number"},
          this.stringify(value)
        )
      );
--- a/devtools/client/shared/components/reps/object-box.js
+++ b/devtools/client/shared/components/reps/object-box.js
@ -1,35 +0,0 @@
-/* -*- 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";
-
-// Make this available to both AMD and CJS environments
-define(function (require, exports, module) {
-  // Dependencies
-  const React = require("devtools/client/shared/vendor/react");
-  const DOM = React.DOM;
-
-  /**
-   * Renders a box for given object.
-   */
-  const ObjectBox = React.createClass({
-    displayName: "ObjectBox",
-
-    render: function () {
-      let className = this.props.className;
-      let boxClassName = className ? " objectBox-" + className : "";
-
-      return (
-        DOM.span({className: "objectBox" + boxClassName, role: "presentation"},
-          this.props.children
-        )
-      );
-    }
-  });
-
-  // Exports from this module
-  exports.ObjectBox = ObjectBox;
-});
--- a/devtools/client/shared/components/reps/object-link.js
+++ b/devtools/client/shared/components/reps/object-link.js
@ -1,36 +0,0 @@
-/* -*- 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";
-
-// Make this available to both AMD and CJS environments
-define(function (require, exports, module) {
-  // Dependencies
-  const React = require("devtools/client/shared/vendor/react");
-  const DOM = React.DOM;
-
-  /**
-   * Renders a link for given object.
-   */
-  const ObjectLink = React.createClass({
-    displayName: "ObjectLink",
-
-    render: function () {
-      let className = this.props.className;
-      let objectClassName = className ? " objectLink-" + className : "";
-      let linkClassName = "objectLink" + objectClassName + " a11yFocus";
-
-      return (
-        DOM.a({className: linkClassName, _repObject: this.props.object},
-          this.props.children
-        )
-      );
-    }
-  });
-
-  // Exports from this module
-  exports.ObjectLink = ObjectLink;
-});
--- a/devtools/client/shared/components/reps/object-with-text.js
+++ b/devtools/client/shared/components/reps/object-with-text.js
@ -11,8 +11,7 @@ define(function (require, exports, module) {
  const React = require("devtools/client/shared/vendor/react");

  // Reps
-  const { createFactories, isGrip } = require("./rep-utils");
-  const { ObjectBox } = createFactories(require("./object-box"));
+  const { isGrip } = require("./rep-utils");

  // Shortcuts
  const { span } = React.DOM;
@ -29,7 +28,7 @@ define(function (require, exports, module) {

    getTitle: function (grip) {
      if (this.props.objectLink) {
-        return ObjectBox({},
+        return span({className: "objectBox"},
          this.props.objectLink({
            object: grip
          }, this.getType(grip))
@ -49,7 +48,7 @@ define(function (require, exports, module) {
    render: function () {
      let grip = this.props.object;
      return (
-        ObjectBox({className: this.getType(grip)},
+        span({className: "objectBox objectBox-" + this.getType(grip)},
          this.getTitle(grip),
          span({className: "objectPropValue"},
            this.getDescription(grip)
--- a/devtools/client/shared/components/reps/object-with-url.js
+++ b/devtools/client/shared/components/reps/object-with-url.js
@ -11,8 +11,7 @@ define(function (require, exports, module) {
  const React = require("devtools/client/shared/vendor/react");

  // Reps
-  const { createFactories, isGrip } = require("./rep-utils");
-  const { ObjectBox } = createFactories(require("./object-box"));
+  const { isGrip } = require("./rep-utils");

  // Shortcuts
  const { span } = React.DOM;
@ -29,7 +28,7 @@ define(function (require, exports, module) {

    getTitle: function (grip) {
      if (this.props.objectLink) {
-        return ObjectBox({},
+        return span({className: "objectBox"},
          this.props.objectLink({
            object: grip
          }, this.getType(grip))
@ -49,7 +48,7 @@ define(function (require, exports, module) {
    render: function () {
      let grip = this.props.object;
      return (
-        ObjectBox({className: this.getType(grip)},
+        span({className: "objectBox objectBox-" + this.getType(grip)},
          this.getTitle(grip),
          span({className: "objectPropValue"},
            this.getDescription(grip)
--- a/devtools/client/shared/components/reps/object.js
+++ b/devtools/client/shared/components/reps/object.js
@ -10,7 +10,6 @@ define(function (require, exports, module) {
  // Dependencies
  const React = require("devtools/client/shared/vendor/react");
  const { createFactories } = require("./rep-utils");
-  const { ObjectBox } = createFactories(require("./object-box"));
  const { Caption } = createFactories(require("./caption"));
  const { PropRep } = createFactories(require("./prop-rep"));
  // Shortcuts
@ -138,14 +137,14 @@ define(function (require, exports, module) {

      if (this.props.mode == "tiny" || !props.length) {
        return (
-          ObjectBox({className: "object"},
+          span({className: "objectBox objectBox-object"},
            objectLink({className: "objectTitle"}, this.getTitle())
          )
        );
      }

      return (
-        ObjectBox({className: "object"},
+        span({className: "objectBox objectBox-object"},
          this.getTitle(object),
          objectLink({
            className: "objectLeftBrace",
--- a/devtools/client/shared/components/reps/regexp.js
+++ b/devtools/client/shared/components/reps/regexp.js
@ -11,8 +11,7 @@ define(function (require, exports, module) {
  const React = require("devtools/client/shared/vendor/react");

  // Reps
-  const { createFactories, isGrip } = require("./rep-utils");
-  const { ObjectBox } = createFactories(require("./object-box"));
+  const { isGrip } = require("./rep-utils");

  // Shortcuts
  const { span } = React.DOM;
@ -36,7 +35,7 @@ define(function (require, exports, module) {
      let objectLink = this.props.objectLink || span;

      return (
-        ObjectBox({className: "regexp"},
+        span({className: "objectBox objectBox-regexp"},
          objectLink({
            object: grip,
            className: "regexpSource"
--- a/devtools/client/shared/components/reps/string.js
+++ b/devtools/client/shared/components/reps/string.js
@ -10,8 +10,10 @@
 define(function (require, exports, module) {
  // Dependencies
  const React = require("devtools/client/shared/vendor/react");
-  const { createFactories, cropMultipleLines } = require("./rep-utils");
-  const { ObjectBox } = createFactories(require("./object-box"));
+  const { cropMultipleLines } = require("./rep-utils");
+
+  // Shortcuts
+  const { span } = React.DOM;

  /**
   * Renders a string. String value is enclosed within quotes.
@ -24,7 +26,7 @@ define(function (require, exports, module) {
      let member = this.props.member;
      if (member && member.open) {
        return (
-          ObjectBox({className: "string"},
+          span({className: "objectBox objectBox-string"},
            "\"" + text + "\""
          )
        );
@ -34,7 +36,7 @@ define(function (require, exports, module) {
        cropMultipleLines(text, this.props.cropLimit) : cropMultipleLines(text);

      return (
-        ObjectBox({className: "string"}, "\"" + croppedString + "\""
+        span({className: "objectBox objectBox-string"}, "\"" + croppedString + "\""
        )
      );
    },
--- a/devtools/client/shared/components/reps/stylesheet.js
+++ b/devtools/client/shared/components/reps/stylesheet.js
@ -11,8 +11,7 @@ define(function (require, exports, module) {
  const React = require("devtools/client/shared/vendor/react");

  // Reps
-  const { createFactories, isGrip, getFileName } = require("./rep-utils");
-  const { ObjectBox } = createFactories(require("./object-box"));
+  const { isGrip, getFileName } = require("./rep-utils");

  // Shortcuts
  const DOM = React.DOM;
@ -30,7 +29,7 @@ define(function (require, exports, module) {
    getTitle: function (grip) {
      let title = "StyleSheet ";
      if (this.props.objectLink) {
-        return ObjectBox({},
+        return DOM.span({className: "objectBox"},
          this.props.objectLink({
            object: grip
          }, title)
@ -49,7 +48,7 @@ define(function (require, exports, module) {
      let grip = this.props.object;

      return (
-        ObjectBox({className: "object"},
+        DOM.span({className: "objectBox objectBox-object"},
          this.getTitle(grip),
          DOM.span({className: "objectPropValue"},
            this.getLocation(grip)
--- a/devtools/client/shared/components/reps/text-node.js
+++ b/devtools/client/shared/components/reps/text-node.js
@ -11,8 +11,7 @@ define(function (require, exports, module) {
  const React = require("devtools/client/shared/vendor/react");

  // Reps
-  const { createFactories, isGrip, cropMultipleLines } = require("./rep-utils");
-  const { ObjectBox } = createFactories(require("./object-box"));
+  const { isGrip, cropMultipleLines } = require("./rep-utils");

  // Shortcuts
  const DOM = React.DOM;
@ -47,7 +46,7 @@ define(function (require, exports, module) {

      if (mode == "short" || mode == "tiny") {
        return (
-          ObjectBox({className: "textNode"},
+          DOM.span({className: "objectBox objectBox-textNode"},
            this.getTitle(grip),
            "\"" + this.getTextContent(grip) + "\""
          )
@ -56,7 +55,7 @@ define(function (require, exports, module) {

      let objectLink = this.props.objectLink || DOM.span;
      return (
-        ObjectBox({className: "textNode"},
+        DOM.span({className: "objectBox objectBox-textNode"},
          this.getTitle(grip),
          objectLink({
            object: grip
--- a/devtools/client/shared/components/reps/undefined.js
+++ b/devtools/client/shared/components/reps/undefined.js
@ -10,8 +10,9 @@
 define(function (require, exports, module) {
  // Dependencies
  const React = require("devtools/client/shared/vendor/react");
-  const { createFactories } = require("./rep-utils");
-  const { ObjectBox } = createFactories(require("./object-box"));
+
+  // Shortcuts
+  const { span } = React.DOM;

  /**
   * Renders undefined value
@ -21,7 +22,7 @@ define(function (require, exports, module) {

    render: function () {
      return (
-        ObjectBox({className: "undefined"},
+        span({className: "objectBox objectBox-undefined"},
          "undefined"
        )
      );
--- a/devtools/client/shared/components/reps/window.js
+++ b/devtools/client/shared/components/reps/window.js
@ -11,8 +11,7 @@ define(function (require, exports, module) {
  const React = require("devtools/client/shared/vendor/react");

  // Reps
-  const { createFactories, isGrip, cropString } = require("./rep-utils");
-  const { ObjectBox } = createFactories(require("./object-box"));
+  const { isGrip, cropString } = require("./rep-utils");

  // Shortcuts
  const DOM = React.DOM;
@ -29,7 +28,7 @@ define(function (require, exports, module) {

    getTitle: function (grip) {
      if (this.props.objectLink) {
-        return ObjectBox({},
+        return DOM.span({className: "objectBox"},
          this.props.objectLink({
            object: grip
          }, grip.class)
@ -46,7 +45,7 @@ define(function (require, exports, module) {
      let grip = this.props.object;

      return (
-        ObjectBox({className: "Window"},
+        DOM.span({className: "objectBox objectBox-Window"},
          this.getTitle(grip),
          DOM.span({className: "objectPropValue"},
            this.getLocation(grip)
--- a/devtools/client/shared/components/tabs/tabs.css
+++ b/devtools/client/shared/components/tabs/tabs.css
@ -16,6 +16,10 @@
  margin: 0;
 }

+.tabs .tabs-menu-item {
+  display: inline-block;
+}
+
 .tabs .tabs-menu-item a {
  display: block;
  color: #A9A9A9;
--- a/devtools/client/shared/components/test/mochitest/test_reps_undefined.html
+++ b/devtools/client/shared/components/test/mochitest/test_reps_undefined.html
@ -32,7 +32,6 @@ window.onload = Task.async(function* () {
    // Test rendering
    const renderedComponent = renderComponent(Undefined.rep, {});
    is(renderedComponent.className, "objectBox objectBox-undefined", "Undefined rep has expected class names");
-    is(renderedComponent.getAttribute("role"), "presentation", "Undefined rep has expected aria role");
    is(renderedComponent.textContent, "undefined", "Undefined rep has expected text content");
  } catch(e) {
    ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@ -5,17 +5,14 @@
 /* CSS Variables specific to this panel that aren't defined by the themes */
 .theme-light {
  --rule-highlight-background-color: #ffee99;
-  --rule-filter-icon: url(images/filter.svg);
 }

 .theme-dark {
  --rule-highlight-background-color: #594724;
-  --rule-filter-icon: url(images/filter.svg);
 }

 .theme-firebug {
  --rule-highlight-background-color: #ffee99;
-  --rule-filter-icon: url(images/filter.svg);
  --rule-property-name: darkgreen;
  --rule-property-value: darkblue;
 }
@ -296,7 +293,7 @@
 }

 .ruleview-overridden-rule-filter {
-  background-image: var(--rule-filter-icon);
+  background-image: url(images/filter.svg#filterinput);
  background-size: 11px 11px;
  margin-inline-start: 5px;
  display: inline-block;
--- a/devtools/client/webconsole/test/browser_console_error_source_click.js
+++ b/devtools/client/webconsole/test/browser_console_error_source_click.js
@ -68,7 +68,7 @@ add_task(function* () {
    let locationNode = msg.querySelector(selector);
    ok(locationNode, "message location element found");

-    EventUtils.synthesizeMouse(locationNode, 2, 2, {}, hud.iframeWindow);
+    locationNode.click();

    ok(viewSourceCalled, "view source opened");
  }