Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make line counter continuous (not restart at 0 for each new section) #1096

Closed
decembre opened this issue Nov 1, 2020 · 13 comments
Closed

Make line counter continuous (not restart at 0 for each new section) #1096

decembre opened this issue Nov 1, 2020 · 13 comments

Comments

@decembre
Copy link

decembre commented Nov 1, 2020

When for a large userstyle with many sections, i use the Stylus normal editor (not UserCSS), it is not easy to find a particular line by its number, because the code is split in many section with its line counter:
It make difficult to compare a code in an other editor and the stylus editor.

Can you add the ability to have a continuous line counter?
PS:
I can't find a "go to line" function in Stylus:
What's is shortcut ?

@dnknn
Copy link

dnknn commented Nov 1, 2020

@decembre

not restart at 0 for each new section

No, no, no, Your request is unreasonable, your needs are not in line with the convention. Since it is a segmented editor, then each segmented editor must be relatively independent and should not be coupled.

You can use Ctrl+F to search all.

PS: The Toc feature will be added to the segment editor (it's still work-in-progress.), so you can easily jump/go-to when it release.

I can't find a "go to line" function in Stylus:

Ctrl+G In fact, I rarely use it to go to line, but I know it.

2011_01150702

I think it is very necessary for you to systematically test the shortcuts one by one, and systematically organize and record them.I did this at the time, so now I am familiar with it and it is easy.

Since you want to use Stylus-editor, you should be familiar/organize all the shortcuts.

All shortcuts

Ctrl-Alt-Down | addCursorToNextLine
Ctrl-Alt-Up | addCursorToPrevLine
Ctrl-Space | autocomplete
Ctrl-K Ctrl-G | clearBookmarks
Shift-Ctrl-F2 | clearBookmarks
Shift-Ctrl-/ | commentSelection
Tab | defaultTab
Delete | delCharAfter
Shift-Backspace | delCharBefore
Ctrl-Delete | delGroupAfter
Ctrl-Backspace | delGroupBefore
Ctrl-K Ctrl-Backspace | delLineLeft
Ctrl-K Ctrl-K | delLineRight
Shift-Ctrl-K | deleteLine
Ctrl-K Ctrl-W | deleteToSublimeMark
Ctrl-K Ctrl-L | downcaseAtCursor
Shift-Ctrl-D | duplicateLine
Ctrl-F | find
Alt-F3 | findAllUnder
Ctrl-I | findIncremental
Shift-Ctrl-I | findIncrementalReverse
F3 | findNext
Shift-Ctrl-G | findPrev
Shift-F3 | findPrev
Ctrl-F3 | findUnder
Shift-Ctrl-F3 | findUnderPrevious
Shift-Ctrl-[ | fold
Ctrl-K Ctrl-1 | foldAll
Left | goCharLeft
Right | goCharRight
Ctrl-End | goDocEnd
Ctrl-Home | goDocStart
Ctrl-Left | goGroupLeft
Ctrl-Right | goGroupRight
Down | goLineDown
End | goLineEnd
Home | goLineStartSmart
Up | goLineUp
PageDown | goPageDown
PageUp | goPageUp
Alt-Left | goSubwordLeft
Alt-Right | goSubwordRight
Ctrl-M | goToBracket
Ctrl-[ | indentLess
Shift-Tab | indentLess
Ctrl-] | indentMore
Ctrl-Enter | insertLineAfter
Shift-Ctrl-Enter | insertLineBefore
Ctrl-J | joinLines
Ctrl-G | jumpToLine
Enter | newlineAndIndent
F2 | nextBookmark
Alt-PageDown | nextEditor
Shift-F2 | prevBookmark
Alt-PageUp | prevEditor
Ctrl-Y | redo
Shift-Ctrl-Z | redo
Alt-U | redoSelection
Shift-Ctrl-U | redoSelection
Ctrl-H | replace
Ctrl-R | replace
Shift-Ctrl-F | replace
Shift-Ctrl-R | replaceAll
Ctrl-S | save
Ctrl-Down | scrollLineDown
Ctrl-Up | scrollLineUp
Shift-Ctrl-Wheel | scrollWindow
Ctrl-A | selectAll
Shift-Ctrl-M | selectBetweenBrackets
Alt-F2 | selectBookmarks
Ctrl-L | selectLine
Ctrl-D | selectNextOccurrence
Shift-Ctrl-Space | selectScope
Ctrl-K Ctrl-A | selectToSublimeMark
Ctrl-K Ctrl-Space | setSublimeMark
Ctrl-K Ctrl-C | showInCenter
Esc | singleSelectionTop
Ctrl-K Ctrl-D | skipAndSelectNextOccurrence
Backspace | smartBackspace
F9 | sortLines
Ctrl-F9 | sortLinesInsensitive
Shift-Ctrl-L | splitSelectionByLine
Ctrl-K Ctrl-Y | sublimeYank
Shift-Ctrl-Down | swapLineDown
Shift-Ctrl-Up | swapLineUp
Ctrl-K Ctrl-X | swapWithSublimeMark
Ctrl-F2 | toggleBookmark
Ctrl-/ | toggleCommentIndented
Ctrl-Pause | toggleEditorFocus
Insert | toggleOverwrite
Alt-Enter | toggleStyle
Alt-T | transposeChars
Ctrl-Z | undo
Ctrl-U | undoSelection
Shift-Ctrl-] | unfold
Ctrl-K Ctrl-0 | unfoldAll
Ctrl-K Ctrl-J | unfoldAll
Ctrl-K Ctrl-U | upcaseAtCursor
Alt-Q | wrapLines

PS: I can write all shortcuts for Stylus-WiKi

@narcolepticinsomniac
Copy link
Member

i use the Stylus normal editor (not UserCSS)

The behavior you're requesting is standard in usercss format, so maybe you should reconsider. In the traditional format, each section is a different editor, so it'd be weird if they behaved the way you're asking.

@dnknn
Copy link

dnknn commented Nov 2, 2020

@decembre
Copy link
Author

decembre commented Nov 2, 2020

@decembre Done, if necessary see here: https://github.com/openstyles/stylus/wiki/Hotkey-shortcuts
Hard work and Great doc!

Here something which can be useful (i appreciate the representation of the hotkeys):
CodeMirror raccourcis clavier

@tophf
Copy link
Member

tophf commented Nov 10, 2020

Technically it's possible because CodeMirror offers such a feature internally but our code makes assumptions about the first line number being 1 in so many places that it'll take time and effort to find and fix all of them. This is the first time someone suggested such an idea, AFAIK, and it's not like this is a must-have improvement, rather a niche feature that we could implement as an option. But then again, we already offer a suitable solution - usercss mode - that works better if you need to compare with the external source a lot.

@decembre
Copy link
Author

Thanks for your attention... You work hard for us!
I appreciate.

Yes, i need test more "usercss mode".
But using principally the stylish editor (tweaked) , i am not certain if it is possible to use UserCSS in it:
Actually, i need to easily past my code between them.

But slowly, i try to adopt the stylus editor:
It miss some little things i appreciate (sorry if i am not a big fan of "shortcut).

@tophf
Copy link
Member

tophf commented Nov 10, 2020

Usercss mode is much more similar to the classic Stylish editor because it's a single editor with the entire style. You don't have to use any special features of usercss mode. Simply add a comment at the beginning with @name, @namespace and @version as shown in the examples in our wiki: https://github.com/openstyles/stylus/wiki/Writing-UserCSS

@decembre
Copy link
Author

decembre commented Nov 10, 2020

Tested:
Yes, that's simple :

  • Copy from Stylish editor
  • Past it in Stylus Editor for UsserCSS
    And it's done:
    Just need to write the good @name and @Version.
    The @namespace it filling with the right one (I hope it's the same with a multi sections code)
    and all work fine.

I see some problems (for me...):
A - The line counter begin at 9 for the CSS code:
The top header comment with @name, @namespace and @Version,
take the 8 first lines.

B - If i need to export as "Mozilla format" (to easily copy past in the Stylish editor),
there is not option to do that (like it is with the "normal" editor).
CTRL + A copy all the code with the Top Header Comment.

Yes , i can select the CSS code only with my mouse or copy all and delete the top .

But if their is another way to do it (maybe a ... shortcut ?) it should be interesting.

@dnknn
Copy link

dnknn commented Nov 11, 2020

@decembre I think you have the syndrome of difficulty in choosing, and you are very struggling...

  • Struggling 1: What's very curious is that you know that 👍Stylus outperforms ⚔ 👎Stylish thousands of times in terms of function or performance, especially Popup interaction, Why don't you give up Stylish ? and don't you feel tired using both CSS extension at the same time ?

  • Struggling 2: Can't understand classic-CSS userstyles(multi sections editor ) ⚔ UserCSS (single-editor) correctly ....
    Although the output parsing result of CSS code in the browser is the same,, but You don't fully understand the difference and logic between both....
    In a sense, classic-CSS is the most complete, simplest, most basic, and most direct. In a sense, its stability and performance are better. Just as many things are still using the classics many years ago.

For UserCSS, it is very powerful, It supports several different variables, so it can be show an ⚙ button on Popup for configuration , and you can make various customizations.
Stylus UserCSS also supports 5 @preprocessor , every preprocessor is not exactly the same, I only know some @preprocessor stylus (stylus-lang), but enough for me.
Another point is that UserCSS is also more conducive to social sharing of styles.

My personal usage is that the both work together perfectly , for a website, first use the classic CSS editor to write basic CSS, If additional customization is needed, I will add UserCSS userstyles.

(I hope it's the same with a multi sections code)

Now that UserCSS can meet your needs, why should you think of it as Stylish?

A - The line counter begin at 9 for the CSS code:....

This is completely normal and reasonable, nothing wrong. do you know Tampermonkey ? You first see what it looks like...

Details

image

B - Yes , i can select the CSS code only with my mouse or copy all and delete the top ....

This is because you have not fully understood UserCSS, The UserStyle section of UserCSS contains metadata (what you said), as well as declarations of @preprocessor and various @var (you donot know).

If the code contains variables, etc., the select the CSS code only with my mouse or copy all and delete the top you mentioned is also invalid...

e.g. It can also be used in UserCSS code, but it cannot be used in classic CSS.
body {
if theme == dark { 
	#header {background:#000}
	}
else if theme == light {
	#header {background:#fff}
	}
}
  • so, I think you should you should read all WiKi documents first, and should get familiar with it for a while, and you will find more things you don't know...

@tophf
Copy link
Member

tophf commented Nov 11, 2020

I see some problems (for me...):

You can simply copypaste everything along with the usercss header. It's just a comment anyway so having it in another place shouldn't hurt.

If you save such a style as file.user.css you'll be able to use an external editor to edit this file without the need to edit anything inside Stylus or copypaste back and forth. Open this file in a browser tab so Stylus offers to install it, and enable the [x] Live reload checkbox.

@decembre
Copy link
Author

decembre commented Nov 11, 2020

I know how Stylus is more powerful than Stylish.
Maybe i have not read so carefullt

But for my usage, i prefer the unique editor of Stylish 2 that i use.

I use a lot the "Go to line" function - the Ctrl+G in Stylus Editor (thanks dnknn):
For a big Userstyles, i don't know how to not use it.

Stylus with Firebug is not so practical than Stylish2 and Firebug (This old and unmaintained Firebug with its FirePath companion) .

Here for the same Userstyle, 2 screenshots of what i said:

Stylus with Firebug (Userstyle in UserCSS):
Stylus UserCSS and Firebug PB - 2020-11-11_165139

Stylish2 and Firebug (Same Userstyle but not UserCSS):
Stylish 2 and Firebug - 2020-11-11_170715

In fact, i hope something similar:

1 - Quickly find the good line number than i watch in Firebug
For the edition and line search, the classic-CSS userstyles (multi sections editor ) for my usage should good,
but it's... "multi sections".

2 - And like i notice in my tests, read the Userstyle Name near the matched selector in Firebug:
If like me, you test many userstyles for the same site, i think how it is important to have this info.

About the infos provided in Firebug, i don't find how to solve that.
I tested the DevTolls of Waterfox and Firefox Quantum:
Quantum is bit better for me than Waterfox for the infos displayed on matched selector,
but not like Firebug yet.

I have posted a bug about this problem a long time ago with screenshot for comparison:
PB - Dev Toolbar - Inspector CSS - Unreadable Styles infos
After that they make some amelioration about that .

But that's not at the Firebug Level.

by example (extract from the Bug):

But now if we can find the number line of the css easily, it could be better.

By example, actually it provide only :
"inline:74074"

It's possible to have the userstyle name from which the CSS rule come from +
line number in it ??

Depending on how the styles are now embedded into the page
it might be possible to get the name from the comment, but that needs to be investigated.

Well, certainly i don't fully understand something......
:-)

@narcolepticinsomniac
Copy link
Member

He's clinging to an old, buggy browser, with a bunch of deprecated, unsupported extensions, and reminiscing about the good old days when it all worked the way he liked.

This is getting annoying, guys. No more unsolicited essays. No more comparisons to the old, deprecated XUL version of Stylish, or any other unsupported extensions. @dnknn this is the last warning about using random, unnecessary emojis. From now on, these posts will simply be deleted.

@openstyles openstyles locked and limited conversation to collaborators Nov 11, 2020
@tophf
Copy link
Member

tophf commented Nov 11, 2020

FWIW, here's a trick I use when I need to change a lot of CSS: copypaste the entire code section into the temporary inspector-stylesheet that appears when you click on + button in the styles panel. Then use the devtools inspector to tweak or add rules in this stylesheet. When done, copypaste the entire code back. This way there's no need to jump between the editors or find the exact line.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants