search

aminomancer / uc.css.js

A dark indigo CSS theme for Firefox and a large collection of privileged scripts to add new buttons, menus, and behaviors and eliminate nuisances. The theme is similar to other userChrome stylesheets, but it's intended for use with an autoconfig loader like fx-autoconfig, since it uses JavaScript to implement its more functional features.
Other
326 stars 27 forks source link

allTabsMenuExpansionPack: replace close icon with firefox built-in icon #46

Open garywill opened 2 years ago

garywill commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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