Stylish for Firefox 2.0.0b4

edited November 2014 in Stylish [?]
Available here.

This version does not include any changes to the Stylish database, so you should be safe switching back and forth between it and 1.4.3.

Please provide your feedback and bug reports here or in GitHub.


Changes from 2.0.0b3 to 2.0.0b4

  • Disable Firefox's fast find when using source editor
  • Added F3 as shortcut to search source editor
  • Make disabled buttons look disabled in editor window

Changes from 2.0.0b2 to 2.0.0b3


Changes from 2.0.0b1 to 2.0.0b2


Changes from 1.4.3 to 2.0.0b1

New features

There's not as many new features as you may expect from a 2.0.0, but there's more than any version in a long time...
  • Electrolysis support. This will ensure Stylish remains compatible when Firefox makes the switch in the (near?) future. If you're going to test this, use a nightly and set browser.tabs.remote.autostart to true.
  • Configure which styles show up in the toolbar button dropdown. Set the prefs under the branch extensions.stylish.buttonStylesDisplay:
    • app - App styles
    • global - Global styles
    • siteMatching - Styles matching the current site
    • siteNonMatching - Site styles not matching the current site
    to the values:
    • show - show the styles directly in the dropdown
    • submenu - group the styles in a submenu in the dropdown
    • hide - don't show the styles in the dropdown
  • Editor refresh. The editor now shows up in a tab (in supporting programs) with buttons along the top (that don't close the editor!). This allows for easier editing as well as a much larger code textbox. Programs that do not support tabs will open the editor in a new window. You can set extensions.stylish.editorWindowMode to 1 to force the new window mode.
  • When a style from userstyles.org is uninstalled, users can report it as broken. This will feed into stats on userstyles.org to identify popular, but non-functional, styles.
  • Faster loading of Add-ons Manager, especially when you have 100+ styles.
  • Sort styles in toolbar button by name.

Bug fixes

Removed features

(This stuff is probably going to break Stylish-Custom and otherwise angry up the blood.)
  • Removed support for Firefox prior to 19.0 and the equivalent version in other programs. Electrolysis support necessitated this.
  • Removed various compatibility fixes required for older programs as well as deprecated Gecko interfaces.
  • Removed support for tags.
  • Removed old pre-Firefox 4 XUL manage interface, as well as the ability to show it in the sidebar.
  • Removed ability to switch to edit window when installing a style.

Known bugs

«13

Comments

  • Removed support for tags
    Removed ... the ability to show it in the sidebar

    WHY?!?!?.....
    What was wrong with it? This was the only way i used the ext. All styles sorted in groups by tags easily accessible from the sidebar on a click.
    Sorry, can't say thanks for the update. I'm back to 1.4.3 and will stay there.
    WHY?!?!?....
  • Configure which styles show up in the toolbar button dropdown.
    What will be the default state? Show all active styles, as now, or only active site styles?
    When a style from userstyles.org is uninstalled, users can report it as broken.
    OK, this sounds good, but I have questions. Does a report result in a forum post and/or a down-vote? Is there a cost to reporting (minimum description length, for example)? Will the stats be exposed on the website?
    Removed ability to switch to edit window when installing a style.
    This though baffles me. How is it advantageous? Can you still Preview before Install, or must you now Install blindly as in Chrome?
    Sort styles in toolbar button by name.
    Outstanding! And are the enabled styles collected at one end of the list, or no?
    Electrolysis support.
    "Electrolysis" - that's pretty funny. I guess it was a non-spontaneous reaction to Chromium.
  • edited October 2014 [?]
    No sidebar???? Are you kidding???
    I can't breathe...
    What is your reason for removing such vital features?
    There was no upkeep at all with continuing them on through future versions was there?

    ● Set the prefs under the branch extensions.stylish.buttonStylesDisplay ?
    Instead of a proper Options window like all other firefox addons?

    Stylish-Custom editor does not exist AT ALL. Completely gone. Non-existent. Wiped out.
    ● Click "write new style" and Editor will only open in tab and Errors do not show. I guess you have to continuously click the errors button to check...
    but I clicked it and nothing happened.
    ● No Stylish-Custom standalone appears.
    Sigh... Staying with 1.4.3 but I don't know how long that will be functional through future firefox updates.
    Then what?

    image
  • Configure which styles show up in the toolbar button dropdown.
    What will be the default state? Show all active styles, as now, or only active site styles?
    Site-specific styles directly in the dropdown, global in a submenu, the rest hidden.
    When a style from userstyles.org is uninstalled, users can report it as broken.
    OK, this sounds good, but I have questions. Does a report result in a forum post and/or a down-vote? Is there a cost to reporting (minimum description length, for example)? Will the stats be exposed on the website?
    Right now, it does nothing. I will make the site record it, but I'm not sure if I'll expose the stats publicly or just use them to come up with kill lists myself. Definitely not going to be forum posts.
    Removed ability to switch to edit window when installing a style.
    This though baffles me. How is it advantageous? Can you still Preview before Install, or must you now Install blindly as in Chrome?
    It's not really advantageous, but something broken by the other changes that I didn't see fit to fix. You can preview or view the code on the site, anyway.
    Sort styles in toolbar button by name.
    Outstanding! And are the enabled styles collected at one end of the list, or no?
    No, purely alphabetical. You know, you could try it instead of asking these kinds of questions...
    Tags and sidebar
    I don't have interest in supporting these non-default options. They continued to exist because their cost was zero, but with these other changes, that wasn't true any more.

    You can of course still use 1.4.3, or (bug someone to) reimplement these features. The backend hasn't changed, and the code history is in GitHub.
  • I quickly test it on Nightly 36.06a1

    If you can add some function it shall be great and
    help to forget the fact it Break S. Custom totally... :-( :
    - Auto ! important
    - Comment / Uncomment
    - Insert text
    - Undo / Redo
    - line number
    - go to line number
    - Syntax highlighting

    And with my quick test , i don't see who to open the editor in an independent windows..
  • Good Luck, decembre! SC was created for that exact reason - Jason doesn't want to add any of this. Plus, i doubt you can add those things to Fx default editor (whatever it's called now).
  • Just an fyi for SC(m) users, about:config > extensions.stylish.editor needs to be set to "0" for line numbers and syntax highlighting.

    "Shift ! enter" will autofill "!important;" also.
  • And with my quick test , i don't see who to open the editor in an independent windows..
    Editor refresh. The editor now shows up in a tab (in supporting programs) with buttons along the top (that don't close the editor!). This allows for easier editing as well as a much larger code textbox. Programs that do not support tabs will open the editor in a new window. You can set extensions.stylish.editorWindowMode to 1 to force the new window mode.
  • edited October 2014 [?]
    Open the editor in an independent windows is very useful (i have 2 screen, but when you want test subtle tricks it's better to see the change directly when you press the "preview" button..
    Can you add an option for that ?
  • Not sure if I'm misunderstanding what you're talking about, but...
    set extensions.stylish.editorWindowMode to 1
  • edited October 2014 [?]
    yes, I understand that i need to open about:config page to set the value of
    set extensions.stylish.editorWindowMode to 1...

    I read Make edit window open in a tab #193 :
    Did everything except the detach part. Users can still detach, but when they do that, they get a new tabbed browser window, which isn't what I wanted. Added a pref to control the behaviour instead.

    But for everybody, an option (in Stylish) should be more easy, no?
    and to switch on different way to use the editor too.
  • myfmyf
    edited October 2014 [?]
    I tried 2.0.0b1 and must say I had to downgrade back to 1.4.3 immediately.

    Bugreport: having simple style, eg @-moz-document regexp(".*forum.*"){*{color:red!important;}} I am not able to toggle it from toolbar button menu, because it is not present in available nor global styles list.

    Update: extensions.stylish.buttonStylesDisplay.siteNonMatchingset to show makes it appear, so it seems it is not that serious bug.
  • edited October 2014 [?]
    That one should show up by default if you're on a site that matches it, which is how 1.4.3 acts as well. Trying it now, I see that it doesn't work. I'll fix that.
  • edited October 2014 [?]

    So I think it would be much more practical if the Editor opens in a sidebar instead of a tab.
    ● In the sidebar, you will be able to see the immediate results of preview without having to switch tabs to see a delayed result of the preview.
    ● And the sidebar can slide open and close to as far as you want width wise... unlimited.
    #sidebar
    { max-width: none !important; }
    #sidebar-box
    { overflow-x: hidden !important; }

    ● When dropping Editor focus, you will not have the problem of the Editor disappearing to the taskbar, the way it does now with 1.4.3
    ● The sidebar could open on rightside so you will still be able to open Bookmarks/History etc on leftside simultaneously.
    Or option to choose left/right for 'Editor Sidebar'.

    ▶ And so with this plan then you might as well bring back the sidebar for the manage styles !!!!!!!!!!!!!!!!!!!!!


    MOCKUP
    image
  • btw, Barbie, ad sidebar editing … have you recently tried native Firefox devtools > styles > add new? It works pretty well, has live preview, autocomplete, for non-agent sheets it has same specificity as userstyle… Maybe this could be convenient for preparing style just to paste it into Stylish in the end.
  • Removed old pre-Firefox 4 XUL manage interface, as well as the ability to show it in the sidebar.

    @Jason
    Does that mean from this version onwards, user can only manage their style via the full page addon management? My understanding is pre-firefox 4 XUL interface refers to the small pop out window.

    Yes I saw your reply to barbie. You mention cost was zero up to this point. Is the full page addon management taking minimum effort from you as you are using existing code from firefox?

    If it isn't, and the effort to maintain either method of management interface, I hope you will reconsider your decision of having your effort go the path of addon management view. It is actually rather silly to manage your style on a separate tab.
  • edited October 2014 [?]
    This are 2 different issues, LunaNight. One is displaying styles list in the sidebar - we can do this up to that last version. We can tag them to group and sort them by name/tag/status/type, another words, manage our styles in the sidebar.
    image

    Another issue you're talking about is the editor opening in tab or window, which you can still do:
    "You can set extensions.stylish.editorWindowMode to 1 to force the new window mode"

  • Interesting -- So why is error check not a part of the preview routine anymore? I hope it's just for testing purposes.

    Not being able to test styles before installing, or even, to edit before installing to me is a big no-no because it adds the inconvenience of committing to an install, when before the install process was commit-free if you didn't like what the style did. I do hope that when Stylish is out of beta, a preview routine that saves the style in a temporary SQLite file and opens it from there is integrated.

    Expanding upon that, maybe a "Previewed styles" section could be made for people who are simply previewing a lot of stuff, which would only be available for the current browsing session.

    I was almost to complain about a new tab being used for style writing, until I realized tabs can be moved to new windows. While mildly inconvenient, it is an ideal solution for people who wanted to use Tile Tabs and have the editor and page side-by-side, so opening up new use options is a positive, and the benefit outweighs the caveats.

    The option to change code format colours would be nice to integrate, which would obsolete the need for any style directly affecting the Stylish interface.
  • Interesting -- So why is error check not a part of the preview routine anymore?
    Because sometimes you want to preview, and other times you want to check for errors. So they're separate buttons.
    Not being able to test styles before installing
    You can still preview before installing.
  • edited November 2014 [?]
    Could "Check errors on preview" be an option then? I'm use to that. I found it especially handy when I am late-night coding because I screw up a bunch, and if I am not spat out the errors right away I may end up doing sloppier work

    Also, I saw no preview button in Pale Moon when installing styles from userstyles.org. I'll have to look again and see f I need to recant my prior concerns.
  • 2.0.0b2 is now out, details up top.
  • edited November 2014 [?]
    Not being able to test styles before installing
    You can still preview before installing.
    I said that wrong yes, I meant to say you cannot edit styles before installing. Preview, sure, btu to make any edits to a style directly you still have to install, which to me is still kind of a "No" because it removes one feature that I tell people to use all the time.

    Some people make "Template" styles with clear directions on what to modify prior to installing. Since websites often change, I don't like creating pre-fab options and leaving people in the dark when a website decides to change their classes around. So instead of making options and forcing my audience to constantly re-specify their options and reinstall the style, the advice I generally give is "Remember your settings and re-apply them upon update."

    On a further note about my personal decision to do that, I want people to be able to do some things themselves, because once people know how to do something in one style, they can apply it to a hundred more, and I like to push people using my content to expand their minds briefly, at least far enough to understand how to change a background image, or specify colours, or fonts, or what-not.
  • btw, Barbie, ad sidebar editing … have you recently tried native Firefox devtools > styles > add new?
    I have been using firebug and was unaware of that devtools feature. Interesting. Need the Error check though and cannot frequently paste to check for errors... so not gonna workout for me.
    Thanks for the info myf ! :)

  • Some people make "Template" styles with clear directions on what to modify prior to installing. Since websites often change, I don't like creating pre-fab options and leaving people in the dark when a website decides to change their classes around. So instead of making options and forcing my audience to constantly re-specify their options and reinstall the style, the advice I generally give is "Remember your settings and re-apply them upon update."
    If you let them choose via style options, whenever you update the style, they'll retain their customizations. If they visit the style page again, it will preselect what they chose before.

    On the other hand, if you're asking them to change the code, whenever you update the style, they'll lose their customizations. I don't see how this is better in any way.

    If you still wanted people to edit the code themselves, it seems like it'd be better to not have it update at all.
  • edited November 2014 Firefox
    As I understand it, auto-update does NOT work when styles have options to select before installing. Am i wrong? If I am, I'll definitely look into it, as I don't like what I do myself, but I want to retain the convenience of auto-updating.

    Also, a request; When I modify a website, I tend to separate things out if it means I can save a few lines or enhance the human-readable understanding of the code. Maybe for the 2.0.0 final release, an option to specify a series of line numbers with a color filter, paired with a a function to show only those lines in a document? style? It would make managing large swafts of code a little bit easier.
  • Auto-update (and manual update) should work for styles with options (since February).
  • edited November 2014 Firefox
    Jason,
    i tested this in 3 profiles. As soon as i install S2, whenever i try to close the editor (i have it set to open in window, don't know if it makes any difference) by clicking the window close button (since i don't see any other way to close it), i get this dialog popup:
    image

    Do you know anything about it? How do i get rid of this thing? For the record, i don't get it in my main profile where i use S143.

    EDIT: just reset the editor in window and still get the dialog when i try to close the editor tab (happens when i don't save changes, just trying to close tab or window.
    787 x 342 - 83K
  • edited November 2014 Firefox
    The editor now shows up in a tab
    A good thing, if the Chrome and Firefox user interfaces will converge. It's not obvious though how this makes editing easier. Some quirks:
    1. Tearing off an editor tab is klunky. Firefox won't tear off the tab if you drag and drop it onto an input control, and most of the editor page is an input control.

    2. If the tabs bar scroller #tabbrowser-tabs toolbarbutton.scrollbutton-down is visible (#tabbrowser-tabs[overflow="true"]), dropping an editor tab onto the 'new tab' tab (#tabbrowser-tabs toolbarbutton.tabs-newtab-button) creates a new editor tab with the unedited stylesheet. If the tab scroller isn't present, the editor tab isn't duplicated but simply becomes the last tab.

      If the tabs scroller appears after a tab is added, then that same tab is removed, the scrollers remain, so that you can get either drag-drop behavior with the same set of tabs [figure 1].

    3. The editor too easily forgets its own window state. Suppose that a single editor is open as a tab in a maximized window. I tear the editor tab away into its own (maximized) window, restore that window and resize it, then drag the editor tab back into its original window. If I tear the editor tab away again into its own window, that window should be restored and the same size as I'd previously set it; instead, it's maximized, and when restored it's the restored size of the editor's original window.

      Something similar should happen when an editor is closed, though two editors in windows of different sizes introduces the complication of deciding what size the next opened editor should be. In fact, it would be best if Stylish would remember a window with 2+ editors and nothing but editors, and open new editors as tabs in that same window.

    4. The editor tab icon is exactly the same as the website icon (which, oddly, is not the same as the forum icon). That's confusing. The Stylish editor page title and the corresponding Userstyles editor page title differ only in the " - userstyles.org" suffix. That's also confusing, given the identical icons.

    5. "Write new style" passes the default stylesheet as a code=" parameter in the query string instead of using the about:stylish-edit?id= pattern of saved styles. (1) Gibberish in the location bar is never welcome, (2) "Save" appends the new style's id as a second query string ?id=123 instead of as a second parameter &id=123 which causes the editor to start a new new style instead of continuing with the saved style, (3) app styles can't target editors with new stylesheets and editors with existing stylesheets using the same @document filter, and (4) about:stylish-edit - what in the world? Oh, and history.pushState() fails in Scratchpad on these pages, even with browser privilege - any idea why?

    6. Bookmarking editor pages works fine. This is actually pretty useful - I can bookmark a "fixed" stylesheet for quick reference when I'm fixing broken stylesheets with similar defects.

    7. No "Cancel" button (or "Close" until the document is dirty)?

    8. "Preview" should always invoke "Check for Errors", but doesn't. Your reason for not doing so doesn't ring true. There may be times as an author when you want to check for errors without previewing the style, but never when you want to preview the style without seeing what errors remain. If there are errors, you wanna catch 'em in the editor where the exact location and nature of the error is known, not when submitting them to Userstyles where only 20 characters of context and a curt parser error guides you.

      Really I don't see the need for a "Check for errors" button at all. On the other hand, automatically checking for errors on "Preview" in the install screen wouldn't be a bad thing.

    9. There are two different search bars, CodeMirror's (top of the code editor) and Firefox's (bottom of the viewport) [figure 2]. They don't act the same, and I expect Firefox's search to search only CodeMirror's edit buffer, not the entire document (I haven't tried it yet, though).

      For example, in Windows F3 is a "Find next" shortcut for Firefox's search but not for CodeMirror's search, while ctrl+g is a "Find next" shortcut in both. If you search for a first term using Firefox's search, then focus the editor and search for a different second term using CodeMirror's search, ctrl+g will continue finding instances of the second term using CodeMirror's search. If you press F3, Firefox's search will take over from where it left off, finding the next instance of the first term; ctrl+g will then continue finding instances of the first term using Firefox's search.

    10. CodeMirror is indenting with tab characters that are two characters wide, not with two spaces. OK, but it would be nice if Vanilla and CodeMirror could agree on how to display those tabs.

    11. Automatic regexp detection in CodeMirror's search is faulty. Every string that begins and ends with "/" is assumed to be a regexp. If it doesn't produce a valid RegExp, search fails silently instead of reverting to a string search. In particular, it won't find the comment /*+++*/ unless you represent it as
      /\/\*\+\+\+\*\//
      (Which is a nuisance.)
    "Blink element" doesn't work in DOMi anymore. (Not an editor issue, but maybe you have a solution anyway.)
    Faster loading of Add-ons Manager, especially when you have 100+ styles.
    Faster maybe, but not fast. Something about Add-ons Manager just isn't right - even Tumblr's endless scroll is blazingly fast by comparison.

    And, still no way to Find installed styles in the Manager. The Search box hits the network for new styles instead of hitting the kaboodle for installed styles.
    Ctrl-S saves when code textbox is focused.
    In fact it saves the stylesheet even when some other element is focused. If the URL bar is focused, though, it attempts to save the editor page itself; that's an error.

    No new "Save as" or "Save a copy as", though. It's nice to be able to edit a style and still have the original, and also nice to have a copy that won't be updated and overwritten. (Sorry, I thought this was a stock function until I updated else I would have asked for it earlier.)
    Prevent zombie styles when a style is disabled while its edit window is open.
    So far so good, but once you're infested with zombies you can't ever be completely rid of them.
    Removed ability to switch to edit window when installing a style.
    Fait accompli, but this is a real nuisance because it isn't possible now to examine a broken style in response to a forum question without installing it and then uninstalling it. Installing it is a non-starter if you've already edited your local copy, because you'll overwrite your changes if you do, and uninstalling it is no fun if you've got to scan a list of 100+ styles for a new name.
    You know, you could try it instead of asking these kinds of questions...
    I don't think either of us wanted it to come to that. Anyway, they were less questions than statements of preference. (And now they're documentation.)
    370 x 180 - 22K
    681 x 461 - 32K
  • Jason,
    i tested this in 3 profiles. As soon as i install S2, whenever i try to close the editor (i have it set to open in window, don't know if it makes any difference) by clicking the window close button (since i don't see any other way to close it), i get this dialog popup:
    image
    This should only happen if you made changes.
  • Tearing off an editor tab is klunky. Firefox won't tear off the tab if you drag and drop it onto an input control, and most of the editor page is an input control.
    More of a Firefox thing. "No more clunky than Firefox itself" is probably as good as it gets for anything.
    The editor too easily forgets its own window state.
    The editor only saves its state when it's closed and only loads from that state when it initially loads. Anything else that happens is clunky ol' Firefox.
    The editor tab icon is exactly the same as the website icon (which, oddly, is not the same as the forum icon).
    More of an issue of userstyles.org not having its own icon.
    Gibberish in the location bar is never welcome
    Things opened in tabs basically get the same message-passing abilities as web sites, which is to say - it's hard to pass any sort of parameters to them. I haven't found a better way of doing it. See also: lack of "switch to edit".
    "Save" appends the new style's id as a second query string ?id=123 instead of as a second parameter &id=123 which causes the editor to start a new new style instead of continuing with the saved style
    https://github.com/JasonBarnabe/stylish/issues/208
    app styles can't target editors with new stylesheets and editors with existing stylesheets using the same @document filter
    Eh? Why not?
    about:stylish-edit - what in the world?
    To get the right privileges with Electrolysis, the editor has to be loaded as an about: URL.
    Oh, and history.pushState() fails in Scratchpad on these pages, even with browser privilege - any idea why?
    *shrug*
    No "Cancel" button (or "Close" until the document is dirty)?
    Nope. Just close and tell it not to save.
    "Preview" should always invoke "Check for Errors", but doesn't. Your reason for not doing so doesn't ring true. There may be times as an author when you want to check for errors without previewing the style, but never when you want to preview the style without seeing what errors remain. If there are errors, you wanna catch 'em in the editor where the exact location and nature of the error is known, not when submitting them to Userstyles where only 20 characters of context and a curt parser error guides you.
    Meh, I'll think about it.
    There are two different search bars, CodeMirror's (top of the code editor) and Firefox's (bottom of the viewport) [figure 2]. They don't act the same, and I expect Firefox's search to search only CodeMirror's edit buffer, not the entire document (I haven't tried it yet, though).
    I'd disable Firefox's if I could.
    CodeMirror is indenting with tab characters that are two characters wide, not with two spaces. OK, but it would be nice if Vanilla and CodeMirror could agree on how to display those tabs.
    Not seeing this. I see two spaces.
    Automatic regexp detection in CodeMirror's search is faulty. Every string that begins and ends with "/" is assumed to be a regexp. If it doesn't produce a valid RegExp, search fails silently instead of reverting to a string search. In particular, it won't find the comment /*+++*/ unless you represent it as
    /\/\*\+\+\+\*\//
    (Which is a nuisance.)
    Firefox clunky blah blah.
    Removed ability to switch to edit window when installing a style.
    Fait accompli, but this is a real nuisance because it isn't possible now to examine a broken style in response to a forum question without installing it and then uninstalling it.
    You can still view the code on the site, as well as preview without installing it.
Sign In or Register to comment.