grssam / user-style-manager Goto Github PK

When you type "{" Smart Editor automatically creates a new line with "}", but when you hit CTRL+Z - nothing happens.
When you type "!" Smart Editor automatically replaces it with "!important;" but when you hit CTRL+Z - it deletes just ";" instead of the whole "!important;".

• In Stylish there was some kind of "history" of actions that you could undo (by hitting CTRL+Z multiple times): if you started writing a style from scratch - after writing a really long and complicated style - you still can hold CTRL+Z to undo ALL the typing at all: step by step it will bring you to the point you started from - in our case it's a blank list.

In USM the above mentioned bugs break the "undo history": you can undo as much steps as you like, but you will get stuck in the loop when you reach "!important;" or "{ }".

This function works pretty well in Stylish:
when you click "Disable all styles" it actually disables all styles, but it remembers the styles that were marked as enabled and that were not.
So when you click "Enable all styles" it enables only the ones, that were marked as enabled before you clicked "Disable all styles" button, so you don't have to manually unmark the unwanted styles - if they were disabled before - they will remain disabled even after hitting "Enable all styles".

This is how that function should work.
As an active style-writer I can tell you that this function is made for easier debugging: when someone gets broken - the first thing you want is to localize the problem and make sure that your current style doesn't conflict with any other one enabled style you have.

Currently, if you have already opened "Manage" window, but it went somewhere to background, so foreground windows actually cover it - you may actually forget that this window is already opened (Windows stacks similar windows on the taskbar into a single one [for me and probably by default too]).
Currently, in such a situation - when you try to access this window by middle clicking the USM's toolbar button (or by left clicking it and choosing "Manage" from the context menu) - nothing happens.

I suggest to bring that window to the foreground and making it active for the above cases.

@-moz-document url('anyurl') {
  someClassOrId : anyState {
    some css
  }
}

The above code gives error in line 2 that ':' missing corresponding ";".
This is carry forward from #2.
This happens because I consider every ":" that is after "{" as a valid candidate for a matching ";".
but in this case , it should not be.

It happened to me just once for now, and I can't yet reproduce it anymore, but here are the STR I did:
I've created a blank style, wrote in there

toolbarbutton { background-color: red !important; }

The editor doesn't get loaded for me at all with the latest self-build.

I edit the issue's summary, as it's obvious, that the issues I described are caused by some internal errors.

Just to sum it up:

5. The non-latin characters in the path to the style being imported from a separate file - cause this error to show up:

Error: [Exception... "'SyntaxError: JSON.parse: bad control character in string literal' when calling method: [nsIObserver::observe]" nsresult: "0x8057001c (NS_ERROR_XPC_JS_THREW_JS_OBJECT)" location: "JS frame :: resource:///modules/XPIProvider.jsm -> jar:file:///x:/path/to/my/firefox/profile/extensions/[email protected]!/bootstrap.js -> jar:file:///x:/path/to/my/firefox/profile/extensions/[email protected]!/scripts/pref.js :: pref :: line 49" data: no]
Source File: resource:///modules/XPIProvider.jsm -> jar:file:///x:/path/to/my/firefox/profile/extensions/[email protected]!/bootstrap.js -> jar:file:///x:/path/to/my/firefox/profile/extensions/[email protected]!/scripts/pref.js
Line: 49

Having color picker inside of the editor would be very handy.
I think your extension needs to have a color picker, so users could pick colors which would be converted to the color codes.

It would be nice if your extension supported different kinds of code systems, like #F0F0F0 and RGB(255,100,255), etc.

[ Old versions of Stylish had poor color picker, and instead of improving it - the author decided to remove it completely, so users have to use extension Stylish-Custom to bring this feature back. ]

This will then allow for updating and direct installing of code from the userstyles site.

When a user types an id, or a class and start writing its color, highlight the element on the page (if visible) or browser chrome (if possible) so that he gets to know what all will be affected.

STR:

1. Just open a style with lots of lines of code so the vertical scrollbar appears.
2. Hit "preview" button.

AR:
The window gets scrolled to the bottom position.

ER:
The scroll position should remain the same.

