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.