Stylus: User-friendly exclusions

[narcolepticinsomniac]

How to exclude certain sites from global styles is still one of the most FAQs on a regular basis. Some users will just never get a basic grasp of regex, even if explained in depth. I know I've seen a PR from back in the day where you argued for this pretty adamantly @tophf , so I'm kinda surprised you never brought it up here.

Jason's main argument was the differences in Chrome/FF versions. Not that I agree with that argument, but Stylus is the same in either regardless. IIRC, you had one that was at least semi-implemented to be integrated in editor pages. I don't know how difficult it'd be, but it'd be much more user-friendly to have it in the popup if that's not unrealistic. An exclude/undo button next to globals would be ideal if possible.

[Mottie]

I think this is a good idea. The problem is implementing it in the current setup. Maybe we could add the exclusions in the metadata that we discussed in issue #101.

/* ==UserStyle==
@exclude https://www.google.com/
@exclude https://www.yahoo.com/
==/UserStyle== */

[tophf]

@Mottie, this idea is about a locally configured list of exclusions for users of a global style, not for such style's authors who are smart enough to figure out the syntax.

[Mottie]

Yes, but how will the exclusions get preserved if they want to export or backup their custom style?

[tophf]

Just like other locally configured settings.

We can also export all settings in the styles backup file. We don't do it currently because our settings are rather trivial so sync should work for most users.

[silverwind]

I think the old Greasemonkey Addon did this best. It supported both author- and user-provided includes/excludes. The user rules which were applied on top of the author rules. This was the interface:

[tophf]

All of you people suggesting this feature forget that styles have multiple sections.

[narcolepticinsomniac]

How does that matter? Exclusions would apply to the entire style, no?

[tophf]

Well, we can implement it that way, it's easier to include/exclude the style entirely.

[Mottie]

xStyle has added an exclude entry to the @-moz-document...

@-moz-document regexp("^http://example.com/(.*)$"), exclude("^http://example.com/not/(.*)") {
/* Some css codes here */
}

This addition doesn't appear to allow user-added exclusions, but we may need to support this format if authors start using it; or at least not completely ignore it. It also seems to support regular expressions, but that isn't mentioned.

[narcolepticinsomniac]

This addition doesn't appear to allow user-added exclusions

Pretty useless then. One correctly written negative lookahead accomplishes the same thing. Exclusions are for users who don't know basic regex.

The xStyle guy seems to have good ideas, but he also appears to implement them as he pleases, without much in the way of feedback. Usercss is also implemented a little differently in both, isn't it? Just because he makes unilateral decisions, doesn't mean we should necessarily "support" them all, especially if some of the details aren't directions we would take on our own.

[Mottie]

Yeah, I was really only worried that having an exclude() in the @-moz-document would cause issues in Stylus, but I tested it and Stylus just ignores it.

[silverwind]

BTW according to https://bugzilla.mozilla.org/show_bug.cgi?id=1035091, @-moz-document will not be possible in author stylsheets (only user and user-agent) anymore in Firefox 59, which probably means the death of native support for it in Firefox.

I'm thinking that maybe a custem @-rule may be in order if we are to deviate from what @document was meant to support. Maybe @match or something.

[eight04]

I'm thinking how do we create a "Style settings" page.

1. Create a new style-settings.html page. You can link to the page in the manager.
2. In the editor, add a "Style settings" button. Open a modal window when clicked.

[Mottie]

Sounds good to me.

[narcolepticinsomniac]

Yeah, that sounds fine. Excludes really need to be easily managed in the popup though. Ideally, options to exclude by URL, URL-prefix, or domain, and then if a rule is set, an option to undo.

[eight04]

Tampermonkey uses a dropdown menu to display the exclude command. It only provides a "exclude by domain" option.

When clicked, Tampermonkey adds a complex rule to "User excludes" in the script settings:

Maybe we can add an "exclude from the current domain" icon that does something similar:

(E should be replaced by a real icon)

Then we insert a simple exclusion rule e.g. https://github.com/* (use this issue as an example).

If the current domain is found in the exclusion rules, we display an "un-exclude" icon instead.

However, if the style is excluded due to other rules e.g. https://github.*/*/*/issues/*, even if the user press the "un-exclude" button and the https://github.com/* rule is removed from the ruleset, the page is still excluded i.e. the button doesn't actually un-exclude the page.

You will also find that an excluded style has a "exclude from the current domain" button in the previous situation.

[narcolepticinsomniac]

Yeah, something along those lines. Not sure why we wouldn't add options to exclude by our other preset applies-to rules though. The whole goal here is to allow users to easily exclude globals where they don't work well, and there'll be plenty of cases where globals work well on some subdomains, but not others.

The difficult part is implementing it all to begin with. Once that's done, adding a couple options for rules other than domain, should be as simple as some minor regex tweaks in rules created. I kinda figured it'd probably some sorta icon with a hover dropdown menu, absolutely positioned to avoid the jumpy nature of the way TM does it.

I also don't see a need for a confirmation dialog. Most users won't even know what the regex they're looking at means, plus the whole idea here should really be to streamline exclusions so can be done quickly, on the fly, which means it should really be as few clicks as possible IMO. Once set, there would be an obvious option to undo, so it's not like if you set a rule in error, it's any kinda big deal.

