Unlimited user stylesheets

[ersi-dnd]

Right now there's an option to apply just one sticky user style sheet. In Opera there was a whole directory full of user stylesheets that could be selected, applied and switched at will with menu, button, keyboard shortcut, and/or mouse gesture. I hope this is planned :)

[The-Compiler]

The underlying library (QtWebKit) only supports setting one user stylesheet, so the question is what the correct way to combine them is. Maybe it would work to just concatenate the files and then set that as stylesheet and let Qt do the rest? I don't know enough about CSS to say if that's the right approach though.

[ersi-dnd]

The user can switch between adblock files flexibly. Surely the same opportunity is possible for stylesheets too.

[Emdek]

@The-Compiler, yes this is the only way. @import rules could be an alternative but most likely that won't work in this case.

[ersi-dnd]

I managed to get a script working in Dwb that switches between two stylesheets https://wiki.archlinux.org/index.php/Dwb#toggle-stylesheet The problem with it is that it does not untoggle any more. (I know workarounds, but they are just that, undesirable workarounds, not real solutions.)

The way user stylesheets work in Opera is unbeatable.

[landroni]

As suggested initially in #584, even if not present in O12, I still think that the following two additions would make for a sane UI addition in Otter:

• add item in quick-menu F12 : Enable user style sheet
• add a User style sheet item in the side panel (as in Midori)

This would allow to easily toggle on/off a user style sheet.

[landroni]

BTW, Opera's interface for the User style sheet never made any sense: once you select a custom style sheet, you cannot easily disable it. Instead you need to select some dummy file. (Although this may be a biased view because switching from Author to User was extremely buggy for me in O12.)

It would make much more sense to have a checkbox in front of User style sheet either in Prefs > Content or in Website Prefs > Content. Let me know if I should open a separate issue for this.

[ersi-dnd]

In ideal, all menus will become completely editable anyway, so users can place any menu item anywhere they want. And keybinds will also be editable, so you can place functions under any keybind. Keybinds already are pretty flexible.

This is how my user CSS menu looks like in Opera. In addition to the menu, I can toggle author/user mode (=user CSS off/on) with keyboard. The specific stylesheets can be switched from the menu. As far as I have understood, something as close as possible has been planned in Otter. What is buggy for you in Opera's behaviour?

[landroni]

@ersi-dnd

I have selected a custom My style sheet in Prefs > Content. However, whenever I switch to User mode, the page structure gets messed up (NOT because of the selected stylesheet). So I end up using, strangely, a custom My style sheet in Author mode. That works OK, but I never understood the underlying logic (or bugs) in Opera's style sheet mechanism, and I have no straightforward way of temporarily disabling the stylesheet.

[Emdek]

@landroni, I'm not sure if it should be separate panel for sidebar, we might end up with lots of panels which would do very little. ;-) What about adding it to website information panel?

Or creating separate website options panel? It could function as some kind of mix between F12 menu and Website Preferences, containing most important options in form of list of checkboxes, comboboxes etc. We could add little icons next to each item, showing source of current values (global, per website or pet tab settings). These controls would set values per tab, unless someone would come up with user friendly way to decide where it should be saved.

Some related notes:

• originally stylesheets were supposed to be handled in different way, with more centralized storage, each stylesheet was supposed to be registered first (and get user friendly name) and then select from list, in fashion similar to that how it's done for User Agents (and apparently I'll have to revisit this concept as it seems to be best way to deal with unlimited stylesheets in sane way);
• similar concept is planned for proxies;
• it seems that it would be a good idea to allow to have multilevel lists (submenus) from beginning, so it would be easier to organize them in more extreme cases.

[landroni]

@Emdek

Actually I don't see many panels that do little as a bad thing. :) In O12 you could always select exactly which panels you wanted displayed, and you played around with those only. I would even argue that the less a panel does, the better... (As in Unix philosophy, one tool for one job.)

This said, I was only suggesting a panel in the sidebar because I felt that Midori's arrangement was very intuitive and convenient, without the need to dig deep into Prefs > Content. We may or may not adopt it for Otter, but if we already have a mix between F12 menu and Website Preferences, and a bug-free switch from Author to User modes, then I guess this would likely cover most custom stylesheet related needs.

For the record, here's a screenshot of Midori's panel:

[Emdek]

