allTabsMenuExpansionPack: replace close icon with firefox built-in icon

[garywill]

I'm not sure for this... Firefox has close icon built-in. Your svg data can't be correctly displayed on my computer.

Anyway if your svg works for other people than me, ignore this PR.

[aminomancer]

That's a different icon. As for the icon in the script, it's the same as the one in the theme at resources/close.svg. It's just using a data URL so the script can work as a standalone thing. I can't think of any reason it wouldn't work on a particular computer or something. It's just a standard SVG icon from Firefox Photon. There's nothing out of the ordinary about it. Maybe you need to enable svg.context-properties.content.enabled?

[garywill]

I just tried on Firefox 97 Linux with new profile set svg.context-properties.content.enabled true

copied &pasted

data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><rect fill='context-fill' fill-opacity='context-fill-opacity' width='20' height='20' rx='2' ry='2'/><path fill='context-fill' fill-opacity='context-stroke-opacity' d='M11.06 10l3.47-3.47a.75.75 0 00-1.06-1.06L10 8.94 6.53 5.47a.75.75 0 10-1.06 1.06L8.94 10l-3.47 3.47a.75.75 0 101.06 1.06L10 11.06l3.47 3.47a.75.75 0 001.06-1.06z'/></svg>

to url bar.

It showed a black square

[aminomancer]

It's supposed to show a black square. That's the whole point. It uses context properties, they are only set by CSS. It's not meant to be rendered inline, it's meant to be used as list-style-image or background-image like this

element {
  list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><rect fill='context-fill' fill-opacity='context-fill-opacity' width='20' height='20' rx='2' ry='2'/><path fill='context-fill' fill-opacity='context-stroke-opacity' d='M11.06 10l3.47-3.47a.75.75 0 00-1.06-1.06L10 8.94 6.53 5.47a.75.75 0 10-1.06 1.06L8.94 10l-3.47 3.47a.75.75 0 101.06 1.06L10 11.06l3.47 3.47a.75.75 0 001.06-1.06z'/></svg>");
  -moz-context-properties: fill, fill-opacity, stroke-opacity;
  fill: currentColor;
  fill-opacity: 0;
  stroke-opacity: 1;
}

The <rect> is the square. It allows us to create the illusion of a button in places where the close icon needs to be drawn to a bounding box much larger than the intended image size. But most of the time when I use it in this repo, I hide the square. Hence fill-opacity: 0 and stroke-opacity: 1