Bug 1551816 - Bail out rendering urls in rule-view if they're not valid; r=gl

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

--HG--
extra : moz-landing-system : lando

devtools/client/inspector/shared/test/browser_styleinspector_output-parser.js

@@ -291,6 +291,14 @@ const TEST_DATA = [
       is(fragment.textContent, "rgb(255, var(--g-value, 0), 192)");
     },
   },
+  {
+    name: "--url",
+    value: "url(())",
+    test: fragment => {
+      is(countAll(fragment), 0);
+      is(fragment.textContent, "url(())");
+    },
+  },
 ];
 
 add_task(async function() {

devtools/client/shared/output-parser.js

@@ -1340,8 +1340,15 @@ OutputParser.prototype = {
       // whitespace, and the ")" into |trailer|.  We considered adding
       // functionality for this to CSSLexer, in some way, but this
       // seemed simpler on the whole.
-      const [, leader, , body, trailer] =
-        /^(url\([ \t\r\n\f]*(["']?))(.*?)(\2[ \t\r\n\f]*\))$/i.exec(match);
+      const urlParts = /^(url\([ \t\r\n\f]*(["']?))(.*?)(\2[ \t\r\n\f]*\))$/i.exec(match);
+
+      // Bail out if that didn't match anything.
+      if (!urlParts) {
+        this._appendTextNode(match);
+        return;
+      }
+
+      const [, leader, , body, trailer] = urlParts;
 
       this._appendTextNode(leader);