[eight04]

Something like this?

• Some actions can be moved to the dropdown menu e.g. the "delete" action that is not commonly used. (or put them all in the menu?)
• The exclude option is rendered as a checkbox instead of a button, so it should be less confusing.

absolutely positioned to avoid the jumpy nature

We can add a sliding animation to avoid jumping.

If we want to use an absolutely-positioned menu/dialog:

• The icon probably should be changed to something like ....
• We have to provide a close button/command in the menu in case the entire screen is filled.

[narcolepticinsomniac]

Well, I'm not a fan of putting other icons in a dropdown. Besides, I thought these icon/submenus are gonna be strictly for global styles, no? I was kinda figuring maybe we'd do some kinda global "globe" icon, with a hover dropdown real similar to import/export dropdowns in the manager. If it's disabled on a page, the icon can switch to a "cancel" circle-slash, and "undo" can replace whichever option is currently selected.

[Mottie]

I'm not a fan of putting other icons in a dropdown

Considering how often the exclude & delete will likely be used and the limited space we have in the popup, I think a dropdown might be the best idea.

icon/submenus are gonna be strictly for global styles

I don't think so. A style my target a domain, but miss styling subdomains.

If it's disabled on a page, the icon can switch to a "cancel" circle-slash, and "undo" can replace whichever option is currently selected.

I like it. That'd basically require styling a check vs unchecked checkbox.

[narcolepticinsomniac]

I think a dropdown might be the best idea.

Well yeah, there'll obviously be a dropdown for exclude-by options, I'm just saying I don't particularly like the idea of putting delete in there as well. We couldn't really switch the icon for excluded pages if we stick delete in there either. As far as the space being limited, we could always make the default a bit wider to accommodate.

If you're thinking excludes are gonna be available for every style though, we'll either need different icons for non-globals, or something else entirely for all of them.

I kinda like the idea of switching the icon based on states, but IDK, maybe we could just go with a generic menu icon and stick delete in there as well. We could always give them some other disabled styling to differentiate. I'm mostly just throwing some ideas out here, the only things I really have a strong preference about is it being a hover-icon, and the dropdown itself being compact and absolutely positioned.

[eight04]

these icon/submenus are gonna be strictly for global styles

I don't think there is a reliable way to detect whether a style is a "global style".

hover dropdown

I don't think it's a good idea to put a hover button for each entry. If you want to open the menu of a specific style, you have to carefully avoid other styles' hover button:

If it's disabled on a page, the icon can switch to a "cancel" circle-slash, and "undo" can replace whichever option is currently selected.

I don't understand. Any picture?

switch the icon for excluded pages if we stick delete in there

I think we can build the HTML structure like .entry.excluded .dropdown-menu .delete-command .icon so we can apply different styles for .entry/.entry.excluded.

[narcolepticinsomniac]

I don't think there is a reliable way to detect whether a style is a "global style".

Weird, but that doesn't seem to be the direction we're going in anyway.

I don't think it's a good idea to put a hover button for each entry

Yeah, probably not realistic in this case. I just hate extra clicks if they're avoidable.

I don't understand. Any picture?

I think we'll probably scrap that idea too. Maybe go with a generic menu icon and stick delete in the dropdown, since both you guys seem to agree on that, and I'm coming around to the idea. If we go with "three dots", they should probably be of the vertical variety.

we can apply different styles for exclusions

That's good enough.

Once it's wired up, tweaking the UI isn't a huge deal anyway. Probably worthwhile discussing it ahead of time so we're all on the same page though.

[eight04]

I found that we have a max height for the item list:
https://github.com/openstyles/stylus/blob/dfb9db34c39186329c308910eba7e955f39aa427/popup/popup.css#L151-L152
It makes the list incompatible with the absolutely-positioned menu since the menu will make the container overflow.

[narcolepticinsomniac]

I guess you're actively working on this already to have encountered that conflict, so that's good news. If you spotted that before attempting it, that's pretty impressive anyway. I suppose the only way to use absolute reliably would be to contain the submenu within its parent entry. Doable if all options are icons, which would be simple for "delete" and "undo", but IDK if there's any adequate options for different applies-to rules.

Otherwise, I guess we're only left with two options, either the TM method, which I'm not a huge fan of personally, or I guess we could stick options in a fixed dialog like delete confirmations. My main goal here was a single click, which has already gone out the window, so if we're gonna need to click to access the submenu, its positioning is less important.

My vote would probably be for a fixed dialog if absolute isn't feasible. Relative wouldn't be the end of the world, but besides the jumpy nature of it, it might also have some minor edge case scroll issues. You could improve either with animations or auto-scroll. Depends what you guys think. Majority rules, I guess.

[eight04]

fixed dialog

To display the menu as a dialog, we have to create a dialog service that can handle multiple dialogs at the same time. (imagine you open the menu and click the delete command)

Here is what it currently looks like:

[narcolepticinsomniac]

Eh, the transition makes it slightly better, but I'd prefer we not shift content and make the popup bounce around. I'm not looking to stand in the way of progress though.

imagine you open the menu and click the delete command

I figured we'd use the same one. When delete is selected, either add the confirmation to the current content, or replace the current content with the confirmation.