[FireMonkey] Support UserCSS custom settings #293
Comments
|
Where does the dialogue data come from? |
|
UserStyles.org: Thus, when you click to Install, UserStyles.org generates a dynamic URL with parameters accordingly to customized settings, like So that when the style is updated, your customization is respected. But this approach creates complete dependence on the unreliable userstyles.org. So now we have UserCSS: Newer version of Stylus automatically converts styles with installURL from userstyles.org to UserCSS, so that dynamic URL doesn't matter anymore and you can change customized settings after installing the script, which was not possible before. Also, giving the current status of userstyles.org, uso-archive was created mirroring us.o and also converting styles to UserCSS format. Click this link to see how UserCSS handles user settings: Stylus: |
|
The use of ATM, FireMonkey only supports the standard CSS and remain as slim as possible. If the aim is to override or add some custom CSS settings to another userCSS so that the custom settings will remain after userCSS update, that can be done with
PS. I will add a guide to the Help |
|
OK. I just think this is an important drawback. An UserScript can implement its own settings using storage. UserStyles need to be customizable too. And userstyles.org has that feature since... always? If you have a better idea to format that in UserStyle code, maybe you could discuss with folks from Stylus and uso-archive. I just think it's really important to allow UserStyles writers to define a set of customized options per style.
The aim is to be user friendly, so that you don't need to know CSS to use a style with some customized preferences. |
|
How do you customs a 3rd party userStyle that doesn't have In any case, each manager has its own features and as the tables in the Help show, they are not 100% identical. Let's see if there is a popular demand. |
I fork it, keeping the original disabled (to periodically get updated code), pasting the original code on top of my version and adding my customs at the end. Now that UserCSS is becoming mainstream (as I said, both Stylus and uso-mirror are converting styles from us.o to UserCSS), maybe I'll switch to the @require you suggested (if Stylus supports it, since apparently I will not be able to migrate my styles to FM). But I don't think this is related to the issue, I'm talking about UserStyle writers being able to set custom options to users, so that they don't need to understand CSS. |
|
I use the style I linked as example. And I don't use default settings. How am I supposed to handle it with FM? Let's imagine... I install the style and it comes in default settings. Then I need to inspect the code searching for these But... maybe one of the default it's not exatcly the opposite to what I chose, so I need to manually write code to reverse the default instructions. Then the style update. And I would need to do a whole diff to know if something changed in my customs, or in the defaults that I don't use... It's a big mess. So I have no choise but to stay with Stylus, where it handles custom settings super easily even for the user who doesn't know anything about CSS. Of course I'm not saying you need to convince me to use FM, I'm just trying to explain my situation, which is certainly not unique. Edit: I just noticed the defaults aren't added to the code, so it's less worse than what I said. But still... In summary, is like forking anything. Is doable, and in many cases it's the only way, cause usually the dev doesn't provide us the customs we want. But I think it makes sense to have a way to allow explicit customs. |
It is the same principal as userScript. Should there be custom options for people who don't understand JavaScript to enable them to customise the code? There are a umber of CSS Preprocessors such as LESS, SCSS, SASS etc. Firefox only supports standard CSS. The method used by Stylus is not standard CSS. Nonetheless, let's see if there is a popular demand. A quote from VM developer... |
It's up to UserScripts devs. They can implement options popup in page with endless settings that will stay stored by But for styles in FM there is simply no practical way for devs to offer custom settings. UserStyles.org/Stylish always supported styles custom settings, Stylus too. But I totally understand you in this, there is probably no popular demand and this is not so simple to implement, so it’s questionable if it’s worth it. |
|
I will keep this open and see if there are other feedbacks on it. |
Does FM perform regular updates to @require'd URLs? Edit: we can set a userStyle name in @require, so the answer is yes, the @require'd file will check for updates because it is just an ordinary style. |
|
You can include another userCSS (not userStyle) in As a rough guide ...... Original 3rd party userCSS
/*
==UserCSS==
@name 1CSS
@match *://example.com/*
@version 1.0
==/UserCSS==
*/
body {
border-top: 2px solid grey;
}Custom UserCSS for above
/*
==UserCSS==
@name 1CSS Custom
@match *://example.com/*
@version 1.0
@require 1CSS
==/UserCSS==
*/
body {
border-top-color: blue;
} |
|
I was thinking about previous post and this is another method which allows auto-update Original 3rd party userCSS
/*
==UserCSS==
@name 1CSS
@match *://example.com/*
@version 1.0
==/UserCSS==
*/
body {
border-top: 2px solid grey;
}Custom UserCSS for above
/*
==UserCSS==
@name 1CSS Custom
@match *://example.com/*
@version 1.0
@require 1CSS
@run-at document-end
==/UserCSS==
*/
body {
border-top-color: blue;
}Another method |
|
Thanks. The first method, as you said, has the downside of not being able to get the style to auto-update. The second, as the styles will be injected at very different times (depending on the page), may cause an ugly and annoying flickering (think if the forked style changes the background color of the page, for instance).
The style I'm requiring is a I understand the reasoning behind "disabled userScript/userCSS will not auto-update", but I think there should be a way to circumvent that, be it a global setting or per script. As I'm already getting to know you, I guess this will be rejected, so I'll propose a different approach: When FM checks for update in a userS*, it should check for Edit: my pull request to fix this, pref.content[item].version && installer.cache.push(item);
+ doUpdate && pref.content[item].enabled && pref.content[item].require.forEach(req => {
+ pref.content[req] && !pref.content[req].enabled && installer.cache.push(req);
+ }); |
|
Also, in case /^https:\/\/userstyles\.org\/styles\/\d+\/.+\.css$/.test(item.updateURL):You should remove
|
|
In this case, context-menu "Install Stylish Style" is silently failing because the code looks for non-existent elements to get metadata like name, version and description. If |
Let's see what is the best way to handle this situation and update the code accordingly.
I see.... I didnt know they can have query strings.... fixed for v2.19 👍
TBH, I don't use USO and the process was added for convenience of users. I didn't know all the possibilities. I will work on updating the process. |
I, at least, would definitely like |
The standard var() is part of CSS and can be used. :root {
--bg: #f9f9fa;
--border: #ddd;
--color: #000;
--hover: #eee;
}
body {
color: var(--color);
background: var(--bg);
padding: 0;
margin: 0;
}The @var implementation of Stylus Stylus then converts ... to ... So, why not use the proper CSS CompatibilityAt the moment, the 3 main user-style managers Stylish | Stylus | xStyle are not 100% compatible.
|
|
I am going to work on implementing |
|
v2.56
|
|
I couldn't get it to work. I'm not much into userstyles world, but I believe there are two major repositories:
FM can't install styles from USO. Should I open a new issue for that? Regarding USW, I searched for a random style with custom variables and found this one: It's compatible with both Stylus and Stylish and is hosted on the two main repositories. Here are videos showing installation in different scenarios: As I said, FM can't install styles from USO. From USW it installs, but apparently it can't handle user settings. I clicked to edit the style, clicked User Variables button and it's empty:
|
Why not? I tested now and it installed fine.
I didn't know about it. I will check it out.
Above uses Please Read the FireMonkey Help under @preprocessorStylus supports FireMonkey only supports standard CSS. ExamplesThese are examples of These ones have |
With Stylus or Stylish: "Install Style": With FM: "Install with Stylish": FM only works if you install as UserScript. But this is inappropriate, it's a style and should be installed as such. Edit: right, I got it, it's needed to right-click the page and select "Install Stylish Style". But custom settings ("Customize") don't work.
OK. Here we go again about broad compatibility. FM historically was incompatible with many many scripts. If I'm not mistaken, in the past many issues about incompatibilities were treated like "FM is different, it is what it is, you can't expect a clone of other managers". But this is improving a lot lately, it's way better! It will never be 100%, because of technical aspects of userScripts API, but I'm seeing your efforts to make things better, thank you. Maybe someday this will also come to CSS custom settings. I don't have data to support, but I fear that the implemented "default" won't fix things for anyone who wanted CSS custom settings support because maybe "default preprocessor" is a rarity in UserStyles world. I hope I'm wrong. |
The old segmented system has issuesThe traditional UserStyle system of using segments has many issues. UserStyle AnatomyIn reality, there are 3 distinct styles that have been written under one name. UserStyle Processing
Once again, the one UserStyle is going to be taken apart and broken into 3 styles anyway. UserStyle InsertionOnce a UserStyle is broken into its segments, then each segment has to be manually inserted, instead of using the efficient native API. The issue of processors
Less is a JavaScript + CSS, which is not native. The code has to be processed by JavaScript and then converted into standard CSS. Why not write standard CSS in the first place? Admittedly, Less has a few nice features that are missing from CSS3 (some are planned in CSS4), but that means extra JavaScript processing of converting to CSS. Pure CSS is a lot more efficient than JavaScript + CSS. uso (by Stylish) & stylus (from Stylus) are made-up set of functions which like Less require JavaScript processing of CSS with the same drawback in performance. Finally, xStyle (328 users) made its own JavaScript + CSS processor using Like UserScript managers, UserStyle mangers all do similar job but there are a lot of differences. FireMonkey concentrates more on performance & security. FM tries, as much as possible, to be compatible with the older scripts & styles but it is also worth setting new trends, especially where performance is a factor. If there are enough users following the new formats, it will become a trend that would benefit users in performance. Reinventing the WheelCSS already has a built-in Using CSS custom properties (variables). Why make up another process to do what is already available natively? The FireMonkey supports In most cases, it should be easy to adapt other FootnoteExtensions were once written in XUL in legacy Firefox, then bootstrap and after that changed to SDK (& then JPM). Finally it changed to the current API, some of which are changing again in manifest v3. As an extension developer who has gone through all above changes, in each stage, I had to re-write the extension using the new and improved format. |
|
I probably agree with everything, but I believe the main thing is: userstyles.org has always been and still is the most popular place to share userstyles and it uses USO preprocessor. Even Stylus uses an USO mirror as the main search engine. In USW, the alternative shared by Stylus, I see that like ~90% of the popular styles use I'm not a style writer, can't say the differences between preprocessors, but the fact seems to be that not supporting Unfortunately FM has so few users to make a difference in promoting other formats. The only practical consequence in your decision, besides less work for you of course, is that some users may end up refusing to adopt FM because of that. |
|
Let's see how much demand there is for it. |
|
After a lot of processing & extra code v2.57
|
|
Thanks! Have you confirmed it's working for styles with custom options from userstyles.org and userstyles.world? Examples:
|
No Above uses 'dropdown' ... no plan for support Also not valid JSON The CSS uses JavaScript ... c(x, y = 0, z = 0, xi = 1, yi = 1, zi = 1) {
if x != 0 && x != '_' { color: xi is 0 ? x : x i }
if y != 0 && y != '_' { border-color: yi is 0 ? y : y i }
if z != 0 && z != '_' { background-color: zi is 0 ? z : z i }
}
// Raw RGB mixin.
/// Convert RGBA (if t = 1) or HEX to raw rrr-ggg-bbb format.
to_rgb(input, t = 0) {
if (t) {
unquote(substr(join(',', slice(split(',', s('%s', input)), 0, -1)), 5))
} else {
unquote(slice(s('%s', rgba(input, 0)), 5, -3))
}
}
....Also not valid JSON |
|
Hm... so sadly it looks compatibility remains the same, almost none in real world. |
The feature was added to be used by FireMonkey users and not to copy other managers. It gives developers more option to write for FireMonkey. |
|
Please check if there are any userstyle that uses pure CSS (without logical Java Script). If there are not any, then I will remove the |
|
Posting again:
Nobody uses xStyle. People uses Stylish (>3KK in Chromium) and Stylus (>500K in Chromium). Stylish owns userstyle.org and of course supports custom options offered in the page, like my first example. Stylus supports all examples, it's very popular and it's the preferred among user that know what they are doing (like style writers). People write styles for those two extensions, just them. FM doesn't support virtually any custom CSS settings you can find in real world, and v2.57 doesn't change that. |
@preprocessor
Many use Some compatible examples (I will add more when I find them) |
|
v2.57 update
|
|
It is strange that many userstyles that have
Example: Above |
|
Userstyles follow examples in the same documentation you linked:
Except that those examples don't have trailing commas, which are not allowed in JSON but Stylus seems to support. |
That is right. training commas are not allowed, as well as single quotes. The problem is converting that into an object.
I have written the code to parse that but that is not 100% reliable. More invalid JSON examples: |
|
Have you looked into Stylus source to see how they deal with it? |
|
They made a https://github.com/openstyles/usercss-meta Also......
However, |
|
PS. Stylus doesn't currently get |
|
Any news on this? I'm about to drop FM as my user CSS manager because it doesn't support this. Example: I can't even install this with FM. With Stylus, I can define my user style settings as expected:
|
Support for custom settings was added long time ago. There is an error/bug when when processing empty settings. I will fix that.
|
Please, what exactly should I do to test? I see from your screenshot some options are missing ( When you have the fixed meta.js, if you please share it here I can test. Thanks. |
Temporarily, you can change this line which will eliminate the error but it would disregard those values. meta.js line 444 const [, id, label, valueString] = item.match(/(\S+)\s+"([^<]+)"\s+<<<EOT\s*([\S\s]+)/);change to: const [, id, label, valueString] = item.match(/(\S+)\s+"([^<]+)"\s+<<<EOT\s*([\S\s]*)/); |
|
Thank you. I was able to install, now it's the same as your screenshot: it's showing 7 options, but there should be 10 (compare with my screenshot in my earlier comment). |
|
Try this and let me know... |
|
Thanks.
Example of the issue: FM: Stylus: |
|
Also, just saying, I saw you changed private properties to normal properties, but you created an extra space to the left by doing this, misaligning the indentation. Example: // --- @preprocessor
static preprocessor(str, pp, userVar = {}) {
const re = {
less: (r) => new RegExp('@' + r + '\\b', 'g'),
stylus: (r) => new RegExp('\\b' + r + '\\b', 'g'),
uso: (r) => new RegExp('/\\*\\[\\[' + r + '\\]\\]\\*/', 'g'),
};
Object.keys(userVar).forEach(i => str = str.replace(re[pp](i), `var(--${i})`));
return str;
}Noticed you should remove one space to the left of |
Right... it is work in progress. I will fix it. Thanks. |
Some userStyles offer the ability to customize the style. For example:
https://userstyles.org/styles/107316/vk-plus
Mirror (converted as UserCSS): https://33kk.github.io/uso-archive/?style=107316
Here's how Stylus deals with it:
Apparently, there's no way to customize style settings in FM.
The text was updated successfully, but these errors were encountered: