[Feature request] Ability to edit style as-is as it was downloaded in a single editor window

[lainverse]

• Google Chrome | 60.0.3112.101 (Official Build) (64-bit)
• Windows 10 Pro

I'm a maintainer of this ridiculously large style:
https://userstyles.org/styles/101141/ru-adlist-css-fixes

The problem I've encountered when migrated from Fx to Chrome a few years ago was the fact that I can't properly edit my style using Stylish. It was fine with Stylish version for Fx since there were single window with all the code. I can't even use Export feature to quickly copy-paste my style to userstyles.org since it breaks all my formatting and removes comments.

Besides that one of the biggest annoyance with the style editor is the fact that I can't use search feature (Ctrl+F) globally and limited to currently active editor frame instead. I have to call "Find..." from the browser's menu.

[tophf]

Single editor is planned, but it's a complex feature so I can't say any ETA.

Ctrl-F works globally in Stylus: simply press F3 or whatever hotkey you use to repeat the search and it'll jump into the next matching section.

There are also hotkeys to switch sections, Alt-PageDown and Alt-PageUp, you can press (i) to the right of the keymap selector to view the rest.

[lainverse]

Ctrl-F works globally in Stylus: simply press F3 or whatever hotkey you use to repeat the search and it'll jump into the next matching section.

Huh, that's actually true, but this search feature:

• thinks for a few seconds when I search for a new word first time;
• doesn't scroll to the first matching string immediately (you have to press Enter to initiate search);
• doesn't highlight found text on the scrollbar;
• may jump to off-screen block (open my style and press F3 - search bar will appear in 'Code 2' block, which is off-screen at start and will scroll into view);
• will jump and move focus to the nearby code block on a new search when focus is in one of the "Applies to" strings.

So, all in all I'd like to be able to disable this search feature and use one provided by the browser. It works much better for me.

[tophf]

These are my observation over the couple of years I've been using this search feature in Stylish-for-Chrome and Stylus:

• I've never encountered the delay.
• Yes, the search is not incremental. I'll see if there are addons that implement it. Someday.
• Scrollbar highlighting works.
• To fix the off-screen section bug it's best if you can provide a reliable sequence of steps to reproduce it.
• Selection in the applies-to items is the intended behavior.
• The browser search feature doesn't work for those parts of code that weren't rendered yet. CodeMirror renders only a small additional chunk of the text next to the visible part, otherwise the browser would become unresponsive due to huge DOM.

[tophf]

Oh, there's the link! I'll investigate the delay and highlighting then.

[lainverse]

The browser search feature doesn't work for those parts of code that weren't rendered yet. CodeMirror renders only a small additional chunk of the text next to the visible part, otherwise the browser would become unresponsive due to huge DOM.

Strange, that's not how it works for me. I've tried to look for "wrapp_content" string which is located closer to the end of stylesheet and browser's search feature had no problem to locate it. And yes, it generates all DOM entries with small delays between them in my case. It takes some time and doesn't make it unresponsive.

[tophf]

BTW I have an old initial draft of the single editor mode for Stylus, buggy but fast with your style: zip.

[tophf]

that's not how it works for me

It does work that way but only for code within a really big section. Like 1MB big. All your sections seem to be very small and fit within the rendered part. My explanation was bad, obviously. Maybe "rendered" was ambiguous? It means rendered by CodeMirror into DOM, it doesn't mean the visible part of the browser window.

[tophf]

I've fixed the delay.

As for scrollbar highlighting, I guess you meant the overall window scrollbar, which we don't modify, indeed. Only each section's scrollbar, if shown, is highlighted. In the future the single editor window will highlight the overall scrollbar of course.

[lainverse]

BTW I have an old initial draft of the single editor mode for Stylus, buggy but fast with your style: zip.

Nice and works really fast. As I understand this version still works with code already processed by import procedure, though, since formatting is off and part of the comments are removed.

It does work that way but only for code within a really big section.

Oh, right, you are using CodeMirror to draw sections of code and not entire page. Was a bit confusing. Ok.

[tophf]

Yes, that's how that old draft works.

[tophf]

@lainverse, as for the browser "find" command, you can invoke it via keyboard without opening the browser menu: focus the address bar with Ctrl-E, then Ctrl-F.

[lainverse]

Hm... Didn't though about this. Thanks, that's a neat idea and both keys are next to each other.

[tophf]

@lainverse, you can add a usercss header comment to your style, switch "Write new style as usercss" in Stylus options, click "Write new style", paste the header comment, paste the original style, save, and now it'll always open in the fast single editor mode. Currently this new version of Stylus is only pushed to Firefox AMO, though.

[lainverse]

Works for a new style. However, doesn't work with mine. What am I doing wrong?

[tophf]

I don't know what you're doing :-)
Just in case, the method I've described creates a new style that will always work in single editor mode.

[lainverse]

I mean look at my style. Here is the header:

/* ==UserStyle==
@name RU AdList CSS Fixes
@namespace userstyles.org/styles/101141/ru-adlist-css-fixes
@version 0
@description Сборная солянка из стилей для внесения исправлений после блокировки рекламы средствами ABP и uBO.
@author lainverse, dimisa
==/UserStyle== */

Is something wrong here?

[tophf]

Trying to save the style with this header displays an error about invalid version. Use 1.0.0.

[tophf]

The entire point of the instruction above is to make a new copy of the style in single editor mode. Not sure I can explain it better :-(

[DanaMW]

That saved fine in mine, as a test.

[lainverse]

Since when zero is invalid version number? O_o
Since when a.b.c is the only valid version format?!
Anyway, I've updated header like this:

/* ==UserStyle==
@name RU AdList CSS Fixes
@namespace userstyles.org/styles/101141/ru-adlist-css-fixes
@version 0.0.0
@description Сборная солянка из стилей для внесения исправлений после блокировки рекламы средствами ABP и uBO.
@author lainverse, dimisa
==/UserStyle== */

I've tried to save a new style with it and it works fine. However, when I've tried to remove and re-install my style it had no effect.

And honestly what is the point if it won't work with installed styles?

[tophf]

usercss is a special format and it uses strict rules, the single editor also looks different.
I don't know what you're updating, but if you follow the instruction exactly as written, you'll succeed. Not sure how else to explain.

[lainverse]

I want to make it work with my existing style:
https://userstyles.org/styles/101141/ru-adlist-css-fixes
(link were all this time there at the top)

[mechalynx]

@lainverse the user.css format follows semver for versioning, to allow it to know when it needs to update a style. Without that, it would have to ask the server if there's a new version, which isn't possible on all possible server configurations and the user.css format is designed to be independent of that.

[tophf]

The instruction is only for you as an author to be able to edit the style in a single editor right now. We don't have a single editor mode for normal styles. Only for usercss. The instruction I posted specifically says you'll create a new style. I'm bad at explaining obviously.

[lainverse]

@tophf Oh, thought it will parse style on install and that was just an example how to generate a style with a proper header. Sorry. Hope you'll implement this mode for installed styles as well later.

@mechalynx To be honest semver doesn't even apply to styles since there are no API to begin with and 'patch' is rather foreign concept when you try to apply it to a style which spans hundreds of domains with separate set of rules for each. Ok, I've modified style for one domain - this is a patch, then I added new domain... minor version? patch? One domain were renamed and one mirror added? UGH!
Whatever, will use 0.date.increment then. Even Greasemonkey/Tampermonkey are less restrictive with version format for scripts. The only thing they recommend is to keep versions numerical.

[tophf]

Yeah, use any increment you like.

[decembre]

Seems related too:
[Feature Request] Extend editor with buttons for auto !important / go to the line / Comment or uncomment etc...

Integrating Stylus to external text editors

[tophf]

To reiterate, the solution is to use usercss.