@landroni, yes, but having single place to configure such stuff seems to be compatible with this philosophy (since all of them belong to single tab). ;-) So far we don't have such place yet, but it seems to be a good idea, it should be far easier to discover for users not familiar with classic Opera and have extra feature over both F12 menu and Website Preferences, sane way to show source of current value, which may be handy.

[ersi-dnd]

@landroni There's something like browser.js or such in Opera to handle site-specific quirks. Emdek thinks javascript is user friendly :)

In your image, I can remotely guess from the filenames that those specific files are perhaps meant to handle the style of 0soft website, but this is definitely not much of an indicator. The filenames should be possible to set by the user as anything. Midori's userCSS handling is not a good guide here, I think.

I think it sort of makes sense to add website-specific userCSS to the website preferences dialogue - and be displayed there only, not in a sidebar which is meant for global stuff. But where the website-specific CSS would be saved, I have no idea. Only Emdek knows :) Perhaps website preferences dialogue could have a field, where you could type in the path to any file, local or web-based. (Becomes a kind of security risk, I'd guess, but it would at least be flexible and popular with users.)

Alternatively, I have an idea that we could implement this thing as a part of developer tools. It would work like this:

• The user lands on a website where he would like to see an element differently
• Choose Inspect element (opens up Dragonfly or whatever it is)
• Tweak the element in Dragonfly
• Choose "Apply permanently" or whatever we should call it. This would link the tweak to that url
• Save the tweak wherever Dragonfly saves its stuff

How about it?

[landroni]

@ersi-dnd "not in a sidebar which is meant for global stuff."

Actually my proposal for the sidebar would be to handle the global UserCSS settings, NOT website-specific settings, which would double for/sync with the Prefs > Content settings. The website-specific is rightly handled in website prefs, as it is right now. But in any case the sidebar panel would be more of a perk, not a necessity, if there is a sane UserCSS implementation in F12 menu and Website Preferences, and a bug-free switch from Author to User modes.

As for the Dragonfly approach, I believe that UserCSS stuff should generally be user-level territory, and not something linked to developer tools; as it currently is in Otter and in O12.

[ersi-dnd]

Then I must be completely misreading something. I do not understand what you mean by bug-free switch between author and user modes. Where was thwe bug in Opera? It allowed for mixing userCSS with author mode, perhaps you perceived that as a bug?

[landroni]

@ersi-dnd

"It allowed for mixing userCSS with author mode, perhaps you perceived that as a bug?"

Oh, absolutely! But I was always expecting the Author mode to use website-dictated style (nothing set by the user), while User mode to combine website-dictated style mixed with userCSS. As it stands in O12, User mode is utterly useless for me as it systematically messes up the website structure.

So I am always forced to use Author mode with userCSS. This works fine most of the times, but the trouble is that there is no sane way to easily disable the userCSS. I cannot disable it temporarily via a global switch (e.g. what I propose for Otter, a Enable UserCSS toggle in F12 menu; or what can be done in Midori via the sidebar panel) and I cannot disable it in a sane manner via the website prefs (currently I have to select a dummy file instead of the userCSS to disable the global UserCSS, which is terrible UI, as a checkbox would have been infinitely more appropriate).

Am I making any more sense now? :)

[ersi-dnd]

See here http://operawiki.info/images/styles.png

Your perceived bug was always easily solved by unchecking "My style sheet" under Author mode. The only mistake Opera did was to have that checkmark on by default. I always unchecked it at every new install.

[landroni]

Hmm, this doesn't really help me. If I uncheck "My style sheet" under Author mode, then I only get website-dictated style (and NO userCSS). If I check "My style sheet" under Author mode, then I can merrily use my userCSS in Author mode (what I have been doing for the past few years).

My trouble was with User Mode not doing what I wanted. Even if I unchecked "My style sheet" under Author mode and checked "My style sheet" under User mode, I still got all pages NOT using the userCSS.

This said, you're right: it was an issue with the O12 defaults. If I do what I describe in the paragraph above and change Default mode to User mode, THEN and only then Opera seems to behave and uses the userCSS on new tabs. Call this user stupidity, or extremely complicated defaults mechanism and interactions. Here's what seems to be working for me now in User mode:

But O12 still lacks an easy switch from User to Author modes. Previously it had such a switch on the statusbar toolbar, on the right, but in later releases that was removed. In Otter I would suggest having a User/Author toggle in the F12 menu.

