1221156 - Openning the inspector's filter tooltip (to edit a SVG url CSS filter) breaks "data:" URLs

Status: RESOLVED FIXED

(DevTools :: Inspector, defect)

Description

[arni2033]

Attachment: testcase 1 - Editing a SVG url CSS filter with the inspector's filter tooltip still changes the URL.htm

STR:   (Win7_64, Nightly 45, 32bit, ID 20151031030207, new profile)
1. Open attached "testcase 1"
2. Open devtools -> Inspector, inspect <div>, open "Rules" tab in sidebar
3. Click the circle between "filter" and "url"

Result:       The value changed and the rule became invalid
> before clicking   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='blur'><feGaussianBlur stdDeviation='3'/></filter></svg>#blur");
> after  clicking   url(data:image/svg+xml;utf8,<svg )xmlns='http://www.w3.org/2000/svg'><filter id='blur'><feGaussianBlur stdDeviation='3'/></filter></svg>#blur);
Before bug 1211796 (I guess) the STR resulted in the following invalid url (I still see that on Fx43):
> before 1211796    url(data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='blur'><feGaussianBlur%20stdDeviation='3'/></filter></svg>#blur);

Expectations: Url should not change

Comment 1

[arni2033]

Attachment: screenshot 1 - (Nightly 45) Editing a SVG url CSS filter with the inspector's filter tooltip still changes the URL.png

Comment 2

[arni2033]

Sorry for bugspam. Apparently, it wasn't 1211796 which changed the way of url breakage. It was 1217328
However, it's not "blocking", because I don't think it has made things way worse.

Comment 3

[arni2033]

> pushlog_url (of changing the way of url breakage): https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=1a1d5630602c120dddc54c931fa3227a729d1153&tochange=c6fa796af5487f5fafdef19f0b436102439d80d6
> bug 1217328

Comment 4

[Tom Tromey :tromey]

Attachment: make FilterWidget try to preserve URL quoting

Comment 5

[Patrick Brosset <:pbro>]

Comment on attachment 8684954 [details] [diff] [review]
make FilterWidget try to preserve URL quoting

Review of attachment 8684954 [details] [diff] [review]:
-----------------------------------------------------------------

::: devtools/client/shared/widgets/FilterWidget.js
@@ +824,3 @@
>      const {value, unit} = filter;
>  
>      return value + unit;

Took me a while to read this function, maybe I was just being dumb, but having this big block of logic in the middle threw me off. I didn't even see the returns at first.
I think this would be more readable (at least to me):

getValueAt: function(index) {
  let filter = this.filters[index];
  if (!filter) {
    return null;
  }

  // Just return the value + unit for non-url values.
  if (filter.name !== "url") {
    return filter.value + filter.unit;
  }

  // url values need to be quoted and escaped.
  if (filter.quote === "'") {
    return "'" + filter.value.replace(/\'/g, "\\'") + "'";
  } else if (filter.quote === "\"") {
    return "\"" + filter.value.replace(/\"/g, "\\\"") + "\"";
  }

  // Unquoted. This approach might change the original input --
  // for example the original might be over-quoted. But, this is
  // correct and probably good enough.
  return filter.value.replace(/[ \t(){};]/g, "\\$&");
}

Comment 6

[Tom Tromey :tromey]

Attachment: make FilterWidget try to preserve URL quoting

Updated per review.

Comment 7

[Tom Tromey :tromey]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=11d9fcd8eca3

Comment 8

[Tom Tromey :tromey]

Attachment: make FilterWidget try to preserve URL quoting

Rebase on top of patch for bug 1223076.

Comment 9

[Pulsebot]

https://hg.mozilla.org/integration/fx-team/rev/4efdfcadd82f

Comment 10

[Phil Ringnalda (:philor)]

https://hg.mozilla.org/mozilla-central/rev/4efdfcadd82f