Stylish used an integration into DOMi: it added it's own menuitem to the context menu (when clicking with RMB on some node in the tree) where the user could copy to clipboard 1 of 4 possible selectors for the selected node:

(screenshot)

[parity with Stylish]

Could you please add RMB click on the style in the list of context menu, that gets opened by LMB click on the User Style Manager's toolbar button?

Currently it opens Firefox general context menu like you right-clicked any toolbar.

I use portable Firefox.
My profile and Firefox app are the neighboring folders in a "Firefox portable" parental folder.
If I move or rename "Firefox portable" - then, when executing FirefoxPortable.exe - Firefox gets opened and hooks profile properly.
Everything is fine except USM: in the add-ons manager I see it as enabled, but actually it's not: it shows no USM toolbar icon and all the installed styles are disabled.

To fix this issue - all I have to do is to disable and enable USM and it starts working nicely.

I don't think users need to be welcomed by an editor's window.
It's a bit of uncomfortable for me to remove this line every time I create a new style.

1. At the moment, you can't rename a style within from the editor's window.
2. Renaming a style should also rename it's file. Currently it also doesn't work.

It would be nice to have a feature to encode image files into base64 code.

Currently, seems like USM uses it's own rules, which don't fit the CSS standard.

toolbarbutton { background-color: red ! }

toolbarbutton { background-color: grey !potato; }

These styles work, although they shouldn't.

Obviously, there is a bad check in the code: it checks whether anything after "!" contains any letters other than "i", "m", "p", "o", "r", "t", "a" and "n".

So "!ports" won't work, because it fails this check due to present illegal letter "s", but "!port", "!ramp" and "!it" won't fail this check and the style will get applied.

Make color picker behave as autocomplete suggestion panel

The update and update all button should work as expected.
Requires #35 to be fixed first.

I just realized, that it is potentially slow you much if you have many small userstyles in the different files.
This is why Stylish stores all it's styles in it's own *.sqlite database file.
And SQLITE databases suck, because you can't edit styles' files inside a database without special tools for that.

But you actually can "catch both hares" simultaneously: you can pack all the styles into a .zip-archive and use nsIZipWriter to access and edit styles in that archive from the extension.
However, this may require you to change how the "import style as a file" function works. You may change it in many ways, but I suggest the following: just make users put their styles' files they want to import into the *.jar (.jar and *.zip - are actually the same thing) archive with all the styles.

This will:

1. reduce disk I/O
2. make styles occupy less space on disk (+ you may set GZIP level >1 for the archive for more economy).
3. styles' files will remain accessible from the file system.

What I suggest is to use a so called "split-menu" (like "new tab", "bookmarks", "history", "options" and "help" in the Firefox App Button's menu).

.splitmenu-menu should open the sub-list.
.splitmenu-menutem should do the same as clicking the "Create blank style" item from the sub-list.

Currently, you can't save the style until you fix all the errors in it. This is wrong and we've discussed that on the forum.

Bug 1.
Try to preview this style:

@-moz-document url('chrome://something/') {
}

Without any prompt or notification it gets transformed to:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-document url('chrome://something/') {
}

Which is wrong: some styles for chrome:// pages need XHTML namespace.

Bug 2.
When the above thing happens - cursor position gets wrongly set after you click "preview" button.

Bug 3.
Whenever I hit "Preview" (regardless of what is typed in the editor) I get this error:

Error: this is undefined
Source File: chrome://userstylemanager/content/editor.js
Line: 1067

Currently, if you place your caret somewhere in the middle of the bottom line - if you hit Down arrow key - nothing happens, as the line is at the bottom and there is nowhere to go lower.
In the whole Firefox and even in Chrome (but not in IE) - pressing Down arrow key puts caret to the end of the line, if this line is the last one. Only IE doesn't allow you to do so (and it sucks), making you hit "end" key, which is not easily accessible on netbooks (and I just don't like using End instead of Down).
To fit Firefox default behavior - I suggest to bring that feature back.

E.g. you should provide a way to delete the style's file (when you are removing the style) within from your extension.