Phew!! One O12 mystery solved for me...

[Emdek]

BTW, do we really need User vs Author mode? For me it was always additional level of complexity and I think it would be better to simplify it to just this (applied in this order, so could be overwritten by next ones, according to typical CSS rules, depending on how it is implemented by backend, for example WebKit):

• browser defaults (fonts, colors, margins etc.),
• user stylesheets,
• website styles (sadly QtWebKit doesn't have API to toggle them but maybe it could be somehow achieved in sane way).

While adding ability to set priorities for stylesheets (in this case list makes more sense than combo box, as user might be able to change order suing drag and drop in case of multiple user stylesheets).

[ersi-dnd]

@landroni Even if I unchecked "My style sheet" under Author mode and checked "My style sheet" under User mode, I still got all pages NOT using the userCSS.

This is how it was meant to be. I mean, this is precisely how I used it :)

@landroni But O12 still lacks an easy switch from User to Author modes.

Really? The keyboard shortcut was not good enough for you? By default Shift+G if I remember right.

The way I used it, I had "My style sheet" turned off under Author mode and I usually browsed with Author mode. When I wanted to see the webpages my way then I turned to User mode with the keyboard shortcut and the styles were completely changed. And I indeed wanted them completely changed.

Right now Otter has a field for one global user stylesheet. If the same field be added into website preferences to apply to specific domains, this would already massively add usability. But otherwise I still think Opera's way was the best way and this is the ticket for that.

[landroni]

@ersi-dnd

"By default Shift+G if I remember right."

Works alright, but this keyboard shortcut isn't advertised anywhere in the relevant parts of the UI. So as far as novice users are concerned, it doesn't exist.

"The way I used it, I had "My style sheet" turned off under Author mode and I usually browsed with Author mode. When I wanted to see the webpages my way then I turned to User mode with the keyboard shortcut and the styles were completely changed."

My needs are exactly opposite. :)

I usually need to browse all websites under User mode (with a userCSS) to avoid eyestrain. But some websites misbehave with a custom userCSS, and for those I need to disable the userCSS and revert to the website's default color scheme (Author mode). Usually I do it in website prefs > content/display and choose a dummy file instead of the CSS (which again is terrible UI and should come in the form of a checkbox).

@Emdek

"BTW, do we really need User vs Author mode? For me it was always additional level of complexity [..]"

Yes, in this instance a sane rethink of the arrangement, thus reducing the level of complexity, would be useful IMO.

[landroni]

@ersi-dnd

"Right now Otter has a field for one global user stylesheet. If the same field be added into website preferences to apply to specific domains, this would already massively add usability. "

I think we already have this in Otter, in website prefs > content.

What I argue though is that we really do need an additional checkbox which either:

• defines Author mode or User mode for this specific domain (if Otter goes down the Author/Mode way)
• or allows to disable custom userCSS for this domain (not in O12, but blatantly missing).

[ersi-dnd]

@landroni My needs are exactly opposite. :) I usually need to browse all websites under User mode (with a userCSS) to avoid eyestrain.

Actually our needs are quite similar then. I used User mode extensively precisely for the same reason, and I learned/configured the relevant features/keybinds accordingly. But soon I found that textmode browsers in consoles and terminals handle this even better than Opera ever could.

• defines Author mode or User mode for this specific domain (if Otter goes down the Author/Mode way)
• or allows to disable custom userCSS for this domain (not in O12, but blatantly missing).

Looks to me completely like something that should go into Website preferences dialogue.

[Emdek]

@ersi-dnd, currently you can simply blank that field and it should simply work. Just reminding that I would like to skip author vs user mode completely and make it simpler: https://github.com/Emdek/otter/issues/533#issuecomment-67767168.

[landroni]

@Emdek currently you can simply blank that field and it should simply work.

Yup, indeed it does, and perhaps a corresponding tooltip would be useful. Either this, or a corresponding checkbox, the latter being a much more intuitive UI solution.

[ersi-dnd]

@Emdek Sorry, which field can be blanked? And what does it do when it's blank?

[Emdek]

@landroni, as noted in another comment, I would like to turn it into list managed in similar way to that of User Agents (their manager in Preferences), so user could also specify their order (which is important in some cases).

@ersi-dnd, path to user stylesheet in Website Preferences, then no stylesheet will be applied even if there is global one.

[ersi-dnd]

You mean the global stylesheet won't be applied when Website preferences is empty? But what's the point of the global stylesheet then? I think it should be a specific option in the Website Preferences user styles section:

• the field to enter a path to a user stylesheet that would apply to this domain
• checkmark: use/don't use the global user stylesheet in this domain

[landroni]

@ersi-dnd Actually our needs are quite similar then. I used User mode extensively precisely for the same reason

Not quite. From what you explain, you use Author mode by default, and User mode when necessary. For me, it's the opposite: I use User mode by default, and Author mode when necessary.

[Emdek]

@ersi-dnd, no, the point of Website Preferences is to allow to override global values for specified website. Each option there can have two states, set or not set, saving that dialog applies them all.

It might be not perfect behavior but makes more sense than adding such checkbox or special value (use global defaults) or asking which options should be saved. There is potential alternative by saving just modified values but it's not perfect either, as user may wish to use value which currently is the same as global but later change that global value to something different.

It's complex issue, this is main reason why I've suggested separate sidebar showing most important settings applied to current tap complete with icon showing their source (global value, website preference, tab override).

[Katarn]

Here is a lot written, long read. Responding to a question.

BTW, do we really need User vs Author mode?

I have quite a long time, use this function in Opera.

1. In the HTML/CSS coding, when I want to see the edges of objects - i turns on appropriate CSS-file. I just pressing on the button in toolbar.
2. In pages where due to the complex layout overlay placed over the picture and a picture can not save from the context menu.

[landroni]

@Emdek Just reminding that I would like to skip author vs user mode completely and make it simpler

Having used Author/User mode in Opera for a couple of weeks now, I must actually admit that this arrangement makes a whole lot of sense. It's very flexible, and if the defaults are right, it shouldn't confuse users.

If you go ahead with a simplified solution, please make sure that the flexibility isn't lost, and that it's easy for the users to switch between Site rendering and User-desired rendering...

[ersi-dnd]

When there is no User mode and Author mode, how is user style sheet supposed to work? Am I supposed to point UserStyleSheet path to a file and then it works? And when I don't want it anymore, then I should remove the file from the path?

I haven't tried user styles in Otter, because I am waiting for User mode and Author mode or some other option to change the styles on the fly - as many style files as I want, just like in Opera.

[Emdek]

@ersi-dnd, yes, you can set path and later unset it, also in Website Preferences. Multiple stylesheets to apply in fashion similar to classic Opera should be available later. But I'm not sure if these two modes are achievable.

[ersi-dnd]

Right now I put a user.css into Content/UserStyleSheet. The file has this content

• {;}

The result: Tabbar becomes enlarged. The user.css in that path is supposed to change webpages, not GUI, right?

There is a purpose to stylesheets

[Emdek]

@ersi-dnd, it's unrelated bug in Preferences dialog that I'm constantly forgetting to fix. Although there is also ability to set styleheet affecting UI (Qt widgets support CSS subset). ;-)

[ersi-dnd]

There is a purpose to user stylesheets - like @landroni above, I modify webpages to reduce eyestrain which is becoming an issue as I'm getting older. In Opera the styles worked wonderfully, the best. Only text browsers in terminal emulators (Elinks, w3m) are better.

Next best with user styles currently is the Mozilla family. In FF (and Palemoon and Seamonkey) you can

1. Go to Preferences/Content/Colors
2. Choose your colours for links
3. Select "Use system colors" + Always
4. Voila: Webpage colours are overriden by my system style, my link colours are respected, while webpage layout and scripts remain the same. Very smart.

It would be great if Otter would provide the same. Now, I have noticed that this option to apply system style over webpages is not available in the Chrome family, so possibly webkit&webengine cannot do this. In this case, there should be option to do precisely what Opera used to provide - unlimited user stylesheets + option to switch webpage CSS off. Right now I don't see that webpage CSS can be set off in Otter.

[annulen]

@ersi-dnd It's possible to override any settings made by author's style sheets with user style sheet, if you add !important to properties

[ersi-dnd]

I know that. But I want to override everything and start from scratch.

Opera's User mode disabled webpage CSS.

Mozilla & Co still retain this menu http://1.bp.blogspot.com/_QIwrz7TuJHs/SofDCqfZa6I/AAAAAAAAA3U/kx0MInkI8eE/s400/Web+Page+Garbled+Or+No+Graphics+-+C.PNG (note that when a webpage has several overlapping or alternate styles, this menu shows them all so they can be disabled/enabled individually)

