Stylus: Live reload via drag n drop in FF

Created on 31 Jul 2018  路  12Comments  路  Source: openstyles/stylus

Doesn't work via drag and drop into manager:

moz-extension://9088eb03-b954-4556-a0f4-fabfa4336ef9/install-usercss.html?updateUrl=blob%3Amoz-extension%3A//9088eb03-b954-4556-a0f4-fabfa4336ef9/3a72b0ef-0fc4-4b12-a3b0-89dc2b4de8fe&tabId=416&direct=yes

screenshot 188

Works via opening hamburger / file menu --> open file (Ctrl + O):

moz-extension://9088eb03-b954-4556-a0f4-fabfa4336ef9/install-usercss.html?updateUrl=file%3A///C%3A/Users/myusername/Desktop/stylustest.user.css&tabId=404

screenshot 189

If dnd is just not supported, then this issue is only about the "foo bar" in the first screenshot which should be a more meaningful message.

Stylus 1.4.13 with FF 61.0.1 x64 on Win8.1

Most helpful comment

Sounds repetitious... maybe add the comment about the manager page not working for both and how to get around it. Then mention using @updateURL to enable update checks.

Check for updates & live reload are not available for styles that are drag and dropped on to the manager page. Instead drop the file on to the tab strip (the area where the tab titles are shown).

Check for updates can also be enabled if the @updateURL is specified in the style meta data.

All 12 comments

I can only reproduce this when I'm dragging & dropping a user.css file into the manage.html page. On almost all other pages, even the edit.html page, I see the live reload checkbox.

You're right, that's the standard drag and drop destination I would choose.
Dropping it into editor would feel like overwriting something.

Dnd into arbitrary pages didn't work so well because a good part of them seem to have dnd handlers like github, forums, messaging and email webclients etc.

It depends on the protocol. On Firefox, only file:/// URLs have the permission to read files from the local disk.

Since it's impossible to know the real file path when you drop it into the manager, there's no way to enable live reload. Other pages don't read the dropped file so it simply replaces the page and the checkbox works.

Solution 1: disable dnd of usercss on the manager page
Solution 2: show an explainer in such cases in place of the live reload checkbox

BTW you don't have to use file open command, simply drop on the tab bar.

I already considered technical limitation :-(
Solution 2 is imho best because it doesn't take away the feature to just import .user.css without live reload.
If you want to use live-reload, please drag and drop into tabbar or open with Ctrl + O.

chrome_2018-08-01_14-34-27

Thoughts?

Sounds repetitious... maybe add the comment about the manager page not working for both and how to get around it. Then mention using @updateURL to enable update checks.

Check for updates & live reload are not available for styles that are drag and dropped on to the manager page. Instead drop the file on to the tab strip (the area where the tab titles are shown).

Check for updates can also be enabled if the @updateURL is specified in the style meta data.

I think it would look better if we keep those checkboxes but disable them. Those help text could be shown in the title attribute or somewhere that takes less space.

Previously I would agree but not now. People don't see these tooltips because this feature is not widely used in UI anymore. We could add (i) icon to the right of the disabled checkboxes but it won't be as obvious as well. The use case here is quite rare, I believe, so showing the text by default and no checkboxes is more obvious. The common use case is to drag'n'drop the style database file on the manager page, not individual usercss files.

Oh there's enough space left, it's just that no one wants to read long textblocks :-)
I wouldn't hide the warning as it should have some attention for that use case.

Regarding the combined message suggested by @Mottie, I've changed my mind as it's not guaranteed that both are shown so I'd like to keep them separate for simplicity (only two translated messages instead of three):

image

image

???

Was this page helpful?
0 / 5 - 0 ratings

Related issues

kristofferR picture kristofferR  路  24Comments

narcolepticinsomniac picture narcolepticinsomniac  路  74Comments

schomery picture schomery  路  35Comments

Athari picture Athari  路  25Comments

tkosamja picture tkosamja  路  49Comments