Style Settings vs. Update Style / Style Installed button

When I visit my styles with settings, I am having trouble getting the Update Style button. In the old design, reloading the page would change the button back to the Update button so I could experiment with multiple setting combinations. Now, I only get it once or I don't get it at all (just "Style Installed").

These are the styles I just tested where I have this issue:

https://userstyles.org/styles/122214/firefox-search-bar-show-engine-names-firefox-43 (got Update Style once)

https://userstyles.org/styles/122394/url-bar-tweaks-remove-visit-search-limit-width (cannot get Update Style)

https://userstyles.org/styles/141633/urlbar-visually-distinguish-characters-punycode (got Update Style once)

In order to test that settings are working, I need to quickly test different combinations over and over so this is a big problem for me in validating that my style settings work as intended.

And it's not just me: I think some users may try a setting and realize it needs to be larger (e.g., width/spacing/fonts) and want to try a different one before leaving the site.

Could I suggest: Add an Install/Update Style button immediately below the settings form, where it's most convenient for a user trying different settings. It won't require changes to the code affecting styles that do not have settings.

As a separate issue, it's hard to discover the settings in this new design, but that is an issue for another thread...

Comments

  • edited May 9 Firefox
    I've temporarily added this to the Description section for these scripts:

    IMPORTANT -- SITE REDESIGN REQUIRES YOU TO SCROLL DOWN AND USE "ADVANCED STYLE SETTINGS" BEFORE INSTALLATION!

    As of May 9th, there is no way to revise your initial selection through this page. If you didn't get them the way you want, unfortunately you have to completely remove the style from the Add-ons page, User Styles section, and then reload this page and choose your style setting options again.

  • Jefferson said:

    As a separate issue, it's hard to discover the settings in this new design, but that is an issue for another thread...

    I see this as an issue also. I think the settings button should be as close as possible to the install button.
    To me, something like this is a lot more discoverable:
    image

    Also, this new font looks really weird when in bold, at least on my system. As you can see in the screenshot - the lowercase i in Settings looks like l.

  • edited May 9 Firefox
    Jefferson said:

    When I visit my styles with settings, I am having trouble getting the Update Style button. In the old design, reloading the page would change the button back to the Update button so I could experiment with multiple setting combinations. Now, I only get it once or I don't get it at all (just "Style Installed").

    You're right.
    Settings are not working. If no setting is changed, the style code should show default options, but does not show them. If you click the "Show CSS Code" button, you will see this: /* [[code]] */, instead of the code that should be inserted there.
    If you change some setting, nothing changes in the code that appears on the page, everything remains the same. No configuration is actually applied, there is only the button to open the settings window.

    Edited: it looks like the settings work, only the code on the page does not change.
  • sapierens said:

    I see this as an issue also. I think the settings button should be as close as possible to the install button

    I agree. The advanced settings button is too hidden.
    It would be even better if the settings were displayed without having to click any button, as in the old site.
    A lot of people will not notice the presence of this button.
  • Jefferson said:

    I've temporarily added this to the Description section for these scripts:

    IMPORTANT -- SITE REDESIGN REQUIRES YOU TO SCROLL DOWN AND USE "ADVANCED STYLE SETTINGS" BEFORE INSTALLATION!

    As of May 9th, there is no way to revise your initial selection through this page. If you didn't get them the way you want, unfortunately you have to completely remove the style from the Add-ons page, User Styles section, and then reload this page and choose your style setting options again.

    Hi Jefferson,

    Thanks for this. Let me see if I understand the issue here:
    1. You go to a style page
    2. You choose your settings
    3. You install the style
    4. You want to revise the chosen settings
    5. You have to uninstall the style and reinstall it again

    Before the change -If you changed the settings and refreshed the page the button changed to 'Update the Style'

    Is this an accurate description of the bug?
  • edited May 10 Firefox
    natalieg said:

    Before the change -If you changed the settings and refreshed the page the button changed to 'Update the Style'

    Before the change, when you loaded the page for an installed style with settings, it would say Update with Stylish rather than Install. After updating, it would say "Installed" so if you wanted to try different settings, you would refresh the page, you would get an "Update" button, and you could choose other settings.

    I think this is how the old install.js provided for that on page load:
    function styleAlreadyInstalled(event) {
    // assuming anything with settings can be updated if already installed
    if (styleHasSettings()) {
    styleCanBeUpdated(event);
    } else {
    styleInstalled();
    }
    }
    function styleAlreadyInstalledChrome() {
    // assuming anything with settings can be updated if already installed
    if (styleHasSettings()) {
    styleCanBeUpdatedChrome(event);
    } else {
    styleInstalledChrome();
    }
    }
  • sapierens said:

    Jefferson said:

    As a separate issue, it's hard to discover the settings in this new design, but that is an issue for another thread...

    I see this as an issue also. I think the settings button should be as close as possible to the install button.
    To me, something like this is a lot more discoverable:
    image

    Also, this new font looks really weird when in bold, at least on my system. As you can see in the screenshot - the lowercase i in Settings looks like l.

    Thanks Sapierens! The bottom location is a good suggestions. We'll check it and see what we can do.

    Regarding the font, it seems to happen only on specific computers and has something to do with the font rendering. We're investing it now.
  • Jefferson said:

    natalieg said:

    Before the change -If you changed the settings and refreshed the page the button changed to 'Update the Style'

    Before the change, when you loaded the page for an installed style with settings, it would say Update with Stylish rather than Install. After updating, it would say "Installed" so if you wanted to try different settings, you would refresh the page, you would get an "Update" button, and you could choose other settings.

    I think this is how the old install.js provided for that on page load:
    function styleAlreadyInstalled(event) {
    // assuming anything with settings can be updated if already installed
    if (styleHasSettings()) {
    styleCanBeUpdated(event);
    } else {
    styleInstalled();
    }
    }
    function styleAlreadyInstalledChrome() {
    // assuming anything with settings can be updated if already installed
    if (styleHasSettings()) {
    styleCanBeUpdatedChrome(event);
    } else {
    styleInstalledChrome();
    }
    }
    Thanks Jefferson! I passed it to the development team.
  • For anyone reading, attaching the following script to a style's page will insert an Update button into the Advanced Settings section. I think it's probably too inconvenient for regular users but could be useful to style authors for testing.

    https://www.jeffersonscher.com/gm/styleupdate.js

    The code you run in Firefox's web console to inject it is:

    var s=document.createElement('script'); s.setAttribute('src', 'https://www.jeffersonscher.com/gm/styleupdate.js'); document.body.appendChild(s);

    Or as a bookmarklet:

    javascript:var s=document.createElement('script'); s.setAttribute('src', 'https://www.jeffersonscher.com/gm/styleupdate.js'); document.body.appendChild(s); void 0;
  • edited May 11 Chrome
    Jefferson said:

    For anyone reading, attaching the following script to a style's page will insert an Update button into the Advanced Settings section. I think it's probably too inconvenient for regular users but could be useful to style authors for testing.

    https://www.jeffersonscher.com/gm/styleupdate.js

    The code you run in Firefox's web console to inject it is:

    var s=document.createElement('script'); s.setAttribute('src', 'https://www.jeffersonscher.com/gm/styleupdate.js'); document.body.appendChild(s);

    Or as a bookmarklet:

    javascript:var s=document.createElement('script'); s.setAttribute('src', 'https://www.jeffersonscher.com/gm/styleupdate.js'); document.body.appendChild(s); void 0;

    While it does creates a "Update Style With These Settings" button, clicking said button does nothing. tested on several different styles I have installed even tested on my own styles as well.

    edit: though I wonder if that's because I'm using stylus (which tons of people have switched over to using vs the crappy new stylish extension), the better version of stylish..
  • edited May 10 Firefox
    Two things:

    (1) I only tested in Firefox, sorry.

    I need to add some things for Chrome. It's getting a little more complicated...
    This should be fixed now, but if you tried it before, you'll need to bypass the cache in order to get the newer version of the script. One way to do that is to load the script's URL directly in its own tab and use Ctrl+Shift+r to make sure Chrome has cached the new version. You'll see the difference immediately because there are now separate Firefox and Chrome buttons.

    (2) I'm not familiar with Stylus, but I think the problem is #1.
  • Jefferson said:

    Two things:

    (1) I only tested in Firefox, sorry.

    I need to add some things for Chrome. It's getting a little more complicated...

    (2) I'm not familiar with Stylus, but I think the problem is #1.

    mmm alright, will keep checking back every so often to see if you pushed an update on your code to work on chrome. If you get this working on chrome then thanks :)
  • Okay, if you open the script directly in Chrome in its own tab and reload it bypassing cache (e.g., Ctrl+Shift+r), then next time you inject it you should see separate buttons for Firefox and Chrome.
  • Thanks for the workaround, Jefferson!
    And thanks Natalie, that you are still there and something is moving towards positive :-)
    My mood lightens up!

    I just wanted to suggest to not name the button simply "Settings" as shown in the above picture, because that is not clear enough. In my experience, if a user is not sure about the functionality of a button, he won't click it (which is actually quite reasonable).
    Please consider naming it "Style Settings" (maybe in 2 lines) or leave it as it is ("Advanced style settings").
    I personally would drop the "advanced" as the settings are often more basic than advanced. Non-technical users (which are more targeted by the new design I guess) will cringe a little to click a button that says "advanced", because they fear to see some code or other "complicated" stuff. At least that's my experience with users who have only little english language skills.
  • edited May 10 Firefox
    If you're taking a poll, I like the word "Options" better than "Settings". If someone clicks the button, there could be a short explanation along the lines of: "You can choose different settings for this style if you like. After making your selections, click the Update Style button."
  • edited May 15 Chrome
    Two things: (1) I only tested in Firefox, sorry. I need to add some things for Chrome. It's getting a little more complicated... This should be fixed now, but if you tried it before, you'll need to bypass the cache in order to get the newer version of the script. One way to do that is to load the script's URL directly in its own tab and use Ctrl+Shift+r to make sure Chrome has cached the new version. You'll see the difference immediately because there are now separate Firefox and Chrome buttons.

    Looks good, things are working now on chrome :)

    for anyone who uses greasemonkey/tampermonkey you can just throw this into a new userscript and it'll autoload whenever you visit a style

    // ==UserScript==
    // @name         Userstyles.org Style Settings Updater
    // @version      0.1
    // @description  Inserts an Update button into the Advanced Settings section so you can update your styles whenever you want
    // @author       @Jefferson, @JourneyOver
    // @match        https://userstyles.org/styles/*
    // @grant        none
    // ==/UserScript==
    
    var s = document.createElement('script');
    s.setAttribute('src', 'https://www.jeffersonscher.com/gm/styleupdate.js');
    document.body.appendChild(s);
    void 0;
    

    Now if only I could get this to work correctly --> http://i.imgur.com/GF4hIyj.png instead of having the advanced settings showing up ontop of the the information section, have it push the information section and all that down whenever the advanced settings are open sadly with the way the site is currently I don't think it's possible :/



  • Looks good, things are working now on chrome :)

    for anyone who uses greasemonkey/tampermonkey you can just throw this into a new userscript and it'll autoload whenever you visit a style

    ...

    Now if only I could get this to work correctly http://i.imgur.com/GF4hIyj.png instead of having the advanced settings showing up ontop of the the information section, have it push the information section and all that down whenever the advanced settings are open sadly with the way the site is currently I don't think it's possible :/

    Thanks! That is a lot easier than clicking the bookmark every time I go to a style.
  • Jefferson said:


    The code you run in Firefox's web console to inject it is:

    var s=document.createElement('script'); s.setAttribute('src', 'https://www.jeffersonscher.com/gm/styleupdate.js'); document.body.appendChild(s);

    Thanks for this - helped a lot in testing and updating one of my customisable themes.
Sign In or Register to comment.