Otter browser has no function yet to easily disable all webpage CSS and to enable a random selection of individual CSS files.

[ersi-dnd]

Now I found an amazing extension that does what we need also on Chromeses https://chrome.google.com/webstore/detail/high-contrast/djcfdncoelnlbldjfhinnjlhdjlikmph

Is there a way to install Chrome extensions to Otter?

(It's not as good a solution as Opera's infinitely flexible CSS solution, but its something quick and handy at least.)

[beastie1]

Is there a way to install Chrome extensions to Otter?

Not yet, see #42

[ersi-dnd]

Luckily I found a CSS that does one thing that I need: Darken the webpage design https://userstyles.org/styles/2187/myfavolours-global-custom-color-scheme

There are other things that old Opera's user CSS does. It would be great to switch between those files, and between the author design, swiftly and conveniently like in old Opera.

[Emdek]

@ersi-dnd, if someone managed to do that using standard DOM APIs then we can do that too. @annulen already noted yesterday that there is such API that could be useful in this context: https://developer.mozilla.org/en-US/docs/Web/API/Document/preferredStyleSheetSet (and related)

[landroni]

@Emdek Somewhat related... One thing that I'm sorely missing is a single action to enable/disable a stylesheet on a given page, à la Shift + G on Opera (Select author mode > Select user mode). Is this something we can already do in Otter?

@ersi-dnd

I modify webpages to reduce eyestrain which is becoming an issue as I'm getting older.

You may be interested in using something like redshift with perhaps temp-day=4000 and gamma=0.95:0.85:0.7 (though personal experimentation is in order to achieve optimal effect, and keep in mind that the optimal settings will evolve with time). I've been using this for years now and I feel that gamma notching and appropriate temp calibration of monitor colors has a disproportionately more useful effect on relieving eye strain than mere dark-ish schemes. In conjunction both are of course useful.

[Emdek]

@landroni, it might be more or less doable using JS calls, since there is no C++ API for that. But as long as it will work then it's not a problem, alternative stylesheets selector already uses it anyway. I have some other tasks to be done first but hopefully I'll have enough time to take care of it before end of this month, but someone else could give it a try first. ;-)

[Emdek]

It's time to revisit this ticket. ;-) I'm considering adding this to the mix: https://github.com/openstyles/stylus/wiki/Writing-styles The question is, how many types of user stylesheets should we support, to not make it too complex for the user. It needs to b decided first, to have stable directory structure for storage (similar to that of classic Opera, with one subfolder for styles specific to given domain and another one for styles applied using menus). Also we should decide the order in which they should be combined when applying to webpage.

[Frenzie]

The Opera method strikes me as essentially fine? Stylish is the most popular these days I suppose.

[Emdek]

@Frenzie, after looking up what the heck Stylus does internally (not just hard to parse @-moz-document rules, but also variables and conditions) it seems way too complex to include. So I guess that going for simpler solution from classic Opera would make more sense, since it's way easier to implement and should be easy to use too. Any idea if there is some documentation somewhere? I would like to extend it a bit (like adding support for * for subdomain matching and local @import too), but perhaps such rules were already defined (I only have three simple stylesheets around).

I wonder why nobody followed UserJS format for handling URL matching, that would be much easier to handle...

[ersi-dnd]

As a general default, if there are no better ideas, why not simply reimplement what is there in Opera?

I have gotten the impression that the webkit or webengine whichever we use, has its limitations when user styles are applied. Given those limitations, what are the options?

I see that, for example, Vivaldi has not gone beyond the extremely limited implementation of user style options - I may tick some boxes, but they get lost after restart. Also, the different styles do not play well together. In old Opera it was perfect, but that may have been partly due to the original rendering engine.

[Frenzie]

Documentation for Opera? I'd say the best best is that blue-colored wiki, but I don't seem to have the address in my bookmarks and you'd probably need Archive.org to look at it.

[Emdek]

@ersi-dnd, nah, it's unrelated to engine (although Blink made it harder to implement them properly...), it's up to the application to feed it proper data.

@Frenzie, I see... What about these two ideas then? * is self explanatory, it would work just like matching domains for option overrides. And @import would allow to include other files, using absolute or relative paths (relative to location of parent file).