1. currently, increasing height of the window doesn't increase height of "Style Sheet List".
2. this window should consist of 3 parts:
   a. a small menu toolbar at top (it should contain all the settings like "Style Sheet Settings", "Create Menu Entry in" "Create a keyboard shortcut" and "Shortcut key combination")
   b. a list of all the existing styles at the center
   c. control buttons at bottom (like "delete [selected] style(s)", "create a new style", "Install a new style from the file", "edit [selected] style(s)" and "[selected] style(s) info", "check for updates", etc.)
3. All the buttons from "2.c." should be converted to icons only:
   a. "Add a new Style Sheet" > a green "+"
   b. "Install a new style from the file" > something like "File .."
   c. "check for updates" > something like a green down arrow.
   d. "More Info" > ( i )
   e. "Edit Style Sheet" > [ * ]
   f. "Delete Style Sheet" > [ x ]
4. "Style Sheet List" table's columns should be edited a bit:
   a. left column ("enabled/disabled" state) should have fixed width of ~18px.
   b. use date stamps of digits only (if possible, of course. I remember you said you'll look into this).

1. "!" should be replaced with "!important;" and that word shouldn't be highlighted.
2. It should be an optional setting, and the checkbox to toggle that feature on/off should be seen in the editor's window.

The CSS validator (for now) must:

• Detect any suntax error
• Notify the user about the error and its location

Requires #35 to be fixed first.

Additionally, there can be option to create a blank style for the current page, the current domain or Browser chrome.

It would be nice to have an advanced, smart editor, which would do such things as:

1. when creating a CSS style - you start a rule from picking selectors, so it would be nice, if the extension could somehow highlight/blink/add_colored_border to the elements that match the selector you've just typed in.

2. when creating a rule, the next step after choosing selectors is adding/changing attributes, so it would be nice if you'd need just type "{" and the Smart Editor would recognize that you've finished choosing selectors and will visually draw "{" and "}"

   FIXED.

3. inside of the "{" "}" brackets there should appear a "+" button. After clicking it - the editor should add 1 new line of code and start suggesting you what you want to code. Every time you finish a line with a ";" symbol the "+" button should appear on a new line.
   [ remember that there is a small legal exclusion in CSS that allows you to not type ";" before "}" ]
   [ No need of this feature as it limits user flexibility]

4. after you clicked "+" button - the editor should start suggesting you to pick a property from the list.
   [ I think this is what Issue #5 is about, but I'd like to remind you, that it would be nice to have some kind of help/info/use_cases for every property. You can even make your extension parse MDN site, or just store internally all the needed info ]
   The suggestions should be listed in a drop-down list and it should also finalize words (e.g. draw the end of the half-typed word), so you can type "ca" and it suggests you "caption-side", so you just hit Space (or maybe Tab) and you don't have to type-in the rest of the word.
   ALMOST FIXED

5. after typing-in some property (or selecting it from a drop-down list of suggestions) - the editor should automatically type ":" and transfer you to setting/editing the values for that property.
   It should look similar to how it is done in the Firebug extension now:
   

First of all, let's clarify how you want me to report parser related issues?

1. I open separate bugs for each issue (if I find 5 issues - I file 5 bugs).
2. I open separate bugs for all the found issues for one moment (I found 3 issues at once - I'll report all of them in a single bug, some time passes and I found 5 more issues - I file them in another bug).
3. We can have a single bug for all parser related issues and keep it always open, even if all the issues are fixed.

As for the found bugs:
B̶u̶g̶ ̶1̶
' symbol inside of the commentary breaks the code.
It may cause different errors like:

1. Comment start without an ending.
2. Unmatched {
3. Unmatched '

Example code:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@-moz-document url("about:addons"),url("chrome://mozapps/content/extensions/extensions.xul") {
/* ' */
}

This code will drop errors №1 and №2, delete 2nd and 4th lines - there will show up error №3.

B̶u̶g̶ ̶2
Create new style > paste some code with errors > hit "preview" button
Actual result: get offered to save the style.
Expected result: just preview the style and show errors, if there are some.

B̶u̶g̶ ̶3
I can't save a style with xhtml namespace:
when I hit "save" nothing happens. When I hit "exit" I get a prompt "Do you want to save the style before closing?" with 3 buttons and "save" is one of them, but hitting it does the same as "cancel":

@namespace url(http://www.w3.org/1999/xhtml);
hello { background-color: yellow !important; }

I see this error in Error console:
Error: match is null
Source File: chrome://userstylemanager/content/editor.js
Line: 1532

B̶u̶g̶ ̶4̶
I can't save a style that start not with a namespace.

#banner { display: none !important; }

The above style is quite legal: it should affect both: interface and web pages.
But if you try to save such a style - your extension opens a prompt user to specify namespace and the prompt contains only 2 buttons: one for XUL and the other for XHTML.
This is pretty useful for newbies, but it's quite bad that there is no a 3rd (maybe small) button like "save it just as it is".

B̶u̶g̶ ̶5
If you create a new style, make textarea blank (by default there is a commentary in the top line), and write

test{

Then the smart editor won't add a closing curve bracket "}".
But if you do the same actions but not on the first line - it will work fine. As mentioned in the above bug - the user may want to write a style without namespace, so it's bad that some functions do not work on the line where the parser currently expects to see the namespace.

B̶u̶g̶ ̶6̶
Style names can't contain some symbols, like ":", but there is no error/notification about that: instead the style acts like it was saved and gets listed in the "Manage styles" window, but if you'll open - you'll see that it is blank, e.g. it didn't get saved.
You should either add a notification asking to change style's name or (what I like more) just remove any limits for styles' names and allow them to contain any symbols.

B̶u̶g̶ ̶7̶
Renaming a style doesn't rename it in the "Manage styles" window:
I had a style with the name

App Button: small with a dropmarker icon + transparent in inactive window

but I got stuck with the bug 6, so I changed it's name to

App Button small with a dropmarker icon and transparent in inactive window

so now in the "Manage styles" window I see the 1st name and when I click "edit" - I see the 2nd name.

Bug 8.
I'm not sure if it's parser related issue, but…
Hitting "preview" counts as an action, so when you hit it - the next time you hit CTRL+Z it will undo that action (e.g. undo visually nothing).

Bug 9.
I tried to rename a style in the "Manage styles" window. When I was renaming it - I used "delete" key to delete the symbol next to caret ("backspace" deletes the symbol BEFORE the caret), and I suddenly got prompted whether I'm sure that I want to delete the style.
Delete button shouldn't initiate style deletion, if you are in the rename mode.

If the user puts new .css files to that folder - the add-on should discover them and prompt user to allow using them.
Maybe without a prompt it still will be okay.

Try typing something, then hit CTRL+Z to undo typing and CTRL+Y to redo it.
Redo doesn't work at all.

When the user starts typing a property's name you added a feature to show a drop-down list with suggestions.

1. The problem is that at the moment you can't navigate in this list using Up/Down arrow keys.
   You can't select a property with a mouse either.
2. There is also always a blank line at the bottom of that list - it should be removed.
3. You've set "Enter" key used to finalize the word, I'd suggest you to use "Tab" instead.
4. I think list of suggestions shouldn't show up before "{", because everything you type before "{" is related to selectors, not properties and you can't build any predictions for the selectors yet (though it would be super awesome if you coded a feature of invoking some kind of "CSS selectors picker" tool).
   By the way, could you give a comment about the possible existence of such a tool in the future? Maybe it's possible to use some Firefox's internal tools, like "Menu>Tools>Web Developer>Inspect"?

p.s.: I suggest keeping this issue open, since there will show up more things related to the predi later.

Here is the test case:

@namespace url(http://www.w3.org/1999/xhtml);
hello { moz-appearance: none !important; }

this doesn't invoke a warning (there is no such a property as "moz-appearance", because it's missing "-" symbol).

THIS IS VERY !important; 

This is no valid style at all, but it invokes no warnings.
E.t.c.

The UI should be similar to what Notepad++ has.

Just duplicate "delete style" function for a keyboard key.

You can access the same window by middle-clicking your extension's toolbar button and in that case the window is not modal.
But if you click "Options" button of your extension from Add-ons manager - the window gets opened modal, so you can't minimize it or access browser's pages with clicks.

Are there any strong reasons for such a difference?

I suggest the following:

1. Merge both buttons into one.
2. Set the following triggers:
   a. Left click should open the styles management window.
   b. Middle click should toggle all styles on/off.
   c. Right click should open the context menu of the button.